@charset "UTF-8";
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=normalize-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(91, 96, 104, 0.2);
    user-select: auto;
    /* 2021-04-09 */
}

*:focus {
    outline: none;
}

body, div, textarea, input, button, select {
    color: #2a3138;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

em {
    font-style: normal;
}

audio,
canvas,
progress,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

progress {
    vertical-align: baseline;
}

template,
[hidden] {
    display: none;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    user-select: auto;
    /* 2021-04-09 */
    color: #2a3138;
}

a:active,
a:hover {
    outline-width: 0;
}

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

b,
strong {
    font-weight: inherit;
}

b,
strong {
    /* font-weight: bold; */
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background-color: transparent;
    color: inherit;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

figure {
    margin: 1em 40px;
}

button,
input,
select,
textarea {
    font: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    border: none;
    outline: none;
    border-radius: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
}

optgroup {
    font-weight: bold;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

select::-ms-expand {
    display: none !important;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: none;
    user-select: auto;
    /* 2021-04-09 */
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: none;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

textarea {
    overflow: auto;
    resize: none;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    display: none;
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-input-placeholder {
    opacity: 1;
}

::-webkit-file-upload-button {
    -webkit-appearance: none;
    font: inherit;
}

table tr th {
    font-weight: normal;
}

label {
    user-select: auto;
    /* 2021-04-09 */
}

p {
    margin: 0;
    line-height: 140%;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=layout----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
html {
    width: 100%;
    height: 100%;
    font-family: 'NotoSansKR','Malgun Gothic', sans-serif;
    padding: 0;
    margin: 0;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: auto;
    font-size: 14px;
    font-weight: 400;
    color: #2a3138;
    background: #fff;
    word-break: keep-all;
    position: relative;
    overflow-scrolling: touch;
    padding: 0;
    margin: 0;
}

body.scroll-lock {
    overflow: hidden;
    height: 100vh;
}

.section-sm {
    width: 540px !important;
    margin: 0 auto !important;
}

.container {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.container:after {
    content: '';
    display: table;
    clear: both;
}

.guardrail {
    width: 1170px;
    height: auto;
    position: relative;
    margin: 0 auto;
}

.guardrail:after {
    content: '';
    display: table;
    clear: both;
}

.aside-layout {
    display: flex;
    justify-content: space-between;
    padding: 50px 0 0 0;
}

.aside-layout > .aside-area {
    width: 260px;
    height: auto;
    position: relative;
}

.aside-layout > .aside-area.narrow {
    width: 230px;
}

.aside-layout > .cont-area {
    width: 870px;
    height: auto;
    position: relative;
    overflow: visible;
}

.aside-layout > .cont-area .page_tit h4 {
    display: inline-block;
    width: auto;
    height: 40px;
    color: #2a3138;
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=header----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#header {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 900;
}

#header .rooftop-row {
    width: 100%;
    height: auto;
    position: relative;
    background: #fff;
}

#header .rooftop {
    width: 100%;
    height: 40px;
    position: relative;
    padding: 4px 0;
    line-height: 32px;
    font-size: 0;
}

#header .rooftop .ts-slogan {
    position: relative;
    left: -8px;
}

#header .rooftop .ts-slogan .ts-bulb {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

#header .rooftop .rooftop-menus {
    display: inline-block;
    width: auto;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 0;
}

#header .rooftop .rooftop-menus > li {
    vertical-align: middle;
}

#header .rooftop .rooftop-menus li:not(:last-of-type):after {
    content: '';
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 12px;
    border-left: 1px solid #d9dbdc;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

#header .rooftop .rooftop-menus .btn-item .label-txt {
    color: #5b6068;
}

#header .rooftop .rooftop-menus .btn-item:hover .label-txt {
    color: #2a3138;
}

#header .rooftop .rooftop-menus .btn-item:hover:before {
    background: rgba(0, 0, 0, 0.03);
}

#header .gnb-row {
    width: 100%;
    height: auto;
    position: relative;
    background: #fff;
    border-bottom: 1px solid #d9dbdc;
}

#header .gnb-row .guardrail {
    position: static;
}

#header .gnb {
    width: 100%;
    height: 80px;
    position: static;
    padding: 0;
    line-height: 100%;
    font-size: 0;
}

#header .gnb .gnb-bg {
    width: 100%;
    height: 81px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border-bottom: 1px solid #d9dbdc;
    transition: all 0.2s;
    z-index: -1;
}

#header .gnb .gnb-dim {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

#header .gnb .gnb-dim.on {
    opacity: 1;
    visibility: visible;
}

#header .gnb .btn-bi {
    display: block;
    width: 170px;
    height: 40px;
    line-height: 40px;
    font-size: 0;
    float: left;
    margin-top: 20px;
}

#header .gnb .btn-bi img {
    display: inline-block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

#header .gnb nav {
    width: auto;
    height: auto;
    position: static;
    font-size: 0;
    float: left;
    margin-left: 50px;
}

#header .gnb nav .list-size-free {
    display: inline-block;
    width: auto;
    height: auto;
    vertical-align: middle;
    position: static;
}

#header .gnb nav .list-size-free > li {
    vertical-align: top;
    position: relative;
}

#header .gnb nav .list-size-free > li .main-menu {
    width: 100%;
    height: auto;
    overflow: visible;
    position: relative;
    padding: 0 20px;
}

#header .gnb nav .list-size-free > li .main-menu .btn-item.btn-xl:hover,
#header .gnb nav .list-size-free > li .main-menu.act .btn-item.btn-xl {
    color: #fe6a2b;
}

#header .gnb nav .list-size-free > li .main-menu .btn-item.btn-xl {
    min-width: 90px;
    height: 80px;
    line-height: 80px;
    padding: 0;
    border: none;
    overflow: visible;
}

#header .gnb nav .list-size-free li .main-menu .btn-item.btn-xl:before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #fe6a2b;
    opacity: 1;
    position: absolute;
    top: auto;
    left: 0;
    bottom: -1px;
    transition: all 0.1s;
    transform: translateX(0) translateY(0) scale(0, 1);
    z-index: 1;
}

#header .gnb nav.type-whole .list-size-free li:hover .main-menu .btn-item.btn-xl:before {
    transition: all 0.2s;
    transform: translateX(0) translateY(0) scale(1, 1);
}

#header .gnb nav .list-size-free li .main-menu.act .btn-item.btn-xl:before,
#header .gnb nav .list-size-free li .main-menu.hover .btn-item.btn-xl:before {
    transition: all 0.2s;
    transform: translateX(0) translateY(0) scale(1, 1);
}

#header .gnb nav .list-size-free > li .main-menu .btn-item.btn-xl .beta-badge {
    position: absolute;
    top: -18px;
    font-size: 12px;
    font-weight: 500;
    color: #5eb0b5;
}

#header .gnb nav .list-size-free > li .main-menu .btn-item.btn-xl .label-txt {
    position: relative;
    line-height: 20px;
}

/* 20220707 // */
#header .gnb nav .list-size-free > li .main-menu.new .btn-item.btn-xl .label-txt:after {
    content: 'N';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: #fe6a2b;
    position: relative;
    top: -1px;
    font-size: 10px;
    font-weight: 400;
    vertical-align: middle;
}

/* // 20220707 */
#header .gnb nav .list-size-free > li .sub-menus {
    width: 100%;
    height: 0;
    overflow: hidden;
    position: absolute;
    transition: all 0.2s;
    padding: 0 20px;
    opacity: 0;
}

#header .gnb nav .list-size-free > li:nth-of-type(1) .sub-menus:nth-of-type(2) {
    width: 75%;
    transform: translateX(-100%);
}

#header .gnb nav .list-size-free li:not(:last-of-type) .sub-menus:after {
    content: '';
    display: block;
    width: 0;
    height: calc(100% - 50px);
    border-right: 1px solid #d9dbdc;
    position: absolute;
    top: 20px;
    right: 0;
}

#header .gnb nav .list-size-free > li:nth-of-type(1) .sub-menus:nth-of-type(2):after {
    border-right: none;
}

#header .gnb nav.on .list-size-free > li .sub-menus,
#header .gnb nav:hover .list-size-free > li .sub-menus {
    height: 450px;
    padding: 20px 20px 30px;
    opacity: 1;
    transition: all 0.3s;
}

#header .gnb nav.type-whole.on ~ .gnb-dim,
#header .gnb nav.type-whole:hover ~ .gnb-dim {
    opacity: 1;
    visibility: visible;
}

#header .gnb nav.type-whole.on ~ .gnb-bg,
#header .gnb nav.type-whole:hover ~ .gnb-bg {
    height: 530px;
    transition: all 0.3s;
}

#header .gnb nav .list-size-free > li .sub-menus h4 {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: #a0a6af;
    line-height: 20px;
}

#header .gnb nav .list-size-free > li .sub-menus h4:not(:first-of-type) {
    margin-top: 16px;
}

#header .gnb nav .list-size-free > li .sub-menus a {
    display: block;
    width: auto;
    padding: 0;
    line-height: 28px;
    text-align: left;
    color: #2a3138;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    pointer-events: inherit;
    position: relative;
}

#header .gnb nav .list-size-free > li .sub-menus a.new:after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(4px) translateY(-50%);
    background: #fe6a2b;
}

#header .gnb nav .list-size-free > li .sub-menus a:hover {
    color: #fe6a2b;
}

#header .gnb nav .sub-menu-wrap {
    width: 100%;
    position: absolute;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #d9dbdc;
}

#header .gnb nav .sub-menu-wrap .guardrail {
    padding-left: 220px;
    font-size: 0;
    line-height: 0;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu {
    display: none;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu > li:first-of-type:after {
    content: '';
    display: block;
    width: 0;
    height: calc(100% - 40px);
    border-left: 1px solid #d9dbdc;
    position: absolute;
    top: 20px;
    lefT: 0;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu > li {
    padding: 20px;
}

/* 20230912 start */
#header .gnb nav .sub-menu-wrap .guardrail .sub-menu > li .multi-brand-menu {
    --col-number: 2;
    --col-gutter: 20px;
    --col-width: 80px;
    width: calc( (var(--col-width) * var(--col-number)) + (var(--col-gutter) * (var(--col-number) - 1)) );
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 var(--col-gutter);
    position: relative;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu > li .multi-brand-menu a {
    --col-number: inherit;
    --col-gutter: inherit;
    flex: 1 1 calc((100% - (var(--col-gutter) * (var(--col-gutter) - 1))) / 2);
    min-width: 80px;
    display: inline-block;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu > li .multi-brand-menu a.icon-bullet:after {
    right: auto;
    transform: translateX(4px)
}

/* 20230912 end */

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu[data-parent-nth="2"] > li {
    width: 170px;
    left: 140px;
}

/* 20220812 // */
#header .gnb nav .sub-menu-wrap .guardrail .sub-menu[data-parent-nth="4"] > li {
    width: 220px;
    left: 400px;
}

/* // 20220812 */
#header .gnb nav .sub-menu-wrap .guardrail .sub-menu[data-parent-nth="5"] > li {
    width: 170px;
    left: 560px;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu > li + li {
    margin-left: 20px;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu h4 {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: #a0a6af;
    line-height: 20px;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu a {
    display: block;
    width: auto;
    padding: 0;
    line-height: 28px;
    text-align: left;
    color: #2a3138;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    pointer-events: inherit;
    position: relative;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu a:hover {
    color: #fe6a2b;
}

#header .gnb .util-menus {
    width: auto;
    height: auto;
    overflow: visible;
    position: relative;
    float: right;
}

#header .gnb .util-menus > li {
    width: 56px;
}

#header .gnb .util-menus .btn-item {
    display: block;
    height: 80px;
    line-height: 80px;
    border: none;
    padding: 0;
}

#header .gnb .util-menus .btn-item:hover:before {
    display: none;
}

#header .gnb .util-menus .btn-item .line-icons {
    transition: all 0.2s;
}

#header .gnb .util-menus .btn-item:hover .line-icons {
    transform: translateX(0) translateY(-8px) translateZ(0);
}

#header .gnb .util-menus .btn-item > .badge {
    text-align: center;
    min-width: 18px;
    line-height: 16px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: inherit;
    border-radius: 9px;
    margin-left: 0;
    position: absolute;
    top: 20px;
    right: 8px;
    transition: all 0.2s;
}

#header .gnb .util-menus .btn-item > .badge:empty {
    display: none;
}

#header .gnb .util-menus .btn-item:hover > .badge {
    transform: translateX(0) translateY(-8px) translateZ(0);
}

#header .gnb .util-menus .btn-item .label-txt {
    display: block;
    line-height: 20px;
    padding: 0 8px;
    margin: 0;
    border-radius: 10px;
    background: #2a3138;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 56px;
    transition: all 0.2s;
    transform: translateX(-50%) translateY(12px) translateZ(0);
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    visibility: hidden;
    font-weight: 300;
}

#header .gnb .util-menus .btn-item:hover .label-txt {
    transform: translateX(-50%) translateY(0) translateZ(0);
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

#header .gnb .util-menus .btn-item .label-txt:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom: 5px solid #2a3138;
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
}

#header .gnb .util-menus .btn-item .mypage-sub-menus {
    display: inline-block;
    width: 140px;
    line-height: 100%;
    font-size: 0;
    padding: 12px 0;
    margin: 0;
    pointer-events: none;
    visibility: hidden;
    border-radius: 4px;
}

#header .gnb .util-menus .btn-item:hover .mypage-sub-menus {
    pointer-events: all;
    visibility: visible;
}

#header .gnb .util-menus .btn-item .mypage-sub-menus a {
    position: relative;
    display: block;
    width: auto;
    padding: 0 16px;
    line-height: 28px;
    text-align: left;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    pointer-events: inherit;
}

#header .gnb .util-menus .btn-item .mypage-sub-menus a:hover {
    color: #fe6a2b;
}

#header .gnb .util-menus .btn-item .mypage-sub-menus a.new:after {
    content: 'N';
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: #fe6a2b;
    position: absolute;
    top: 50%;
    transform: translateX(4px) translateY(-50%);
    font-size: 10px;
    font-weight: 400;
}

#header .gnb .util-menus .more-link {
    display: inline-block;
    pointer-events: auto;
}


/* [task]UX개선 start */
#header.dark-header {
    background: #2A3138;
}

#header.dark-header .rooftop-row {
    background: #2A3138;
}

#header.dark-header .gnb-row {
    background: #2A3138;
    border-bottom: none;
}

#header.dark-header .rooftop .ts-slogan {
    color: #fff;
    left: 0;
}

/* 20251013 start */
#header.dark-header .rooftop .ts-slogan .slogan-anim {
    display: inline-flex;
    width: 224px;
    line-height: 32px;
    position: relative;
    color: #fff;
    user-select: none;
}

#header.dark-header .rooftop .ts-slogan .slogan-anim * { user-select: none; }

#header.dark-header .rooftop .ts-slogan .slogan-anim .effect {
    width: 100%;
    height: 32px;
    background: linear-gradient(90deg, rgba(42,49,56,0) 0, rgba(42,49,56,1) 16px);
    perspective: 180px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    --anim-duration: 9s;
    animation: slogan-masking-anim var(--anim-duration) cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite;
}

#header.dark-header .rooftop .ts-slogan .slogan-anim .effect .graphics {
    width: 42px;
    height: 26px;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%) translateZ(0) rotateY(0deg);
    transform-style: preserve-3d;
    animation: slogan-flip-anim var(--anim-duration) cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite;
}



#header.dark-header .rooftop .ts-slogan .slogan-anim .effect .graphics:before,
#header.dark-header .rooftop .ts-slogan .slogan-anim .effect .graphics:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}

#header.dark-header .rooftop .ts-slogan .slogan-anim .effect .graphics:before {
    background-image: url('../images/common/slogan_anim_graphic1.png');
    transform: rotateY(0deg) rotateZ(0);
    animation: slogan-spin-anim var(--anim-duration) cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite;
}

@keyframes slogan-masking-anim {
    0% { transform: translateX(-16px) translateZ(0);}
    5% { transform: translateX(-16px) translateZ(0);}
    10% { transform: translateX(calc(100% - 20px)) translateZ(0);}

    75% { transform: translateX(calc(100% - 20px)) translateZ(0);}
    80% { transform: translateX(-16px) translateZ(0);}
    100% { transform: translateX(-16px) translateZ(0);}
}

@keyframes slogan-flip-anim {
    0% { transform: translateY(-50%) translateZ(0) rotateY(0deg) scale(0); }
    2% { transform: translateY(-50%) translateZ(0) rotateY(0deg) scale(1.2); }
    5% { transform: translateY(-50%) translateZ(0) rotateY(0deg) scale(1); }
    10% { transform: translateY(-50%) translateZ(0) rotateY(0deg); }
    15% { transform: translateY(-50%) translateZ(0) rotateY(180deg); }

    80% { transform: translateY(-50%) translateZ(0) rotateY(180deg); }
    82% { transform: translateY(-50%) translateZ(0) rotateY(180deg) scale(1.2); }
    85% { transform: translateY(-50%) translateZ(0) rotateY(180deg) scale(0); }
    100% { transform: translateY(-50%) translateZ(0) rotateY(180deg) scale(0); }
}

@keyframes slogan-spin-anim {
    0% { transform: rotateY(0deg) rotateZ(0); }
    5% { transform: rotateY(0deg) rotateZ(0); }
    10% { transform: rotateY(0deg) rotateZ(720deg); }
    100% { transform: rotateY(0deg) rotateZ(720deg); }
}

#header.dark-header .rooftop .ts-slogan .slogan-anim .effect .graphics:after {
    background-image: url('../images/common/slogan_anim_graphic2.png');
    transform: rotateY(180deg) scale(0.8);
}
/* 20251013 end */

#header.dark-header .rooftop .rooftop-menus a,
#header.dark-header .rooftop .rooftop-menus .btn-item .label-txt { color: #fff; }
#header.dark-header .rooftop .rooftop-menus .btn-item:hover .label-txt { color: #fe6a2b; }

#header.dark-header .gnb nav { margin-left: 44px;}
#header.dark-header .gnb nav .list-size-free { position: relative; }
#header.dark-header .gnb nav .list-size-free > li { position: relative; }
#header.dark-header .gnb nav .list-size-free > li .main-menu .btn-item.btn-xl { display: block; color: #fff; padding: 0 20px; min-width: 0; }
#header.dark-header .gnb nav .list-size-free > li .main-menu:hover .btn-item.btn-xl,
#header.dark-header .gnb nav .list-size-free > li .main-menu.act .btn-item.btn-xl { color: #fe6a2b; }
#header.dark-header .gnb nav .list-size-free > li .main-menu.new .btn-item.btn-xl .label-txt:after { top: -8px; }
#header.dark-header .gnb nav .list-size-free li .main-menu .btn-item.btn-xl:before { bottom: 0;}

/* 20240423 start */
#header.dark-header .gnb nav .sub-menu-wrap { border-top: none; background: rgba(42,49,56,0.9); backdrop-filter: blur(2px); }
#header.dark-header .gnb nav .sub-menu-wrap .guardrail { padding-left: 214px; position: relative; }
#header.dark-header .gnb nav .sub-menu-wrap .guardrail .sub-menu a { color: #fff;}
#header.dark-header .gnb nav .sub-menu-wrap .guardrail .sub-menu a:hover { color: #fe6a2b;}
#header.dark-header .gnb nav .sub-menu-wrap .guardrail .sub-menu > li:first-of-type:after { border-left: 1px solid #5b6068;}
#header.dark-header .gnb .gnb-dim { background: rgba(0, 0, 0, 0.4); }
/* 20240423 end */


#header.dark-header .gnb .util-menus .btn-item { color: #fff; }

#header.dark-header .gnb .util-menus .btn-item .label-txt {
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.8);
    color: #2a3138;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#header.dark-header .gnb .util-menus .btn-item .label-txt:after {
    border-bottom: 5px solid rgba(255,255,255,0.8);
    top: 0;
}

#header.dark-header .gnb .util-menus .more-link { color: #fff; }
#header.dark-header .gnb .util-menus .btn-item .mypage-sub-menus a { color: #2a3138; }
#header.dark-header .gnb .util-menus .btn-item .mypage-sub-menus a:hover { color: #fe6a2b; }
/* [task]UX개선 end */




/* 20250107 start */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=footer----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#footer {
    height: auto;
    position: relative;
    background: #2a3138;
}

#footer * { user-select: none; }

#footer .footer-header {
    width: 100%;
    height: 50px;
    position: relative;
    border-bottom: 1px solid #5B6068;
    z-index: 1;
}

#footer .footer-header .guardrail {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer .footer-header .guardrail:after { display: none; }

#footer .footer-header .bi-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

#footer .footer-header .bi-area .bi {
    width: auto;
    height: 20px;
}

#footer .footer-header .bi-area .copyright {
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    color: #fff;
}

#footer .footer-header .external-link {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


#footer .footer-header .external-link .social-area {
    display: inline-flex;
    float: right;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-right: 20px;
}


#footer .footer-header .external-link .social-area ul li a {
    display: inline-block;
    font-size: 0;
}

#footer .footer-header .external-link .social-area ul li a img {
    width: 24px;
    height: 24px;
}

#footer .footer-header .family-site {
    flex: none;
    width: 188px;
    height: 100%;
    position: relative;
}

#footer .footer-header .family-site .trigger {
    width: 100%;
    height: 100%;
    border-left: 1px solid #5B6068;
    border-right: 1px solid #5B6068;
    padding: 0 8px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    cursor: pointer;
}

#footer .footer-header .family-site .trigger .label-txt {
    font-size: 14px;
    font-weight: 500;
}

#footer .footer-header .family-site .trigger .line-icons {
    transition: all 0.2s;
}

#footer .footer-header .family-site:hover .trigger .line-icons {
    transform: rotate(-180deg);
}

#footer .footer-header .family-site .menu-wrap {
    --child-count: 0;
    width: 100%;
    height: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(160,166,175,0.2);
    overflow: hidden;
    transition: all 0.2s;
}

#footer .footer-header .family-site .menu-wrap a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    word-break: break-all;
}

#footer .footer-header .family-site:hover .menu-wrap {
    height: calc(50px * var(--child-count));
}

#footer .footer-header .family-site .menu-wrap:has(a:first-child:nth-last-child(1)) { --child-count: 1; }
#footer .footer-header .family-site .menu-wrap:has(a:first-child:nth-last-child(2)) { --child-count: 2; }
#footer .footer-header .family-site .menu-wrap:has(a:first-child:nth-last-child(3)) { --child-count: 3; }
#footer .footer-header .family-site .menu-wrap:has(a:first-child:nth-last-child(4)) { --child-count: 4; }
#footer .footer-header .family-site .menu-wrap:has(a:first-child:nth-last-child(5)) { --child-count: 5; }

#footer .footer-header .family-site .menu-wrap a + a {
    border-top: 1px solid #5B6068;
}

#footer .footer-header .family-site .menu-wrap a:hover { background: rgba(160,166,175,0.1); }



#footer .footer-body .terms-area {
    display: block;
    width: 100%;
    padding: 16px 0;
}

#footer .footer-body .terms-area ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .footer-body .terms-area ul li {
    flex: none;
    min-width: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 24px;
    width: auto;
}

#footer .footer-body .terms-area ul li:not(:last-child):after {
    content: '';
    display: block;
    width: 0;
    height: 12px;
    border-left: 1px solid #5b6068;
}


#footer .footer-body .terms-area ul li a {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    line-height: 20px;
}


#footer .footer-body .award-area {
    display: block;
    padding: 16px 0;
}

#footer .footer-body .award-area img {
    display: block;
    width: auto;
    height: 36px;
}

#footer .footer-footer {
    padding-bottom: 32px;
}

#footer .footer-footer .company-info {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px 8px;
    padding: 16px 0;
}

#footer .footer-footer .company-info span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #a0a6af;
    gap: 8px;
}

#footer .footer-footer .company-info .break {
    flex-basis: 100%;
    height: 0;
}

#footer .footer-footer .company-info span:not(:is(:last-child, .break)):after {
    content: '';
    display: block;
    width: 0;
    height: 12px;
    border-left: 1px solid #A0A6AF;
}

#footer .footer-footer .company-info span:has(+ .break):after { display: none; }

#footer .footer-footer .company-info span a {
    color: inherit;
}

/* 20250107 end */


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=#loading indicator----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#loading-indicator {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    pointer-event: none;
}

#loading-indicator .dim {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 19, 20, 0.8);
    opacity: 0;
    transition: opacity .3s;
}

#loading-indicator .loader {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    text-align: center;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, 0%);
    transition: all .3s;
}

#loading-indicator .loader .loader-image {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url("../images/common/loading-indicator.gif");
    background-size: contain;
}

#loading-indicator .loader .loader-description {
    font-size: 18px;
    color: #ffffff;
    margin-top: 10px;
}

#loading-indicator.on {
    pointer-events: auto;
}

#loading-indicator.on .dim {
    opacity: 1;
}

#loading-indicator.on .loader {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=empty-box-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.empty-box {
    display: table;
    width: 100%;
    min-height: 100px;
    height: auto;
    text-align: center;
}

.empty-box.size-l {
    min-height: 500px;
}

.empty-box .middler {
    display: table-cell;
    vertical-align: middle;
}

.empty-box .middler > .line-icons {
    color: #d9dbdc;
}

.empty-box .middler > .empty-msg {
    font-size: 14px;
    font-weight: 300;
    color: #a0a6af;
    margin-top: 8px;
}

.empty-box.size-l .middler > .empty-msg {
    font-size: 16px;
    margin-top: 12px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=modal-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.modal-item {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    /* 0722 */
    pointer-events: none;
    opacity: 1;
    visibility: hidden;
}

.modal-item.on {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
}

.modal-item .dim {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s;
    opacity: 0;
}

.modal-item .dim.disabled { pointer-events: none !important;}

.modal-item.on .dim {
    opacity: 1;
}

.modal-item .dim.white {
    background: rgba(255, 255, 255, 0.9);
}

.modal-item .middler {
    display: table-cell;
    width: 100%;
    height: 100%;
    position: relative;
    vertical-align: middle;
    pointer-events: none;
}

.modal-item .modal-pannel {
    width: 520px;
    height: auto;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    background: #fff;
    margin: 0 auto;
    position: relative;
    border-radius: 4px;
    pointer-events: none;
    transition: all 0.2s;
    transform: translateY(80px) translateZ(0);
    opacity: 0;
    border: 1px solid #d9dbdc;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.modal-item .modal-pannel.size-s {
    width: 420px;
}

.modal-item .modal-pannel.size-m {
    width: 520px;
}

.modal-item .modal-pannel.size-l {
    width: 840px;
}

.modal-item .h-size-m.container {
    min-height: 480px;
}

.modal-item.on .modal-pannel {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) translateZ(0);
}

.modal-item .modal-pannel .modal-header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f9f9fa;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 0 1px #d9dbdc;
    z-index: 1;
    padding-right: 60px;
    font-size: 0;
}

.modal-item .modal-pannel .modal-header .tools {
    position: absolute;
    display: inline-block;
    top: 14px;
    right: 68px;
}

.modal-item .modal-pannel .modal-header .tools .tools-item {
    display: inline-block;
    padding: 0 12px;
    line-height: 30px;
    border-radius: 16px;
    color: #5b6068;
    background-color: #ffffff;
    border: 1px solid #5b6068;
    font-size: 0;
}

.modal-item .modal-pannel .modal-header .tools .tools-item:hover {
    background-color: #2A3138;
    border-color: #2A3138;
    color: #ffffff;
}

.modal-item .modal-pannel .modal-header .tools .tools-item + .tools-item {
    margin-left: 6px;
}

.modal-item .modal-pannel .modal-header .tools .tools-item > * {
    display: inline-block;
    vertical-align: middle;
}

.modal-item .modal-pannel .modal-header .tools .tools-item .icon + .label {
    margin-left: 4px;
}

.modal-item .modal-pannel .modal-header .tools .tools-item .label {
    font-size: 14px;
}

.modal-item .modal-pannel .modal-header h3 {
    display: inline-block;
    font-size: 20px;
    line-height: 110%;
    vertical-align: middle;
    padding-left: 20px;
}

.modal-item .modal-pannel .modal-header .btn-popup-close {
    background: transparent;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.modal-item .modal-pannel .modal-action {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: #fff;
}

.modal-item .modal-pannel .modal-action.no-boundary {
    background: #fff;
    box-shadow: none;
}

.modal-item .modal-pannel .modal-action ul {
    padding: 0 16px;
}

.modal-item .modal-pannel .modal-action ul li {
    padding: 10px 8px 0;
    text-align: center;
}

.modal-item .modal-pannel.size-l .modal-action ul li .btn-item.full-w {
    width: auto;
    min-width: 50%;
}

.modal-item .modal-pannel.size-l .modal-action ul li:only-child .btn-item.full-w {
    width: auto;
    min-width: 50%;
}

.modal-item .modal-pannel.size-l .modal-action ul li:not(:only-child):first-of-type {
    text-align: right;
}

.modal-item .modal-pannel.size-l .modal-action ul li:not(:only-child):last-of-type {
    text-align: left;
}

.modal-item .modal-pannel .modal-action .btn-item { padding-left: 0; padding-right: 0;}

.modal-item .modal-pannel .modal-body {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    max-height: calc(100vh - 40px);
}

.modal-item .modal-pannel .modal-body .modal-scroller {
    width: 100%;
    height: auto;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    max-height: calc(100vh - 40px);
}

.modal-item .modal-pannel .modal-header + .modal-body {
    padding-top: 60px;
}

.modal-item .modal-pannel .modal-action + .modal-body {
    padding-bottom: 60px;
}

.modal-item .modal-pannel .modal-header + .modal-action + .modal-body {
    padding-top: 60px;
    padding-bottom: 60px;
}

.modal-item .modal-pannel .modal-header + .modal-body .modal-scroller {
    max-height: calc(100vh - 40px - 60px);
}

.modal-item .modal-pannel .modal-action + .modal-body .modal-scroller {
    max-height: calc(100vh - 40px - 60px);
}

.modal-item .modal-pannel .modal-header + .modal-action + .modal-body .modal-scroller {
    max-height: calc(100vh - 40px - 120px);
}




/* 20230331 start */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=popup-banner/toast-banner---------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

.popup-banner {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

.popup-banner.on {
    display: table;
}

.popup-banner .middler {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: 12px;
    text-align: center;
}

.popup-banner .middler .popup-pannel {
    display: inline-block;
    width: 100%;
    max-width: 640px;
    background: #fff;
    padding: 0;
    padding-bottom: 40px;
    position: relative;
}

.popup-banner .middler .popup-pannel img {
    width: 100%;
}

.popup-banner .middler .popup-pannel .popup-console {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;

}

.popup-banner .middler .popup-pannel .popup-console button {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #2a3138;
    appearance: none;
    padding: 0 8px;
    padding-left: 32px;
    background: #fff;
    border: none;
    outline: none;
    position: absolute;
    top: 0;
    right: 8px;
    border-radius: 4px;
}

.popup-banner .middler .popup-pannel .popup-console button:active {
    background: rgba(0, 0, 0, 0.05);
}

.popup-banner .middler .popup-pannel .popup-console button .x-ico {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}

.popup-banner .middler .popup-pannel .popup-console button .x-ico:before,
.popup-banner .middler .popup-pannel .popup-console button .x-ico:after {
    content: '';
    display: block;
    width: 16px;
    height: 0;
    border-top: 1px solid #2a3138;
    position: absolute;
    top: 50%;
    left: 50%;

}

.popup-banner .middler .popup-pannel .popup-console button .x-ico:before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.popup-banner .middler .popup-pannel .popup-console button .x-ico:after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.popup-banner .middler .popup-pannel .popup-console .today-chk {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    padding: 0;
    font-size: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 8px;
    border-radius: 4px;
}

.popup-banner .middler .popup-pannel .popup-console .today-chk:active {
    background: rgba(0, 0, 0, 0.05);
}

.popup-banner .middler .popup-pannel .popup-console .today-chk input {
    width: 0;
    height: 0;
    position: absolute;
    top: -100px;
}

.popup-banner .middler .popup-pannel .popup-console .today-chk .label-txt {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    padding-left: 36px;
    font-size: 12px;
    vertical-align: middle;
    color: #5b6068;
    user-select: none;
}

.popup-banner .middler .popup-pannel .popup-console .today-chk .label-txt:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #d9dbdc;
    background: #fff;
    box-sizing: border-box;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.popup-banner .middler .popup-pannel .popup-console .today-chk .label-txt:after {
    content: '';
    display: block;
    width: 7px;
    height: 14px;
    border-right: 1px solid #fe6a2b;
    border-bottom: 1px solid #fe6a2b;
    position: absolute;
    left: 14px;
    top: 10px;
    transform: translateZ(0) rotate(45deg) scale(0, 0);
    transition: all 0.2s;
}

.popup-banner .middler .popup-pannel .popup-console .today-chk input:checked~.label-txt:after {
    transform: translateZ(0) rotate(45deg) scale(1, 1);
}
/* 20230331 end */




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=comp------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    display: block;
    margin: 0;
    padding: 0;
    font-weight: 400;
    line-height: 125%;
    cursor: default;
    position: relative;
    user-select: auto;
    /* 2021-04-09 */
}

a h1, a h2, a h3, a h4, a h5, a h6 {
    cursor: inherit;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=display---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.dp-inblock {
    display: inline-block;
}

.dp-block {
    display: block;
}

.dp-inline {
    display: inline;
}

/* 20230313 start */ /* 20230412 start */
.dp-flex {
    display: flex;
}
.dp-inflex {
    display: inline-flex;
}
.dp-flex.wrap,
.dp-inflex.wrap { flex-wrap: wrap; }
.dp-flex.nowrap,
.dp-inflex.nowrap { flex-wrap: nowrap; }

.dp-flex.row,
.dp-inflex.row { flex-direction: row; }
.dp-flex.column,
.dp-inflex.column { flex-direction: column; }

.dp-flex.justify-start,
.dp-inflex.justify-start { justify-content: flex-start; }
.dp-flex.justify-center,
.dp-inflex.justify-center { justify-content: center; }
.dp-flex.justify-end,
.dp-inflex.justify-end { justify-content: flex-end; }
.dp-flex.justify-between,
.dp-inflex.justify-between { justify-content: space-between; }

.dp-flex.align-start,
.dp-inflex.align-start { align-items: flex-start; }
.dp-flex.align-center,
.dp-inflex.align-center { align-items: center; }
.dp-flex.align-end,
.dp-inflex.align-end { align-items: flex-end; }

.flex-1-1 { flex: 1 1 auto; }
.flex-0-1 { flex: 0 1 auto; }
.flex-1-0 { flex: 1 0 auto; }
.flex-0-0 { flex: 0 0 auto; }
.basis-auto { flex-basis: auto; }
.basis-0 { flex-basis: 0; }

.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

/* 20230313 end */ /* 20230412 end */

.full-w {
    width: 100%;
}

.full-h {
    height: 100%;
}

.half-w {
    width: 50%;
}

.auto-w {
    width: auto;
}

.over-hidden {
    overflow: hidden !important;
}

.over-visible {
    overflow: visible !important;
}

.float-l {
    float: left;
}

.float-r {
    float: right;
}

.float-none {
    float: none !important;
}

.clear {
    clear: both;
}

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}

.pos-stk {
    position: -webkit-sticky;
    position: sticky;
}

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =bg & border--------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.bg-fff {
    background-color: #fff;
}

.bg-light1 {
    background-color: #f9f9fa;
}

.bg-light2 {
    background-color: #f2f2f7;
}

.bg-primary {
    background-color: #fe6a2b;
}

.bg-neutral {
    background-color: #2a3138;
}

.bg-kakao {
    background-color: #ffdf00;
}

.bg-naver {
    background-color: #01c73c;
}

.bg-facebook {
    background-color: #3f67af;
}

.bg-filet-4 {
    border-radius: 4px;
}

.bg-filet-8 {
    border-radius: 8px;
}

.bg-filet-16 {
    border-radius: 16px;
}

.bg-shadow-2 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.bg-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-shadow-8 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bg-shadow-16 {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-contain {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.border-all {
    border-width: 1px;
    border-style: solid;
    border-color: #d9dbdc;
}

.border-t {
    border-top-width: 1px;
    border-top-style: solid;
    border-color: #d9dbdc;
}

.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: #d9dbdc;
}

.border-l {
    border-left-width: 1px;
    border-left-style: solid;
    border-color: #d9dbdc;
}

.border-r {
    border-right-width: 1px;
    border-right-style: solid;
    border-color: #d9dbdc;
}

.border-light {
    border-color: #f2f2f7 !important;
}

.border-primary {
    border-color: #fe6a2b !important;
}

.border-none {
    border: none !important;
}

.section-divider {
    border-top: 10px solid #eceeef;
}

.bg-dotted-bottom {
    background: url("../images/common/bg_border_dotteds.png") repeat-x left bottom;
    background-size: 4px 1px;
}

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =hr------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
hr.full-w {
    width: 100%;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    border-top: 1px solid #d9dbdc;
    position: relative;
    clear: both;
}

hr.short {
    display: inline-block;
    width: 40px;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    position: relative;
    clear: both;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-color: #fe6a2b;
    text-align: left;
}

hr.w-40 {
    width: 40px;
}

hr.w-50 {
    width: 50px;
}

hr.w-60 {
    width: 60px;
}

hr.short.dp-block {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

hr.short.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

hr.short-1px {
    border-top-width: 1px !important;
}

hr.short-2px {
    border-top-width: 2px !important;
}

hr.short-3px {
    border-top-width: 3px !important;
}

hr.short-4px {
    border-top-width: 4px !important;
}

hr.short.tiny {
    width: 30px;
}

hr.primary {
    border-color: #fe6a2b;
}

hr.neutral1 {
    border-color: #2a3138;
}

hr.neutral2 {
    border-color: #5b6068;
}

hr.neutral3 {
    border-color: #a0a6af;
}

hr.light1 {
    border-color: #d9dbdc;
}

hr.light2 {
    border-color: #f2f2f7;
}

hr.white {
    border-color: #fff;
}

hr.vertical {
    width: 0;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    border-left: 1px solid #ddd;
    position: relative;
}

.width-120 {
    width: 120px;
    padding: 0 !important;
}

.width-130 {
    width: 130px;
    padding: 0 !important;
}

.width-140 {
    width: 140px;
    padding: 0 !important;
}

.width-150 {
    width: 150px;
    padding: 0 !important;
}

.width-180 {
    width: 180px;
    padding: 0 !important;
}

.width-200 {
    width: 200px;
    padding: 0 !important;
}

.width-240 {
    width: 240px;
    padding: 0 !important;
}

.width-320 {
    width: 320px;
    padding: 0 !important;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=txt-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.txt-black {
    color: #000;
}

.txt-white {
    color: #fff;
}

.txt-primary {
    color: #fe6a2b;
}

.txt-neutral1 {
    color: #2a3138;
}

.txt-neutral2 {
    color: #5b6068;
}

.txt-neutral3 {
    color: #a0a6af;
}

.txt-neutral4 {
    color: #c0c6ce;
}

.txt-yellow {
    color: #ffa200;
}

.txt-mint {
    color: #58c1c7;
}

.txt-kakao {
    color: #ffdf00;
}

.txt-naver {
    color: #01c73c;
}

.txt-facebook {
    color: #3f67af;
}

/* 20230313 start */
.txt-slateblue {
    color: #6D80F5;
}

.txt-ion {
    color: #00B3C5;
}
/* 20230313 end */

.txt-w100 {
    font-weight: 100;
}

.txt-w200 {
    font-weight: 200;
}

.txt-w300 {
    font-weight: 300;
}

.txt-w400 {
    font-weight: 400;
}

.txt-w500 {
    font-weight: 500;
}

.txt-w700 {
    font-weight: 700;
}

.txt-w900 {
    font-weight: 900;
}

.txt-0 {
    font-size: 0;
}

.txt-10 {
    font-size: 10px;
}

.txt-11 {
    font-size: 11px;
}

.txt-12 {
    font-size: 12px;
}

.txt-13 {
    font-size: 13px;
}

.txt-14 {
    font-size: 14px;
}

.txt-15 {
    font-size: 15px;
}

.txt-16 {
    font-size: 16px;
}

.txt-17 {
    font-size: 17px;
}

.txt-18 {
    font-size: 18px;
}

.txt-19 {
    font-size: 19px;
}

.txt-20 {
    font-size: 20px;
}

.txt-21 {
    font-size: 21px;
}

.txt-24 {
    font-size: 24px;
}

.txt-28 {
    font-size: 28px;
}

.txt-30 {
    font-size: 30px;
}

.txt-36 {
    font-size: 36px;
}

.txt-48 {
    font-size: 48px;
}

.txt-60 {
    font-size: 60px;
}

.line-16 {
    line-height: 16px;
}

.line-20 {
    line-height: 20px;
}

.line-24 {
    line-height: 24px;
}

.line-30 {
    line-height: 30px;
}

.line-32 {
    line-height: 32px;
}

.line-36 {
    line-height: 36px;
}

.line-40 {
    line-height: 40px;
}

.line-50 {
    line-height: 50px;
}

.line-60 {
    line-height: 60px;
}

.line-100per {
    line-height: 100%;
}

.line-110per {
    line-height: 110%;
}

.line-120per {
    line-height: 120%;
}

.line-130per {
    line-height: 130%;
}

.line-140per {
    line-height: 140%;
}

.line-150per {
    line-height: 150%;
}

.line-initial {
    line-height: initial;
}

.line-inherit {
    line-height: inherit;
}

.txt-center {
    text-align: center;
}

.txt-left {
    text-align: left;
}

.txt-right {
    text-align: right;
}

.v-middle {
    vertical-align: middle;
}

.v-top {
    vertical-align: top;
}

.v-base {
    vertical-align: baseline;
}

.txt-italic {
    font-style: italic;
}

.txt-no-deco {
    text-decoration: none !important;
}

.txt-underline {
    text-decoration: underline !important;
    text-underline-position: under;
}

.txt-overline {
    text-decoration: overline;
}

.txt-throughline {
    text-decoration: line-through;
}

.txt-narrow {
    letter-spacing: -0.5px;
}

.txt-narrower {
    letter-spacing: -1px;
}

.word-keep {
    word-break: keep-all;
}

.word-break {
    word-break: break-all;
}

.txt-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.blind {
    position: absolute !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=interaction-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.hover-underline:hover {
    text-decoration: underline;
}

.hover-primary:hover {
    color: #fe6a2b;
}

.hover-neutral:hover {
    color: #2a3138;
}

.hover-shadow {
    transition: all 0.2s;
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=btn-item--------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.btn-item {
    display: inline-block;
    overflow: visible;
    width: auto;
    height: 40px;
    line-height: 38px;
    margin: 0;
    padding: 0 20px;
    position: relative;
    font-size: 0;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: none;
    outline: none;
    color: #2a3138;
    font-weight: 400;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background-color: #fff;
    cursor: pointer;
}

.btn-item * {
    pointer-events: none;
    user-select: auto;
    /* 2021-04-09 */
}

.btn-item:disabled,
.btn-item.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.btn-item > * + * {
    margin-left: 4px;
}

.btn-item.btn-free > * + * {
    margin-left: unset;
}

.btn-item > .label-txt {
    display: inline-block;
    vertical-align: middle;
    line-height: 110%;
    position: relative;
    font-size: 14px;
    font-weight: inherit;
    pointer-events: none;
}

.btn-item > .label-txt.txt-11 {
    font-size: 11px !important;
}

.btn-item > .label-txt.txt-12 {
    font-size: 12px !important;
}

.btn-item > .label-txt.txt-13 {
    font-size: 13px !important;
}

.btn-item > .label-txt.txt-14 {
    font-size: 14px !important;
}

.btn-item > .label-txt.txt-16 {
    font-size: 16px !important;
}

.btn-item > .label-txt.txt-18 {
    font-size: 18px !important;
}

.btn-item > .label-txt em {
    font-weight: 500;
}

.btn-item > .label-txt em.txt-w300 {
    font-weight: 300;
}

.btn-item > .badge {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    min-width: 16px;
    line-height: 16px;
    padding: 0 4px;
    text-align: center;
    position: relative;
    font-size: 12px;
    font-weight: inherit;
    pointer-events: none;
    border-radius: 8px;
    color: #fff;
    background: #fe6a2b;
    margin-left: 4px;
}

.btn-item.min-w > .badge {
    position: absolute;
    margin: 0;
}

.btn-item.btn-xs {
    height: 24px;
    line-height: 22px;
    padding: 0 12px;
}

.btn-item.btn-s {
    height: 32px;
    line-height: 30px;
    padding: 0 16px;
}

.btn-item.btn-ms {
    height: 36px;
    line-height: 34px;
    padding: 0 18px;
}

.btn-item.btn-ml {
    height: 44px;
    line-height: 42px;
    padding: 0 22px;
}

.btn-item.btn-l {
    height: 48px;
    line-height: 46px;
    padding: 0 24px;
}

.btn-item.btn-xl {
    height: 56px;
    line-height: 54px;
    padding: 0 28px;
}

.btn-item.btn-xs > .label-txt {
    font-size: 10px;
}

.btn-item.btn-s > .label-txt {
    font-size: 12px;
}

.btn-item.btn-ms > .label-txt {
    font-size: 13px;
}

.btn-item.btn-ml > .label-txt {
    font-size: 15px;
}

.btn-item.btn-l > .label-txt {
    font-size: 16px;
}

.btn-item.btn-xl > .label-txt {
    font-size: 18px;
}

.btn-item.round {
    border-radius: 20px;
}

.btn-item.btn-xs.round {
    border-radius: 12px;
}

.btn-item.btn-s.round {
    border-radius: 16px;
}

.btn-item.btn-ms.round {
    border-radius: 18px;
}

.btn-item.btn-ml.round {
    border-radius: 22px;
}

.btn-item.btn-l.round {
    border-radius: 24px;
}

.btn-item.btn-xl.round {
    border-radius: 28px;
}

.btn-item.filet {
    border-radius: 4px;
}

.btn-item.min-w {
    width: 40px;
    padding: 0 !important;
}

.btn-item.btn-xs.min-w {
    width: 24px;
}

.btn-item.btn-s.min-w {
    width: 32px;
}

.btn-item.btn-ms.min-w {
    width: 36px;
}

.btn-item.btn-ml.min-w {
    width: 44px;
}

.btn-item.btn-l.min-w {
    width: 48px;
}

.btn-item.btn-xl.min-w {
    width: 56px;
}

.btn-item.full-w {
    width: 100%;
}

.btn-item.w-120 {
    width: 120px;
    padding: 0 !important;
}

.btn-item.w-130 {
    width: 130px;
    padding: 0 !important;
}

.btn-item.w-140 {
    width: 140px;
    padding: 0 !important;
}

.btn-item.w-150 {
    width: 150px;
    padding: 0 !important;
}

.btn-item.w-180 {
    width: 180px;
    padding: 0 !important;
}

.btn-item.w-200 {
    width: 200px;
    padding: 0 !important;
}

.btn-item.w-210 {
    width: 210px;
    padding: 0 !important;
}

.btn-item.w-240 {
    width: 240px;
    padding: 0 !important;
}

.btn-item.w-320 {
    width: 320px;
    padding: 0 !important;
}

.btn-item.btn-free {
    height: auto;
    line-height: initial;
    padding: unset;
}

.btn-item.btn-neutral {
    background: #2a3138;
    color: #fff;
}

.btn-item.btn-neutral.btn-inv {
    background: #fff;
    color: #2a3138;
}

.btn-item.btn-neutral.btn-ol {
    background: #fff;
    border-color: #2a3138;
    color: #2a3138;
}

.btn-item.btn-neutral.btn-ol:hover {
    background: #2a3138;
    border-color: #2a3138;
    color: #fff;
}

.btn-item.btn-primary {
    background: #fe6a2b;
    color: #fff;
}

.btn-item.btn-primary.btn-inv {
    background: #fff;
    color: #fe6a2b;
}

.btn-item.btn-primary.btn-ol {
    background: #fff;
    border-color: #fe6a2b;
    color: #fe6a2b;
}

.btn-item.btn-white {
    background: #fff;
    color: #2a3138;
}

.btn-item.btn-white.btn-inv {
    background: transparent;
    color: #fff;
}

.btn-item.btn-white.btn-ol {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.btn-item.btn-gray {
    background: #d9dbdc;
    color: #fff;
}

.btn-item.btn-gray.btn-inv {
    background: #fff;
    color: #2a3138;
}

.btn-item.btn-gray.btn-ol {
    background: #fff;
    border-color: #d9dbdc;
    color: #2a3138;
}

.btn-item.btn-light-gray {
    background: #f2f2f7;
    color: #2a3138;
}

.btn-item.btn-light-gray.btn-inv {
    background: #fff;
    color: #2a3138;
}

.btn-item.btn-light-gray.btn-ol {
    background: #fff;
    border-color: #f2f2f7;
    color: #2a3138;
}

.btn-item.btn-light-gray.btn-neu {
    color: #a0a6af;
}

.btn-item.btn-dark-gray {
    background: #a0a6af;
    color: #fff;
}

.btn-item.btn-dark-gray.btn-inv {
    background: #fff;
    color: #a0a6af;
}

.btn-item.btn-dark-gray.btn-ol {
    background: #fff;
    border-color: #a0a6af;
    color: #a0a6af;
}

.btn-item.bg-transparent {
    background: transparent !important;
}

.btn-item.btn-disabled {
    border-color: #D9DBDC !important;
    background-color: #F9F9FA !important;
    opacity: 1 !important;
}

.btn-item.btn-disabled .label-txt {
    color: #A0A6AF !important;
}

.btn-kakao {
    background-color: #ffdf00;
    color: #3d201c;
    border-color: transparent;
}

.btn-naver {
    background-color: #01c73c;
    color: #ffffff;
    border-color: transparent;
}

.btn-facebook {
    background-color: #3f67af;
    color: #ffffff;
    border-color: transparent;
}

.btn-item:hover:before {
    content: '';
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(0, 0, 0, 0.05);
}

.btn-item.btn-neutral:not(.btn-ol):not(.btn-inv):hover:before {
    background: rgba(255, 255, 255, 0.05);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Table-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
table {
    border-collapse: collapse;
    width: 100%;
}

table.vertical-t th,
table.vertical-t td,
table tr.vertical-t th,
table tr.vertical-t td,
table tr th.vertical-t,
table tr td.vertical-t {
    vertical-align: top;
}

table.vertical-m th,
table.vertical-m td,
table tr.vertical-m th,
table tr.vertical-m td,
table tr th.vertical-m,
table tr td.vertical-m {
    vertical-align: middle;
}

table.vertical-b th,
table.vertical-b td,
table tr.vertical-b th,
table tr.vertical-b td,
table tr th.vertical-b,
table tr td.vertical-b {
    vertical-align: bottom;
}

table.pd-slim th,
table.pd-slim td {
    padding: 4px 0;
}

table.pd-medium th,
table.pd-medium td {
    padding: 8px 0;
}

table.pd-fat th,
table.pd-fat td {
    padding: 12px 0;
}

table.tire-guide-table tr th {
    padding: 12px 12px 12px 0;
    border-right: 1px solid #D9DBDC;
}

table.tire-guide-table tr td {
    padding: 12px 0 12px 12px;
    letter-spacing: -0.8px;
    text-align: justify;
}

table.tire-guide-table tr th,
table.tire-guide-table tr td {
    border-bottom: 1px solid #D9DBDC;
}

table.tire-guide-table tr:last-of-type th,
table.tire-guide-table tr:last-of-type td {
    border-bottom: none;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Column-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.col_full {
    width: 100%;
}

.col_half {
    width: 48%;
}

.col_one_third {
    width: 30.63%;
}

.col_two_third {
    width: 65.33%;
}

.col_one_fourth {
    width: 22%;
}

.col_three_fourth {
    width: 74%;
}

.col_one_fifth {
    width: 16.8%;
}

.col_two_fifth {
    width: 37.6%;
}

.col_three_fifth {
    width: 58.4%;
}

.col_four_fifth {
    width: 79.2%;
}

.col_one_sixth {
    width: 13.33%;
}

.col_five_sixth {
    width: 82.67%;
}

.col_full,
.col_half,
.col_one_third,
.col_two_third,
.col_three_fourth,
.col_one_fourth,
.col_one_fifth,
.col_two_fifth,
.col_three_fifth,
.col_four_fifth,
.col_one_sixth,
.col_five_sixth {
    display: block;
    position: relative;
    margin-right: 4%;
    float: left;
}

.col_full {
    clear: both;
    float: none;
    margin-right: 0;
}

.col_last {
    margin-right: 0 !important;
    clear: right;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=list------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/* 옵션클래스 */
/* .list-size-full / .list-size-free / .list-size-equal / .list-style-disc / .list-style-number */
ul,
ol,
dl {
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: default;
    position: relative;
}

ul:after,
ol:after,
dl:after {
    content: '';
    display: table;
    clear: both;
}

ul.list-size-full,
ol.list-size-full,
dl.list-size-full,
ul.list-size-free,
ol.list-size-free,
dl.list-size-free,
ul.list-size-equal,
ol.list-size-equal,
dl.list-size-equal {
    width: 100%;
}

ul > li,
ol > li {
    height: auto;
    overflow: visible;
    position: relative;
}

.list-size-full > li {
    width: 100%;
}

.list-size-free > li {
    display: inline-block;
    width: auto;
}

.list-size-free > dt,
.list-size-free > dd {
    display: inline-block;
    width: auto;
}

.list-size-equal > li {
    float: left;
}

.list-size-equal > li:first-child:nth-last-child(1) {
    width: 100%;
}

.list-size-equal > li:first-child:nth-last-child(2),
.list-size-equal > li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

.list-size-equal > li:first-child:nth-last-child(3),
.list-size-equal > li:first-child:nth-last-child(3) ~ li {
    width: 33.33%;
}

.list-size-equal > li:first-child:nth-last-child(4),
.list-size-equal > li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

.list-size-equal > li:first-child:nth-last-child(5),
.list-size-equal > li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}

.list-size-equal > li:first-child:nth-last-child(6),
.list-size-equal > li:first-child:nth-last-child(6) ~ li {
    width: 16.66666667%;
}

.list-size-equal.col-3 > li {
    width: 33.33% !important;
}

.list-size-flex {
    display: flex;
}

.list-size-flex > li {
    flex: 1;
    min-width: 0;
}

.list-size-flex > li.flex-2 {
    flex: 2;
}

.list-size-flex > li.flex-3 {
    flex: 3;
}

.list-size-flex > li.flex-4 {
    flex: 4;
}

.list-size-flex > li.flex-0 {
    flex: 0;
}

.list-size-flex > li.flex-auto {
    flex: auto;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-between:before,
.flex-between:after {
    content: none;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-center:before,
.flex-center:after {
    content: none;
}

.list-divider > li:not(:first-of-type) {
    border-left: 1px solid #d9dbdc;
}

.list-style-disc > * {
    margin: 0;
    overflow: hidden;
    position: relative;
    padding-left: 20px;
}

.list-style-disc > *:before {
    content: '●';
    position: absolute;
    display: inline-block;
    width: 20px;
    line-height: inherit;
    font-size: inherit;
    text-align: center;
    vertical-align: middle;
    color: inherit;
    transform: translateX(-100%) scale(0.3, 0.3);
}

.list-style-number {
    counter-reset: list-counter;
}

.list-style-number > * {
    margin: 0;
    overflow: hidden;
    position: relative;
    padding-left: 20px;
}

.list-style-number > *:before {
    display: inline-block;
    padding-right: 4px;
    position: absolute;
    transform: translateX(-100%);
    font-size: inherit;
    font-weight: inherit;
    counter-increment: list-counter;
    content: "" counter(list-counter) ". ";
}

ul.grid-list {
    display: table;
    width: 100%;
}

ul.grid-list > li {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    margin-right: 1%;
}

ul.grid-list.grid-list-column-1 > li {
    width: 100%;
}

ul.grid-list.grid-list-column-2 > li {
    width: 49.5%;
}

ul.grid-list.grid-list-column-3 > li {
    width: 32.6666666667%;
}

ul.grid-list.grid-list-column-4 > li {
    width: 24.25%;
}

ul.grid-list.grid-list-column-5 > li {
    width: 19.2%;
}

ul.grid-list.grid-list-column-6 > li {
    width: 15.8333333333%;
}

ul.grid-list.grid-list-column-7 > li {
    width: 13.4285714286%;
}

ul.grid-list.grid-list-column-8 > li {
    width: 11.625%;
}

ul.grid-list.grid-list-column-9 > li {
    width: 10.2222222222%;
}

ul.grid-list.grid-list-column-10 > li {
    width: 9.1%;
}

ul.grid-list.grid-list-column-11 > li {
    width: 8.1818181818%;
}

ul.grid-list.grid-list-column-12 > li {
    width: 7.4166666667%;
}

ul.grid-list.grid-list-column-2 > li:nth-of-type(2n+0),
ul.grid-list.grid-list-column-3 > li:nth-of-type(3n+0),
ul.grid-list.grid-list-column-4 > li:nth-of-type(4n+0),
ul.grid-list.grid-list-column-5 > li:nth-of-type(5n+0),
ul.grid-list.grid-list-column-6 > li:nth-of-type(6n+0),
ul.grid-list.grid-list-column-7 > li:nth-of-type(7n+0),
ul.grid-list.grid-list-column-8 > li:nth-of-type(8n+0),
ul.grid-list.grid-list-column-9 > li:nth-of-type(9n+0),
ul.grid-list.grid-list-column-10 > li:nth-of-type(10n+0),
ul.grid-list.grid-list-column-11 > li:nth-of-type(11n+0),
ul.grid-list.grid-list-column-12 > li:nth-of-type(12n+0) {
    margin-right: 0;
}

ul.grid-list > li:last-of-type {
    margin-right: 0 !important;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=has-tool--------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.has-tool {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.has-tool .has-tool-fixed {
    display: block;
    width: 100%;
    height: auto;
}

.has-tool .has-tool-item {
    position: absolute;
    display: inline-block;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=form-unit-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.form-control {
    position: relative;
    display: block;
    width: 100%;
}

.input-group {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.input-box {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 22px;
    color: #2a3138;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    text-align: left;
    height: auto;
    background: initial;
    background-color: #ffffff;
}

.input-box.txt-12 {
    font-size: 12px;
}

select.input-box {
    padding-right: 30px;
    /*min-width: 70px;*/
}

.input-box::placeholder {
    color: #a0a6af;
}

.input-box:focus {
    border-color: #fe6a2b;
}

.input-box:not(select):read-only {
    background-color: #f9f9fa;
}

/*input:not(disabled)not:[type="submit"]:focus {}*/
.input-box:disabled,
.input-box.disabled,
.form-control.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.form-control.form-control-sm .input-box {
    padding-top: 4px;
    padding-bottom: 4px;
}

.form-control.form-control-medium-sm .input-box {
    padding-top: 6px;
    padding-bottom: 6px;
}

.form-control.form-control-md .input-box {
    padding-top: 8px;
    padding-bottom: 8px;
}

.form-control.form-control-lg .input-box {
    padding-top: 12px;
    padding-bottom: 12px;
}

.form-control .input-group .tools {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    padding-right: 6px;
}

.form-control .input-group select.input-box ~ .tools {
    pointer-events: none;
}

.form-control .input-group .tools > button {
    display: inline-block;
    font-size: 0;
    color: #5b6068;
    background-color: transparent;
    height: 40px;
    width: auto;
}

.form-control .input-group .tools > button > .line-icons {
    font-size: 16px;
    vertical-align: middle;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .form-control .input-group .tools > button > span.chev-down {
        display: none;
    }
}

.form-control .input-group .tools > button.clear {
    display: none;
}

.form-control .input-group .tools > button.clear.on {
    display: inline-block;
}

.form-control.form-control-sm .input-group .tools > button {
    height: 32px;
}

.form-control.form-control-medium-sm .input-group .tools > button {
    height: 36px;
}

.form-control.form-control-md .input-group .tools > button {
    height: 40px;
}

.form-control.form-control-lg .input-group .tools > button {
    height: 48px;
}

.form-control label,
.form-control .label {
    display: block;
    font-size: 12px;
    color: #2a3138;
    margin-bottom: 6px;
    cursor: default;
}

.form-control.form-control-inline {
    position: relative;
    padding-left: 80px;
}

.form-control.form-control-inline label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    padding-right: 10px;
    margin-bottom: initial;
}

.form-control.form-control-inline.inline-xs {
    padding-left: 60px;
}

.form-control.form-control-inline.inline-xs label {
    width: 60px;
}

.form-control.form-control-inline.inline-sm {
    padding-left: 80px;
}

.form-control.form-control-inline.inline-sm label {
    width: 80px;
}

.form-control.form-control-inline.inline-md {
    padding-left: 100px;
}

.form-control.form-control-inline.inline-md label {
    width: 100px;
}

.form-control.form-control-inline.inline-lg {
    padding-left: 120px;
}

.form-control.form-control-inline.inline-lg label {
    width: 120px;
    font-size: 14px;
}

.form-control.form-control-inline.inline-xl {
    padding-left: 140px;
}

.form-control.form-control-inline.inline-xl label {
    width: 140px;
    font-size: 14px;
}

.form-control.inline label {
    display: inline-block;
    padding-right: 4px;
    vertical-align: middle;
    margin-bottom: initial;
    width: auto;
}

.form-control.inline .input-group {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

/*=check-item------------------------------------------------------------------------*/
.check-item {
    display: inline-block;
    width: auto;
    min-width: 32px;
    height: auto;
    min-height: 32px;
    line-height: 100%;
    font-size: 0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    vertical-align: middle;
    user-select: none;
}

.check-item.check-item-block,
.check-item.check-item-block .labelling {
    display: block;
}

.check-item input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: 0;
}

.check-item .labelling {
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
    font-size: 0;
    position: relative;
    padding: 6px;
    padding-left: 32px;
}

.check-item.txt-right .labelling {
    padding: 6px;
    padding-right: 32px;
}

.check-item .icon-holder {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    text-align: center;
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0;
    overflow: visible;
}

.check-item.txt-right .icon-holder {
    left: auto;
    right: 6px;
}

.check-item .icon-holder:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid #d9dbdc;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
}

.check-item .icon-holder .line-icons.square:before {
    content: '' !important;
}

.check-item .icon-holder span:nth-of-type(1) {
    position: relative;
    color: #d9dbdc;
}

.check-item .icon-holder span:nth-of-type(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.check-item .label-txt {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    user-select: none;
}

.check-item .label-txt.txt-16 {
    font-size: 16px;
}

.check-item input[type="checkbox"]:checked ~ .labelling .icon-holder span:after,
.check-item input[type="checkbox"]:checked ~ .icon-holder span:after {
    position: absolute;
    display: inline-block;
    content: '\e912';
    font-family: 'LineIcons', sans-serif;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: #fe6a2b;
}

.check-item .labelling:hover {
    background: rgba(0, 0, 0, 0.05);
}

.check-item input:disabled ~ .icon-holder {
    pointer-events: none;
    opacity: 0.3;
}

.check-item input:disabled ~ .labelling {
    pointer-events: none;
    opacity: 0.3;
}

/*=radio-item------------------------------------------------------------------------*/
.radio-item {
    display: inline-block;
    width: auto;
    min-width: 32px;
    height: auto;
    min-height: 32px;
    font-size: 0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    line-height: initial;
    vertical-align: middle;
}

.radio-item.radio-item-block,
.radio-item.radio-item-block .labelling {
    display: block;
}

.radio-item input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: 0;
}

.radio-item .labelling {
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
    font-size: 0;
    position: relative;
    padding: 6px;
    padding-left: 32px;
}

.radio-item.btn-type .labelling {
    padding: 0 12px;
    border-radius: inherit;
    border: 1px solid #d9dbdc;
    line-height: 30px;
}

.radio-item.btn-type input[type="radio"]:checked ~ .labelling {
    background: #fe6a2b;
    border-color: #fe6a2b;
    color: #fff;
}

.radio-item .labelling:hover {
    background: rgba(0, 0, 0, 0.05);
}

.radio-item input:disabled ~ .icon-holder {
    pointer-events: none;
    opacity: 0.3;
}

.radio-item input:disabled ~ .labelling {
    pointer-events: none;
    opacity: 0.3;
}

.radio-item .icon-holder {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    text-align: center;
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0;
}

.radio-item .icon-holder:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #d9dbdc;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
}

.radio-item .icon-holder .line-icons.circle:before {
    content: '' !important;
}

.radio-item .icon-holder span {
    position: relative;
    color: #d9dbdc;
}

.radio-item .label-txt {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
}

.radio-item .label-txt.txt-12 {
    font-size: 12px;
}

.radio-item input[type="radio"]:checked ~ .labelling .icon-holder span:after,
.radio-item input[type="radio"]:checked ~ .icon-holder span:after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 8px;
    height: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #fe6a2b;
}

/*=toggle-switch----------------------------------------------------------------------*/
.toggle-switch {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 0;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 6px;
    user-select: none;
}

.toggle-switch * { user-select: none; }

.toggle-switch:hover {
    background: rgba(0, 0, 0, 0.05);
}

.toggle-switch input[type="checkbox"] {
    width: 0;
    height: 0;
    position: absolute;
    top: -100px;
    left: 0;
}

.toggle-switch .label-txt {
    display: inline-block;
    width: auto;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
}

.toggle-switch .switch-track {
    display: inline-block;
    width: 32px;
    height: 20px;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 10px;
    background: #d9dbdc;
    border: 2px solid #d9dbdc;
    position: relative;
    transition: all 0.2s;
}

.toggle-switch .switch-track .switch {
    width: 100%;
    height: 16px;
    padding-right: 16px;
    overflow: hidden;
    border-radius: 8px;
    font-size: 0;
    position: relative;
    text-align: center;
    transform: translateX(calc(-100% + 16px)) translateZ(0);
    transition: all 0.2s;
}

.toggle-switch input:checked ~ .switch-track {
    background: #fe6a2b;
    border: 2px solid #fe6a2b;
}

.toggle-switch input:checked ~ .switch-track .switch {
    transform: translateX(0) translateZ(0);
}

.toggle-switch .switch-track .switch .switch-handle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
}

.toggle-switch.disabled {
    pointer-events: none;
    opacity: 0.4;
}

/*=form-control-number---------------------------------------------------------------*/
.form-control-number {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #2A3138;
    font-size: 0;
    padding: 6px 0;
}

.form-control-number > input {
    position: absolute;
    top: -9999px;
    right: -99999px;
    height: 0;
    width: 0;
    font-size: 0;
}

.form-control-number > span {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}

.form-control-number .label {
    font-size: 16px;
    padding: 0 8px;
    line-height: 24px;
}

.form-control-number .control {
    position: relative;
    color: #5B6068;
    background-color: transparent;
    font-size: 0;
    -webkit-tap-highlight-color: transparent;
}

.form-control-number .control:hover:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

/* disabled */
.form-control-number.disabled {
    pointer-events: none;
}

.form-control-number.disabled .control {
    color: #d9dbdc;
}

.form-control-number .control.disabled {
    pointer-events: none;
    color: #d9dbdc;
}

/* -webkit-box style */
.form-control-number.form-control-number-box {
    display: block;
    width: 100%;
    padding-left: 20px;
    padding-right: 68px;
    height: auto;
    border: 1px solid #eceeef;
    border-radius: 6px;
}

.form-control-number.form-control-number-box .label {
    display: block;
    width: 100%;
    text-align: center;
}

.form-control-number.form-control-number-box .control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.form-control-number.form-control-number-box .control.control-decrease {
    right: 36px;
}

.form-control-number.form-control-number-box .control.control-increase {
    right: 6px;
}

/*=accordion-item--------------------------------------------------------------------*/
.accordion-item {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    font-size: 0;
}

.accordion-item .accordion-btn {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    font-size: 0;
}

.accordion-item .accordion-btn.dp-inblock {
    display: inline-block;
    width: auto;
    padding-right: 36px;
}

.accordion-item .accordion-btn .line-icons.chev-down {
    position: absolute;
    top: 50%;
    right: 8px;
    transition: transform 0.2s;
    transform: translateY(-50%) translateZ(0) rotate(0deg);
    color: #a0a6af;
}

.accordion-item.on .accordion-btn .line-icons.chev-down {
    transform: translateY(-50%) translateZ(0) rotate(180deg);
}

.accordion-item .accordion-btn:hover .line-icons.chev-down {
    color: #2a3138;
}

.accordion-item .accordion-cont {
    display: none;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.accordion-item.on .accordion-cont {
    display: block;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=tag-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #D9DBDC;
    font-size: 14px;
}

.tag.on {
    background-color: #FE6A2B;
    color: #ffffff;
    font-weight: 500;
    border: 1px solid transparent;
}

.tag:before {
    content: '#';
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=badge-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.badge {
    display: inline-block;
    width: auto;
    line-height: 16px;
    font-size: 11px;
    font-weight: 500;
    background: #fe6a2b;
    color: #fff;
    padding: 0 8px;
    border-radius: 4px;
    vertical-align: middle;
    position: relative;
    border: 1px solid transparent;
}

.badge.badge-s {
    line-height: 14px;
    font-size: 10px;
    border-radius: 2px;
}

.badge.badge-l {
    line-height: 18px;
    font-size: 12px;
}

.badge.badge-xl {
    line-height: 22px;
    font-size: 14px;
}

.badge.round {
    border-radius: 9px;
}

.badge.badge-s.round {
    border-radius: 8px;
}

.badge.badge-l.round {
    border-radius: 10px;
}

.badge.badge-xl.round {
    border-radius: 12px;
}

.badge.badge-neutral1 {
    background: #2a3138;
}

.badge.badge-neutral2 {
    background: #5b6068;
}

.badge.badge-neutral3 {
    background: #a0a6af;
}

.badge.badge-white {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    color: #a0a6af;
}

.badge.badge-wheat {
    background-color: #cbb58f;
}

.badge.badge-mint {
    background: #58c1c7;
}

.badge.badge-inv {
    background: transparent;
    color: #fe6a2b;
    border: 1px solid #fe6a2b;
}

.badge.badge-inv.badge-neutral1 {
    background: transparent;
    color: #2a3138;
    border: 1px solid #2a3138;
}

.badge.badge-inv.badge-neutral2 {
    background: transparent;
    color: #5b6068;
    border: 1px solid #5b6068;
}

.badge.badge-inv.badge-neutral3 {
    background: transparent;
    color: #a0a6af;
    border: 1px solid #a0a6af;
}

.badge-container {
    position: relative;
}

.badge.badge-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    padding: initial;
    font-size: 0;
}

.smart-pay-badge {
    display: inline-block;
    width: auto;
    line-height: 24px;
    font-size: 0;
    font-weight: 500;
    background: #2a3138;
    color: #fff;
    padding: 0 10px;
    border-radius: 12px;
    vertical-align: middle;
    position: relative;
    white-space: nowrap;
}

.smart-pay-badge.lite {
    background-color: transparent;
    padding: 0;
}

.smart-pay-badge .label-txt {
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
}

.smart-pay-badge img {
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    height: 18px;
    margin-left: 2px;
}

/* 20240207 start */
.tip-item {
    min-height: 20px;
    line-height: 16px;
    padding: 2px 0;
    padding-left: 38px;
    position: relative;
    font-size: 12px;
}

.tip-item:before {
    content: 'Tip';
    display: inline-block;
    width: 32px;
    height: 20px;
    line-height: 20px;
    border-radius: 4px 0 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    background: #FE6A2B;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
/* 20240207 end */


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Badge: badge-tire-type------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.badge.badge-tire-type {
    color: #ffffff;
    font-size: 9px;
    line-height: 10px;
    padding: 3px 6px;
    background-color: #e5e5e5;
    /*border-radius: 8px;*/
    text-transform: uppercase;
    border-radius: 2px;
}

.badge.badge-tire-type.comfort:before {
    content: 'comfort';
}

.badge.badge-tire-type.comfort.on {
    background-color: #ff8e1f;
}

.badge.badge-tire-type.sport:before {
    content: 'sport';
}

.badge.badge-tire-type.sport.on {
    background-color: #5989d1;
}

.badge.badge-tire-type.runflat:before {
    content: 'runflat';
}

.badge.badge-tire-type.runflat.on {
    background-color: #333333;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Badge: badge-service-type---------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.badge.badge-service-type {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    border-radius: 100%;
    background-color: #5b6068;
    line-height: 1;
}

.badge.badge-service-type > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.badge.badge-service-type.out-of-stock {
    background-color: #F49C00;
}

.badge.badge-service-type.out-of-stock + .tooltip .tooltip-header {
    color: #F49C00;
}

.badge.badge-service-type.guarantee {
    background-color: #30AEE4;
}

.badge.badge-service-type.guarantee + .tooltip .tooltip-header {
    color: #30AEE4;
}

.badge.badge-service-type.premium {
    position: relative;
    background-color: #C39969;
}

.badge.badge-service-type.premium:after {
    position: absolute;
    top: 0;
    right: -2px;
    content: '\e900';
    font-family: 'LineIcons', sans-serif;
    display: inline-block;
    font-size: 5px !important;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    text-align: center;
    border-radius: 100%;
    background-color: #8F5400;
}

.badge.badge-service-type.premium + .tooltip .tooltip-header {
    color: #C39969;
}

/*=Badge: badge-discount-------------------------------------------------------------*/
.badge.badge-discount {
    padding-left: 4px;
    padding-right: 4px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    border-radius: 50%;
    font-size: 0;
}

.badge.badge-discount > span {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    line-height: 110%;
}

.badge.badge-discount.sale {
    background-color: #5b6068;
}

.badge.badge-discount.membership {
    background-color: #ffa200;
}

/*=Badge: badge-review---------------------------------------------------------------*/
.badge.badge-review {
    line-height: 22px;
    font-weight: 400;
    color: #5B6068;
    background-color: #ffffff;
    border: 1px solid #D9DBDC;
}

.badge.badge-review > strong {
    color: #2A3138;
}

/*=Badge: badge-best-----------------------------------------------------------------*/
/* 20220823// */
.badge.badge-best {
    width: 42px;
    height: 42px;
    background-image: url("../images/main/icon_best.png");
    background-size: 42px auto;
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 0;
    border: 0;
    border-radius: 0;
}

/* //20220823 */
/* 20220823 삭제 //
.badge.badge-best:after {
    position: absolute;
    top: 0;
    right: -6px;
    content: '';
    width: 0;
    height: 0;
    border-top: 22px solid rgba(42, 49, 56, .9);
    border-right: 6px solid transparent;
}
/* //20220823 


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Rating----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.rating {
    display: inline-block;
    width: 56px;
    height: 12px;
    background: url("../images/common/rating-off.svg") no-repeat;
    background-size: 56px auto;
    overflow: hidden;
    line-height: initial;
    font-size: 0;
}

.rating span {
    display: inline-block;
    width: 100%;
    height: 12px;
    background: url("../images/common/rating-on.svg") no-repeat;
    background-size: 56px auto;
    overflow: hidden;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Image Container-------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.image-container {
    display: block;
    width: 100%;
    height: auto;
}

.image-container > img {
    width: 100%;
    height: auto;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=High Light -----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.highlight-container {
    position: relative;
    display: inline-block;
}

.highlight-container.highlight-container-block {
    display: block;
}

.highlight-container .highlight {
    position: absolute;
    display: block;
    width: auto;
    line-height: 26px;
    padding: 0 10px;
    border: 1px solid #ffa200;
    border-radius: 4px;
    font-size: 11px;
    color: #ffa200;
    background-color: #ffffff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 1;
}

.highlight-container .highlight:before,
.highlight-container .highlight:after {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
}

/* right */
.highlight-container .highlight,
.highlight-container.right .highlight {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 12px;
}

.highlight-container .highlight:before,
.highlight-container.right .highlight:before {
    top: 50%;
    left: -22px;
    margin-top: -6px;
    border-style: solid;
    border-width: 6px 11px 6px 11px;
    border-color: transparent #ffa200 transparent transparent;
}

.highlight-container .highlight:after,
.highlight-container.right .highlight:after {
    top: 50%;
    left: -19px;
    margin-top: -5px;
    border-style: solid;
    border-width: 5px 10px 5px 10px;
    border-color: transparent #ffffff transparent transparent;
}

/* bottom */
.highlight-container.bottom .highlight {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    margin-top: 6px;
}

.highlight-container.bottom .highlight:before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color: transparent transparent #ffa200 transparent;
}

.highlight-container.bottom .highlight:after {
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent transparent #ffffff transparent;
}

/* left */
.highlight-container.left .highlight {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    margin: 0;
    margin-right: 12px;
}

.highlight-container.left .highlight:before {
    top: 50%;
    left: auto;
    right: -22px;
    margin-top: -6px;
    border-style: solid;
    border-width: 6px 11px 6px 11px;
    border-color: transparent transparent transparent #ffa200;
}

.highlight-container.left .highlight:after {
    top: 50%;
    left: auto;
    right: -19px;
    margin-top: -5px;
    border-style: solid;
    border-width: 5px 10px 5px 10px;
    border-color: transparent transparent transparent #ffffff;
}

/* top */
.highlight-container.top .highlight {
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    margin-bottom: 6px;
}

.highlight-container.top .highlight:before {
    top: auto;
    bottom: -12px;
    left: 50%;
    margin-left: -6px;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color: #ffa200 transparent transparent transparent;
}

.highlight-container.top .highlight:after {
    top: auto;
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #ffffff transparent transparent transparent;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Tooltip --------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-container:hover .tooltip {
    display: block;
}

.tooltip {
    display: none;
    position: absolute;
    border-radius: 4px;
    background-color: rgba(64, 64, 64, 0.9);
    padding: 10px;
    box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.3);
    color: #ffffff;
    width: 160px;
    height: auto;
    z-index: 800;
    text-align: left;
}

.tooltip-container .tooltip:after {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
}

.tooltip-container.left .tooltip {
    margin-right: 10px;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
}

.tooltip-container.left .tooltip:after {
    top: 50%;
    right: -10px;
    margin-top: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent transparent transparent rgba(64, 64, 64, 0.9);
}

.tooltip-container.top .tooltip {
    margin-bottom: 10px;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}

.tooltip-container.top .tooltip:after {
    left: 50%;
    bottom: -10px;
    margin-left: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #5b6068 transparent transparent transparent;
}

.tooltip-container.right .tooltip {
    margin-left: 10px;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

.tooltip-container.right .tooltip:after {
    top: 50%;
    left: -10px;
    margin-top: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent #5b6068 transparent transparent;
}

.tooltip-container.bottom .tooltip {
    margin-top: 10px;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
}

.tooltip-container.bottom .tooltip:after {
    left: 50%;
    top: -10px;
    margin-left: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent transparent #5b6068 transparent;
}

.tooltip-container.f-top .tooltip {
    top: 0;
    transform: translateY(0);
}

.tooltip-container.f-top .tooltip:after {
    top: 14px;
}

.tooltip .tooltip-header {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
    color: #2ed0ff;
}

.tooltip .tooltip-body {
    display: block;
    font-size: 12px;
    color: #ffffff;
    white-space: normal;
}


/* 토스트 컴포넌트 추가 20260320 start */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=toast-item------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#toast-container {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom)); /* 안전 영역 고려 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: calc(100% - 32px);
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0,0,0,1);
    color: #fff;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 24px;
    opacity: 0;
    transform: translateY(100%) translateZ(0);
    transition: all 0.3s;
    backdrop-filter: blur(2px);
    gap: 8px;
    pointer-events: all;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.toast-item.on {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.toast-item.out {
    opacity: 0;
    transform: translateY(-50%) translateZ(0) scale(0.9);
    transition: all 0.4s;
}

.toast-item .toast-msg p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.toast-item .action {
    flex-shrink: 0;
}

.toast-item .action .btn-item {
    background: none;
    border: none;
    color: #fe6a2b;
    padding: 0 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
}

.toast-item .action .btn-item .label-txt {
    font-size: 14px !important;
}
/* 토스트 컴포넌트 추가 20260320 end */


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=padding---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.pd-h-1u {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.pd-v-1u {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.pd-h-2u {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.pd-v-2u {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.pd-h-3u {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.pd-v-3u {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.pd-h-4u {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.pd-v-4u {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.pd-h-5u {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.pd-v-5u {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.pd-h-6u {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.pd-v-6u {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.pd-h-7u {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

.pd-v-7u {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

.pd-h-8u {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.pd-v-8u {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.pd-h-9u {
    padding-left: 36px !important;
    padding-right: 36px !important;
}

.pd-v-9u {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

.pd-h-10u {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.pd-v-10u {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.pd-h-15u {
    padding-left: 60px !important;
    padding-right: 60px !important;
}

.pd-v-15u {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.pd-h-20u {
    padding-left: 80px !important;
    padding-right: 80px !important;
}

.pd-v-20u {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.pd-h-25u {
    padding-left: 100px !important;
    padding-right: 100px !important;
}

.pd-v-25u {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.pd-h-30u {
    padding-left: 120px !important;
    padding-right: 120px !important;
}

.pd-v-30u {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.pd-t-1u {
    padding-top: 4px !important;
}

.pd-b-1u {
    padding-bottom: 4px !important;
}

.pd-l-1u {
    padding-left: 4px !important;
}

.pd-r-1u {
    padding-right: 4px !important;
}

.pd-t-2u {
    padding-top: 8px !important;
}

.pd-b-2u {
    padding-bottom: 8px !important;
}

.pd-l-2u {
    padding-left: 8px !important;
}

.pd-r-2u {
    padding-right: 8px !important;
}

.pd-t-3u {
    padding-top: 12px !important;
}

.pd-b-3u {
    padding-bottom: 12px !important;
}

.pd-l-3u {
    padding-left: 12px !important;
}

.pd-r-3u {
    padding-right: 12px !important;
}

.pd-t-4u {
    padding-top: 16px !important;
}

.pd-b-4u {
    padding-bottom: 16px !important;
}

.pd-l-4u {
    padding-left: 16px !important;
}

.pd-r-4u {
    padding-right: 16px !important;
}

.pd-t-5u {
    padding-top: 20px !important;
}

.pd-b-5u {
    padding-bottom: 20px !important;
}

.pd-l-5u {
    padding-left: 20px !important;
}

.pd-r-5u {
    padding-right: 20px !important;
}

.pd-t-6u {
    padding-top: 24px !important;
}

.pd-b-6u {
    padding-bottom: 24px !important;
}

.pd-l-6u {
    padding-left: 24px !important;
}

.pd-r-6u {
    padding-right: 24px !important;
}

.pd-t-7u {
    padding-top: 28px !important;
}

.pd-b-7u {
    padding-bottom: 28px !important;
}

.pd-l-7u {
    padding-left: 28px !important;
}

.pd-r-7u {
    padding-right: 28px !important;
}

.pd-t-8u {
    padding-top: 32px !important;
}

.pd-b-8u {
    padding-bottom: 32px !important;
}

.pd-l-8u {
    padding-left: 32px !important;
}

.pd-r-8u {
    padding-right: 32px !important;
}

.pd-t-9u {
    padding-top: 36px !important;
}

.pd-b-9u {
    padding-bottom: 36px !important;
}

.pd-l-9u {
    padding-left: 36px !important;
}

.pd-r-9u {
    padding-right: 36px !important;
}

.pd-t-10u {
    padding-top: 40px !important;
}

.pd-b-10u {
    padding-bottom: 40px !important;
}

.pd-l-10u {
    padding-left: 40px !important;
}

.pd-r-10u {
    padding-right: 40px !important;
}

.pd-t-15u {
    padding-top: 60px !important;
}

.pd-b-15u {
    padding-bottom: 60px !important;
}

.pd-l-15u {
    padding-left: 60px !important;
}

.pd-r-15u {
    padding-right: 60px !important;
}

.pd-t-20u {
    padding-top: 80px !important;
}

.pd-b-20u {
    padding-bottom: 80px !important;
}

.pd-l-20u {
    padding-left: 80px !important;
}

.pd-r-20u {
    padding-right: 80px !important;
}

.pd-t-25u {
    padding-top: 100px !important;
}

.pd-b-25u {
    padding-bottom: 100px !important;
}

.pd-l-25u {
    padding-left: 100px !important;
}

.pd-r-25u {
    padding-right: 100px !important;
}

.pd-t-30u {
    padding-top: 120px !important;
}

.pd-b-30u {
    padding-bottom: 120px !important;
}

.pd-l-30u {
    padding-left: 120px !important;
}

.pd-r-30u {
    padding-right: 120px !important;
}

.no-pd {
    padding: 0 !important;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=margin----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mg-h-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mg-h-1u {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.mg-v-1u {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.mg-h-2u {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.mg-v-2u {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.mg-h-3u {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.mg-v-3u {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.mg-h-4u {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.mg-v-4u {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.mg-h-5u {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.mg-v-5u {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.mg-h-6u {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

.mg-v-6u {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.mg-h-7u {
    margin-left: 28px !important;
    margin-right: 28px !important;
}

.mg-v-7u {
    margin-top: 28px !important;
    margin-bottom: 28px !important;
}

.mg-h-8u {
    margin-left: 32px !important;
    margin-right: 32px !important;
}

.mg-v-8u {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}

.mg-h-9u {
    margin-left: 36px !important;
    margin-right: 36px !important;
}

.mg-v-9u {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
}

.mg-h-10u {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

.mg-v-10u {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.mg-h-15u {
    margin-left: 60px !important;
    margin-right: 60px !important;
}

.mg-v-15u {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.mg-h-20u {
    margin-left: 80px !important;
    margin-right: 80px !important;
}

.mg-v-20u {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
}

.mg-h-25u {
    margin-left: 100px !important;
    margin-right: 100px !important;
}

.mg-v-25u {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

.mg-h-30u {
    margin-left: 120px !important;
    margin-right: 120px !important;
}

.mg-v-30u {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
}

.mg-t-1u {
    margin-top: 4px !important;
}

.mg-b-1u {
    margin-bottom: 4px !important;
}

.mg-l-1u {
    margin-left: 4px !important;
}

.mg-r-1u {
    margin-right: 4px !important;
}

.mg-t-2u {
    margin-top: 8px !important;
}

.mg-b-2u {
    margin-bottom: 8px !important;
}

.mg-l-2u {
    margin-left: 8px !important;
}

.mg-r-2u {
    margin-right: 8px !important;
}

.mg-t-3u {
    margin-top: 12px !important;
}

.mg-b-3u {
    margin-bottom: 12px !important;
}

.mg-l-3u {
    margin-left: 12px !important;
}

.mg-r-3u {
    margin-right: 12px !important;
}

.mg-t-4u {
    margin-top: 16px !important;
}

.mg-b-4u {
    margin-bottom: 16px !important;
}

.mg-l-4u {
    margin-left: 16px !important;
}

.mg-r-4u {
    margin-right: 16px !important;
}

.mg-t-5u {
    margin-top: 20px !important;
}

.mg-b-5u {
    margin-bottom: 20px !important;
}

.mg-l-5u {
    margin-left: 20px !important;
}

.mg-r-5u {
    margin-right: 20px !important;
}

.mg-t-6u {
    margin-top: 24px !important;
}

.mg-b-6u {
    margin-bottom: 24px !important;
}

.mg-l-6u {
    margin-left: 24px !important;
}

.mg-r-6u {
    margin-right: 24px !important;
}

.mg-t-7u {
    margin-top: 28px !important;
}

.mg-b-7u {
    margin-bottom: 28px !important;
}

.mg-l-7u {
    margin-left: 28px !important;
}

.mg-r-7u {
    margin-right: 28px !important;
}

.mg-t-8u {
    margin-top: 32px !important;
}

.mg-b-8u {
    margin-bottom: 32px !important;
}

.mg-l-8u {
    margin-left: 32px !important;
}

.mg-r-8u {
    margin-right: 32px !important;
}

.mg-t-9u {
    margin-top: 36px !important;
}

.mg-b-9u {
    margin-bottom: 36px !important;
}

.mg-l-9u {
    margin-left: 36px !important;
}

.mg-r-9u {
    margin-right: 36px !important;
}

.mg-t-10u {
    margin-top: 40px !important;
}

.mg-b-10u {
    margin-bottom: 40px !important;
}

.mg-l-10u {
    margin-left: 40px !important;
}

.mg-r-10u {
    margin-right: 40px !important;
}

.mg-t-15u {
    margin-top: 60px !important;
}

.mg-b-15u {
    margin-bottom: 60px !important;
}

.mg-l-15u {
    margin-left: 60px !important;
}

.mg-r-15u {
    margin-right: 60px !important;
}

.mg-t-20u {
    margin-top: 80px !important;
}

.mg-b-20u {
    margin-bottom: 80px !important;
}

.mg-l-20u {
    margin-left: 80px !important;
}

.mg-r-20u {
    margin-right: 80px !important;
}

.mg-t-25u {
    margin-top: 100px !important;
}

.mg-b-25u {
    margin-bottom: 100px !important;
}

.mg-l-25u {
    margin-left: 100px !important;
}

.mg-r-25u {
    margin-right: 100px !important;
}

.mg-t-30u {
    margin-top: 120px !important;
}

.mg-b-30u {
    margin-bottom: 120px !important;
}

.mg-l-30u {
    margin-left: 120px !important;
}

.mg-r-30u {
    margin-right: 120px !important;
}

.no-mg {
    margin: 0 !important;
}

/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =table--------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table-responsive table {
    table-layout: auto;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=divider --------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.divider {
    display: block;
    border: none;
    border-bottom: 1px solid #f2f2f7;
}

.divider.dark {
    border-bottom: 1px solid #d9dbdc;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=swiper----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.btn-item.btn-swiper-nav {
    width: 40px;
    height: 40px;
    line-height: 100%;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(42, 49, 56, 0.1);
    border-radius: 50%;
}

.btn-item.btn-swiper-nav.swiper-button-disabled {
    opacity: 0.2;
    cursor: default;
}

.btn-item.btn-swiper-nav.btn-prev {
    left: 8px;
}

.btn-item.btn-swiper-nav.btn-next {
    right: 8px;
}

.btn-item.btn-swiper-nav i {
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.btn-item.btn-swiper-nav i.dark {
    border: 1px solid #2a3138;
}

.btn-item.btn-swiper-nav.btn-prev i {
    border-right: none;
    border-bottom: none;
    transform: translateX(-25%) translateY(-50%) rotate(-45deg);
}

.btn-item.btn-swiper-nav.btn-next i {
    border-left: none;
    border-bottom: none;
    transform: translateX(-75%) translateY(-50%) rotate(45deg);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Card------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.card {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #D9DBDC;
    overflow: hidden;
}

.card .product-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 180px;
    padding: 24px 20px 24px 160px;
    cursor: pointer;
}

.card .product-area .thumb-wrap {
    position: absolute;
    top: 12px;
    left: 1px;
    width: 160px;
    overflow: hidden;
}

.card .product-area .thumb-wrap .thumb-holder {
    position: relative;
    display: block;
    width: 160px;
    height: 160px;
}

.card .product-area .thumb-wrap .thumb-holder img {
    width: 100%;
    height: auto;
    transition: all 0.2s;
}

.card .product-area .thumb-wrap .thumb-holder.thumb-scaled img {
    transform: translateY(8px) translateZ(0) scale(1.1);
}

.card .product-area:hover .thumb-wrap .thumb-holder.thumb-scaled img {
    transform: translateY(0) translateZ(0) scale(1.1);
}

.card .product-area .thumb-wrap .thumb-holder .brands-logo {
    background-color: #fff;
    z-index: 2;
    transition: all 0.2s;
}

.card .product-area:hover .thumb-wrap .thumb-holder .brands-logo {
    transform: translateY(12px) translateZ(0);
}

.card .product-area .description-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.card .product-area .description-area .model {
    display: block;
    width: 100%;
    height: auto;
    font-size: 18px;
    font-weight: 500;
}

.card .product-area .description-area .model img {
    width: 100%;
    height: auto;
}

.card .product-area .description-area > p.size {
    font-size: 16px;
    margin-bottom: 6px;
}

.card .product-area .description-area > p.description {
    font-size: 14px;
    margin-bottom: 8px;
    color: #5b6068;
}

.card .product-area .description-area .model + p.size {
    margin-top: 4px;
}

.card .product-area .description-area .model + p.description {
    margin-top: 8px;
}

.card .product-area .description-area > p.price {
    display: block;
    width: 100%;
    height: auto;
    font-size: 18px;
    float: none;
    color: #2a3138;
}

.card .product-area .description-area > p.price .discount {
    font-size: 14px;
    color: #A0A6AF;
}

.card .review-area {
    display: block;
    width: 100%;
    height: auto;
    background-color: #F9F9FA;
}

.card .review-area .badge-group {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 8px 20px;
    padding-left: 100px;
    border-top: 1px solid #f2f2f7;
}

.card .review-area .badge-group .label {
    position: absolute;
    top: 8px;
    left: 20px;
    font-size: 12px;
    line-height: 28px;
    font-weight: 500;
}

.card .review-area .badge-group .badges {
    font-size: 0;
}

.card .review-area .badge-group .badges .badge {
    margin: 2px;
}

.card .review-area .review {
    display: block;
    font-size: 13px;
    padding: 16px 20px;
    border-top: 1px solid #d9dbdc;
}

.card .review-area .review .meta {
    margin-bottom: 4px;
}

.card .review-area .review .meta > * {
    vertical-align: middle;
}

.card .review-area .review .meta .line-icons.star {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 12px;
}

.card .review-area .review > .description {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 20px;
    height: 40px;
    /* 0825 */
    color: #5b6068;
}

.card .review-area .review:hover > .description {
    text-decoration: underline;
}

/* 20220823// */
.card > .badge.badge-best {
    position: absolute;
    top: -1px;
    left: -1px;
}

/* //20220823 */
/* card 경정비 add light-reserve */
.tire-category-contents-swiper .card.light-reserve .product-area {
    min-height: 137px;
}

.tire-category-contents-swiper .card.light-reserve .thumb-wrap {
    left: 20px;
    width: 125px;
    height: 125px;
}

.tire-category-contents-swiper .card.light-reserve .thumb-wrap .thumb-holder {
    width: 125px;
    height: 125px;
}

.card.light-reserve .product-area .thumb-wrap .thumb-holder.thumb-scaled img {
    transform: translateY(0) translateZ(0) scale(1);
}

.card.light-reserve .product-area:hover .thumb-wrap .thumb-holder.thumb-scaled img {
    transform: translateY(0) translateZ(0) scale(1);
}

.tire-category-contents-swiper .card .review-area {
    cursor: pointer;
}

/*=Card: Time Deal------------------------------------------------------------------------*/
.card.card-time-deal {
    /*border-radius: 0;*/
    border: 0;
    width: 100%;
    overflow: visible;
}

.card.card-time-deal .time-deal-limit {
    font-size: 16px;
    height: 32px;
}

.card.card-time-deal .time-deal-limit > * {
    vertical-align: middle;
}

.card.card-time-deal .card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #D9DBDC;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    transition: all 0.2s;
}

.card.card-time-deal .card-inner:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card.card-time-deal .card-inner .thumb-wrap {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 16px;
}

.card.card-time-deal .card-inner .thumb-wrap .thumb-holder {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 160px;
    overflow: hidden;
}

.card.card-time-deal .card-inner .thumb-wrap .thumb-holder img {
    width: 100%;
    height: auto;
}

.card.card-time-deal .card-inner .thumb-wrap .thumb-holder .brands-logo {
    height: 40px;
    background-size: auto 24px;
}

.card.card-time-deal .card-inner .description-area {
    display: block;
    width: 100%;
    height: auto;
    font-size: 16px;
    padding: 20px;
}

.card.card-time-deal .card-inner .description-area .model {
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card.card-time-deal .card-inner .description-area .model-sub {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card.card-time-deal .card-inner .description-area .size {
    font-size: 14px;
}

.card.card-time-deal .discount {
    margin-top: 8px;
    font-size: 14px;
    color: #a0a6af;
    padding: 0 8px;
}

.card.card-time-deal .price {
    font-size: 20px;
    color: #fe6a2b;
    font-weight: 400;
    padding: 0 8px;
    float: none;
}

.card.card-time-deal .badge.badge-discount {
    position: absolute;
    top: 12px;
    right: 12px;
}

/*=Card: Review----------------------------------------------------------------------*/
/* 20220404// */
.review-card {
    display: block;
    height: 260px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 16px 16px 24px 16px;
    transition: all 0.2s;
}

.review-card {
    margin: 4px;
    border: 1px solid #D9DBDC;
}

.review-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: underline;
}

.review-card .description {
    color: #5B6068;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-height: 16px;
    height: 64px;
    font-size: 12px;
}

.review-card ul.meta li {
    display: inline-block;
    vertical-align: middle;
}

.review-card ul.meta li:after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 10px;
    vertical-align: middle;
    background-color: #8f8f8f;
    margin: 0 6px;
}

.review-card ul.meta li:last-child:after {
    content: none;
}

.review-card .thumb-area {
    display: flex;
    align-items: center;
}

.review-card .thumb-area .thumb-image {
    overflow: hidden;
    flex: none;
    width: 31.8%;
    height: 80px;
}

.review-card .thumb-area .thumb-image:nth-child(1) {
    margin-right: 8px;
}

.review-card .thumb-area .thumb-image:nth-child(2) {
    margin-right: 8px;
}

.review-card .thumb-area .thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.review-card-swiper .swiper-pagination {
    line-height: 0;
    bottom: 20px; /* [task]swiper update */
}

.review-card-swiper .swiper-pagination .swiper-pagination-bullet {
    background-color: #aaafb8;
}

.review-card-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #303840;
}

/* //20220404 */
/*=Card: Coupon----------------------------------------------------------------------*/
ul.coupon-card-list.coupon-changer .coupon-changer-wrap {
    position: relative;
    padding-left: 34px;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-changer-radio {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    pointer-events: none;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-changer-icons {
    position: absolute;
    left: 0;
    top: 0;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-changer-icons > span {
    color: #d9dbdc;
    font-size: 26px;
    width: 26px;
    height: 26px;
    line-height: 26px;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-changer-radio + .coupon-changer-icons > span:first-of-type {
    display: inline-block;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-changer-radio + .coupon-changer-icons > span:last-of-type {
    display: none;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-changer-radio:checked + .coupon-changer-icons > span:first-of-type {
    display: none;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-changer-radio:checked + .coupon-changer-icons > span:last-of-type {
    display: inline-block;
    color: #fe6a2b;
}

ul.coupon-card-list.coupon-changer .coupon-changer-wrap .coupon-card {
    cursor: pointer;
}

.coupon-card-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 6px;
    background-color: #c0c6ce;
}

ul.coupon-card-list li {
    width: 100%;
    float: left;
}

ul.coupon-card-list li + li {
    margin-top: 20px;
}

ul.coupon-card-list.col-2 li {
    width: 50%;
    margin-top: 20px;
}

ul.coupon-card-list.col-2 li:nth-of-type(odd) {
    padding-right: 12px;
}

ul.coupon-card-list.col-2 li:nth-of-type(even) {
    padding-left: 12px;
}

.coupon-card {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: auto;
    text-align: center;
}

.coupon-card:before,
.coupon-card:after {
    position: absolute;
    content: '';
    top: 50%;
    width: 10px;
    height: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #cacbce;
    transform: translateY(-50%);
    z-index: 2;
}

.coupon-card.on-bg-light1:before,
.coupon-card.on-bg-light1:after {
    background-color: #fff;
}

.coupon-card:before {
    left: 0;
    border-radius: 0 10px 10px 0;
    border-left-color: transparent;
}

.coupon-card:after {
    right: 0;
    border-radius: 10px 0 0 10px;
    border-right-color: transparent;
}

.coupon-card .coupon-card-info {
    position: relative;
    display: block;
    width: 80%;
    max-width: calc(100% - 120px);
    height: 176px;
    /* 2021-04-13 */
    padding: 36px 16px 12px;
    border: 1px solid #cacbce;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background-color: #ffffff;
}

.coupon-card .coupon-card-info > p.txt-12 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-card .coupon-card-info .btn-detail {
    padding: 0 10px;
    border: 1px solid #d9dbdc;
}

.coupon-card .coupon-card-info .btn-detail .label-txt {
    font-size: 12px;
    line-height: 1;
}

.coupon-card .coupon-card-type-bar {
    display: block;
    width: 100%;
    height: auto;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    padding: 8px 12px;
}

.coupon-card .coupon-card-type-bar .float-l {
    text-align: left;
}

.coupon-card .coupon-card-type-bar .float-r {
    text-align: right;
}

.coupon-card .coupon-card-type-bar span {
    vertical-align: middle;
}

.coupon-card .coupon-card-type-bar .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2A3138;
}

.coupon-card .coupon-card-type-bar .dot.on-line {
    background-color: #fe6a2b;
}

.coupon-card .coupon-card-type-bar .dot.off-line {
    background-color: #cbb58f;
}

.coupon-card .coupon-card-type-bar .dot.on-off-line {
    background-color: #5eb0b5;
}

.coupon-card .coupon-card-type-bar .dot + span {
    margin-left: 4px;
}

.coupon-card .coupon-card-info .coupon-card-shop-list {
    text-align: left;
}

.coupon-card .coupon-card-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    min-width: 120px;
    border: 1px solid #cacbce;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background-color: #F2F2F7;
    cursor: pointer;
}

.coupon-card .coupon-card-action .coupon-card-action-inner > p {
    line-height: 1.2;
}

.coupon-card .coupon-card-action:hover:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.03);
    position: absolute;
    top: 0;
    left: 0;
}

.coupon-card.download-after .coupon-card-action {
    pointer-events: none;
}

.coupon-card.able-give.download-after .coupon-card-action {
    pointer-events: all;
}

/* 쿠폰 다운로드 전 & 사용함 */
.coupon-card .coupon-card-info > *,
.coupon-card.download-before .coupon-card-info > *,
.coupon-card.used .coupon-card-info > * {
    opacity: .3;
    pointer-events: none;
}

.coupon-card.used {
    pointer-events: none;
}

.coupon-card.download-before .coupon-card-action .download-before {
    display: block;
}

.coupon-card.download-before .coupon-card-action .download-after {
    display: none;
}

/* 쿠폰 다운로드 후 */
.coupon-card.download-after .coupon-card-info > * {
    opacity: 1;
    pointer-events: auto;
}

.coupon-card.download-after .coupon-card-action .download-before {
    display: none;
}

.coupon-card.download-after .coupon-card-action .download-after {
    display: block;
}

/* 쿠폰 상세 */
.coupon-card.coupon-card-detail {
    display: block;
}

.coupon-card.coupon-card-detail:before,
.coupon-card.coupon-card-detail:after {
    content: none;
}

.coupon-card.coupon-card-detail .coupon-card-info {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 14px;
    border: 0;
    border-radius: 8px;
    /*overflow: hidden;*/
}

.coupon-card.coupon-card-detail .coupon-card-info:after {
    position: absolute;
    content: '';
    display: block;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: url("../images/common/coupon_divider.svg");
    background-repeat: repeat-x;
    z-index: 4;
}

.coupon-card.coupon-card-detail .coupon-card-info > * {
    opacity: 1;
}

.coupon-card.coupon-card-detail .coupon-card-info .bi-img {
    position: absolute;
    display: inline-block;
    top: 6px;
    right: 6px;
    width: 91px;
    height: 20px;
}

.coupon-card.coupon-card-detail .coupon-card-action,
.coupon-card.coupon-card-detail.download-before .coupon-card-action {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    border: 0;
    border-radius: 8px;
    background-color: #2a3138;
    color: #ffffff;
}

.coupon-card.coupon-card-detail:before,
.coupon-card.coupon-card-detail:after {
    position: absolute;
    content: '';
    top: auto;
    bottom: 30px;
    width: 10px;
    height: 20px;
    background-color: #c0c6ce;
    z-index: 10;
}

.coupon-card.coupon-card-detail:before {
    left: 0;
    border-radius: 0 10px 10px 0;
    border-left-color: transparent;
}

.coupon-card.coupon-card-detail:after {
    right: 0;
    border-radius: 10px 0 0 10px;
    border-right-color: transparent;
}

.coupon-card.coupon-card-detail .coupon-card-action > span {
    display: inline-block;
}

.coupon-card.coupon-card-detail .coupon-card-action > span:first-of-type,
.coupon-card.coupon-card-detail.download-before .coupon-card-action > span:first-of-type {
    display: inline-block;
}

.coupon-card.coupon-card-detail .coupon-card-action > span:last-of-type,
.coupon-card.coupon-card-detail.download-before .coupon-card-action > span:last-of-type {
    display: none;
}

.coupon-card.coupon-card-detail.download-after .coupon-card-action {
    background-color: #a0a6af;
    pointer-events: none;
}

.coupon-card.coupon-card-detail.download-after .coupon-card-action > span:first-of-type {
    display: none;
}

.coupon-card.coupon-card-detail.download-after .coupon-card-action > span:last-of-type {
    display: inline-block;
}

.coupon-card.coupon-card-detail.coupon-card-receive .coupon-card-action {
    pointer-events: auto !important;
}

.coupon-card.coupon-card-detail.coupon-card-receive .coupon-card-action > span {
    display: inline-block !important;
}

.coupon-card.coupon-card-detail.download-after.able-give .coupon-card-action {
    background-color: #fe6a2b;
    pointer-events: auto;
}

.coupon-card.coupon-card-detail .coupon-card-flag {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 74px;
    height: 74px;
    background: url("../images/common/coupon-flag.svg");
    z-index: 10;
}

.coupon-card.coupon-card-detail .coupon-card-flag .coupon-card-flag-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.coupon-card.coupon-card-detail .coupon-card-flag .coupon-card-flag-inner > span {
    position: absolute;
    top: 35%;
    left: 35%;
    display: inline-block;
    font-size: 12px;
    color: #ffffff;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
}

.coupon-card .coupon-download-icon {
    position: relative;
}

.coupon-card .coupon-download-icon:after {
    position: absolute;
    right: -9px;
    bottom: -3px;
    content: '\e911';
    color: #fe6a2b;
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background-color: #F2F2F7;
    border-radius: 50%;
    font-family: 'LineIcons', sans-serif !important;
}

.coupon-barcode-wrap {
    display: block;
    width: 100%;
    height: auto;
    padding: 16px 24px 12px;
    background-color: #ffffff;
}

.coupon-barcode-wrap .coupon-barcode {
    display: block;
    width: 100%;
    height: auto;
}

.coupon-barcode-wrap .coupon-barcode > img {
    display: block;
    width: 100%;
    height: auto;
}

.coupon-barcode-wrap .coupon-barcode-number {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: auto;
    margin-top: 8px;
}

.coupon-barcode-wrap .coupon-barcode-number .label {
    display: flex;
    width: auto;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
}

.coupon-barcode-wrap .coupon-barcode-number .number {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    color: #5b6068;
}




.coupon-gift-arrival {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 0;
}

.coupon-gift-arrival .title-img {
    width: 64px;
    height: 64px;
}

.coupon-gift-arrival .arrival-msg {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}

.coupon-gift-arrival .arrival-msg em { font-weight: 700;}

.coupon-gift-arrival .coupon-gift {
    width: auto;
    min-width: 220px;
    height: 100px;
    padding: 0 32px;
    border-radius: 4px;
    background: linear-gradient(#000, #434D57);
    color: #fff;
    line-height: 52px;
    font-size: 52px;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.coupon-gift-arrival .coupon-gift:before,
.coupon-gift-arrival .coupon-gift:after {
    content: '';
    display: block;
    width: 12px;
    height: 60px;
    background: linear-gradient(#FFA200, #F05600);
    position: absolute;
}

.coupon-gift-arrival .coupon-gift:before {
    transform-origin: 0% 50%;
    top: 0;
    left: 0;
    transform: translateX(10px) translateY(-20px) rotate(45deg);
}

.coupon-gift-arrival .coupon-gift:after {
    transform-origin: 100% 50%;
    bottom: 0;
    right: 0;
    transform: translateX(-10px) translateY(20px) rotate(45deg);
}

.coupon-gift-arrival .coupon-gift .amount { z-index: 1; }

.coupon-gift-arrival .coupon-gift .amount:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(50%) translateY(-50%);
}

.coupon-gift-arrival .coupon-gift .amount:after { content: '원'; font-size: 24px; }
.coupon-gift-arrival .coupon-gift .amount[data-unit="won"]:after { content: '원'; }
.coupon-gift-arrival .coupon-gift .amount[data-unit="rate"]:after { content: '%'; }
.coupon-gift-arrival .coupon-gift .amount[data-unit="none"]:after { content: ''; }

.coupon-gift-arrival .btn-item.copy-coupon-number-btn {
    margin-top: -4px;
    background: #f2f2f7;
    padding: 0 32px;
}

.coupon-gift-arrival .btn-item.copy-coupon-number-btn > * + * { margin-left: 8px;}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Card: TS Deal:Black---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.ts-deal-card-list {
    display: block;
    width: 100%;
    height: auto;
    padding: 14px 20px;
}

.card-primary {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #d9dbdc;
    overflow: hidden;
    background-color: #ffffff;
}

.card-primary .product-area {
    position: relative;
    display: block;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-bottom: 1px solid #D9DBDC;
}

.card-primary .product-area .thumb-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-primary .product-area .thumb-wrap .thumb-holder {
    position: relative;
    display: block;
    width: 256px;
    height: 100%;
    margin: 0 auto;
}

.card-primary .product-area .thumb-wrap .thumb-holder > img {
    display: block;
    width: 100%;
    height: auto;
}

.card-primary .product-area .thumb-wrap .brands-logo {
    height: 35px;
}

.card-primary .product-area .overlay-area {
    position: absolute;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 12px;
    pointer-events: none;
    z-index: 2;
}

.card-primary .product-area .overlay-area .left {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.card-primary .product-area .overlay-area .right {
    text-align: right;
}

.card-primary .product-area .overlay-area .out-of-stock {
    margin-top: auto;
}

.card-primary .product-area .overlay-area .badge-deal {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    line-height: 1.2;
    padding: 0 12px;
    vertical-align: middle;
    font-size: 11px;
    text-align: center;
    color: #fe6a2b;
    border-radius: 18px;
    border: 1px solid #fe6a2b;
}

.card-primary .product-area .overlay-area .compare {
    display: block;
    height: auto;
    min-height: auto;
    pointer-events: auto;
    margin-bottom: 24px;
}

.card-primary .product-area .overlay-area .compare .labelling {
    padding: 0 20px 0 0;
}

.card-primary .product-area .overlay-area .compare .labelling .label-txt {
    font-size: 12px;
}

.card-primary .product-area .overlay-area .compare .icon-holder {
    top: auto;
    left: auto;
    right: 0;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Card: TS Deal:Local---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.card-ts-deal-local {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #d9dbdc;
    overflow: hidden;
    background-color: #ffffff;
    padding: 30px 30px 24px;
}

.card-ts-deal-local .type-icon {
    position: absolute;
    top: 24px;
    right: -40px;
}

.card-ts-deal-local .type-icon > span {
    font-size: 220px;
    width: 220px;
    height: 220px;
    line-height: 220px;
    color: #f2f2f7;
}

.card-ts-deal-local .card-info {
    position: relative;
    z-index: 1;
}

.card-ts-deal-local .card-info > p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card-ts-deal-local .action {
    position: relative;
    z-index: 1;
    margin-top: 16px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Sale Check -----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.check-view .sale-check {
    display: block;
    -webkit-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards;
    -webkit-animation-name: opacityIn;
    animation-name: opacityIn;
}

.check-view .sale-check > input[type="radio"] {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

.sale-check {
    overflow: hidden;
    position: relative;
    display: none;
    width: 32px;
    height: 32px;
    line-height: 100%;
    font-size: 0;
    border-radius: 4px;
    vertical-align: middle;
    -webkit-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards;
    -webkit-animation-name: opacityDown;
    animation-name: opacityDown;
}

.sale-check .card-check {
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #fe6a2b;
    background-color: #fff;
    font-size: 0;
    line-height: 0;
}

.sale-check .icon-circle {
    width: 32px;
    height: 32px;
    padding: 4px;
}

.sale-check input:disabled ~ .icon-circle .card-check {
    background-color: #ffffff;
    border-color: #e3e3e3;
}

.sale-check input:disabled:checked ~ .icon-circle .card-check {
    background-color: #e3e3e3;
    border-color: #e3e3e3;
}

.sale-check input:checked ~ .icon-circle .card-check {
    background-color: #fe6a2b;
}

.sale-check input:checked ~ .icon-circle .card-check:before {
    content: '\e912';
    font-family: 'LineIcons', sans-serif;
    color: #ffffff;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 22px;
}

@keyframes opacityIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes opacityDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Section Product Card -------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.section-product {
    border: 1px solid #d9dbdc;
    background-color: #fff;
    border-radius: 6px;
    transition: all .16s ease-in-out;
}

.section-product.on-pattern .info {
    height: 120px;
    padding-bottom: 0;
}

.section-product.goods.on-pattern .info {
    height: 100px;
}

.section-product.on-pattern .info .button-wrap {
    display: none;
}

.section-product .thumb-wrap {
    position: relative;
    border-bottom: 1px solid #d9dbdc;
    cursor: pointer;
}

.section-product .thumb-wrap .brands-logo {
    height: 35px;
    z-index: 5;
}

.section-product .thumb-wrap .thumb-img {
    overflow: hidden;
    /*width: 185px;*/
    width: 220px;
    height: 154px;
    margin: auto;
}

.section-product .thumb-wrap .thumb-img > img {
    width: 100%;
    height: auto;
}

.section-product .thumb-wrap .compare {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 5;
}

.section-product .compare .check-item .icon-holder {
    left: auto;
    right: 6px;
}

.section-product .compare .check-item .labelling {
    padding-left: 6px;
    padding-right: 26px;
}

.section-product .compare .check-item .labelling .label-txt {
    font-size: 12px;
    color: #333;
}

.suggest-group {
    position: absolute;
    display: block;
    top: 0;
    left: 9px;
}

.suggest-group > li {
    display: inline-block;
    font-size: 0;
    line-height: initial;
    float: left;
}

.suggest-group > li + li {
    margin-left: 6px;
}

.suggest-group .suggest-item {
    position: relative;
    display: inline-block;
}

.suggest-group .suggest-item.deal {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    height: 36px;
    line-height: 1.2;
    padding: 0 12px;
    vertical-align: middle;
    font-size: 11px;
    text-align: center;
    color: #fe6a2b;
    border-radius: 18px;
    border: 1px solid #fe6a2b;
}

.suggest-group .suggest-item.new {
    width: 36px;
    height: 46px;
    background-image: url("../images/common/card-type-new.svg");
    background-size: contain;
}

.suggest-group .suggest-item.best {
    width: 36px;
    height: 46px;
    background-image: url("../images/common/card-type-best.png");
    background-size: contain;
}

.section-product.goods .suggest-group .suggest-item.best {
    background-image: url("../images/common/card-type-best2.png");
}

.section-product .thumb-wrap .out-of-stock {
    position: absolute;
    display: inline-block;
    left: 9px;
    bottom: 6px;
    font-size: 11px;
    pointer-events: none;
    z-index: 5;
}

.section-product .thumb-wrap .benefit-wrap {
    position: absolute;
    right: 12px;
    top: 10px;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.section-product .thumb-wrap .benefit-wrap.third-benefit {
    width: 88px;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.section-product .thumb-wrap .compare ~ .benefit-wrap {
    top: 38px;
}

.section-product .thumb-wrap .benefit-wrap .benefit {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 4px 0;
    border-radius: 100%;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 110%;
    background-color: #8f8f8f;
}

.section-product .thumb-wrap .benefit-wrap .benefit + .benefit {
    margin-top: 4px;
}

.section-product .thumb-wrap .benefit-wrap.third-benefit .benefit {
    margin: 0 0 4px 4px;
}

.section-product .thumb-wrap .overlap-status {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 6px 6px 0 0;
    z-index: 4;
}

.section-product .thumb-wrap .overlap-status .overlap-status-inner {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.section-product .thumb-wrap .overlap-status .overlap-status-inner > .btn-item {
    opacity: .8;
    pointer-events: none;
}

.section-product .thumb-wrap .benefit-wrap .benefit.safe {
    background-color: #CBB58F;
}

.section-product .thumb-wrap .benefit-wrap .benefit.tooltip-container.safe .tooltip-header {
    color: #CBB58F;
}

.section-product .thumb-wrap .benefit-wrap .benefit.hotel {
    background-color: #FFA200;
}

.section-product .thumb-wrap .benefit-wrap .benefit.tooltip-container.hotel .tooltip-header {
    color: #FFA200;
}

.section-product .thumb-wrap .benefit-wrap .benefit.reservation {
    background-color: #FE6A2B;
}

.section-product .thumb-wrap .benefit-wrap .benefit.tooltip-container.reservation .tooltip-header {
    color: #FE6A2B;
}

.section-product .info {
    position: relative;
    height: 172px;
    margin: 15px 12px;
    padding-bottom: 36px;
}

.section-product .title-wrap .point-group {
    position: relative;
    display: flex;
    align-items: center;
}

.section-product .point-group .point {
    margin-right: 3px;
    padding: 0 7px;
    border-radius: 3px;
    color: #fff;
    line-height: 17px;
    font-size: 9px;
}

.section-product .point-group .driving-icon {
    position: absolute;
    right: 0;
    top: 50%;
    height: 12px;
    margin-top: -6px;
    font-size: 10px;
    line-height: 100%;
}

.section-product .point-group .driving-icon::before {
    content: "";
    display: block;
    float: left;
    width: 27px;
    height: 12px;
    margin-right: 8px;
    background-size: 27px 12px;
    background-position: left 50%;
    background-repeat: no-repeat;
}

.section-product .point-group .driving-icon.front-driving::before {
    background-image: url("../images/common/front-driving-icon.svg");
}

.section-product .point-group .driving-icon.back-driving::before {
    background-image: url("../images/common/back-driving-icon.svg");
}

.section-product .point-group .driving-icon::after {
    content: "";
    display: block;
    clear: both;
}

.section-product .point-group .comport {
    background-color: #fe6a2b;
}

.section-product .title-wrap .name-group {
    display: flex;
    align-self: flex-start;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

.section-product .title-wrap .name {
    position: relative;
    padding-right: 12px;
    line-height: 20px;
    max-width: calc(100% - 90px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
}

.section-product .name img {
    display: block;
    width: 100% !important;
    max-width: 230px;
}

.section-product .name-group .size {
    position: relative;
    display: inline-block;
    padding-left: 12px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.section-product .title-wrap .size::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 1px;
    height: 16px;
    background-color: #333;
}

.section-product .info .price-wrap {
    margin: 10px 0 18px;
}

.section-product .sale .discount {
    display: inline-block;
    padding-right: 5px;
    white-space: nowrap;
    font-weight: 500;
    line-height: 20px;
    font-size: 14px;
}

.section-product .discount em {
    display: inline-block;
    padding-right: 1px;
    font-size: 16px;
    vertical-align: -1px;
    line-height: 20px;
}

.section-product .price-wrap del {
    display: inline-block;
    padding-right: 10px;
    white-space: nowrap;
    line-height: 20px;
    font-size: 12px;
}

.section-product del em {
    display: inline-block;
    padding-right: 1px;
    font-size: 12px;
    vertical-align: -1px;
    line-height: 20px;
}

.section-product .smartprice-wrap .price {
    display: inline-block;
    padding-right: 6px;
    white-space: nowrap;
    font-weight: 500;
    line-height: 26px;
    font-size: 14px;
    color: #fe6a2b;
}

.section-product .price strong {
    display: inline-block;
    padding: 0 1px 0 4px;
    font-size: 16px;
    vertical-align: -1px;
    line-height: 26px;
    font-weight: 500;
}

.section-product .smartprice-wrap .months {
    display: inline-block;
    padding-right: 10px;
    color: #a0a6af;
    font-size: 12px;
    line-height: 26px;
}

.section-product .smartprice-wrap .info-button {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    background-color: #fff;
    font-size: 0;
    line-height: 26px;
}

.section-product .smartprice-wrap .info-button::before {
    content: "";
    display: inline-block;
    width: 68px;
    height: 20px;
    background-image: url("../images/common/smart_pay_logo.svg");
    background-size: 68px 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    vertical-align: middle;
    margin-right: 2px;
}

.section-product .info-button .line-icons {
    vertical-align: middle;
}

.section-product .info-foot-wrap {
    position: relative;
    display: block;
    height: auto;
    padding: 5px 90px 5px 12px;
    border-top: 1px solid #f2f2f7;
}

.section-product .info-foot-wrap .description-wrap {
    display: block;
    width: auto;
    padding-right: 12px;
    color: #656565;
}

.section-product .info-foot-wrap .description-wrap .description {
    font-size: 11px;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.section-product .info-foot-wrap .filter-wrap {
    display: flex;
}

.section-product .info-foot-wrap .line-icons {
    line-height: 20px;
    height: 20px;
    margin-right: 5px;
    cursor: pointer;
}

.section-product .info-foot-wrap .filter {
    position: relative;
    font-size: 11px;
    padding-right: 8px;
    color: #656565;
}

.section-product .info-foot-wrap .filter::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 3px;
    width: 1px;
    height: 12px;
    background-color: #656565;
    transform: translateY(-50%);
}

.section-product .info-foot-wrap .filter:last-child {
    padding-right: 0;
}

.section-product .info-foot-wrap .filter:last-child::after {
    content: none;
}

.section-product .info-foot-wrap .star-wrap {
    position: absolute;
    top: 50%;
    right: 12px;
    font-size: 11px;
    white-space: nowrap;
    transform: translateY(-50%);
}

.section-product .info-foot-wrap .star-wrap::before {
    display: inline-block;
    content: '\e933';
    font-family: 'LineIcons', sans-serif;
    width: 10px;
    height: 10px;
    font-size: 10px;
    line-height: 10px;
    color: #ffa200;
}

.section-product .button-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 36px;
    z-index: 1;
}

.section-product .button-wrap.disabled {
    pointer-events: none;
    opacity: .3;
}

.section-product .unit-group button {
    position: relative;
    padding: 7px;
    background-color: #fff;
}

.section-product .unit-group button:before {
    position: absolute;
    content: '';
    display: none;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.section-product .unit-group button:hover:before {
    display: block;
}

.section-product .unit-group button:active:before {
    display: block;
    background-color: rgba(0, 0, 0, 0.12);
}

.section-product .button-wrap .cart-button {
    margin-right: 5px;
}

/* section-product goods - 경정비 */
.section-product.goods .thumb-wrap .thumb-img {
    width: 154px;
    height: 154px;
}

.section-product.goods .title-wrap .name {
    max-width: 100% !important;
}

.section-product.goods .info-foot-wrap .filter-wrap .filter {
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.section-product.goods .info {
    height: 136px;
}

.section-product.goods .title-wrap .name::after {
    content: none;
}

/* 반짝블랙딜 내부의 경정비 카드 높이 변경 */
/*.deal-store .section-product.goods .info-foot-wrap .description-wrap > ul > li:not(:first-child) { display: none; }*/
.deal-store .section-product.goods .info {
    height: 172px;
}

.deal-store .section-product .info-foot-wrap {
    position: relative;
    height: 51px;
}

.deal-store .section-product .info-foot-wrap .description-wrap {
    position: absolute;
    top: 50%;
    left: 12px;
    width: calc(100% - 12px - 90px);
    transform: translateY(-50%);
}

.deal-store .section-product .info-foot-wrap .description-wrap > ul > li .description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px;
}

.deal-store ul.shop-items-wrap > li {
    position: relative;
    padding-bottom: 20px;
}

.deal-store ul.shop-items-wrap > li > .excla-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.excla-info {
    position: relative;
    font-size: 11px;
    color: #fe6a2b;
    line-height: 16px;
    font-weight: 300;
    margin-top: 4px;
    padding-left: 20px;
}

.excla-info .info-circle-inv {
    position: absolute;
    top: 0;
    left: 0;
    color: #5b6068;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=flag -----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
ul.flags > li {
    display: flex;
    flex-direction: row-reverse;
}

ul.flags.third-benefit {
    width: 88px;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

ul.flags > li + li {
    margin-top: 4px;
}

ul.flags.third-benefit > li + li {
    margin: 0 0 4px 4px;
}

.flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    background-color: #2A3138;
    line-height: 1;
}

/*.flag.flag-safe { background-color: #cbb58f; } !* 안심서비스 *!
.flag.flag-smart { background-color: #ffa200; } !* 스마트케어 *!
.flag.flag-superior-store { background-color: #f88c27; } !* 우수매장 *!
.flag.flag-smart-pickup { background-color: #7abec2; } !* 스마트픽업 *!
.flag.flag-imported-car { background-color: #008bec; } !* 수입차정비 *!
.flag.flag-hotel{} !* 아직 정의 되지 않음 *!*/
.flag.flag-safe {
    background-color: #cbb58f;
}

/* 안심서비스 */
.flag.flag-smart {
    background-color: #ffa200;
}

/* 스마트케어 */
.flag.flag-superior-store {
    background-color: #fe6a2b;
}

/* !* 우수매장 *!*/
.flag.flag-smart-pickup {
    background-color: #5eb0b5;
}

/* !* 스마트픽업 *!*/
.flag.flag-local-deal {
    background-color: #cbb58f;
}

/* !* 우리동네딜  *!*/
.flag.flag-hotel {
    background-color: #FFA200;
}

/* 타이어 호텔 서비스 */
.flag.flag-reservation {
    background-color: #FE6A28;
}

/* 방문예약 */
.flag.flag-imported-car {
    background-color: #008bec;
}

/* 수입차정비 */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=store location list---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*  20220316// */
.store-location-list {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    padding: 40px 0;
    list-style: none;
}

/*  //20220316 */
.store-location-list > li {
    display: block;
    width: 50%;
    height: auto;
    float: left;
}

.store-location-list > li:nth-of-type(2n+1) {
    padding-right: 20px;
    clear: both;
}

.store-location-list > li:nth-of-type(2n) {
    padding-left: 20px;
}

.store-location-list-item {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 208px;
    padding: 24px 0;
    float: left;
}

/* 20211213 start //  */
.store-location-list-item .info-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-left: 185px;
}

.store-location-list-item .info-area .info {
    position: relative;
    margin-right: 28px;
    padding-right: 28px;
}

/* // 20211213 end */
.store-location-list-item .info-area .thumb-position {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: auto;
}

.store-location-list-item .info-area .thumb-area {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background-color: #E9E9E9;
    border-radius: 4px;
    background-size: contain;
    background-position: bottom;
    background-image: url("../images/common/shop_default.png");
}

/* 16:9 */
.store-location-list-item .info-area .thumb-area:before {
    display: block;
    content: '';
    padding-top: 56.25%;
}

.store-location-list-item .info-area .thumb-area.ration-16x9:before {
    padding-top: 56.25%;
}

.store-location-list-item .info-area .thumb-area.ration-1x1:before {
    padding-top: 100%;
}

.store-location-list-item .info-area .thumb-area.ration-3x2:before {
    padding-top: 66.6666666667%;
}

.store-location-list-item .info-area .thumb-area.ration-4x3:before {
    padding-top: 75%;
}

.store-location-list-item .info-area .thumb-area > img {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}


/* 20230130 start */
.store-location-list-item .info-area .thumb-area .feature-badge-wrap {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    padding: 8px;
    padding-top: 48px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.store-location-list-item .info-area .thumb-area .feature-badge-wrap:empty { background: transparent; }

.store-location-list-item .info-area .thumb-area .feature-badge-wrap .feature-badge {
    display: inline-block;
    width: auto;
    height: 20px;
}
.store-location-list-item .info-area .thumb-area .feature-badge-wrap .feature-badge[src*="allmyt.svg"] { float: left; }
.store-location-list-item .info-area .thumb-area .feature-badge-wrap .feature-badge[src*="ev.svg"] { float: right; }
/* 20230130 end */


.store-location-list-item .info-area .info .title {
    font-size: 18px;
}

.store-location-list-item .info-area .info ul.meta > li {
    display: inline-block;
}

.store-location-list-item .info-area .info ul.meta > li > span {
    vertical-align: middle;
}

.store-location-list-item .info-area .info ul.meta > li:after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 10px;
    vertical-align: middle;
    background-color: #E9E9E9;
    margin: 0 8px;
}

.store-location-list-item .info-area .info ul.meta > li:last-child:after {
    content: none;
}

/* 20211213 start //  */
.store-location-list-item .info-area .info .description {
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* // 20211213 end */
.store-location-list-item .action-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-left: 120px;
    margin-top: 12px;
}

.store-location-list-item .action-area .left {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.store-location-list-item .action-area .left ul li {
    display: inline-block;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Range Slider Component------------------------------------------------------------*/
/*=Require rangeslider.js------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.range-slider-component,
.range-slider-component-fill {
    display: block;
    border-radius: 2px;
}

.range-slider-component {
    background: #5eb0b5;
    position: relative;
    transition: background-color .14s ease-in-out;
}

.range-slider-component .overlap-break-under {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0;
    background-image: url("../images/common/range-slider-under-break-dot.svg");
    background-repeat: repeat-x;
    background-color: #f9f9fa;
    z-index: 1;
}

.range-slider-component .overlap-break-under:before {
    display: inline-block;
    content: '';
    width: 12px;
    height: 100%;
    background-color: #d9dbdc;
    border-radius: 2px;
}

.range-slider-component .overlap-break-under:after {
    display: inline-block;
    content: '';
    width: calc(100% - 12px);
    height: 100%;
}

.range-slider-component .overlap-break {
    position: absolute;
    background-color: #ffffff;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    z-index: 1;
}

.range-slider-component-horizon {
    height: 4px;
    width: 100%;
}

.range-slider-component-vertical {
    width: 4px;
    min-height: 150px;
    max-height: 100%;
}

.range-slider-component-disabled {
    opacity: 0.4;
}

.range-slider-component-fill {
    background: #ff8400;
    position: absolute;
}

.range-slider-component-horizon .range-slider-component-fill {
    top: 0;
    height: 100%;
}

.range-slider-component-vertical .range-slider-component-fill {
    bottom: 0;
    width: 100%;
}

.range-slider-component-handle {
    background: white;
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    transition: transform .14s ease-in-out;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.16);
    z-index: 10;
}

.range-slider-component-handle:active,
.range-slider-component-active .range-slider-component-handle {
    transform: scale(1.2);
}

.range-slider-component-horizon .range-slider-component-handle {
    top: -8px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

.range-slider-component-vertical .range-slider-component-handle {
    left: -8px;
    touch-action: pan-x;
    -ms-touch-action: pan-x;
}

.range-slider-component.transition-start .range-slider-component-handle,
.range-slider-component.transition-start .range-slider-component-fill {
    transition: all .14s ease-in-out;
}

.range-slider-component.on-all {
    background-color: #d9dbdc;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=box ------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.box {
    position: relative;
    display: block;
    padding: 12px;
}

.box.box-border {
    border: 1px solid #d9dbdc;
}

.box.box-radius {
    border-radius: 4px;
}

.box.box-gray {
    background-color: #f2f2f7;
}

.box.box-white {
    background-color: #ffffff;
}

.box.box-overflow-y {
    max-height: 200px;
    overflow-y: auto;
}

.box.box-overflow-y {
    max-height: 200px;
    overflow-y: auto;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=list-guide-bar--------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.list-guide-bar {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #d9dbdc;
}

.list-guide-bar .guide-text {
    line-height: 32px;
}

.list-guide-bar .tools {
    position: absolute !important;
    display: inline-block;
    top: 50% !important;
    left: auto;
    right: 0;
    width: auto;
    transform: translateY(-50%);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=tab-item--------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.tab-item {
    width: 100%;
    background: #fff;
    padding: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
    left: 0;
    overflow: hidden;
    font-size: 0;
    z-index: 800;
}

.tab-item.no-sticky {
    position: relative;
    top: auto;
    z-index: auto;
}

.tab-item.on-modal-with-header {
    position: fixed;
    top: 48px;
    z-index: 800;
}

.tab-item.tab-item-no-border {
    overflow: visible;
}

.tab-item.tab-item-no-border:before {
    content: none;
}

.tab-item.tab-item-no-border .indicator {
    bottom: -1px;
}

.tab-item.tab-item-light > a,
.tab-item.tab-item-light > a.on {
    font-weight: 400;
}

.tab-item:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #d9dbdc;
    position: absolute;
    left: 0;
    bottom: 0;
}

.tab-item > a {
    display: inline-block;
    text-decoration: none;
    width: auto;
    height: inherit;
    line-height: 60px;
    text-align: center;
    color: #5b6068;
    font-size: 18px;
    font-weight: 400;
    padding: 0 20px;
    position: relative;
}

.tab-item.size-s > a {
    line-height: 32px;
    font-size: 14px;
}

.tab-item.size-xs > a {
    line-height: 32px;
    font-size: 12px;
}

.tab-item.size-m > a {
    line-height: 48px;
    font-size: 16px;
}

.tab-item.size-s .extra {
    height: 32px;
    line-height: 32px;
}

.tab-item.size-m .extra {
    height: 48px;
    line-height: 48px;
}

.tab-item:not(.on-layer) > a:active {
    background: rgba(0, 0, 0, 0.05);
}

.tab-item > a.on {
    color: #fe6a2b;
    font-weight: 500;
}

.tab-item > a.disabled {
    color: #e3e5e8;
    pointer-events: none;
}

.tab-item > .indicator {
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #fe6a2b;
    min-width: 0;
    transition: left ease-in-out .16s, width ease-in-out .16s;
}

.tab-item .extra {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    font-size: 0;
    transform: translateY(-50%);
}

.tab-item .extra > * {
    display: inline-block;
    vertical-align: middle;
}

.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(0) {
    width: 100%;
}

.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(2),
.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(2) ~ a {
    width: 50%;
}

.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(3),
.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(3) ~ a {
    width: 33.33333%;
}

.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(4),
.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(4) ~ a {
    width: 25%;
}

.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(5),
.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(5) ~ a {
    width: 20%;
}

.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(6),
.tab-item.list-size-equal > a:first-of-type:nth-last-of-type(6) ~ a {
    width: 16.66666667%;
}

.tab-contents {
    position: relative;
    display: none;
    width: 100%;
    height: auto;
}

.tab-contents.on {
    display: block;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=tabs--------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.tabs {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    padding: 6px;
    background-color: #f2f2f7;
}

.tabs-inner {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    font-size: 0;
}

.tabs .grid-list > li {
    margin-bottom: 0;
    font-size: 0;
}

.tabs .tabs-item {
    display: inline-block;
    width: auto;
    font-size: 14px;
    padding: 10px 12px;
    background-color: transparent;
}

.tabs .tabs-item .label {
    position: relative;
    color: #a0a6af;
    font-size: 16px;
    z-index: 2;
    transition: all .16s ease-in-out;
}

.tabs .tabs-item.on .label {
    color: #fe6a2b;
    font-weight: 500;
}

.tabs .indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 4px;
    background-color: #ffffff;
    transition: left ease-in-out .16s, width ease-in-out .16s;
    z-index: 1;
}

.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(0) {
    width: 100%;
}

.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(2),
.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(2) ~ .tabs-item {
    width: 50%;
}

.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(3),
.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(3) ~ .tabs-item {
    width: 33.33333333%;
}

.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(4),
.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(4) ~ .tabs-item {
    width: 25%;
}

.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(5),
.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(5) ~ .tabs-item {
    width: 20%;
}

.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(6),
.tabs.list-size-equal .tabs-item:first-of-type:nth-last-of-type(6) ~ .tabs-item {
    width: 16.66666667%;
}

.tabs-contents {
    position: relative;
    display: none;
    width: 100%;
    height: auto;
}

.tabs-contents.on {
    display: block;
}

.tabs.tabs-simple {
    padding: 0;
    background-color: transparent;
}

.tabs.tabs-simple .tabs-item + .tabs-item {
    margin-left: 8px;
}

.tabs.tabs-simple .tabs-item {
    width: 184px !important;
    border: 1px solid #D9DBDC;
    background-color: #ffffff;
    line-height: 1;
    padding: 11px 0;
    border-radius: 4px;
    color: #5B6068;
}

.tabs.tabs-simple .tabs-item.on {
    color: #fe6a2b;
    border: 1px solid #fe6a2b;
}

.tabs.tabs-simple .indicator {
    display: none;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=sort-console----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.sort-console {
    width: 100%;
    height: auto;
    line-height: 100%;
    font-size: 0;
    border-bottom: 1px solid #d9dbdc;
}

.sort-console:after {
    content: '';
    display: table;
    clear: both;
}

.sort-item {
    display: inline-block;
    width: auto;
    background: transparent;
    padding: 0;
    position: relative;
    overflow: visible;
    font-size: 0;
    float: right;
}

.sort-item > button {
    appearance: none;
    display: inline-block;
    text-decoration: none;
    width: auto;
    height: inherit;
    line-height: 32px;
    text-align: center;
    color: #2a3138;
    font-size: 14px;
    font-weight: 400;
    padding: 0 12px;
    position: relative;
    border: none;
    outline: none;
    background: transparent;
}

.sort-item > button.on {
    color: #fe6a2b;
    font-weight: 500;
}

.sort-item > button:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #fe6a2b;
    opacity: 1;
    position: absolute;
    top: auto;
    left: 0;
    bottom: -1px;
    transition: all 0.1s;
    transform: translateX(0) translateY(0) scale(0, 1);
    z-index: 1;
}

.sort-item > button.on:after {
    transition: all 0.2s;
    transform: translateX(0) translateY(0) scale(1, 1);
}

.sort-result {
    line-height: 32px;
    float: left;
    font-size: 14px;
    font-weight: 400;
}

.sort-result em {
    color: #fe6a2b;
    font-weight: 500;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=filter-console--------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.filter-console {
    width: 100%;
    height: auto;
    line-height: 100%;
    font-size: 0;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=page-header-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.page-header {
    display: block;
    width: 100%;
    height: 60px;
    overflow: visible;
    position: relative;
    padding: 0 0 20px;
    border-bottom: 1px solid #d9dbdc;
    font-size: 0;
    appearance: none;
    text-decoration: none;
    text-align: left;
    background: transparent;
    color: #2a3138;
    cursor: default;
    font-size: 0;
}

.page-header h1 {
    display: inline-block;
    width: auto;
    height: 40px;
    color: #2a3138;
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
}

.page-header .breadcrumb {
    display: inline-block;
    width: auto;
}

.page-header .breadcrumb > li {
    padding: 0 16px;
    line-height: 40px;
    font-size: 16px;
    color: #5b6068;
    overflow: visible;
}

.page-header .breadcrumb > li.on {
    color: #fe6a2b;
}

.page-header .breadcrumb > li + li:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #a0a6af;
    border-right: 1px solid #a0a6af;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateX(-75%) translateY(-50%) rotate(45deg);
}

.page-header .tools {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    height: 40px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=section---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
section {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

section:after {
    content: '';
    display: table;
    clear: both;
}

.section-header {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 16px 0;
    border-bottom: 1px solid #d9dbdc;
    font-size: 0;
    appearance: none;
    text-decoration: none;
    text-align: left;
    background: transparent;
    color: #2a3138;
    cursor: default;
}

a.section-header:hover,
button.section-header:hover {
    background: rgba(0, 0, 0, 0.05);
}

.section-header.section-header-sm {
    border-bottom: initial;
}

.section-header.section-header-sm h3 {
    font-size: 14px;
}

.section-header h2 {
    display: inline-block;
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
    vertical-align: middle;
}

.section-header h2.txt-w300 {
    font-weight: 300;
}

.section-header h2.txt-w400 {
    font-weight: 400;
}

.section-header h2.txt-w500 {
    font-weight: 500;
}

.section-header h3 {
    display: inline-block;
    font-size: 20px;
    line-height: 24px;
    vertical-align: middle;
}

.section-header h3.txt-18 {
    font-size: 18px;
}

.section-header h3.txt-w300 {
    font-weight: 300;
}

.section-header h3.txt-w400 {
    font-weight: 400;
}

.section-header h3.txt-w500 {
    font-weight: 500;
}

.section-header h4 {
    display: inline-block;
    font-size: 18px;
    line-height: 24px;
    vertical-align: middle;
}

.section-header > span {
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
}

.section-header .extra {
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    font-size: 0;
    transform: translateY(-50%);
}

.section-header .extra > * {
    display: inline-block;
    vertical-align: middle;
}

.section-contents-area {
    padding: 0 20px;
}

.section-gray {
    background-color: #f9f9fa;
}

.section-title-bar {
    display: block;
    width: 100%;
    height: auto;
    padding: 20px 0;
}

.section-title-bar .title {
    font-size: 24px;
}

.section-title-bar .description {
    font-size: 16px;
    color: #5b6068;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=membership integrated ------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.membership-integrated {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

/* 회원 통합 안내 */
.membership-integrated .integrated-info {
    display: block;
    width: 100%;
    height: auto;
    padding: 30px 0;
}

.membership-integrated .integrated-info p {
    font-size: 18px;
}

.membership-integrated .integrated-info .bi-img {
    display: inline-block;
    height: 22px;
    width: auto;
}

.membership-integrated .integrated-service {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 16px;
}

.membership-integrated .integrated-service h4 {
    text-align: center;
    font-weight: 500;
}

.membership-integrated .integrated-service .integrated-service-unit {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 14px 8px;
    font-size: 12px;
}

.membership-integrated .integrated-service .integrated-service-unit img {
    display: inline-block;
    height: 28px;
    width: auto;
}

.membership-integrated .list-style-disc > *:before {
    color: #fe6a2b;
    width: 14px;
    height: 14px;
    transform: scale(0.5);
    font-size: 12px;
    left: 0;
    top: 0;
}

.membership-integrated .list-style-disc li {
    padding-left: 14px;
    font-size: 12px;
    margin-bottom: 8px;
}

.membership-integrated .list-style-disc li:last-of-type {
    margin-bottom: initial;
}

.membership-integrated .complete {
    padding: 80px 0;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=terms info -----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.terms-info {
    display: block;
    width: 100%;
    height: auto;
    font-size: 12px;
    color: #5b6068;
    padding: 0 20px;
    text-align: justify-all;
}

.terms-info a {
    text-decoration: underline;
    color: #2A3138;
    font-weight: 500;
}

.terms-info .terms-box-wrap {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 160px;
    overflow-y: auto;
    background-color: #f9f9fa;
    border: 1px solid #d9dbdc;
    padding: 10px;
}

.terms-inf .terms-box-wrap .terms-box {
    position: relative;
    display: block;
    font-size: 12px;
    color: #5b6068;
    letter-spacing: -0.6px;
}

.terms-info .terms-box-wrap .notice {
    text-align: center;
    display: block;
    width: 100%;
    font-size: 12px;
    height: auto;
    color: #a0a6af;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=stepper---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
ul.stepper {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    /*background-color: #f9f9fa;*/
    padding: 16px 0;
}

ul.stepper li {
    position: relative;
    padding: 8px 8px;
    text-align: center;
}

ul.stepper li:before,
ul.stepper li:after {
    position: absolute;
    content: '';
    top: 17px;
    width: 50%;
    height: 1px;
    background-color: #e5e5e5;
}

ul.stepper li:before {
    left: 0;
}

ul.stepper li:after {
    right: 0;
}

ul.stepper li label {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    color: #a0a6af;
}

ul.stepper li.on label {
    color: #2A3138;
}

ul.stepper li .stepper-dot {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #e5e5e5;
    border-radius: 100%;
    z-index: 2;
    margin-bottom: 4px;
}

ul.stepper li .stepper-dot:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    border: 4px solid #ffffff;
    background-color: #e5e5e5;
    transform: translate(-50%, -50%);
}

ul.stepper li.on .stepper-dot {
    z-index: 1;
}

/*ul.stepper li.on:before,*/
/*ul.stepper li.on:after { z-index: 2; }*/
ul.stepper li.on .stepper-dot,
ul.stepper li.on .stepper-dot:before,
ul.stepper li.on:before,
ul.stepper li.on:after,
ul.stepper li.on + li:before {
    background-color: #5eb0b5;
}

ul.stepper li:first-of-type:before,
ul.stepper li:last-of-type:after {
    content: initial;
}

ul.stepper li:first-of-type .stepper-dot:after {
    border-left-width: 0;
}

ul.stepper li:last-of-type .stepper-dot:after {
    border-right-width: 0;
}

ul.stepper li.done:before,
ul.stepper li.done:after,
ul.stepper li.done + li:before {
    background-color: #5eb0b5;
}

ul.stepper li.done .stepper-dot {
    background-color: #5eb0b5;
}

ul.stepper li.done .stepper-dot:after {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fe6a2b;
    content: '\e912';
    font-family: 'LineIcons', sans-serif;
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    transform: translate(-50%, -50%);
}

ul.stepper li.done .stepper-dot:before {
    background-color: #ffffff;
}

ul.modal-stepper {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    list-style: none;
    border-bottom: 1px solid #d9dbdc;
    background: #fff;
}

ul.modal-stepper > li {
    height: 48px;
    line-height: 48px;
    font-size: 0;
    padding: 0 8px;
}

ul.modal-stepper > li:not(:last-of-type):after {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    /* border-left: 1px solid #d9dbdc; */
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) skew(-20deg);
    pointer-events: none;
}

ul.modal-stepper > li .btn-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 12px;
}

ul.modal-stepper > li .btn-item .line-icons,
ul.modal-stepper > li .btn-item .label-txt {
    transition: all .16s ease-in-out;
}

ul.modal-stepper > li .btn-item:hover:before {
    display: none;
}

ul.modal-stepper > li.yet .btn-item {
    pointer-events: none;
}

ul.modal-stepper > li.yet .btn-item .line-icons {
    color: #d9dbdc;
}

ul.modal-stepper > li.yet .btn-item .label-txt {
    color: #a0a6af;
}

ul.modal-stepper > li.act .btn-item {
    pointer-events: none;
}

ul.modal-stepper > li.act .btn-item .line-icons {
    color: #fe6a2b;
}

/*ul.modal-stepper > li.done .btn-item .line-icons { color: #a0a6af; }*/
ul.modal-stepper > li.done .btn-item .line-icons {
    color: #2a3138;
}

ul.modal-stepper.all-done > li .btn-item {
    pointer-events: none;
}

ul.modal-stepper > li .btn-item .label-txt {
    text-align: left;
}

.btn-item > .label-txt.two-lines-cut {
    overflow: hidden;
    display: -webkit-inline-box;
    white-space: normal;
    word-break: break-all;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

/* step 이동 가능하게 */
ul.modal-stepper.click-able > li.done .btn-item {
    pointer-events: auto;
    background-color: transparent;
    transition: all .16s ease-in-out;
}

ul.modal-stepper.click-able > li.done .btn-item:hover .line-icons {
    color: #fe6a2b;
}

ul.modal-stepper.click-able > li.done .btn-item:hover .label-txt {
    color: #2A3138;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=my smart care service-------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mycar-management {
    width: 100%;
    height: auto;
    overflow: visible;
    position: relative;
    padding-left: 40px;
    padding-right: 370px;
}

.mycar-management .mycar-summary .mycar-summary-cont {
    height: auto;
    min-height: 330px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-img {
    width: 500px;
    height: 300px;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: visible;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-img.empty:before {
    content: '';
    display: block;
    width: 620px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #e7e7e7;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(236, 237, 237, 0.2));
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-img img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info {
    margin-top: 16px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-number {
    line-height: 56px;
    font-size: 0;
    position: relative;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-number .thumb-holder {
    display: inline-block;
    vertical-align: middle;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d9dbdc;
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0% 50%;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-number .number-txt {
    font-size: 24px;
    vertical-align: middle;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-number > * + * {
    margin-left: 12px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-number .btn-item {
    padding: 0 8px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-number .btn-item.btn-primary:disabled {
    opacity: 1;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-model {
    max-width: 250px;
    margin-top: 20px;
    font-size: 18px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .car-model .engine-year {
    color: #5b6068;
    font-size: 16px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .tire-size {
    margin-top: 12px;
    font-size: 18px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info ul.btn-group {
    margin-top: 8px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info ul.btn-group .btn-modify {
    height: 24px;
    line-height: 22px;
    border-radius: 12px;
    padding: 0 10px;
}

.mycar-management .mycar-summary .mycar-summary-cont .mycar-info ul.btn-group .btn-modify .label-txt {
    font-size: 14px;
}

/*.mycar-management .mycar-summary .mycar-summary-cont .mycar-info .btn-modify {
    margin-top: 20px;
}*/
.mycar-management .mycar-summary .mycar-summary-cont .mycar-info hr {
    display: inline-block;
    width: 40px;
    height: 0;
    border: none;
    border-top: 2px solid #fe6a2b;
    padding: 0;
    margin: 0;
    margin-bottom: 12px;
}

.mycar-management .mycar-list-wrap {
    width: 272px;
    height: auto;
    overflow: visible;
    position: absolute;
    top: 0;
    right: 0;
}

.mycar-management .mycar-list-wrap .mycar-list-console {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 16px 0;
    border: 1px solid #d9dbdc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper {
    height: 222px;
    overflow: visible;
    position: relative;
    padding-bottom: 30px;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-wrapper {
    flex-direction: column;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-slide {
    width: 100%;
    height: auto;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-slide .radio-item {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 0;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-slide .radio-item .labelling {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    padding: 12px 16px 12px 108px;
    border-radius: 0;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-slide .radio-item .icon-holder {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-slide .radio-item .labelling .thumb-holder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d9dbdc;
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0% 50%;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-slide .radio-item .labelling .label-txt {
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-pagination {
    width: 100%;
    bottom: 8px;
    left: 0;
}

.mycar-management .mycar-list-wrap .mycar-list-console .mycar-list-swiper .swiper-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
}

.mycar-management .mycar-list-wrap .mycar-list-console .btn-wrap {
    padding: 10px 40px 4px;
    position: relative;
}

.mycar-management .mycar-list-wrap .mycar-list-console .btn-wrap:after {
    content: '';
    display: block;
    width: calc(100% - 80px);
    height: 0;
    border-top: 1px solid #d9dbdc;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.mycar-management .mycar-list-wrap .mycar-list-console .btn-wrap .btn-add-car {
    padding-left: 64px;
    padding-right: 20px;
}

.mycar-management .mycar-list-wrap .mycar-list-console .btn-wrap .btn-add-car .line-icons {
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 50%;
    font-size: 24px;
    background: #2a3138;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=smart-care-coupon-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.smart-care-coupon-section {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 48px;
}

.smart-care-coupon-section .coupon-list {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
    border-left: 1px solid #d9dbdc;
    border-right: 1px solid #d9dbdc;
    padding: 20px 0;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper {
    width: 100%;
    height: auto;
    overflow: visible;
    position: relative;
    padding: 0 20px;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper > .swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: -16px;
    z-index: 50;
    height: 2px;
    width: 98%;
    background: #f2f2f7;
    border-radius: 0;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-scrollbar-drag {
    height: 6px;
    width: 100%;
    position: relative;
    background: #d9dbdc;
    border-radius: 3px;
    left: 0;
    top: -2px;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide {
    width: 260px;
    height: auto;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon {
    display: block;
    width: 100%;
    height: 152px;
    overflow: hidden;
    text-decoration: none;
    background: #f5ecdd;
    padding: 10px;
    cursor: pointer;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
    padding: 16px 24px;
    border-radius: 8px;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon:hover .coupon-cont {
    background: rgba(255, 255, 255, 0.8);
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont:before,
.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #f5ecdd;
    border-radius: 50%;
    position: absolute;
    top: 50%;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont:before {
    left: 0;
    transform: translateX(-50%) translateY(-50%);
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont:after {
    right: 0;
    transform: translateX(50%) translateY(-50%);
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont h5 {
    color: #fe6a2b;
    font-size: 20px;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont h5 em {
    font-size: 36px;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont p {
    margin-top: 12px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-care-coupon-section .coupon-list .smart-care-coupon-swiper .swiper-slide .smart-care-coupon .coupon-cont .badge {
    margin-top: 16px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=mycar-check-overview--------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mycar-check-overview {
    width: 520px;
    float: left;
}

.mycar-check-overview .mycar-check-list {
    padding: 0;
}

.mycar-check-overview .mycar-check-list li {
    width: 50%;
    float: left;
    padding: 0 4px;
    margin-bottom: 8px;
}

.mycar-check-overview .mycar-check-list li.two-columns {
    width: 100%;
}

/*.mycar-check-overview .mycar-check-list li:nth-of-type(1),
.mycar-check-overview .mycar-check-list li:nth-of-type(2) {
    margin-top: 0;
}*/
.mycar-check-overview .mycar-check-list li .btn-item.btn-ol {
    text-align: right;
    padding: 0 16px;
    height: auto;
    text-align: right;
    font-size: 0;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .upper,
.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .lower {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    font-weight: 400;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .upper {
    height: 112px;
    overflow: hidden;
    padding: 8px;
    display: table;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .lower {
    border-top: 1px solid #d9dbdc;
    padding: 20px 0;
    margin: 0;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .line-icons {
    position: absolute;
    top: 50%;
    left: 16px;
    color: #2a3138;
    margin: 0;
    transform: translateY(-50%);
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .d-day {
    display: table-cell;
    vertical-align: middle;
    line-height: 24px;
    font-size: 18px;
    font-weight: 300;
    position: relative;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .d-day em {
    display: block;
    width: auto;
    line-height: 36px;
    font-size: 24px;
    font-weight: 300;
    color: #58c1c7;
    position: relative;
    top: -4px;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .d-day .date {
    display: block;
    width: auto;
    line-height: 20px;
    font-size: 18px;
    color: #2A3138;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.alert {
    border-color: #fe6a2b;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.alert .d-day em {
    color: #fe6a2b;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.alert .d-day span {
    color: #fe6a2b;
}

/*.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.alert .d-day:after {
	content: '교체일 임박';
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	white-space: nowrap;
	color: inherit;
	fonts-size: 10px;
	line-height: 10px;
	transform: translateY(100%);
}*/
.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .label-txt {
    display: block;
    width: 100%;
    text-align: right;
    margin: 0;
    padding-right: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    position: relative;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol .label-txt:after {
    content: "\e917";
    font-family: 'LineIcons', sans-serif !important;
    font-size: 20px;
    position: absolute;
    top: 0;
    right: 4px;
}

/* 티스테이션 5대 무상 점검 */
.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .upper {
    padding-left: calc(16px + 48px + 30px);
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .replacement {
    width: 100%;
    display: block;
    width: 100%;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .replacement:after {
    content: '';
    display: table;
    clear: both;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .replacement .title {
    float: left;
    font-size: 14px;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .replacement .date {
    float: right;
    font-size: 18px;
    padding-right: 24px;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .d-day .more {
    display: block;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .d-day .more:after {
    content: '';
    display: table;
    clear: both;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .d-day .more em {
    display: inline-block;
    float: left;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .d-day .more em span:first-of-type {
    display: inline-block;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .d-day .more em span:last-of-type {
    display: none;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection .d-day .more .label-txt {
    display: inline-block;
    float: right;
    width: auto;
    line-height: 36px;
}

.mycar-check-overview .mycar-check-list.inactive li .btn-item.btn-ol {
    background: #f9f9fa;
    pointer-events: none;
}

.mycar-check-overview .mycar-check-list.inactive li .btn-item.btn-ol .line-icons {
    color: #a0a6af;
}

.mycar-check-overview .mycar-check-list.inactive li .btn-item.btn-ol .d-day {
    color: #a0a6af;
}

.mycar-check-overview .mycar-check-list.inactive li .btn-item.btn-ol .d-day em {
    color: #a0a6af;
}

.mycar-check-overview .mycar-check-list.inactive li .btn-item.btn-ol .d-day .date {
    color: #a0a6af;
}

.mycar-check-overview .mycar-check-list.inactive li .btn-item.btn-ol .label-txt {
    color: #5b6068;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection.alert .replacement .title {
    display: none;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection.alert .d-day .more em {
    top: -12px;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection.alert .d-day .more em span:first-of-type {
    display: none;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection.alert .d-day .more em span:last-of-type {
    display: inline-block;
}

.mycar-check-overview .mycar-check-list li .btn-item.btn-ol.free-inspection.alert .d-day .more .label-txt {
    color: #5b6068;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=mycar-service-history-------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mycar-service-history {
    width: 600px;
    float: right;
}

.mycar-service-history-list-wrap {
    width: 100%;
    height: 651px;
    padding-left: 16px;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background: #f9f9fa;
    overflow: auto;
    position: relative;
}

.mycar-service-history-list-wrap .empty-box {
    position: absolute;
    top: 0;
    left: 0;
}

.service-history-list {
    padding: 20px;
    overflow: hidden;
}

.service-history-list li {
    padding: 8px 0;
    padding-left: 140px;
}

.service-history-list li:before {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    border-left: 2px solid #d9dbdc;
    position: absolute;
    top: 16px;
    left: 0;
    transform: translateX(-50%);
}

.service-history-list li:after {
    content: '';
    display: block;
    width: calc(100% - 140px);
    height: 0;
    border-top: 1px solid #d9dbdc;
    position: absolute;
    bottom: 0;
    right: 0;
}

.service-history-list li:last-of-type:after {
    display: none;
}

.service-history-list li .date {
    display: inline-block;
    line-height: 20px;
    position: absolute;
    top: 8px;
    left: 0;
    font-size: 14px;
    color: #2a3138;
    padding-left: 20px;
}

.service-history-list li .date:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    background: #2a3138;
    border: 4px solid #f9f9fa;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
}

.service-history-list li .service-detail {
    width: 100%;
    height: auto;
    min-height: 70px;
    background: #fff !important;
    line-height: initial;
    text-align: left;
    padding: 24px;
    padding-bottom: 16px;
    border: none;
    border-radius: 4px;
    position: relative;
    border: 1px solid #f2f2f7;
}

.service-history-list li .service-detail:after {
    content: "\e917";
    font-family: 'LineIcons', sans-serif !important;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    color: #2a3138;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.service-history-list li .service-detail:not(:first-of-type) {
    margin-top: 8px;
}

.service-history-list li .service-detail h4 {
    position: relative;
    padding-left: 16px;
    font-size: 16px;
    line-height: 20px;
    margin-left: 0;
}

.service-history-list li .service-detail h4:before {
    position: absolute;
    content: '';
    top: 8px;
    left: 6px;
    width: 4px;
    height: 4px;
    display: inline-block;
    border-radius: 2px;
    background-color: #5b6068;
}

.service-history-list li .service-detail h4 + h4 {
    margin-top: 4px;
}

.service-history-list li .service-detail h4 .service-cate {
    font-weight: 500;
}

.service-history-list li .service-detail h4 .service-cate:after {
    content: ' / ';
    font-weight: 400;
}

.service-history-list li .service-detail .meta-info {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 12px;
    margin-left: 0;
    font-size: 0;
}

.service-history-list li .service-detail .meta-info .store,
.service-history-list li .service-detail .meta-info .time {
    color: #a0a6af;
    font-size: 14px;
    vertical-align: middle;
}

.service-history-list li .service-detail .meta-info > * + * {
    margin-left: 4px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Sign Up---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.social-icon-box {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    text-align: center;
}

.social-icon-box.social-icon-box-kakao {
    background-color: #ffdf00;
    color: #3d201c;
}

.social-icon-box.social-icon-box-naver {
    background-color: #01c73c;
    color: #ffffff;
}

.social-icon-box.social-icon-box-facebook {
    background-color: #3f67af;
    color: #ffffff;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=reminding-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.membership-reminding-list {
    overflow: visible;
}

.membership-reminding-list > li {
    width: 100%;
    margin-top: 16px;
}

.membership-reminding-list > li a {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0 36px 0 200px;
    padding-left: 200px;
    position: relative;
    text-decoration: none;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s;
}

.membership-reminding-list > li a:after {
    content: "\e917";
    font-family: 'LineIcons', sans-serif !important;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.membership-reminding-list > li a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/*.membership-reminding-list > li a.checked { pointer-events: none;}*/
.membership-reminding-list > li a.checked {
    opacity: 0.5;
}

.membership-reminding-list > li a:active {
    background: rgba(0, 0, 0, 0.05);
}

.membership-reminding-list > li .icon-holder {
    width: 170px;
    height: 100%;
    text-align: center;
    background: #f2f2f7;
    color: #5b6068;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    border-right: 1px solid #d9dbdc;
}

.membership-reminding-list > li .icon-holder:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: #fff;
    border-top: 1px solid #d9dbdc;
    border-left: 1px solid #d9dbdc;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(50%) translateY(-50%) rotate(-45deg);
}

.membership-reminding-list > li .icon-holder .line-icons {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
}

.membership-reminding-list > li .icon-holder .line-icons.refresh {
    transform-origin: 50%;
    transform: translateX(-50%) translateY(12px) rotate(-45deg);
}

.membership-reminding-list > li .icon-holder p {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(12px);
}

.membership-reminding-list > li .container {
    padding: 16px 0;
    padding-left: 0;
}

.membership-reminding-list > li .container h4 {
    font-size: 16px;
    color: #2a3138;
    pointer-events: none;
}

.membership-reminding-list > li .container h4 .car-number {
    display: inline-block;
    line-height: 18px;
    font-size: 12px;
    font-weight: 500;
    background: #5b6068;
    color: #fff;
    border-radius: 2px;
    padding: 0 8px;
    margin-right: 8px;
}

.membership-reminding-list > li .container .d-day {
    color: #fe6a2b;
    font-weight: 500;
    font-size: 16px;
}

.membership-reminding-list > li .container .detail {
    color: #5b6068;
    font-size: 14px;
    margin-top: 4px;
}

.membership-reminding-list > li .container .date {
    color: #a0a6af;
    font-size: 14px;
    margin-top: 4px;
}

.membership-reminding-list > li .container .btn-item {
    margin-top: 4px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=mypage > mycar--------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mycar-list {
    overflow: visible;
}

.mycar-list > li {
    padding: 36px 0;
    padding-left: 350px;
    border-bottom: 1px solid #d9dbdc;
    position: relative;
}

.mycar-list .mycar-overview {
    width: 350px;
    height: 220px;
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 1;
    padding: 0 20px;
}

.mycar-list .mycar-overview .car-management {
    position: absolute;
    top: 0;
    left: 20px;
    font-size: 0;
}

.mycar-list .mycar-overview .car-management .car-number {
    line-height: 30px;
    font-size: 24px;
    vertical-align: middle;
}

.mycar-list .mycar-overview .car-management ul {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-left: 8px;
}

.mycar-list .mycar-overview .car-management ul li:first-child:after {
    content: '';
    display: block;
    width: 0;
    height: 12px;
    border-left: 1px solid #d9dbdc;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mycar-list .mycar-overview .car-management .btn-item {
    background: transparent;
}

.mycar-list .mycar-overview .car-img-holder {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}

/* 20230904 start */
.mycar-list .mycar-overview .car-img-holder .img-update-btn {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 16px;
    padding-right: 8px;
    pointer-events: all;
}
/* 20230904 end */

.mycar-list .mycar-spec {
    width: 520px;
    height: auto;
    min-height: 220px;
}

.mycar-list .mycar-spec table td.border-l {
    border-left: 1px solid #d9dbdc;
}

.mycar-list .mycar-spec table .btn-item.btn-primary:disabled {
    opacity: 1;
}

.mycar-list .mycar-spec table .family-member-btn.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.mycar-list .mycar-spec table .family-member-btn .btn-item.btn-ol:hover {
    background: #fff;
    color: #2a3138;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=mypage > mycar > car-number-search-form-------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.car-number-search-form {
    display: block;
    width: 600px;
    margin: 0 auto;
}

.car-number-search-form .form-control.form-control-lg .input-box {
    background: #f9f9fa;
}

.car-number-search-form .form-control.form-control-lg .input-box:focus {
    background: #fff;
}

.search-result-wrap .search-result-car {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.search-result-wrap .search-result-car .info-txt {
    width: 360px;
    color: #5b6068;
    font-size: 20px;
    line-height: 140%;
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.search-result-wrap .search-result-car .info-txt em {
    color: #2a3138;
    font-weight: 500;
}

.search-result-wrap .search-result-car .info-txt em.txt-primary {
    color: #fe6a2b;
}

.search-result-wrap .search-result-car .car-img-holder {
    width: 320px;
    height: auto;
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
}

.search-result-wrap .search-result-car .car-img-holder .car-img {
    display: block;
    width: 100%;
    height: auto;
}

.search-result-wrap .search-result-car.error .car-img-holder:after {
    content: "\e91f";
    font-family: 'LineIcons', sans-serif !important;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fe6a2b;
}

.search-result-wrap .search-result-car.error .car-img-holder .car-img {
    opacity: 0.2;
}

.search-result-wrap .select-year-option {
    border-top: 1px solid #d9dbdc;
}

.select-year-option {
    position: relative;
}

.search-result-wrap .select-year-option li:nth-of-type(1) {
    border-right: 1px solid #d9dbdc;
}

.search-result-wrap .select-year-option select.input-box {
    line-height: 24px;
    border: none;
    padding-left: 32px;
}

.select-tire-size {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
}

.select-tire-size:after {
    content: '';
    display: table;
    clear: both;
}

.select-tire-size > li {
    width: 50%;
    float: left;
    margin-top: 8px;
}

.select-tire-size > li:nth-of-type(2n+1) {
    padding-right: 6px;
}

.select-tire-size > li:nth-of-type(2n) {
    padding-left: 6px;
}

.select-tire-size label {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.select-tire-size label input {
    width: 0;
    height: 0;
    position: absolute;
    top: -100px;
    opacity: 0;
}

.select-tire-size label .labelling {
    display: block;
    width: 100%;
    height: 48px;
    line-height: 46px;
    padding: 0 56px;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    text-align: center;
    color: #2a3138;
    font-size: 0;
    background: #fff;
}

.select-tire-size label input:checked ~ .labelling {
    border-color: #fe6a2b;
}

.select-tire-size label input:checked ~ .labelling:after {
    content: "\e90f";
    font-family: 'LineIcons', sans-serif !important;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #fe6a2b;
}

.select-tire-size label .labelling .label-txt {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}

.select-tire-size label .labelling .label-txt .divider {
    display: inline;
    margin: 0 12px;
    color: #d9dbdc;
}

.select-tire-size label.default .labelling:before {
    content: '기본';
    display: inline-block;
    width: auto;
    line-height: 18px;
    border-radius: 9px;
    padding: 0 8px;
    color: #fff;
    background: #fe6a2b;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 12px;
}

.caution-item {
    /*width: 100%;*/
    height: auto;
    padding-left: 36px;
    position: relative;
    font-size: 13px;
    color: #5b6068;
}

.caution-item:after {
    content: "\e953";
    font-family: 'LineIcons', sans-serif !important;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    color: #fe6a2b;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=mypage index----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mypage-recent-view-list .goods-item:hover {
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=goods-item------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.goods-item {
    width: 100%;
    height: auto;
    overflow: visible;
    position: relative;
    text-decoration: none;
    background: #fff;
    display: block;
}

.goods-item .thumb-wrap {
    width: 100%;
    padding-top: 100%;
    position: relative;
    text-decoration: none;
    overflow: hidden;
}

.goods-item .thumb-wrap.ratio-1-1 {
    padding-top: 100%;
}

/*4:3*/
.goods-item .thumb-wrap.ratio-4-3 {
    padding-top: 75%;
}

/*4:3*/
.goods-item .thumb-wrap.ratio-3-2 {
    padding-top: 66.66%;
}

/*3:2*/
.goods-item .thumb-wrap.ratio-16-9 {
    padding-top: 56.25%;
}

/*16:9*/
.goods-item .thumb-wrap.ratio-2-1 {
    padding-top: 50%;
}

/*2:1*/
.goods-item .thumb-wrap .thumb-holder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-decoration: none;
    overflow: hidden;
}

.goods-item .thumb-wrap .thumb-holder .goods-img {
    width: 100%;
    height: auto;
    position: relative;
}

.brands-logo {
    width: 100%;
    height: 48px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 24px;
}

.brands-logo.hk {
    background-image: url("../images/common/tire_logo_hk.svg");
}

.brands-logo.mc {
    background-image: url("../images/common/tire_logo_michelin.svg");
}

.brands-logo.pi {
    background-image: url("../images/common/tire_logo_pirelli.svg");
}

.brands-logo.mx {
    background-image: url("../images/common/tire_logo_maxxis.svg");
}

/* 20230912 start */
.brands-logo.ct {
    background-image: url("../images/common/tire_logo_continental.svg");
}

.brands-logo.gy {
    background-image: url("../images/common/tire_logo_goodyear.svg");
}
/* 20230912 end */

.brands-logo.bs {
    background-image: url("../images/ux_revision_sample/brand_logo_bs.svg");
}

/*킥스: kixx
S-오일: soil
지크: zic
밸볼린: valvoline
캐스트롤: castrol
보덴: voden
프릭사: frixa
한국: hankook(경정비용)
순정 출고용: genuine*/
.brands-logo.kixx { background-image: url("../images/ux_revision_sample/brand_logo_kixx.svg"); }
.brands-logo.soil { background-image: url("../images/ux_revision_sample/brand_logo_soil.svg"); }
.brands-logo.zic { background-image: url("../images/ux_revision_sample/brand_logo_zic.svg"); }
.brands-logo.valvoline { background-image: url("../images/ux_revision_sample/brand_logo_valvoline.svg"); }
.brands-logo.castrol { background-image: url("../images/ux_revision_sample/brand_logo_castrol.svg"); }
.brands-logo.voden { background-image: url("../images/ux_revision_sample/brand_logo_voden.svg"); }
.brands-logo.genuine { background-image: url("../images/ux_revision_sample/brand_logo_genuine.svg"); }
.brands-logo.hankook { background-image: url("../images/ux_revision_sample/brand_logo_hankook.svg"); }
.brands-logo.frixa { background-image: url("../images/ux_revision_sample/brand_logo_frixa.svg"); }


/* 20241029 start */
.full_compare .flag_02,
dl.unit02 dt .flag_02 {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    margin-left: 0;

    display: flex;
    width: 100%;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.7);
    align-items: center;
    justify-content: center;
}

.full_compare .flag_02 .brand-logo,
dl.unit02 dt .flag_02 .brand-logo {
    width: auto;
    height: 16px;
}
/* 20241029 end */


.goods-item .info-wrap {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    user-select: auto;
    /* 2021-04-09 */
}

.goods-item .info-wrap .goods-title {
    font-size: 0;
    height: 40px;
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.goods-item .info-wrap .goods-title.row-1 {
    height: 20px;
}

.goods-item .info-wrap .goods-title.row-2 {
    height: 40px;
}

.goods-item .info-wrap .goods-title.row-3 {
    height: 60px;
}

.goods-item .info-wrap .goods-title:after {
    content: '';
    display: block;
    width: 80px;
    height: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), white);
    pointer-events: none;
}

.goods-item .info-wrap .goods-title .title-txt {
    vertical-align: middle;
    line-height: 20px;
}

.goods-item .info-wrap .tire-size {
    height: 20px;
    line-height: 20px;
    margin-top: 4px;
    font-size: 13px;
}

.goods-item .info-wrap .first-cost {
    text-decoration: line-through;
    color: #a0a6af;
    line-height: 20px;
}

.goods-item .info-wrap .goods-price {
    font-size: 14px;
    color: #fe6a2b;
}

/* 20220404 // */
.goods-item .review-date {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
}

/* //20220404 */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Main------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.key-visual-area {
    width: 100%;
    max-width: 1920px;
    height: 550px;
    margin: 0 auto;
}

.key-visual-area.fold {
    height: 450px;
}

.key-visual-area.fold .main-search-row {
    display: none;
}

.key-visual-swiper {
    width: 100%;
    height: 100%;
}

.key-visual-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.key-visual-swiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 1920px auto;
    background-position: 50% 0;
    font-size: 0;
    color: transparent;
    position: relative;
}

.key-visual-swiper .swiper-slide .title-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.key-visual-swiper .swiper-slide .title-layer .guardrail {
    padding: 72px 42px 0;
}

.key-visual-swiper .swiper-slide .title-layer h1 {
    font-size: 52px;
    font-weight: 300;
    text-shadow: 0 0 12px rgba(42, 49, 56, 0.6);
}

.key-visual-swiper .swiper-slide .title-layer h2 {
    font-size: 24px;
    font-weight: 400;
    margin-top: 8px;
    text-shadow: 0 0 12px rgba(42, 49, 56, 0.6);
}

.key-visual-swiper .swiper-slide .title-layer .date {
    font-size: 14px;
    font-weight: 500;
    margin-top: 24px;
    text-shadow: 0 0 12px rgba(42, 49, 56, 0.6);
}

.key-visual-swiper .swiper-slide .title-layer .fake-btn {
    display: inline-block;
    width: auto;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(42, 49, 56, 0.9);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 0 26px;
    border-radius: 18px;
    margin-top: 28px;
}

/* 20220527 // */
/* // 20220527 */
.key-visual-console > li {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 100%;
    padding: 0;
    position: relative;
    font-size: 0;
    pointer-events: all;
}

.key-visual-console > li + li {
    margin-left: 16px;
}

.key-visual-console > li button {
    appearance: none;
    display: inline-block;
    width: 108px;
    height: 34px;
    line-height: 34px;
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 0;
    background: transparent;
    border: none;
    outline: none;
}

.key-visual-console > li button p {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 32px;
    color: #fff;
    width: 100%;
}

.key-visual-console > li button .indicator-gauge {
    width: 100%;
    height: 2px;
    background: #fff;
    position: relative;
}

.key-visual-console > li button .indicator-gauge .fill {
    width: 100%;
    height: 2px;
    background: #fe6a2b;
    position: relative;
    transform-origin: 0 0;
    transform: translateZ(0) scaleX(0);
    transition: all 0 linear;
}

.key-visual-console > li button .indicator-gauge .gauge {
    height: 0;
    background: #fe6a2b;
    position: absolute;
    left: 0;
    top: 0;
}

.key-visual-console > li button.on .indicator-gauge .gauge {
    height: 2px;
}

.key-visual-console > li button.on {
    pointer-events: none;
}

.key-visual-console > li button.on .indicator-gauge .fill {
    transform: translateZ(0) scaleX(1);
    transition: all 8s linear;
    /* 20220401 */
}

.main-search-row {
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 2;
}

.main-search {
    width: 100%;
    height: 100px;
    position: relative;
    padding: 12px 0;
    padding-left: 300px;
}

.main-search .title-wrap {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-search .title-wrap h2 {
    vertical-align: middle;
}

.main-search .title-wrap .btn-item {
    width: 190px;
    min-width: 24px;
    padding: 0;
    position: relative;
    top: 8px;
    background: rgba(42, 49, 56, 0.1);
}

.main-search ul {
    height: 100%;
}

.main-search ul > li {
    max-width: 150px;
    border-left: 1px solid #a0a6af;
}

.main-search ul > li:nth-of-type(1) {
    max-width: 100%;
    padding-left: 150px;
    padding-right: 30px;
}

.main-search ul > li > .btn-item {
    width: 150px;
    height: 100%;
    background: transparent;
    border: none;
}

.main-search ul > li:nth-of-type(1) > .btn-item {
    position: absolute;
    top: 0;
    left: 0;
}

.main-search ul > li > .btn-item:hover:before {
    display: none;
}

.main-search ul > li > .btn-item:disabled {
    opacity: 1;
    cursor: default;
}

.main-search ul > li > .btn-item:disabled:before {
    display: none;
}

.main-search ul > li > .btn-item .labelling {
    display: block;
    width: 120px;
    height: 100%;
    padding-top: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 0;
}

.main-search ul > li > .btn-item img {
    width: 56px;
}

.main-search ul > li > .btn-item .label-txt {
    display: block;
    font-size: 15px;
    font-weight: 500;
    margin-top: 4px;
}

.main-search ul > li:nth-of-type(1) table {
    height: auto;
    width: 400px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.individual-ux.default {
    height: 300px;
    background-image: linear-gradient(180deg, rgba(42, 49, 56, 0), rgba(42, 49, 56, 0.05));
    background-position: 0 100%;
    background-size: 100% 100px;
    background-repeat: no-repeat;
}

.individual-ux.has-car {
    height: 440px;
    background-image: linear-gradient(180deg, rgba(42, 49, 56, 0), rgba(42, 49, 56, 0.05));
    background-position: 0 100%;
    background-size: 100% 85px;
    background-repeat: no-repeat;
}

.individual-ux .guardrail {
    height: 100%;
}

.individual-ux .guardrail section {
    height: 100%;
}

.individual-ux.default .individual-ux-car-img img {
    transform: translateX(-60%);
}

.individual-ux .left-area {
    width: 360px;
    position: absolute;
    top: 40px;
    left: 0;
}

.individual-ux .right-area {
    width: 420px;
    position: absolute;
    top: 96px;
    right: 0;
    border-radius: 4px;
}

.individual-ux.has-car .right-area {
    top: 40px;
    background: rgba(242, 242, 247, 0.8);
    padding: 0 20px;
}

.individual-ux .right-area {
    text-align: right;
}

.go-my-membership {
    overflow: hidden;
    /* 0825 */
    position: relative;
    display: inline-block;
    width: 340px;
    height: auto;
    padding: 12px 46px 12px 16px;
    text-align: left;
    border-radius: 4px;
    background: #ffa200;
    background: linear-gradient(310deg, #ffa200 0%, #fe6a2b 100%);
    box-shadow: 0 2px 2px rgba(71, 71, 71, 0.2);
    transition: all .2s;
}

.go-my-membership > * {
    color: #ffffff;
}

.go-my-membership .text-area .description {
    font-size: 16px;
    letter-spacing: -0.4px;
    line-height: 28px;
}

.go-my-membership .text-area .label {
    font-size: 20px;
    letter-spacing: -0.4px;
    line-height: 28px;
    font-weight: 500;
}

.go-my-membership > .chev-right {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
}

.go-my-membership:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.individual-ux-car-img {
    width: 100%;
    height: 264px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.individual-ux-car-img img {
    display: block;
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 46%;
    transform: translateX(-45%);
}

/* 20230904 start */
.individual-ux-car-img .img-update-btn {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 16px;
    padding-right: 8px;
    pointer-events: all;
}
/* 20230904 end */

.individual-ux-quick-menu {
    padding: 0;
    text-align: center;
}

.individual-ux.has-car .individual-ux-quick-menu {
    padding: 20px 0;
    border-top: 1px solid #fff;
}

.individual-ux-quick-menu > li {
    width: 120px;
    height: auto;
    text-align: center;
    font-size: 0;
}

.individual-ux-quick-menu > li .btn-item {
    width: 72px;
    height: 72px;
    line-height: 70px;
    border-radius: 50%;
    padding: 0;
}

.individual-ux-quick-menu > li .btn-item:hover:before {
    display: none;
}

.individual-ux-quick-menu > li p {
    font-size: 14px;
    line-height: 120%;
    margin-top: 16px;
}

.individual-ux-smart-care {
    padding: 20px 0 24px;
    border-bottom: 1px solid #d9dbdc;
}

.individual-ux-smart-care > li {
    padding-left: 80px;
}

.individual-ux-smart-care > li + li {
    margin-top: 8px;
}

.individual-ux-smart-care > li .d-day-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.individual-ux-smart-care > li .d-day-wrap.alert {
    color: #fe6a2b;
}

.individual-ux-smart-care > li .d-day-wrap .d-day {
    font-size: 20px;
}

.individual-ux-smart-care > li .d-day-wrap .date {
    font-size: 14px;
    text-indent: -1px;
}

/* 20220620 // */
.individual-ux-smart-care > li .btn-item.btn-free {
    height: 56px;
    line-height: 54px;
    padding-left: 64px;
    padding-right: 100px;
    text-align: left;
}

/* // 20220620 */
.individual-ux-smart-care > li .btn-item.btn-free:hover:before {
    display: none;
}

.individual-ux-smart-care > li .btn-item.btn-free .line-icons:not(.chev-right) {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

.individual-ux-smart-care > li .btn-item.btn-free .line-icons.chev-right {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

/* 20220620 // */
.individual-ux-smart-care > li .btn-item.btn-free .label-txt {
    font-size: 18px;
    text-indent: -1px;
    word-break: break-all;
}

/* // 20220620 */
.individual-ux-smart-care > li .btn-item.btn-free .coupon-hooking {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 110%;
    text-align: right;
    color: #fe6a2b;
    text-indent: -1px;
}

.mycar-select-item {
    display: inline-block;
    width: auto;
    padding-left: 40px;
    padding-right: 112px;
    overflow: hidden;
    position: relative;
    background: rgba(242, 242, 247, 0.8);
    border-radius: 4px;
}

.mycar-select-item.no-swipe {
    /* display: inline-block;
    width: auto; */
    padding-left: 20px;
    padding-right: 92px;
}

.mycar-select-item.no-swipe .btn-swiper-nav {
    display: none;
}

.mycar-select-item.no-swipe .mycar-select-swiper .swiper-slide + .swiper-slide {
    margin-left: 12px;
}

.mycar-select-item .mycar-select-swiper {
    width: auto;
    max-width: 204px;
    height: 100%;
    position: relative;
    padding: 0;
    overflow: hidden;
}

.mycar-select-item .mycar-select-swiper .swiper-slide {
    width: 60px;
    padding: 10px 0;
    font-size: 0;
}

.mycar-select-item .mycar-select-swiper .btn-select-car {
    width: 60px;
    height: 60px;
    line-height: 58px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.mycar-select-item .mycar-select-swiper .btn-select-car.on {
    pointer-events: none;
}

.mycar-select-item .mycar-select-swiper .btn-select-car.on:after {
    content: "\e90f";
    font-family: 'LineIcons', sans-serif !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    background: #58c1c7;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: -4px;
    right: 0;
    pointer-events: none;
}

.mycar-select-item .btn-swiper-nav {
    width: 40px;
    height: 100%;
    line-height: 40px;
    border-radius: 0;
    background: transparent;
}

.mycar-select-item .btn-swiper-nav:hover:before {
    display: none;
}

.mycar-select-item .btn-swiper-nav.btn-prev {
    left: 0;
}

.mycar-select-item .btn-swiper-nav.btn-next {
    right: 0;
}

.mycar-select-item .add-btn-wrap {
    width: 60px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 40px;
}

.mycar-select-item.no-swipe .add-btn-wrap {
    right: 20px;
}

.mycar-select-item .add-btn-wrap .btn-add-car {
    width: 60px;
    height: 60px;
    line-height: 58px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.tire-category-swiper,
.tire-size-swiper {
    overflow: visible;
}

.tire-category-swiper .swiper-slide,
.tire-size-swiper .swiper-slide {
    display: inline-block;
    width: auto;
}

.tire-category-contents,
.tire-category-contents-swiper {
    overflow: hidden;
}

.tire-category-contents ul.list-size-equal,
.tire-category-contents-swiper ul.list-size-equal,
.tire-size-contents ul.list-size-equal,
.tire-size-contents-swiper ul.list-size-equal {
    display: table;
    display: flex;
}

.tire-category-contents ul.list-size-equal > li,
.tire-category-contents-swiper ul.list-size-equal > li {
    /*width: 380px !important;*/
    /*flex: 1;*/
}

.tire-category-contents ul.list-size-equal > li .card,
.tire-category-contents-swiper ul.list-size-equal > li .card {
    height: 100%;
    background: #f9f9fa;
}

.tire-category-contents ul.list-size-equal > li:not(:first-of-type),
.tire-category-contents-swiper ul.list-size-equal > li:not(:first-of-type),
.tire-size-contents ul.list-size-equal > li:not(:first-of-type),
.tire-size-contents-swiper ul.list-size-equal > li:not(:first-of-type) {
    padding-left: 15px;
}

.tire-category-contents .card .product-area,
.tire-category-contents-swiper .card .product-area {
    min-height: 175px;
    background: #fff;
}

/* 20230620 start */
.banner-slide-sty-first-swiper {
    position: relative;
    padding: 0 40px;
}

.banner-slide-sty-first-swiper .swiper-slide {
    width: 100%;
    padding: 0;
}

.banner-slide-sty-first-swiper .banner-item {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
}

.banner-slide-sty-first-swiper .banner-item img {
    display: block;
    width: 100%;
    height: auto;
}

.banner-slide-sty-first-swiper .swiper-pagination {
    bottom: 0;
}

.banner-slide-sty-first-swiper .swiper-pagination .swiper-pagination-bullet {
    background-color: #aaafb8;
}

.banner-slide-sty-first-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #303840;
}

/* 20230620 end */

.banner-slide-sty-second-swiper-wrapper {
    position: relative;
}

.banner-slide-sty-second-swiper-wrapper .swiper-slide {
    width: 100%;
    padding: 0;
}

.banner-slide-sty-second-swiper-wrapper .banner-item {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
}

.banner-slide-sty-second-swiper-wrapper .banner-item img {
    display: block;
    width: 100%;
    height: auto;
}

.banner-slide-sty-second-swiper-wrapper .swiper-pagination {
    bottom: -36px;
}

.banner-slide-sty-second-swiper-wrapper .swiper-pagination .swiper-pagination-bullet {
    background-color: #aaafb8;
}

.banner-slide-sty-second-swiper-wrapper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #303840;
}

.banner-slide-sty-second-swiper-wrapper .btn-item.btn-swiper-nav.btn-prev,
.banner-slide-sty-second-swiper-wrapper .btn-item.btn-swiper-nav.btn-next {
    margin-top: 13px;
}

.time-deal-swiper .swiper-slide {
    width: 25%;
    padding: 0 8px;
}

.main-time-deal-list > li {
    width: 25%;
    padding: 0 8px;
    float: left;
    overflow: visible;
}

.easy-tire-buying {
    position: relative;
    overflow: hidden;
    height: 90px;
    transition: all 0.3s;
}

.easy-tire-buying:hover {
    height: auto;
}

.easy-tire-buying > li {
    width: 33.33%;
    height: 100%;
    padding: 0 20px;
    padding-left: 140px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    float: left;
}

.easy-tire-buying > li:not(:first-of-type) {
    border-left: 1px solid #d9dbdc;
}

.easy-tire-buying[data-act="0"] > li:nth-of-type(1) {
    width: 33.33%;
}

.easy-tire-buying[data-act="0"] > li:nth-of-type(2) {
    width: 33.33%;
}

.easy-tire-buying[data-act="0"] > li:nth-of-type(3) {
    width: 33.33%;
}

.easy-tire-buying[data-act="1"] > li:nth-of-type(1):hover {
    width: 60%;
}

.easy-tire-buying[data-act="1"] > li:nth-of-type(2) {
    width: 20%;
}

.easy-tire-buying[data-act="1"] > li:nth-of-type(3) {
    width: 20%;
}

.easy-tire-buying[data-act="2"] > li:nth-of-type(1) {
    width: 20%;
}

.easy-tire-buying[data-act="2"] > li:nth-of-type(2):hover {
    width: 60%;
}

.easy-tire-buying[data-act="2"] > li:nth-of-type(3) {
    width: 20%;
}

.easy-tire-buying[data-act="3"] > li:nth-of-type(1) {
    width: 20%;
}

.easy-tire-buying[data-act="3"] > li:nth-of-type(2) {
    width: 20%;
}

.easy-tire-buying[data-act="3"] > li:nth-of-type(3):hover {
    width: 60%;
}

.easy-tire-buying > li .title-area {
    width: 120px;
    position: absolute;
    top: 0;
    left: 20px;
    pointer-events: none;
}

.easy-tire-buying > li .title-area p {
    color: #fe6a2b;
    font-weight: 500;
}

.easy-tire-buying > li .title-area h4 {
    font-size: 18px;
    font-weight: 400;
    pointer-events: none;
    color: #2a3138;
}

.easy-tire-buying > li .title-area h5 {
    font-size: 21px;
    font-weight: 200;
    pointer-events: none;
    color: #2a3138;
    white-space: nowrap;
    margin-top: 20px;
    opacity: 1;
    transition: all 0.3s;
}

.easy-tire-buying > li:hover .title-area h5 {
    opacity: 0;
}

.easy-tire-buying:not([data-act="0"]) > li .title-area h5 br {
    display: inline;
}

.easy-tire-buying[data-act="0"] > li .title-area h5 br {
    display: none;
}

.easy-tire-buying > li .cont-area h5 {
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    font-size: 21px;
    font-weight: 200;
    margin-top: 18px;
    opacity: 0;
    transition: all 0.3s;
}

.easy-tire-buying > li:hover .cont-area h5 {
    opacity: 1;
}

.easy-tire-buying > li .cont-area .description {
    color: #5b6068;
    width: 500px;
    font-size: 14px;
    margin-top: 16px;
    opacity: 0;
    transition: all 0.3s;
}

.easy-tire-buying > li:hover .cont-area .description {
    opacity: 1;
}

.easy-tire-buying > li .cont-area .description .recommend-icon {
    position: relative;
    padding-left: 46px;
    padding-bottom: 16px;
}

.easy-tire-buying > li .cont-area .description .recommend-icon:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
}

.easy-tire-buying > li .cont-area .description .recommend-icon.step-first:before {
    background-image: url("../images/common/step1_easy_icon.svg");
}

.easy-tire-buying > li .cont-area .description .recommend-icon.step-second:before {
    background-image: url("../images/common/smart_pay_logo_symbol.svg");
}

.easy-tire-buying > li .cont-area .description .recommend-icon.step-third:before {
    background-image: url("../images/common/step3_easy_icon.svg");
}

/* 20220404// */
.review-card-swiper {
    padding-bottom: 40px;
}

/* // 20220404*/
.find-tire-gate .btn-find-tire {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 24px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #d9dbdc;
    transition: all .16s ease-in-out;
}

.find-tire-gate .btn-find-tire.on {
    border: 1px solid #fe6a2b;
    /*transform: translate3d(0, -6px, 0);*/
    /*box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .16);*/
}

.find-tire-gate .btn-find-tire:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.16);
}

.find-tire-gate .btn-find-tire:active {
    border: 1px solid #fe6a2b;
}

.find-tire-gate .btn-find-tire > img {
    display: inline-block;
    width: 60px;
    height: auto;
}

.find-tire-gate .btn-find-tire .icon {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
}

.find-tire-gate .btn-find-tire .icon .line-icons {
    display: inline-block;
    font-size: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.find-tire-gate .btn-find-tire .label {
    display: block;
    width: 100%;
    font-weight: 500;
    margin-top: 4px;
}

.find-tire-gate .confirm-tire-size {
    display: inline-block;
    margin-top: 8px;
    border-bottom: 1px solid #8f8f8f;
}

.find-tire-button-group {
    padding: 16px;
}

.find-tire-button-group .btn-find-tire {
    background-color: transparent;
    background-color: #F9F9FA; /* 20240229 */
    border-radius: 4px;
    transition: all .16s ease-in-out;
}

.find-tire-button-group .btn-find-tire:hover {
    background-color: rgba(42, 49, 56, 0.3);
    color: #ffffff;
    transform: translate3d(0, -4px, 0);
}

.find-tire-button-group .btn-find-tire:active,
.find-tire-button-group .btn-find-tire.on {
    background-color: #2a3138;
    color: #ffffff;
    transform: translate3d(0, 0, 0);
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=TS Shopping-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.ts-shopping-filter-bar {
    display: block;
    width: 100%;
    height: auto;
}

.ts-shopping-filter-bar > ul {
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 1170px;
    height: auto;
    -ms-flex-wrap: nowrap;
    /* IE10 fixed */
    flex-wrap: nowrap;
}

.ts-shopping-filter-bar > ul > li.filter-cell {
    position: relative;
    flex: auto;
}

.ts-shopping-filter-bar > ul > li.filter-cell.reset {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    width: 163px;
}

.ts-shopping-filter-bar > ul > li.filter-cell.find-car-type {
    max-width: 320px;
}

.ts-shopping-filter-bar > ul > li.filter-cell > div {
    position: relative;
    padding: 20px 40px;
}

.ts-shopping-filter-bar > ul > li.filter-cell.reset > div {
    padding-left: 0;
}

.ts-shopping-filter-bar > ul > li.filter-cell + li.filter-cell:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 1px;
    height: 80%;
    background-color: #d9dbdc;
    transform: translateY(-50%);
}

.ts-shopping-filter-bar > ul > li.filter-cell .title {
    font-size: 16px;
}

.ts-shopping-filter-bar > ul > li.filter-cell .description {
    font-size: 14px;
    color: #5b6068;
}

.ts-shopping-filter-bar > ul > li.filter-cell .panel {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 20px;
}

/* 내 운전 스타일 */
.ts-shopping-filter-bar > ul > li.filter-cell.find-driving-style .panel > ul {
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    width: 100%;
    height: auto;
}

.ts-shopping-filter-bar > ul > li.filter-cell.find-driving-style .panel > ul > li:first-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-shopping-filter-bar > ul > li.filter-cell.find-driving-style .panel > ul > li:last-of-type {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.ts-shopping-filter-bar > ul > li.filter-cell.find-driving-style .find-driving-slider {
    display: block;
    width: 300px;
    height: auto;
}

.ts-shopping-filter-bar .find-driving-slider-guide {
    display: flex;
    font-size: 12px;
    margin-top: 12px;
}

.ts-shopping-filter-bar .find-driving-slider-guide .break-under {
    width: 12%;
    display: inline-block;
}

.ts-shopping-filter-bar .find-driving-slider-guide .break-over {
    width: 88%;
}

.ts-shopping-filter-bar .find-driving-slider-guide .left {
    position: relative;
    padding-left: 8px;
    font-size: 12px;
}

.ts-shopping-filter-bar .find-driving-slider-guide .left:before {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid #a0a6af;
    transform: translateY(-50%);
}

.ts-shopping-filter-bar .find-driving-slider-guide .right {
    position: relative;
    padding-right: 8px;
    font-size: 12px;
}

.ts-shopping-filter-bar .find-driving-slider-guide .right:before {
    position: absolute;
    top: 50%;
    right: 0;
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #a0a6af;
    transform: translateY(-50%);
}

.ts-shopping-filter-bar > ul > li.filter-cell.find-car-type .panel > ul > li,
.ts-shopping-filter-bar > ul > li.filter-cell.find-season .panel > ul > li {
    margin-bottom: 0;
}

.ts-shopping-filter-bar > ul > li.filter-cell:first-of-type {
    padding-left: 0;
}

.ts-shopping-filter-bar > ul > li.filter-cell:last-of-type {
    padding-right: 0;
}

/* ts-shopping-section-swiper */
.ts-shopping-section-swiper {
    position: relative;
    padding: 0 40px;
}

.ts-shopping-section-swiper .swiper-container {
    padding: 20px 0;
    min-height: 320px;
}

.ts-shopping-section-swiper .swiper-container:has(.nodata-product) {
    padding-top: 12px;
}

.ts-shopping-section-swiper:not(:has(.swiper-slide)) :is(.ts-shopping-section-swiper-button-next, .ts-shopping-section-swiper-button-prev) {
    display: none;
}

/* 2021-04-13 start */
.ts-shopping-section-swiper .ts-shopping-section-swiper-button-next {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    right: -20px;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 48px;
    background-color: #2a3138;
}

.ts-shopping-section-swiper .ts-shopping-section-swiper-button-next:before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border-top: 2px solid #f9f9fa;
    border-right: 2px solid #f9f9fa;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -11px;
}

.ts-shopping-section-swiper .ts-shopping-section-swiper-button-next::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background-color: #f9f9fa;
    position: absolute;
    left: -1px;
    top: 50%;
    margin-top: -12px;
    margin-top: 0;
}

.ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: -20px;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 48px;
    background-color: #2a3138;
}

.ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border-bottom: 2px solid #f9f9fa;
    border-left: 2px solid #f9f9fa;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -11px;
}

.ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background-color: #f9f9fa;
    position: absolute;
    right: -1px;
    top: 50%;
    margin-top: -12px;
    margin-top: 0;
}

.ts-shopping-section-swiper .ts-shopping-section-swiper-button-next.swiper-button-disabled,
.ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev.swiper-button-disabled {
    opacity: .2;
}

/* 2021-04-13 end */
/* no-data-product */
.nodata-product {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    text-align: center;
}

.nodata-product.tire-empty {
    overflow: hidden;
    position: relative;
    height: 200px;
    background-color: #f9f9fa;
    background-image: url("../images/common/bg-empty-tire.png");
    background-size: 250px 250px;
    background-position: calc(100% - -112px) 12px;
    background-repeat: no-repeat;
}

.nodata-product p {
    color: #c0c6ce;
    font-size: 14px;
    font-weight: 300;
}

.nodata-product strong {
    display: block;
    margin: 7px 0 4px;
    color: #a0a6af;
    font-size: 16px;
    font-weight: 300;
}

/* deal shop start */
.banner-img .link,
.banner-img .link img {
    display: block;
    width: 100%;
    font-size: 0;
}

.search-result-area {
    display: flex;
    height: 90px;
    align-items: center;
}

.search-result-area .title {
    font-size: 20px;
}

.search-result-area .info {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 60px;
    margin-left: 30px;
    padding: 0px 15px 0 30px;
    border-radius: 60px;
    background-color: #fff;
}

.search-result-area .info .car-result {
    padding-right: 20px;
    font-size: 0;
}

.search-result-area .info .tire-result {
    padding-right: 30px;
    font-size: 0;
}

.search-result-area .info .tire-result img,
.search-result-area .info .car-result img {
    display: inline-block;
    width: 32px;
    height: auto;
    vertical-align: middle;
}

.search-result-area .info .car-result span {
    margin-left: 6px;
}

.search-result-area .info .car-result span.label,
.search-result-area .info .tire-result span.label {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
    line-height: 32px;
}

.product-tab-wrap {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 0;
}

.product-tab-wrap button {
    padding: 0 26px;
    margin-right: 4px;
    background-color: #f2f2f7;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
    line-height: 40px;
}

.product-tab-wrap button.on {
    background-color: #FE6A2B;
    color: #fff;
}

.deal-store .list-guide-bar {
    border-bottom: 0;
}

.deal-list-wrap {
    /*display: flex;
    flex-wrap: wrap;
    justify-content: space-between;*/
}

.deal-list-wrap .items {
    overflow: hidden;
    width: 100%;
    height: 200px;
    margin: 7px 0 8px;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background-color: #fff;
}

.deal-list-wrap .items.oil {
    background-image: url("../images/common/bg_deal_oil.png");
    background-size: 154px 229px;
    background-position: 345px 34px;
    background-repeat: no-repeat;
}

.deal-list-wrap .items.battery {
    background-image: url("../images/common/bg_deal_battery.png");
    background-size: 220px 171px;
    background-position: 282px 50px;
    background-repeat: no-repeat;
}

.deal-list-wrap .deal-wrap {
    position: relative;
    padding: 30px 30px 24px;
}

.deal-list-wrap .descript {
    font-size: 14px;
    color: #a0a6af;
}

.deal-list-wrap .descript em {
    font-weight: 400;
    color: #2a3138;
}

.deal-list-wrap h2 {
    margin: 8px 0 16px;
    font-weight: 400;
    font-size: 20px;
}

.deal-list-wrap h2 strong {
    font-weight: 400;
    color: #fe6a2b;
}

.deal-list-wrap .date {
    display: block;
    font-size: 14px;
}

.deal-list-wrap .deal-button {
    margin-top: 16px;
}

.deal-list-wrap .deal-button .label-txt {
    font-size: 16px;
}

/* deal shop end */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=Product Buy Process Bar-----------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.product-buy-process-bar-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 89px;
}

.product-buy-process-bar {
    position: fixed;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background-color: #2a3138;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #2a3138;
    z-index: 800;
    transition: border-bottom-color .16s ease-in-out;
}

.product-buy-process-bar .guardrail > ul {
    display: flex;
}

.product-buy-process-bar .guardrail > ul > li {
    width: 33.333333333333333%;
}

/*.product-buy-process-bar .guardrail > ul > li:nth-of-type(1) { width: 46%; }*/
/*.product-buy-process-bar .guardrail > ul > li:nth-of-type(2) { width: 30%; }*/
/*.product-buy-process-bar .guardrail > ul > li:nth-of-type(3) { width: 24%; }*/
.product-buy-process-bar .guardrail > ul > li + li:before {
    position: absolute;
    display: block;
    content: '';
    top: 50%;
    left: 0;
    width: 1px;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%);
}

.product-buy-process-bar .guardrail > ul > li > .product-buy-process-item {
    padding: 0 20px;
}

.product-buy-process-bar .guardrail > ul > li:first-of-type > .product-buy-process-item {
    padding-left: 0;
}

.product-buy-process-bar .guardrail > ul > li:last-of-type > .product-buy-process-item {
    padding-right: 0;
}

.product-buy-process-bar .product-buy-process-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88px;
    text-align: center;
}

.product-buy-process-bar .product-buy-process-item .confirm-done {
    display: none;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}

.product-buy-process-bar .product-buy-process-item .confirm-done > .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 21px;
    height: 21px;
    line-height: 0;
    font-size: 0;
    background-color: #fe6a2b;
    border: 1px solid #ffffff;
    border-radius: 50%;
    margin-right: 18px;
}

.product-buy-process-bar .product-buy-process-item .confirm-done > .icon > .line-icons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.product-buy-process-bar .product-buy-process-item .confirm-done > .info {
    width: 234px;
    color: #ffffff;
    text-align: left;
    padding-right: 18px;
}

.product-buy-process-bar .product-buy-process-item .confirm-done > .info > p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.product-buy-process-bar .product-buy-process-item.car .confirm-done > .info .secondary {
    margin-top: 4px;
}

.product-buy-process-bar .product-buy-process-item.car .confirm-done > .info .secondary > span.tire {
    position: relative;
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    border: 1px solid #ffffff;
    border-radius: 4px;
}

/*.product-buy-process-bar .product-buy-process-item.car .confirm-done > .info .secondary > span.tire:after {*/
/*    position: absolute;*/
/*    display: block;*/
/*    content: '\e937';*/
/*    top: 50%;*/
/*    left: 3px;*/
/*    line-height: 20px;*/
/*    font-size: 16px;*/
/*    font-family: 'LineIcons', sans-serif;*/
/*    transform: translateY(-50%);*/
/*}*/
.product-buy-process-bar .product-buy-process-item .confirm-done > .re-search {
    white-space: nowrap;
}

.product-buy-process-bar .product-buy-process-item .confirm-done > .re-search:hover {
    border-color: #ffffff;
    background-color: transparent;
}

.product-buy-process-bar .product-buy-process-item .confirm-yet {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #ffffff;
    padding: 12px;
    text-align: center;
    border-radius: 6px;
    transition: transform .16s ease-in-out;
}

.product-buy-process-bar .product-buy-process-item .confirm-yet:hover {
    transform: translateY(-6px);
}

.product-buy-process-bar .product-buy-process-item .confirm-yet .label {
    font-size: 16px;
}

/* done */
.product-buy-process-bar .product-buy-process-item.done .confirm-done {
    display: flex;
}

.product-buy-process-bar .product-buy-process-item.done:not(.order) .confirm-yet {
    display: none;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=product-buy-process-bar-popup-----------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/* 상품 장착을 위한 매장선택 (선택된 매장이 없을 경우) ------------------------------------------ */
/* 20220210 // */
.mylocation-wrap {
    padding: 16px 32px 0;
    background-color: #f9f9fa;
}

.mylocation-panel {
    position: relative;
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
}

.mylocation-wrap .info {
    font-size: 14px;
}

.mylocation-wrap .info strong {
    font-size: 14px;
    font-weight: normal;
    color: #008bec;
}

.mylocation-wrap .subinfo.icon-local {
    margin-top: 8px;
    padding-left: 25px;
    font-size: 12px;
    background-image: url("../images/common/icon_location.png");
    background-size: 13px 20px;
    background-position: 4px 50%;
    background-repeat: no-repeat;
}

.mylocation-wrap .subinfo .explan-copy {
    display: inline-block;
    padding: 0 8px;
    border-radius: 20px;
    background-color: #f2f2f7;
    font-size: 14px;
    line-height: 20px;
}

.mylocation-wrap .subinfo {
    margin-top: 8px;
}

.mylocation-wrap .subinfo .street {
    color: #008bec;
    font-weight: bold;
}

.mylocation-wrap .location-button {
    overflow: hidden;
    position: absolute;
    right: 16px;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 4px;
    background-image: url("../images/common/store_search/icon_location_20.png");
    background-size: 32px 32px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
    z-index: 1;
}

/* // 20220210 */
.region-search-section {
    background: #f2f2f7;
    border-radius: 8px;
    padding: 14px 20px;
}

.wheretire-section {
    padding: 0 32px;
}

/* 20211213 START // */
.wheretire-section .headcopy {
    margin-top: 25px;
    font-weight: 300;
    line-height: 26px;
    color: #2a3138;
}

.wheretire-section .subcopy {
    margin-top: 13px;
    font-size: 14px;
}

.wheretire-section.map-store-view .headcopy,
.wheretire-section.map-store-view .subcopy {
    display: none;
}

.wheretire-section .subcopy strong {
    display: inline-block;
}

/* 20211213 END // */
.wheretire-section .button-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: 15px;
}

.wheretire-section .button-wrap button {
    flex: 1;
    margin-right: 8px;
}

.wheretire-section .button-wrap button:last-child {
    margin-right: 0;
}

.store-sort-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 20px;
    padding: 0 32px;
    background: #fff;
    border-bottom: 1px solid #d9dbdc;
}

.store-sort-wrap .sort-info {
    font-size: 14px;
    line-height: 35px;
}

.store-sort-wrap .sort-info strong {
    font-weight: 500;
    color: #fe6a2b;
}

.store-sort-wrap .btn-sort {
    position: relative;
    padding: 0 8px;
    background-color: #fff;
    font-size: 14px;
    line-height: 35px;
}

.store-sort-wrap .btn-sort::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ff6c00;
}

.store-sort-wrap .btn-sort.active::before {
    margin-top: -1.5px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.sort-result-section .store-list {
    display: flex;
    flex-direction: column;
    background-color: #f9f9fa;
}

.sort-result-section .store-list .storeListText {
    padding: 0;
}

.sort-result-section .store-list .store-wrap {
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 8px;
    order: 1;
}

/* 20230130 start */
.sort-result-section .store-wrap.on-map {
    width: calc(100% - 40px); /* 20230130 추가 */
    max-width: 360px;
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    z-index: 10; /* 20230130 추가 */
}

.sort-result-section .store-wrap .store-info {
    position: relative;
    padding: 16px 16px 24px 32px;
    min-height: 160px;
}

.sort-result-section .store-wrap:not(.on-map) .store-info {
    padding-left: 180px;
}

.sort-result-section .store-wrap.on-map .store-info {
    padding: 16px 12px 20px;
}
/* 20230130 end */

.sort-result-section .store-wrap.on-map .store-footer {
    padding: 12px 10px 10px;
}

.sort-result-section .store-wrap.on-map .store-meta > span {
    font-size: 11px;
}

/* //20220622 */
.sort-result-section .store-info .smartstore {
    display: block;
    width: 93px;
    height: 21px;
    margin-right: 3px;
    background-image: url("../images/common/img_allmyt_store.png");
    background-size: 93px 21px;
    background-position: left 50%;
    background-repeat: no-repeat;
    color: #fff;
    line-height: 21px;
    font-size: 9px;
}

/* 20230130 start */
.sort-result-section .service .feature-badge-wrap {
    position: relative;
    font-size: 0;
    line-height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.sort-result-section .service .feature-badge-wrap .feature-badge {
    display: inline-block;
    width: auto;
    height: 21px;
    vertical-align: middle;
    margin-bottom: 8px;
}
/* 20230130 end */

.sort-result-section .store-wrap:not(.on-map) .store-info .thumb-wrap {
    width: 130px;
    height: 120px;
    position: absolute;
    top: 16px;
    left: 32px;
    font-size: 0;
    border-radius: 4px;
    overflow: hidden;
}

.sort-result-section .store-wrap:not(.on-map) .store-info .thumb-wrap img {
    display: block;
    width: 100%;
}

.sort-result-section .store-info .benefit-wrap {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    line-height: 24px;
}

.sort-result-section .store-wrap.on-map .store-info .benefit-wrap {
    top: 16px;
    right: 16px;
}

.sort-result-section .benefit-wrap .benefit {
    display: inline-block;
    margin-right: 4px;
    padding: 0 4px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 16px;
    letter-spacing: 0;
    vertical-align: middle;
}

.sort-result-section .benefit-wrap .benefit.great-store {
    background-color: #ff8c27;
}

.sort-result-section .benefit-wrap .benefit.smart-pickup {
    background-color: #6eb8bc;
}

.sort-result-section .benefit-wrap .benefit.deal-store {
    background-color: #cbb58f;
}

/* 20230130 start */
.sort-result-section .store-info .franchisee {
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sort-result-section .franchisee strong {
    margin-right: 12px;
    font-size: 18px;
    font-weight: normal;
    word-break: break-all; /* 20230130 추가 */
}

.sort-result-section .star-wrap {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sort-result-section .star-wrap > * {
    display: inline-block;
    vertical-align: middle;
}

.sort-result-section .star-wrap::before {
    content: '\e933';
    font-family: 'LineIcons', sans-serif;
    display: inline-block;
    color: #ffa200;
    vertical-align: middle;
}

.sort-result-section .distance {
    /* margin-top: 12px; */
}

.sort-result-section .info {
    display: flex;
    gap: 8px;
}

.sort-result-section .info .time,
.sort-result-section .info .call {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* 20230130 추가 start */
.sort-result-section .info .time *,
.sort-result-section .info .call * {
    white-space: nowrap;
}
/* 20230130 추가 end */
/* 20230130 end */

.sort-result-section .distance .km {
    position: relative;
    margin-right: 4px;
    padding-right: 4px;
    font-size: 12px;
}

.sort-result-section .distance .km::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 2px;
    width: 1px;
    height: 16px;
    background-color: #333;
}

.sort-result-section .distance .open {
    font-size: 14px;
}

.sort-result-section .distance .address {
    font-size: 14px;
    margin-top: 4px;
}

/* 20230130 start */
.sort-result-section .store-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 16px;
}

.sort-result-section .store-meta > span {
    display: inline-block;
    width: auto;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background-color: #5b6068;
    border-radius: 2px;
}

.sort-result-section .store-meta > span.great-store {
    background-color: #ff8c27;
}

/* .sort-result-section .store-meta > span {
    font-size: 12px;
    color: #5b6068;
}

.sort-result-section .store-meta > span + span:before {
    content: '|';
    padding: 0 4px;
    color: #d9dbdc;
} */
/* 20230130 end */




.sort-result-section .store-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 16px;
    /* 20220316 */
    border-top: 1px solid #d9dbdc;
}

/* 20220210 // */
.sort-result-section .store-button-wrap .location-button {
    background-color: transparent;
    margin-right: 4px;
    padding: 4px;
    border-radius: 4px;
}

.sort-result-section .store-button-wrap .location-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* // 20220210 */
.sort-result-section .store-maps {
    position: relative;
    overflow: hidden;
}

.sort-result-section .store-maps .empty-msg-on-map {
    width: 100%;
    height: 32px;
    line-height: 32px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    color: #fff;
    background: rgba(42, 49, 56, 0.6);
    font-size: 0;
}

.sort-result-section .store-maps .empty-msg-on-map > p {
    line-height: 32px;
    font-size: 14px;
}

.sort-result-section .store-maps .map-wrap {
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
}

.sort-result-section .map-wrap > img {
    width: 100%;
}

.sort-result-section .store-list .store-wrap.disable {
    opacity: .5;
    order: 2;
    pointer-events: none;
}

.sort-result-section .store-list .store-wrap.on-map.disable {
    opacity: 1;
}

/* 20220210 삭제
.store-wrap.disable .store-info .smartstore {
    background-color: #8d8f90;
}
*/
.store-wrap.disable .benefit-wrap .benefit.smart-pickup,
.store-wrap.disable .benefit-wrap .benefit.great-store {
    background-color: #989a9b;
}

.store-wrap.disable .star-wrap::before {
    color: #8f8f8f;
}

/* 상품 장착을 위한 매장선택 (선택된 매장이 있을 경우) ------------------------------------------ */
.map-confirm .description-copy {
    background-color: #f2f2f7;
    line-height: 46px;
    font-size: 14px;
    text-align: center;
    color: #5b6068;
}

.map-confirm .txt-info {
    margin-top: 40px;
    font-size: 18px;
}

.map-confirm .button-wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 20px;
    border-top: 1px solid #f2f2f7;
}

.map-confirm .button-wrap button {
    width: 49%;
}

.map-confirm .store-info-wrap {
    position: relative;
    display: flex;
    margin: 18px 20px;
}

.map-confirm .store-info-wrap .thumb-img {
    /*overflow: hidden;
    position: relative;
    width: 130px;
    height: 120px;
    margin-right: 10px;
    background-color: #ddd;
    border-radius: 4px;*/
    position: relative;
    display: block;
    width: 120px;
    height: 120px;
    padding: 0;
    overflow: hidden;
    margin-right: 10px;
    border-radius: 8px;
    background-color: #E9E9E9;
    background-size: contain;
    background-position: bottom;
    background-image: url("../images/common/shop_default.png");
}

.map-confirm .store-info-wrap .thumb-img:before {
    padding-top: 100%;
}

.map-confirm .thumb-img img {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.map-confirm .thumb-img .btn-item.btn-neutral.btn-ol {
    position: absolute;
    border: 0;
    background-color: rgba(255, 255, 255, 0.6);
    left: 5px;
    bottom: 5px;
}

.map-confirm .store-wrap .store-info {
    position: relative;
    padding: 12px 12px 30px;
}

.map-confirm .store-info .service::after {
    content: "";
    display: block;
    clear: both;
    width: 100%;
}

.map-confirm .store-info .smartstore {
    float: left;
    width: 93px;
    height: 21px;
    margin-right: 3px;
    background-image: url("../images/common/img_allmyt_store.png");
    background-size: 93px 21px;
    background-position: left 50%;
    background-repeat: no-repeat;
    color: #fff;
    line-height: 21px;
    font-size: 9px;
}

.map-confirm .store-info .franchisee {
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.map-confirm .franchisee strong {
    margin-right: 10px;
    font-size: 16px;
    font-weight: normal;
}

.map-confirm .star-wrap {
    font-size: 11px;
}

.map-confirm .star-wrap > * {
    display: inline-block;
    vertical-align: middle;
}

.map-confirm .star-wrap::before {
    content: '\e933';
    font-family: 'LineIcons', sans-serif;
    display: inline-block;
    color: #ffa200;
    vertical-align: middle;
}

.map-confirm .opentime {
    display: block;
    margin-top: 3px;
    font-size: 12px;
}

.map-confirm .distance {
    margin-top: 15px;
}

.map-confirm .distance .info {
    display: block;
    font-size: 14px;
}

.map-confirm .distance .info em {
    display: inline-block;
    margin-left: 5px;
    color: #fe6a2b;
}

.map-confirm .distance .open {
    font-size: 12px;
}

.map-confirm .distance .address {
    font-size: 12px;
    margin-top: 7px;
}

.map-confirm .map-wrap {
    margin: 0 20px;
}

.map-confirm .map-wrap .address {
    font-size: 12px;
}

.map-confirm .map-wrap .map {
    margin-top: 10px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=cart------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.cart-goods-table {
    border-top: 1px solid #d9dbdc;
}

.cart-goods-table thead tr {
    background: #f9f9fa;
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
}

.cart-goods-table th,
.cart-goods-table td {
    padding: 16px 0;
    position: relative;
    vertical-align: middle;
}

.cart-goods-table tbody tr {
    border-bottom: 1px solid #d9dbdc;
}

.cart-goods-table tbody td:not(:first-of-type):not(:last-of-type):after {
    content: '';
    display: block;
    width: 0;
    height: calc(100% - 32px);
    border-left: 1px solid #f2f2f7;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.cart-goods-table tbody td.partition-r:after {
    content: '';
    display: block;
    width: 0;
    height: calc(100% - 32px);
    border-left: 1px solid #f2f2f7;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.cart-goods-table tfoot tr {
    background: #f9f9fa;
    border-bottom: 1px solid #d9dbdc;
    font-size: 18px;
}

.cart-goods-table tfoot tr:first-of-type {
    border-bottom: 1px solid #d9dbdc;
}

.cart-goods-table .btns-wrap {
    width: 50%;
    margin: 0 auto;
}

.cart-goods-table tfoot tr td {
    padding: 24px 0;
}

.cart-goods-table .cart-total > span {
    display: inline-block;
    vertical-align: middle;
}

.cart-goods-table .cart-total > span small {
    color: #5b6068;
    margin-right: 4px;
}

.cart-goods-table .cart-total i {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    position: relative;
    margin: 0 20px;
}

.cart-goods-table .cart-total i:before,
.cart-goods-table .cart-total i:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #a0a6af;
    position: absolute;
    top: 50%;
    left: 50%;
}

.cart-goods-table .cart-total i.plus-icon:before {
    transform: translateX(-50%) translateY(-50%);
}

.cart-goods-table .cart-total i.plus-icon:after {
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.cart-goods-table .cart-total i.equal-icon:before {
    top: calc(50% - 3px);
    transform: translateX(-50%) translateY(-50%);
}

.cart-goods-table .cart-total i.equal-icon:after {
    top: calc(50% + 3px);
    transform: translateX(-50%) translateY(-50%);
}

.cart-goods-table .goods-info {
    background-color: transparent;
    border: none;
}

.cart-goods-table .goods-info .product-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 160px;
    padding: 0 0 0 180px;
    cursor: pointer;
}

.cart-goods-table tr.invalid .product-area {
    cursor: default;
}

.cart-goods-table .goods-info .product-area .thumb-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    overflow: hidden;
}

.cart-goods-table .goods-info .product-area .thumb-wrap .thumb-holder {
    position: relative;
    display: block;
    width: 160px;
    height: 160px;
}

.cart-goods-table .goods-info .product-area .thumb-wrap .thumb-holder img {
    width: 100%;
    height: auto;
}

.cart-goods-table .goods-info .product-area .thumb-wrap .thumb-holder.thumb-scaled img {
    transform: translateY(0) translateZ(0) scale(1.1);
}

.cart-goods-table .goods-info .product-area.service-package { cursor: default; }
.cart-goods-table .goods-info .product-area .thumb-wrap .thumb-holder img.service-package-img {
    transform: translateY(0) translateZ(0) scale(0.8);
}

.cart-goods-table .goods-info .product-area .thumb-wrap .thumb-holder .brands-logo {
    background-color: rgba(255,255,255,0.8);
    z-index: 2;
}

.cart-goods-table .goods-info .product-area .description-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-top: 20px;
}

.cart-goods-table .goods-info .product-area .description-area .model {
    display: block;
    width: 100%;
    height: auto;
    font-size: 18px;
    font-weight: 500;
    margin-top: 8px;
}

.cart-goods-table .goods-info .product-area .description-area .model img {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.cart-goods-table .goods-info .product-area .description-area > p.size {
    font-size: 16px;
    margin-top: 24px;
}

.cart-goods-table .goods-info .product-area .description-area > p.description {
    font-size: 14px;
    margin-top: 24px;
    color: #5b6068;
}

.cart-goods-table .price-info .extra-cost {
    font-size: 14px;
}

.cart-goods-table .price-info .cart-price {
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
}

.cart-goods-table .price-info .cart-price.discount {
    height: 20px;
    line-height: 20px;
    color: #a0a6af;
}

.cart-goods-table tr.invalid .thumb-holder,
.cart-goods-table tr.invalid .product-area .description-area .badge,
.cart-goods-table tr.invalid .product-area .description-area .model,
.cart-goods-table tr.invalid .product-area .description-area p.size,
.cart-goods-table tr.invalid .product-area .description-area p.description,
.cart-goods-table tr.invalid .product-area .description-area .extra-cost {
    opacity: 0.3;
}

.cart-goods-table tr.invalid .thumb-wrap:after,
.cart-goods-table tr.soldout .thumb-wrap:after {
    display: inline-block;
    width: 140px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    background: rgba(42, 49, 56, 0.8);
    font-size: 14px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
}

.cart-goods-table tr.invalid .thumb-wrap:after {
    content: '판매종료';
}

.cart-goods-table tr.soldout .thumb-wrap:after {
    content: '일시품절';
}


.cart-goods-table td:has(.smartpay-pair-price) {
    height: 1px;
}
.cart-goods-table .smartpay-pair-price {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.cart-goods-table .smartpay-pair-price .each-price {
    flex: 1 0 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=smart-pay-info-popup--------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.smart-pay-info-popup .smart-pay-img {
    width: 160px;
}

.smart-pay-info-popup .hooking > li:last-child:after {
    content: "\e900";
    font-family: 'LineIcons', sans-serif !important;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    color: #d9dbdc;
}

.smart-pay-info-popup .section-header {
    line-height: initial;
    text-align: center;
    border-bottom: none;
    padding: 0;
}

.smart-pay-info-popup .section-header .numbering {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 26px;
    border: 1px solid #d9dbdc;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    position: relative;
}

.smart-pay-info-popup .section-header .numbering:before,
.smart-pay-info-popup .section-header .numbering:after {
    content: '';
    display: block;
    width: 100vw;
    height: 0;
    border-top: 1px solid #d9dbdc;
    position: absolute;
}

.smart-pay-info-popup .section-header .numbering:before {
    top: 50%;
    left: 0;
    transform: translateX(-100%);
}

.smart-pay-info-popup .section-header .numbering:after {
    top: 50%;
    right: 0;
    transform: translateX(100%);
}

.smart-pay-info-popup .section-header h4 {
    display: block;
}

/* 상품상세 START */
.item-detail .blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
}

.item-detail .item-section {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.item-detail .guardrail::after {
    display: none;
}

.item-detail .item-thumb-wrap {
    position: relative;
    width: 520px;
    margin-top: 40px;
    margin-left: 74px;
}

.item-detail .item-thumb-wrap .sticky-wrap {
    position: absolute;
    overflow: hidden;
    width: 520px;
    background-color: #fff;
}

.item-detail .item-info-wrap {
    width: 453px;
    min-height: 540px;
    margin-top: 40px;
}

.item-detail .item-info-wrap .order-swiper {
    padding-bottom: 1px;
}

.item-thumb-wrap .item-img {
    position: relative;
    /* 20230313 start */
    padding-top: 64px;
    padding-bottom: 72px;
    /* 20230313 end */
}

.item-thumb-wrap .item-img .img {
    position: relative;
    width: 350px;
    height: 350px;
    margin: auto;
    font-size: 0;
}

.item-thumb-wrap .item-img .img img {
    display: block;
    width: 100%;
    height: 100%;
}

.item-thumb-wrap .item-img .badg-wrap {
    position: absolute;
    left: 0;
    top: 0;
}

.item-thumb-wrap .item-img .badg-wrap .badg {
    display: inline-block;
}

.item-thumb-wrap .item-img .badg-wrap .badg + .badg {
    margin-left: 4px;
}

.item-thumb-wrap .item-img .badg-wrap .badg.best {
    width: 50px;
    height: 64px;
    background-image: url("../images/common/card-type-best.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.item-thumb-wrap.goods .item-img .badg-wrap .badg.best {
    background-image: url("../images/common/card-type-best2.png");
}

.item-thumb-wrap .item-img .badg-wrap .badg.new {
    width: 50px;
    height: 64px;
    background-image: url("../images/common/card-type-new.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.item-thumb-wrap .item-img .brand-wrap {
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.item-thumb-wrap .item-img .brands-logo {
    display: block;
    width: 100%;
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 40px;
}

.item-thumb-wrap .item-img .overlap-status {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 4;
}

.item-thumb-wrap .item-img .overlap-status .overlap-status-inner {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.item-thumb-wrap .item-img .overlap-status .status {
    opacity: .8;
    width: 50%;
}

.item-thumb-wrap .item-benefit {
    position: relative;
    margin-top: 25px;
    padding: 8px 0;
    font-size: 0;
    /* 20230313 start */
    /* border-bottom: 1px solid #d9dbdc; 삭제 */
    /* 20230313 end */
}

.item-thumb-wrap .item-benefit .benefit {
    display: inline-block;
    width: 42px;
    height: 42px;
    margin-right: 8px;
    padding: 8px 0;
    border-radius: 100%;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 110%;
}

.item-thumb-wrap .item-benefit .safe {
    background-color: #d0bc9a;
}

.item-thumb-wrap .item-benefit .safe .tooltip .tooltip-header {
    color: #d0bc9a;
}

.item-thumb-wrap .item-benefit .hotel {
    background-color: #ffab19;
}

.item-thumb-wrap .item-benefit .hotel .tooltip .tooltip-header {
    color: #ffab19;
}

.item-thumb-wrap .item-benefit .reservation {
    background-color: #fe6a2b;
}

.item-thumb-wrap .item-thumb-foot {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 60px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.item-thumb-wrap .item-thumb-foot .star-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 20px;
}

.item-thumb-wrap .item-thumb-foot .rating-star {
    position: relative;
    display: inline-block;
    width: 74px;
    height: 20px;
    margin: 0 8px;
}

.item-thumb-wrap .rating-star .star {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 74px;
    height: 100%;
    background-image: url("../images/common/rating-off.svg");
    background-repeat: no-repeat;
    background-size: 74px auto;
    background-position: left 50%;
}

.item-thumb-wrap .rating-star .override {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url("../images/common/rating-on.svg");
    background-repeat: no-repeat;
    background-size: 74px auto;
    background-position: left 50%;
    z-index: 1;
}

.item-thumb-wrap .share-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.item-thumb-wrap .share-list.deal-coupon-share {
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.item-thumb-wrap .share-list .items + .items {
    margin-left: 24px;
}

.item-thumb-wrap .share-list .items:hover .sns_link {
    transform: translateY(-6px);
}

.item-thumb-wrap .share-list .sns_link {
    display: block;
    background-image: url("../images/common/spr_sns.png");
    background-repeat: no-repeat;
    background-size: 24px auto;
    transition: transform .16s ease-in-out;
}

/* 20220316 // */
.item-thumb-wrap .share-list .share-icon {
    position: relative;
    margin-left: 20px;
    margin-right: 6px;
}

/* //20220316 */
.item-thumb-wrap .share-list .share-icon:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background-color: #F2F2F7;
    transform: translate(-50%, -50%);
}

.item-thumb-wrap .share-list .share-icon.no-bg:before {
    content: none;
}

.item-thumb-wrap .sns_link.kakao {
    width: 24px;
    height: 22px;
    background-position: 0 0;
}

.item-thumb-wrap .sns_link.facebook {
    width: 21px;
    height: 22px;
    background-position: 0 -32px;
}

.item-thumb-wrap .sns_link.naver {
    width: 21px;
    height: 22px;
    background-position: 0 -63px;
}

.item-info-wrap .flag-wrap {
    line-height: 20px;
}

.item-info-wrap .flag-wrap em {
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
    color: #fe6a2b;
    font-weight: 700;
}

.item-info-wrap .name-wrap {
    overflow: hidden;
}

.item-info-wrap .name-wrap .name {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 500;
}

.item-info-wrap .name-wrap .name > img {
    display: block;
    width: 68%;
    height: auto;
}

.item-info-wrap .name-wrap .subname {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 400;
    color: #5b6068;
}

.item-info-wrap .name-wrap .explan {
    margin-top: 12px;
    font-size: 14px;
}

.item-info-wrap .name-wrap .use-wrap {
    display: inline-block;
    height: 24px;
    margin-top: 16px;
    font-size: 0;
}

.item-info-wrap .name-wrap .use-wrap .use {
    display: inline-block;
    margin-right: 4px;
    padding: 0 8px;
    line-height: 24px;
    border-radius: 4px;
    background-color: #5b6068;
    border: none;
    font-size: 12px;
    color: #fff;
}

.item-info-wrap .most-mounted {
    position: relative;
    padding: 14px 12px 14px 100px;
    background-color: #F9F9FA;
    margin-top: 12px;
    border-radius: 6px;
}

.item-info-wrap .most-mounted .label {
    position: absolute;
    top: 12px;
    left: 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 28px;
}

.item-info-wrap .most-mounted .badges .badge {
    margin: 2px;
}

.item-info-wrap .size-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 24px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 36px;
}

.item-info-wrap .size-wrap .size {
    display: inline-block;
    font-size: 20px;
}

.item-info-wrap .size-wrap .tag-wrap {
    display: inline-block;
    height: 24px;
    margin-left: 20px;
    font-size: 0;
}

.item-info-wrap .size-wrap .tag-wrap .tag {
    display: inline-block;
    margin-right: 4px;
    padding: 0 8px;
    line-height: 24px;
    border-radius: 4px;
    background-color: #5b6068;
    border: none;
    font-size: 14px;
    color: #fff;
}

.item-info-wrap .size-wrap .tag-wrap .tag-button {
    background-color: #fff;
    line-height: 24px;
    vertical-align: top;
}

.item-info-wrap .smartpay-wrap {
    margin-top: 50px;
    text-align: right;
}

.item-info-wrap .smartpay-wrap .smartpay-button {
    display: inline-block;
    position: relative;
    margin-left: 4px;
    vertical-align: top;
    background-color: #fff;
    line-height: 20px;
    font-size: 0;
}

.item-info-wrap .smartpay-wrap .smartpay-button::before {
    content: "";
    display: inline-block;
    width: 81px;
    height: 20px;
    background-image: url("../images/common/smart_pay_logo.svg");
    background-size: 81px 20px;
    vertical-align: middle;
}

.item-info-wrap .smartpay-wrap .smartpay-button .line-icons {
    margin-left: 4px;
    vertical-align: middle;
}

.item-info-wrap .type-button-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 8px;
    padding: 6px;
    background-color: #f2f2f7;
}

.item-info-wrap .tabs {
    margin-top: 8px;
}

.item-info-wrap .type-button-wrap .type-button {
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background-color: #f2f2f7;
    border-radius: 4px;
}

.item-info-wrap .type-button-wrap .type-button.active {
    background-color: #fff;
}

.item-info-wrap .type-button-wrap .type-button .label-txt {
    color: #a0a6af;
    font-size: 16px;
    text-align: center;
    line-height: 38px;
}

.item-info-wrap .type-button-wrap .type-button.active .label-txt {
    font-weight: 500;
    color: #fe6a2b;
}

.item-info-wrap .price-wrap .default-sale {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-top: 12px;
    font-weight: 500;
}

.item-info-wrap .price-wrap .default-sale .headline {
    width: 85px;
    font-size: 16px;
    line-height: 58px;
    padding: 0 8px;
}

.item-info-wrap .price-wrap .default-sale .cell {
    line-height: 58px;
    padding: 0 8px;
}

.item-info-wrap .price-wrap .default-sale .discount {
    display: inline-block;
    padding-right: 5px;
    white-space: nowrap;
    font-weight: 500;
    line-height: 41px;
    font-size: 18px;
}

.item-info-wrap .price-wrap .default-sale em {
    display: inline-block;
    padding-right: 1px;
    font-size: 28px;
    vertical-align: -1px;
    line-height: 41px;
    font-weight: 500;
}

.item-info-wrap .price-wrap .toggle-wrap {
    padding: 8px 0 12px;
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
}

.item-info-wrap .price-wrap .toggle-wrap .headline {
    position: relative;
    padding: 0 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
}

.item-info-wrap .price-wrap .toggle-wrap .headline::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 8px;
    bottom: 0;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto 0;
    border: 1px solid #2a3138;
    border-left-width: 0;
    border-top-width: 0;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    z-index: 1;
}

.item-info-wrap .price-wrap .toggle-wrap.active .headline::after {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.item-info-wrap .price-wrap .toggle-wrap .content {
    display: none;
}

.item-info-wrap .price-wrap .toggle-wrap.active .content {
    display: block;
}

.item-info-wrap .price-wrap .toggle-wrap .rowgroup {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 32px;
    margin-top: 10px;
}

.item-info-wrap .price-wrap .rowgroup .rowheader {
    width: 85px;
    font-size: 14px;
    padding-left: 8px;
    color: #5b6068;
    white-space: nowrap;
}

.item-info-wrap .price-wrap .rowgroup .cell {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
    padding: 0 150px 0 8px;
}

.item-info-wrap .price-wrap .rowgroup .discount {
    display: inline-block;
    padding-right: 8px;
    white-space: nowrap;
    font-weight: 500;
    line-height: 29px;
    font-size: 16px;
}

.item-info-wrap .price-wrap .rowgroup em {
    display: inline-block;
    padding-right: 1px;
    font-size: 20px;
    vertical-align: -1px;
    line-height: 29px;
    font-weight: 400;
}

.item-info-wrap .price-wrap .rowgroup del {
    display: inline-block;
    white-space: nowrap;
    line-height: 29px;
    font-size: 16px;
    color: #5b6068;
}

.item-info-wrap .price-wrap .rowgroup .coupon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0;
    right: 0;
    min-width: 150px;
    padding-left: 16px;
    padding-right: 12px;
}

.item-info-wrap .price-wrap .rowgroup .coupon.downloaded:disabled {
    opacity: 1;
    border-color: rgba(42, 49, 56, 0.3);
}

.item-info-wrap .price-wrap .rowgroup .coupon.downloaded:disabled .label-txt {
    opacity: .3;
}

.item-info-wrap .price-wrap .rowgroup .coupon .before {
    display: inline-block;
}

.item-info-wrap .price-wrap .rowgroup .coupon .after {
    display: none;
}

.item-info-wrap .price-wrap .rowgroup .coupon.downloaded .before {
    display: none;
}

.item-info-wrap .price-wrap .rowgroup .coupon.downloaded .after {
    display: inline-block;
    color: #fe6a2b;
}

.item-info-wrap .discount-sale {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 4px;
    font-weight: 500;
}

/* 20230221 start */
.item-info-wrap .discount-sale .headline {
    width: auto;
    font-size: 16px;
    line-height: 56px;
    padding: 0 8px;
}
/* 20230221 end */

.item-info-wrap .discount-sale .cell {
    line-height: 58px;
    padding: 0 8px;
}

.item-info-wrap .discount-sale .discount {
    display: inline-block;
    padding-right: 5px;
    white-space: nowrap;
    font-size: 16px;
}

.item-info-wrap .discount-sale em {
    display: inline-block;
    padding-right: 1px;
    font-size: 20px;
    vertical-align: -1px;
}

.item-info-wrap .toggle-wrap + .buy-option {
    border-top: 0;
}

.item-info-wrap .buy-option {
    padding: 16px 20px 30px;
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
    background-color: #f9f9fa;
}

.item-info-wrap .buy-option .order::after {
    content: "";
    display: table;
    clear: both;
}

.item-info-wrap .buy-option .order .label-title {
    display: inline-block;
    margin-right: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    vertical-align: middle;
}

.item-info-wrap .buy-option .order .label-title:hover .tooltip-bf {
    display: block;
}

.item-info-wrap .buy-option .order .label-title .info-circle {
    position: relative;
    top: -1px;
}

.item-info-wrap .buy-option .order .radio-item .labelling {
    padding-left: 0;
    padding-right: 32px;
    vertical-align: middle;
}

.item-info-wrap .buy-option .order .radio-item .icon-holder {
    width: 28px;
    height: 28px;
    left: auto;
    right: 2px;
    top: 2px;
}

.item-info-wrap .buy-option .order .radio-item .icon-holder::before {
    top: 4px;
    left: 4px;
}

.item-info-wrap .buy-option .order .form-control-number .control {
    background-color: transparent;
}

.item-info-wrap .total-price {
    text-align: right;
    line-height: 40px;
}

.item-info-wrap .total-price .price-info {
    font-size: 14px;
    color: #5b6068;
}

.item-info-wrap .total-price .price {
    display: inline-block;
    min-width: 110px;
    white-space: nowrap;
    font-weight: 400;
    line-height: 100%;
    font-size: 16px;
}

.item-info-wrap .total-price .price em {
    display: inline-block;
    padding-right: 1px;
    font-size: 20px;
    vertical-align: -1px;
    line-height: 29px;
    font-weight: 400;
}

.item-info-wrap .total-price .price.benefit-price {
    color: #fe6a2b;
}

.item-info-wrap .maxbenefit {
    text-align: right;
    line-height: 40px;
}

.item-info-wrap .maxbenefit .price-info {
    font-size: 16px;
    color: #5b6068;
    font-weight: 500;
}

.item-info-wrap .maxbenefit .price {
    display: inline-block;
    min-width: 110px;
    white-space: nowrap;
    font-weight: 500;
    line-height: 100%;
    font-size: 18px;
}

.item-info-wrap .maxbenefit .price em {
    display: inline-block;
    padding-right: 1px;
    font-size: 30px;
    vertical-align: -1px;
    line-height: 40px;
    font-weight: 500;
}

.item-info-wrap .final-price {
    text-align: right;
    margin-top: 8px;
}

.item-info-wrap .final-price .month .price {
    display: inline-block;
    margin-left: 10px;
    white-space: nowrap;
    font-weight: 500;
    line-height: 100%;
    font-size: 18px;
    color: #fe6a2b;
}

.item-info-wrap .final-price .month .price.dark {
    color: #2A3138;
}

.item-info-wrap .final-price .month em {
    display: inline-block;
    padding-right: 1px;
    font-size: 28px;
    vertical-align: -1px;
    line-height: 41px;
    font-weight: 500;
}

.item-info-wrap .final-price .smartpay {
    font-size: 12px;
    font-weight: 500;
}

.item-info-wrap .final-price .smartpay::before {
    content: "";
    display: inline-block;
    width: 70px;
    height: 20px;
    background-image: url("../images/common/smart_pay_logo.svg");
    background-size: 70px 20px;
    vertical-align: middle;
}

.item-info-wrap .final-price .descript {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #5b6068;
}

.item-info-wrap .final-price .descript .coupon {
    top: -1px;
}

.item-info-wrap .final-price strong {
    font-weight: 400;
    color: #fe6a2b;
}

.item-info-wrap .buy-button-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 20px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.item-info-wrap .buy-button-wrap button {
    flex: 1;
    width: 100%;
}

.item-tab-section {
    margin-top: 45px;
    padding-top: 20px;
    border-top: 1px solid #d9dbdc;
}

.item-tab-section .tablist-wrap {
    height: 57px;
    margin-bottom: 40px;
}

.item-tab-section .tablist-wrap .tablist {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 1170px;
    height: 57px;
    margin: auto;
    border-bottom: 1px solid #d9dbdc;
    background-color: #fff;
    z-index: 9;
}

.item-tab-section .tablist-wrap .tablist.fixed {
    position: fixed;
    top: 0;
    z-index: 100;
}

.item-tab-section .tablist-wrap .button-tab {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}

.item-tab-section .tablist-wrap .button-tab a {
    display: block;
    width: 150px;
    height: 55px;
    font-size: 16px;
    line-height: 56px;
    text-align: center;
}

.item-tab-section .tablist-wrap .button-tab.active a {
    color: #fe6a2b;
    font-weight: 500;
}

.item-tab-section .tablist-wrap .button-tab.active::after {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: #fe6a2b;
    content: "";
}

.item-tab-section .tab_cont {
    overflow: hidden;
}

.item-tab-section .tab_cont.hidden {
    height: 225px;
}

.item-tab-section .goods_detail .inner {
    background-color: #f9f9fa;
    border-top: 1px solid #a0a6af;
}

.item-tab-section .goods_detail .inner.tire_info {
    background-color: #ffffff;
}

.item-tab-section .goods_detail .inner.tire_info li:before {
    display: none;
}

.item-related-section {
    margin-top: 36px;
}

.item-related-section .headcopy-wrap {
    padding: 16px 0;
}

.item-related-section .headcopy-wrap .headcopy {
    font-size: 24px;
}

.item-related-section .headcopy-wrap .subcopy {
    margin-top: 8px;
    font-size: 16px;
    color: #5b6068;
}

.item-related-section .item-list-wrap {
    overflow: hidden;
    background-color: #f9f9fa;
    border-top: 1px solid #d9dbdc;
}

.item-related-section .item-list-wrap .related-swiper-wrap {
    margin: 15px 25px;
}

.item-related-section .item-list-wrap .related-swiper-wrap .swiper-wrapper {
    /*padding: 8px;*/
}

.item-related-section .item-list-wrap .related-swiper-wrap li {
    padding: 6px 6px 10px;
}

.item-related-section .btn-item {
    background-color: transparent;
}

.item-related-section .btn-item.btn-prev {
    left: -10px;
}

.item-related-section .btn-item.btn-next {
    right: -10px;
}

.card.card-time-deal .card-inner .description-area.info-group {
    border-top: 1px solid #e4e6e6;
}

.description-area.info-group .group.price-wrap {
    margin-top: 16px;
}

.description-area.info-group .group .size {
    padding-left: 12px;
}

.description-area.info-group .group .price {
    padding: 0;
}

.description-area.info-group .group .discount {
    padding: 0;
    padding-left: 12px;
}

.buy-option .tooltip-bf-container:hover .tooltip-bf {
    display: block;
}

.tooltip-bf-container {
    position: relative;
    display: inline-block;
}

.tooltip-bf-container .tooltip-bf {
    display: none;
    position: absolute;
    border: 1px solid #2ed0ff;
    border-radius: 8px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.2);
    color: #ffffff;
    width: 180px;
    height: auto;
    z-index: 800;
    text-align: left;
}

.tooltip-bf-container:hover .tooltip-bf {
    display: block;
}

.tooltip-bf-container .tooltip-bf::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 7px;
    height: 7px;
    margin: auto 0;
    border: 1px solid #2ed0ff;
    border-left-width: 0;
    border-top-width: 0;
    background-color: #fff;
}

.tooltip-bf-container.left .tooltip-bf {
    margin-right: 10px;
    top: 50%;
    right: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.tooltip-bf-container.left .tooltip-bf::after {
    top: 50%;
    right: -5px;
    margin-top: -5px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.tooltip-bf-container.top .tooltip-bf {
    margin-bottom: 10px;
    left: 50%;
    bottom: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tooltip-bf-container.top .tooltip-bf::after {
    left: 50%;
    bottom: -5px;
    margin-left: -5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tooltip-bf-container.right .tooltip-bf {
    margin-left: 10px;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.tooltip-bf-container.right .tooltip-bf::after {
    top: 50%;
    left: -5px;
    margin-top: -5px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.tooltip-bf-container.bottom .tooltip-bf {
    margin-top: 5px;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tooltip-bf-container.bottom .tooltip-bf::after {
    left: 50%;
    top: -5px;
    margin-left: -5px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.tooltip-bf-container .tooltip-bf .tooltip-header {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
}

.tooltip-bf-container .tooltip-bf .tooltip-body {
    display: block;
    font-size: 12px;
    white-space: normal;
    color: #5b6068;
}

.tooltip-bf-container .tooltip-bf .tooltip-body strong {
    font-weight: 500;
}

.item-tab-section .vendor-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    text-align: center;
}

.item-tab-section .vendor-container .detail-gradient {
    position: relative;
    display: block;
    padding: 15px 0;
    background-color: #fff;
}

.item-tab-section .vendor-container .detail-gradient::before {
    content: "";
    position: absolute;
    left: 0;
    height: 50px;
    top: -50px;
    right: 0;
    display: block;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), white);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), white);
}

.item-tab-section .vendor-container .btn-item {
    padding: 0 50px;
}

.next-product-wrap {
    position: relative;
    text-align: center;
    padding: 18px 0;
}

.next-product-wrap a {
    display: inline-block;
}

.next-product-wrap .noproduct {
    width: 330px;
    text-align: center;
}

.next-product-wrap .noproduct > img {
    display: inline-block;
    width: 266px;
    height: auto;
}

.next-product-wrap .noproduct::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    height: 50px;
    top: 40%;
    right: 0;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), #f2f2f7);
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2), #f2f2f7);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.2), #f2f2f7);
    z-index: -1;
}

.next-product-wrap .copy {
    margin-top: 16px;
    font-size: 20px;
    color: #2a3138;
}

.next-product-wrap .more-link {
    margin-top: 10px;
    color: #fe6a2b;
}

.next-product-wrap .more-link .typo {
    display: inline-block;
    border-bottom: 1px solid #fe6a2b;
    font-size: 16px;
}

/* 상품상세 END */
/* 딜 상품상세 start */
.item-thumb-wrap .dealtime-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    padding: 0 24px;
    border-radius: 20px;
    background-color: #fe6a2b;
    z-index: 5;
}

.item-thumb-wrap .dealtime-wrap .label-txt {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    line-height: 40px;
}

.item-thumb-wrap .dealtime-wrap .info {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.item-thumb-wrap .dealtime-wrap .info .count {
    margin: 0 6px 0 2px;
    font-size: 24px;
    font-weight: 300;
    line-height: 100%;
}

.item-info-wrap .main-banner-item {
    position: relative;
    margin: 36px 0;
    padding: 13px 120px 13px 36px;
    border-radius: 4px;
}

.item-info-wrap .main-banner-item.gold {
    background-color: #cbb58f;
}

.item-info-wrap .main-banner-item a {
    display: block;
}

.item-info-wrap .main-banner-item .txt {
    font-size: 16px;
    color: #fff;
}

.item-info-wrap .main-banner-item .img {
    position: absolute;
    right: 20px;
    transform: translateY(-50%);
}

.item-thumb-wrap.coupon-thumb .sticky-wrap {
    height: auto;
}

.item-thumb-wrap .item-coupon {
    position: relative;
    background-color: #f2f2f7;
    height: 400px;
    border-radius: 8px;
}

.item-thumb-wrap .item-coupon .img {
    position: relative;
    width: 350px;
    height: 350px;
    margin: auto;
    font-size: 0;
}

.item-thumb-wrap .item-coupon .img img {
    display: block;
    width: 100%;
    height: 100%;
}

.item-thumb-wrap .item-coupon .btn-coupon-download .coupon-download-before {
    display: inline-block;
}

.item-thumb-wrap .item-coupon .btn-coupon-download .coupon-download-after {
    display: none;
}

.item-thumb-wrap .item-coupon .btn-coupon-download .coupon-download-after .label-txt {
    color: #2A3138;
}

.item-thumb-wrap .item-coupon .btn-coupon-download.downloaded .coupon-download-before {
    display: none;
}

.item-thumb-wrap .item-coupon .btn-coupon-download.downloaded .coupon-download-after {
    display: inline-block;
}

.shop-items-wrap {
    /*display: -webkit-box;*/
    /*display: -webkit-flex;*/
    /*display: flex;*/
    /*-webkit-flex-wrap: wrap;*/
    /*flex-wrap: wrap;*/
    margin: 20px 0;
}

.shop-items-wrap .items {
    -webkit-flex-basis: 33.3%;
    flex-basis: 33.3%;
}

.coupon-thumb .deal-coupon-after {
    margin-top: 30px;
    padding: 0 65px;
}

.coupon-thumb .deal-coupon-after button {
    width: 100%;
}

.coupon-thumb .deal-coupon-after .label-txt {
    margin-right: 4px;
}

.coupon-thumb .deal-coupon-after button .check {
    color: #fe6a2b;
}

.coupon-thumb .coupon-card-wrap .coupon-card-detail::before,
.coupon-thumb .coupon-card-wrap .coupon-card-detail::after {
    top: 50%;
}

.coupon-thumb .item-coupon {
    padding: 78px 65px 0;
}

.coupon-thumb .item-coupon button {
    width: 100%;
    margin-top: 12px;
}

.coupon-thumb .item-coupon button .label-txt {
    margin-right: 12px;
    color: #fff;
    font-size: 18px;
}

.coupon-thumb .item-coupon .explan {
    margin-top: 8px;
    color: #fe6a2b;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.item-coupon .coupon-card.coupon-card-detail .coupon-card-info {
    padding-bottom: 40px;
}

.item-coupon .coupon-card.coupon-card-detail .coupon-card-info .txt-42 {
    font-size: 42px;
}

.item-coupon .coupon-card.coupon-card-detail .coupon-card-info .txt-22 {
    font-size: 22px;
}

.item-coupon .coupon-card.coupon-card-detail .coupon-card-info .bi-img img {
    width: 91px;
}

.item-coupon .coupon-card.coupon-card-detail .coupon-card-info::after {
    display: none;
}

.coupon-info-wrap {
    overflow: hidden;
    position: relative;
}

.coupon-info-wrap .headline {
    margin-top: 28px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.coupon-info-wrap .description {
    margin-top: 8px;
    font-size: 14px;
}

.coupon-info-wrap .description strong {
    color: #fe6a2b;
    font-weight: 400;
}

.coupon-info-wrap .description ol {
    list-style-type: decimal;
    padding-left: 20px;
}

.coupon-info-wrap .description li {
    margin-top: 20px;
}

.coupon-info-wrap .description li:first-child {
    margin-top: 0;
}

.deal-tab-section {
    margin-top: 45px;
    padding-top: 20px;
    border-top: 1px solid #d9dbdc;
}

.deal-store-list .items {
    border-bottom: 1px solid #d9dbdc;
}

.deal-store-list .items .store-info-wrap {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.deal-store-list .thumb-img {
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 166px;
    margin: 40px 32px 47px 0;
    border: 1px solid #f2f2f7;
    border-radius: 4px;
    background-image: url("../images/common/shop_default.png");
    background-size: cover;
    background-position: center;
}

.deal-store-list .thumb-img img {
    display: block;
    width: auto;
    height: 100%;
}

.deal-store-list .service::after {
    content: "";
    display: block;
    clear: both;
    width: 100%;
}

.deal-store-list .service .smartstore {
    float: left;
    width: 93px;
    height: 21px;
    margin-right: 3px;
    background-image: url("../images/common/img_allmyt_store.png");
    background-size: 93px 21px;
    background-position: left 50%;
    background-repeat: no-repeat;
    color: #fff;
    line-height: 21px;
    font-size: 9px;
}

.deal-store-list .franchisee {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 16px;
}

.deal-store-list .franchisee strong {
    font-size: 20px;
    font-weight: 400;
}

.deal-store-list .franchisee strong::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 17px;
    margin: 0 12px;
    background-color: #2a3138;
}

.deal-store-list .franchisee .opentime {
    font-size: 16px;
    font-weight: 500;
}

.deal-store-list .franchisee .star-wrap {
    margin-left: 30px;
    font-size: 12px;
}

.deal-store-list .star-wrap .star {
    top: -1px;
    color: #ff8c27;
}

.deal-store-list .spot {
    margin-top: 12px;
    font-size: 14px;
}

.deal-store-list .spot .address::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 12px;
    background-color: #b1b3b4;
}

.deal-store-list .uniq {
    margin-top: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.deal-store-list .uniq .txt {
    font-size: 14px;
}

.deal-store-list .uniq .txt::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 12px;
    background-color: #2a3138;
}

.deal-store-list .uniq .txt:last-child::after {
    display: none;
}

.deal-store-list .button-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0 8px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 250px;
    padding: 20px;
    background-color: #f9f9fa;
}

.deal-store-list .button-wrap.store-more-action {
    position: absolute;
    top: 0%;
    right: 0;
    bottom: auto;
    height: 100%;
    left: auto;
}

.deal-store-list .button-wrap button {
    margin: 10px 0;
}

.deal-store-list .store-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-top: 40px;
}

.deal-store-list .store-info .info-group {
    min-height: 166px;
}

.deal-store-list .store-info .info-group div:first-child {
    margin-top: 0;
}

.deal-store-list .store-info .store-label {
    line-height: 47px;
    border-top: 1px solid #f2f2f7;
}

.deal-store-list .store-info .point {
    display: inline-block;
    margin-right: 8px;
    padding: 0 10px;
    border-radius: 12px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    background-color: #b1b3b4;
}

.deal-store-list .store-info .point.winstore {
    background-color: #ff8c27;
}

/* 우수매장 */
.deal-store-list .store-info .point.smartpick {
    background-color: #6eb8bc;
}

/* 스마트픽업 */
.deal-store-list .store-info .point.dealstore {
    background-color: #cbb58f;
}

/* 우리동네딜 */
/*.deal-store-list .store-info .point.imported { background-color: #008bec; } !* 수입차정비 *!*/
/* 딜 상품상세 end */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=order-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.order-upper-area {
    width: 100%;
    height: auto;
    position: relative;
}

.order-lower-area {
    width: 100%;
    height: auto;
    position: relative;
}

.order-lower-area .order-static-area {
    width: 800px;
    height: auto;
    position: relative;
    padding-right: 40px;
    float: left;
}

.order-lower-area .order-sticky-area {
    width: 360px;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
}

.order-lower-area .order-sticky-area.sticky {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(225px);
}

.order-lower-area .order-sticky-area.absolute {
    position: absolute;
    top: auto;
    bottom: 0;
    transform: translateX(0);
}

.order-upper-area:after,
.order-lower-area:after {
    content: '';
    display: table;
    clear: both;
}

/* 딜 상품상세 end */
/*guide-item*/
/* 0722 start */
.display-page .guide-item {
    bottom: 120px;
}

/* 0722 end */
.guide-item {
    display: block;
    position: fixed;
    width: 56px;
    height: 56px;
    overflow: visible;
    bottom: 20px;
    right: 20px;
    z-index: 900;
    opacity: 1;
    transition: all 0.2s;
}

.guide-item.hide {
    opacity: 0;
    transition: all 0.3s;
}

.guide-item.on {
    opacity: 1;
}

/* 0709 start */
.guide-item .btn-guide-item-on {
    position: relative;
    width: 56px;
    height: 56px;
    right: 0px;
    bottom: 0px;
    color: #fff;
    padding: 0px;
    background: rgba(88, 193, 199, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    pointer-events: all;
    border-radius: 50%;
    z-index: 5;
}

.guide-item .btn-guide-item-on.btn-item:hover::after {
    transform: none;
    width: auto;
    height: auto;
}

.guide-item .btn-guide-item-on::after {
    content: "도움이 필요하다면?";
    position: absolute;
    left: 50%;
    top: -34px;
    display: block;
    width: 62px;
    height: 34px;
    margin-left: -31px;
    color: #000;
    font-size: 12px;
    z-index: 1;
    line-height: 140%;
    opacity: 1;
    transition: opacity 1s;
}

.guide-item.on .btn-guide-item-on::after {
    opacity: 0;
}

/* 0709 end */
.guide-menus-lst {
    width: 320px;
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    right: 0;
    bottom: 64px;
}

.guide-item.on .guide-menus-lst {
    pointer-events: all;
    visibility: visible;
}

.guide-menus-lst li {
    height: 84px;
    padding: 0px 10px 0px 20px;
    margin-top: 4px;
    border: 1px solid #d9dbdc;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    visibility: hidden;
}

.guide-item.on .guide-menus-lst li {
    pointer-events: all;
    visibility: visible;
}

.guide-menus-lst li:hover:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    border-radius: inherit;
    border: 1px solid rgba(88, 193, 199, 0.9);
    position: absolute;
    top: -1px;
    left: -1px;
}

.guide-item.on .guide-menus-lst li:nth-of-type(1) {
    transform: translateY(0) translateZ(0);
    opacity: 1;
    transition: all 0.3s;
}

.guide-item.on .guide-menus-lst li:nth-of-type(2) {
    transform: translateY(0) translateZ(0);
    opacity: 1;
    transition: all 0.3s 0.05s;
}

.guide-item.on .guide-menus-lst li:nth-of-type(3) {
    transform: translateY(0) translateZ(0);
    opacity: 1;
    transition: all 0.3s 0.1s;
}

.guide-item .guide-menus-lst li:nth-of-type(1) {
    transform: translateY(100%) translateZ(0);
    opacity: 0;
    transition: all 0.2s 0.1s;
}

.guide-item .guide-menus-lst li:nth-of-type(2) {
    transform: translateY(100%) translateZ(0);
    opacity: 0;
    transition: all 0.2s 0.05s;
}

.guide-item .guide-menus-lst li:nth-of-type(3) {
    transform: translateY(100%) translateZ(0);
    opacity: 0;
    transition: all 0.2s;
}

.guide-menus-lst .bt-menu {
    overflow: hidden;
    display: block;
    padding: 12px 0px 16px 0px;
    position: relative;
}

.guide-menus-lst .bt-menu .label-txt {
    float: left;
    line-height: 26px;
}

.guide-menus-lst .bt-menu .ico-set {
    float: right;
    padding-top: 15px;
    color: #5eb0b5;
    vertical-align: middle;
}

.guide-menus-lst .ico-set span {
    vertical-align: middle;
}

/*
.fader-ani {
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.fader-ani.fadedOut {
    opacity: 0;
}
*/
/*order : popup*/
/*스마트 픽업 관련*/
.smart-pickup-history-list > li, .address-search-result-list > li {
    padding: 0;
    margin-top: 16px;
    background: #fff;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    overflow: hidden;
}

.smart-pickup-history-list > li .badge, .address-search-result-list > li .badge {
    width: 100%;
}

.address-search-result-list > li.accordion-item.on,
.smart-pickup-history-list > li.accordion-item.on {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.smart-pickup-history-list > li .btn-item.btn-free, .address-search-result-list > li .btn-item.btn-free {
    padding: 12px 16px;
    border: none;
    background: transparent;
}

.smart-addr-result .form-control-md .input-box {
    background-color: #f9f9fa;
}

.address-search-header {
    position: sticky;
    position: -webkit-sticky;
    top: 1px;
    z-index: 1001;
    background: #fff;
    border-bottom: 1px solid #d9dbdc;
}

.address-search-result table.pd-thin th, .address-search-result table.pd-thin td {
    padding: 2px 0px;
}

.border-r {
    border-right-width: 1px;
    border-right-style: solid;
    border-color: #d9dbdc;
}

.order-setting-table {
    font-size: 18px;
    table-layout: auto;
}

.order-setting-table tr {
    border-bottom: 1px solid #d9dbdc;
}

.order-setting-table tr.edit-mode {
    border-bottom: 1px solid #f2f2f7;
}

.order-setting-table th {
    text-align: left;
    padding: 16px 0 16px 20px;
    line-height: 120%;
}

.order-setting-table td {
    text-align: left;
    padding: 16px 0 16px 20px;
    line-height: 120%;
    position: relative;
}

.order-setting-table td.pd-l-0 {
    padding-left: 0;
}

.order-setting-table td.txt-right {
    text-align: right;
}

.order-setting-table .partition-l:after,
.order-setting-table .partition-r:after {
    content: '';
    display: block;
    width: 0;
    height: calc(100% - 24px);
    border-left: 1px solid #d9dbdc;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.order-setting-table .partition-l:after {
    left: 0;
}

.order-setting-table .partition-r:after {
    right: 0;
}

.order-setting-table .form-control.form-control-inline.inline-lg label {
    font-size: 18px;
}

.order-setting-table .form-control.form-control-inline.inline-md label {
    font-size: 18px;
}

.order-setting-table .btn-item.full-w,
.order-setting-table .form-control .input-group {
    max-width: 320px;
}

.order-setting-table .form-control .input-box {
    font-size: 18px;
}

.order-setting-table .input-box::placeholder {
    font-size: 18px;
}

.order-setting-table .input-box:focus {
    border-color: #fe6a2b;
}

.order-setting-table .input-box:not(select):read-only {
    background-color: #fff;
    border-color: transparent;
    pointer-events: none;
}

.input-box:disabled,
.input-box.disabled,
.form-control.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.schedule-picker {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
}

.date-pick-item {
    width: 680px;
    height: auto;
    position: relative;
    padding: 0 36px;
}

.date-pick-item .month-controller {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    font-size: 0;
}

/* 20220210 // */
.date-pick-item .month-controller > span {
    display: inline-block;
    width: 180px;
    vertical-align: middle;
    line-height: 32px;
    font-size: 16px;
    font-weight: 500;
}

/* // 20220210 */
.date-pick-item .day-controller {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    font-size: 0;
    padding: 8px 0 0;
}

.date-pick-item .day-controller ul > li:nth-of-type(7n+1) {
    color: #ff4241;
}

.date-pick-item .day-controller .d-o-w {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
}

.date-pick-item .day-controller .d-o-w > li {
    width: 14.285%;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 44px;
    float: left;
}

.date-pick-item .day-controller .days {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
}

.date-pick-item .day-controller .days > li {
    width: 14.285%;
    text-align: center;
    font-size: 14px;
    line-height: 100%;
    float: left;
    padding: 8px 0;
}

.date-pick-item .days .day-radio-item {
    display: inline-block;
    width: 32px;
    height: 32px;
    position: relative;
    font-size: 0;
    cursor: default;
}

.date-pick-item .days .day-radio-item input {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    opacity: 0;
}

.date-pick-item .days .day-radio-item .labelling {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    position: relative;
}

.date-pick-item .days .day-radio-item.today .labelling {
    border-color: #fe6a2b;
}

.date-pick-item .days .day-radio-item.another-month .labelling {
    opacity: 0.6;
}

/* 20220210 // */
.date-pick-item .days .day-radio-item.today .labelling:after {
    content: '오늘';
    font-size: 12px;
    line-height: 20px;
    color: #fe6a2b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    pointer-events: none;
}

/* // 20220210 */
.date-pick-item .days .day-radio-item input:disabled ~ .labelling {
    pointer-events: none;
    cursor: default;
    color: rgba(42, 49, 56, 0.3);
}

.date-pick-item .day-controller .days > li:nth-of-type(7n+1) .day-radio-item input:disabled ~ .labelling {
    pointer-events: none;
    cursor: default;
    opacity: 1;
    color: rgba(255, 66, 65, 0.3);
}

.date-pick-item .days .day-radio-item input:checked ~ .labelling {
    background: #fe6a2b;
    color: #fff;
}

/* 20220210 // */
.date-pick-item .days .day-radio-item input:checked ~ .labelling:after {
    content: '장착일';
    font-size: 12px;
    line-height: 20px;
    color: #fe6a2b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    pointer-events: none;
}

.date-pick-item .days .day-radio-item.fastday input ~ .labelling:after {
    content: '가장 빠른 장착일';
    font-size: 12px;
    line-height: 20px;
    color: #fe6a2b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    pointer-events: none;
    white-space: nowrap;
}

/* // 20220210 */
.date-pick-item .days .day-radio-item .labelling:hover {
    background: rgba(42, 49, 56, 0.05);
}

.today-service-tooltip {
    display: none;
    width: auto;
    height: auto;
    line-height: 120%;
    font-size: 12px;
    background: rgba(42, 49, 56, 0.7);
    padding: 8px 12px;
    padding-right: 28px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 1;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    color: #fff;
    cursor: pointer;
}

.today-service-tooltip.on {
    display: inline-block;
}

.today-service-tooltip:before {
    content: '';
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top: 6px solid rgba(42, 49, 56, 0.7);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 1;
}

.today-service-tooltip:after {
    content: "\e91c";
    content: "\e91b";
    font-family: 'LineIcons', sans-serif !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 6px;
    color: #fff;
    transform: translateY(-50%);
}

.time-pick-item {
    flex: auto;
    height: auto;
    position: relative;
    padding: 0 36px;
    text-align: center;
    border-left: 1px solid #d9dbdc;
}

.time-pick-item .times {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
}

.time-pick-item .times > li {
    width: 25%;
    text-align: center;
    font-size: 14px;
    line-height: 100%;
    float: left;
    padding: 4px 2px;
}

.time-pick-item .times .time-item {
    overflow: hidden;
    display: block;
    position: relative;
    width: 100%;
    cursor: default;
}

.time-pick-item .times .time-item input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: -100px;
}

.time-pick-item .times .time-item .label-txt {
    display: block;
    border: 1px solid #2a3138;
    border-radius: 4px;
    font-size: 16px;
    color: #2a3138;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}

.time-pick-item .times .time-item .label-txt:hover {
    background: rgba(42, 49, 56, 0.05);
}

.time-pick-item .times .time-item input[type="radio"]:disabled ~ .label-txt {
    border: 1px solid #d9dbdc;
    font-size: 16px;
    color: #c0c6ce;
    pointer-events: none;
    cursor: default;
}

.time-pick-item .times .time-item input[type="radio"]:checked ~ .label-txt {
    border: 1px solid #fe6a2b;
    background-color: #fe6a2b;
    color: #fff;
}

.radio-item.visit-type-radio-item {
    width: 100%;
    overflow: visible;
}

.radio-item.visit-type-radio-item .labelling {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    font-size: 0;
    position: relative;
    padding: 0;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    padding: 36px 0 32px;
}

.radio-item.visit-type-radio-item .labelling:hover {
    background: transparent;
    border-color: #fe6a2b;
}

.radio-item.visit-type-radio-item input[type="radio"]:checked ~ .labelling {
    border-color: #fe6a2b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.radio-item.visit-type-radio-item .pictogram-holder {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    right: 36px;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.radio-item.visit-type-radio-item input:checked ~ .pictogram-holder {
    background-image: url("../images/common/graphics_visit_type1_act.svg");
}

.order-visit-type > li:first-of-type .radio-item.visit-type-radio-item .pictogram-holder {
    background-image: url("../images/common/graphics_visit_type1.svg");
}

.order-visit-type > li:first-of-type .radio-item.visit-type-radio-item input:checked ~ .pictogram-holder {
    background-image: url("../images/common/graphics_visit_type1_act.svg");
}

.order-visit-type > li:last-of-type .radio-item.visit-type-radio-item .pictogram-holder {
    background-image: url("../images/common/graphics_visit_type2.svg");
}

.order-visit-type > li:last-of-type .radio-item.visit-type-radio-item input:checked ~ .pictogram-holder {
    background-image: url("../images/common/graphics_visit_type2_act.svg");
}

.radio-item.visit-type-radio-item .icon-holder {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 0;
}

.radio-item.visit-type-radio-item .icon-holder:before {
    width: 28px;
    height: 28px;
}

.radio-item.visit-type-radio-item .icon-holder span {
    width: 28px;
    height: 28px;
    line-height: 28px;
}

.radio-item.visit-type-radio-item .label-txt {
    display: block;
    width: auto;
    height: auto;
    line-height: 100%;
    vertical-align: middle;
    font-size: 14px;
    text-align: center;
}

.radio-item.visit-type-radio-item .label-txt.txt-20 {
    font-size: 20px;
}

.radio-item.visit-type-radio-item input[type="radio"]:checked ~ .labelling .icon-holder span:after,
.radio-item.visit-type-radio-item input[type="radio"]:checked ~ .icon-holder span:after {
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #fe6a2b;
}

.smart-pickup-place dt {
    font-size: 0;
}

.smart-pickup-place dt h5 {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.smart-pickup-place dt .btn-re {
    width: 80px;
}

.smart-pickup-place dd {
    font-size: 0;
    background: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    position: relative;
    cursor: default;
    overflow: hidden;
    border: 1px solid transparent;
    margin-top: 8px;
    border: 1px solid #d9dbdc;
    cursor: pointer;
}

.smart-pickup-place dd:hover {
    background: rgba(0, 0, 0, 0.05);
}

.smart-pickup-place dd p {
    padding-right: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.smart-pickup-place dd p:not(.txt-neutral3):after {
    content: '재선택';
    font-size: 14px;
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #5b6068;
}

.smart-pickup-place dd:after {
    content: "\e92e";
    font-family: 'LineIcons', sans-serif;
    display: block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #2a3138;
    pointer-events: none;
}

.install-method-summary {
    text-align: left;
    padding: 20px;
    background: #f2f2f7;
    border-radius: 4px;
}

.install-method-summary li {
    padding: 0 20px;
}

.install-method-summary li > span {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}

.install-method-summary li:not(:last-of-type) {
    border-right: 1px solid #d9dbdc;
}

.install-method-summary li > span small {
    color: #5b6068;
    font-size: 14px;
    display: block;
    margin-bottom: 16px;
}

.install-method-summary li > span em {
    color: #2a3138;
    font-size: 18px;
}

.install-method-summary li > span em.txt-16 {
    font-size: 16px;
}

.order-car-info .input-box {
    font-size: 16px;
}

.order-car-info .input-box::placeholder {
    font-size: 16px;
}

.order-car-info .input-box:disabled,
.order-car-info .input-box.disabled,
.order-car-info .form-control.disabled {
    opacity: 1;
}

.order-car-info .input-box:disabled ~ .tools,
.order-car-info .input-box.disabled ~ .tools {
    display: none;
}

.order-car-info select {
    background-color: #fff;
}

.order-car-info select:disabled {
    background-color: #f9f9fa;
    color: #5b6068;
}

.order-car-info input {
    background-color: #fff;
}

.order-car-info input:read-only {
    background-color: #f9f9fa;
    color: #5b6068;
}

.order-car-info .form-control.form-control-inline.inline-xl label {
    font-size: 14px;
}

.order-coupon-wrap {
    width: 100%;
    height: auto;
    position: relative;
    padding: 16px 0;
    list-style: none;
    display: flex;
    border-bottom: 1px solid #d9dbdc;
}

.order-coupon-wrap > dt {
    width: 110px;
    background: #f9f9fa;
    border-radius: 4px;
    padding: 20px 12px;
    font-size: 16px;
}

.order-coupon-wrap > dd {
    flex: auto;
    padding-left: 16px;
}

.order-coupon-wrap .product-list > li {
    padding: 16px 0;
    border-top: 1px solid #d9dbdc;
}

.order-coupon-wrap .product-list > li:first-of-type {
    border-top: none;
}

.order-coupon-wrap .product-list > li:only-child {
    padding: 32px 0;
}

.order-coupon-wrap .card {
    border: none;
}

.order-coupon-wrap .card {
    display: flex;
    flex-direction: row;
}

.order-coupon-wrap .card .product-area {
    position: relative;
    display: block;
    height: auto;
    min-height: 150px;
    padding: 0 0 0 150px;
    cursor: default;
    width: 450px;
    min-width: 0;
}

.order-coupon-wrap .card .product-area .thumb-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    overflow: hidden;
}

.order-coupon-wrap .card .product-area .thumb-wrap .thumb-holder {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
}

.order-coupon-wrap .card .product-area .thumb-wrap .thumb-holder img {
    width: 100%;
    height: auto;
}

.order-coupon-wrap .card .product-area .thumb-wrap .thumb-holder.thumb-scaled img {
    transform: translateY(0) translateZ(0) scale(1.1);
}

.order-coupon-wrap .card .product-area .thumb-wrap .thumb-holder .brands-logo {
    background-color: #fff;
    z-index: 2;
    transition: none;
}

.order-coupon-wrap .card .product-area:hover .thumb-wrap .thumb-holder .brands-logo {
    transform: translateY(0) translateZ(0);
}

.order-coupon-wrap .card .product-area .description-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-top: 16px;
}

.order-coupon-wrap .card .product-area .description-area .btn-smart-pay-info {
    white-space: nowrap;
}

.order-coupon-wrap .card .product-area .description-area .model {
    display: block;
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: 400;
    margin-top: 8px;
}

.order-coupon-wrap .card .product-area .description-area .model:after {
    content: '';
    display: block;
    clear: both;
}

.order-coupon-wrap .card .product-area .description-area .model img {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.order-coupon-wrap .card .product-area .description-area .model + p.size {
    margin-top: 24px;
}

.order-coupon-wrap .card .product-area .description-area > .size {
    font-size: 16px;
    font-weight: 500;
    margin-top: 24px;
}

.order-coupon-wrap .card .product-area .description-area > .model-detail {
    font-size: 16px;
    margin-top: 8px;
    color: #2a3138;
}

.order-coupon-wrap .card .product-area .description-area > .description {
    font-size: 16px;
    margin-top: 8px;
    color: #2a3138;
}

.order-coupon-wrap .card .price-area {
    flex: auto;
    min-width: 0;
    border-left: 1px solid #f2f2f7;
    text-align: right;
    position: relative;
}

.order-coupon-wrap .card .price-area .middler {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 16px;
}

.order-coupon-wrap .card .price-area .extra-cost {
    font-size: 14px;
    line-height: 100%;
}

.order-coupon-wrap .card .price-area .origin-price {
    font-size: 14px;
    margin-top: 32px;
    line-height: 100%;
}

.order-coupon-wrap .card .price-area .origin-price em {
    font-size: 20px;
}

.order-coupon-wrap .apply-coupon {
    display: flex;
    align-items: center;
    height: auto;
    padding: 9px 12px;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background-color: #f9f9fa;
    margin-top: 16px;
}

.order-coupon-wrap .apply-coupon .title {
    font-size: 14px;
    color: #fe6a2b;
    margin-right: 10px;
}

.order-coupon-wrap .apply-coupon em {
    font-size: 16px;
    line-height: 20px;
}

.order-coupon-wrap .foot-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    margin-top: 16px;
    padding-right: 16px;
}

.order-coupon-wrap .foot-wrap .discount {
    display: inline-block;
    white-space: nowrap;
    font-weight: 400;
    line-height: 20px;
    font-size: 14px;
}

.order-coupon-wrap .foot-wrap .discount em {
    display: inline-block;
    font-size: 24px;
    line-height: 20px;
    font-weight: 400;
}

.order-coupon-wrap .foot-wrap del {
    display: inline-block;
    white-space: nowrap;
    line-height: 20px;
    font-size: 14px;
    color: #a0a6af;
    margin-left: 8px;
}

.btn-smart-pay-info .smart-pay-img {
    display: inline-block;
    height: 20px;
}

.order-coupon-total {
    text-align: center;
    padding: 20px 0;
    border: 1px solid #fe6a2b;
    margin-top: 20px;
}

.order-coupon-total li > span {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
}

.order-coupon-total li > span small {
    color: #5b6068;
    font-size: 14px;
    display: block;
    margin-bottom: 16px;
}

.order-coupon-total li > span em {
    color: #2a3138;
    font-size: 24px;
}

.order-coupon-total i {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(50%) translateY(-50%);
}

.order-coupon-total i:before,
.order-coupon-total i:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #a0a6af;
    position: absolute;
    top: 50%;
    left: 50%;
}

.order-coupon-total i.plus-icon:before {
    transform: translateX(-50%) translateY(-50%);
}

.order-coupon-total i.plus-icon:after {
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.order-coupon-total i.equal-icon:before {
    top: calc(50% - 3px);
    transform: translateX(-50%) translateY(-50%);
}

.order-coupon-total i.equal-icon:after {
    top: calc(50% + 3px);
    transform: translateX(-50%) translateY(-50%);
}

.additional-msg-tip {
    height: 80px;
    padding: 20px;
    padding-left: 84px;
}

.additional-msg-tip p {
    line-height: 20px;
}

.additional-msg-tip .line-icons.coupon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 40px;
    border-radius: 50%;
    background: #fff;
    color: #cbb58f;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.additional-msg-check {
    padding-top: 8px;
}

.additional-msg-check > li {
    width: 50%;
    float: left;
    padding: 8px 0;
}

.order-complete-icon {
    position: relative;
    font-size: 0;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.order-complete-icon .line-icons.size-20 {
    position: absolute;
    top: 0;
    right: -12px;
    background-color: #5eb0b5;
    border-radius: 50%;
    color: #fff;
}

.order-complete-icon .line-icons.size-20:before {
    font-size: 16px !important;
}

/* 20230420 start */
.smart-pay-bonus-coupon-info {
    background: #6d80f5;
    border-radius: 8px;
    text-align: left;
    display: flex;
}

.smart-pay-bonus-coupon-info > .container:first-of-type {
    padding: 56px 0 0 32px;
    flex: 0 1 auto;
}

.smart-pay-bonus-coupon-info > .container:last-of-type {
    padding: 36px;
    flex: 1 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.smart-pay-bonus-coupon-info > .bonus-coupon-wrap:after { display: none;}

.smart-pay-bonus-coupon-info > .bonus-coupon-wrap img {
    height: 72px;
    border-radius: 4px;
    border: 1px solid #d9dbdc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
/* 20230420 end */

.smart-pay-bonus-coupon-info .smart-pay-badge {
    position: absolute;
    top: 12px;
    left: 0;
    border-radius: 0 14px 14px 0;
    padding-left: 48px;
    padding-right: 36px;
}

.smart-pay-bonus-coupon-info .smart-pay-badge > .label-txt {
    line-height: 28px;
    font-size: 16px;
    font-weight: 400;
}

.smart-pay-bonus-coupon-info .smart-pay-badge > img {
    height: 20px;
}

.smart-pay-bonus-coupon-info .btn-download-smart-pay-coupon > .line-icons {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.order-paid-total {
    border-bottom: 1px solid #d9dbdc;
}

.order-paid-total > li:nth-of-type(1) {
    padding: 40px;
    padding-right: 72px;
    flex: 0 1 auto;
    min-width: 0;
}

.order-paid-total > li:nth-of-type(2) {
    flex: 1 0 auto;
    width: 390px;
    text-align: right;
    min-height: 200px;
}

.order-paid-total > li i.equal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px #fff;
    background: #fe6a2b;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
}

.order-paid-total > li i.equal:before,
.order-paid-total > li i.equal:after {
    content: '';
    display: block;
    width: 20px;
    height: 3px;
    background: #fff;
    position: absolute;
    left: 50%;
}

.order-paid-total > li i.equal:before {
    bottom: 50%;
    transform: translateX(-50%) translateY(-3px);
}

.order-paid-total > li i.equal:after {
    top: 50%;
    transform: translateX(-50%) translateY(3px);
}

.order-paid-total > li:nth-of-type(2) .middler {
    position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%);
}

.smart-pay-installment {
    background: #fff;
    border-radius: 52px;
    padding: 20px 40px;
    position: relative;
    margin-top: 20px;
    display: inline-block;
    width: auto;
}

.order-paid-total .smart-pay-installment {
    right: -40px;
}

.smart-pay-installment .smart-pay-img {
    display: inline-block;
    width: auto;
    height: 20px;
    margin-right: 4px;
}

.smart-pay-installment .smart-pay-img + span {
    white-space: nowrap;
}

/* 20230703 start */
.zero-payment-info {
    min-height: 80px;
    padding: 20px;
    padding-left: 84px;
}

.zero-payment-info:before {
    content: '0';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    font-weight: 400;
    color: #cbb58f;
    padding-left: 18px;
    box-sizing: border-box;
    pointer-events: none;
}

.zero-payment-info:after {
    content: '￦';
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: #cbb58f;
    padding-right: 18px;
    padding-top: 6px;
    box-sizing: border-box;
    pointer-events: none;
}
/* 20230703 end */



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=cart-price-table------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.cart-price-table {
    border-bottom: none;
}

.cart-price-table > tbody {
    border-bottom: 1px solid #d9dbdc;
}

.cart-price-table > tbody:last-child,
.cart-price-table > tbody:last-child tr,
.cart-price-table > tbody:last-child th,
.cart-price-table > tbody:last-child td {
    border-bottom: none;
}

.cart-price-table tr:first-of-type th,
.cart-price-table tr:first-of-type td {
    padding-top: 16px;
}

.cart-price-table tr:last-of-type th,
.cart-price-table tr:last-of-type td {
    padding-bottom: 16px;
}

.cart-price-table.pd-slim tr:first-of-type th,
.cart-price-table.pd-slim tr:first-of-type td {
    padding-top: 6px;
}

.cart-price-table.pd-slim tr:last-of-type th,
.cart-price-table.pd-slim tr:last-of-type td {
    padding-bottom: 6px;
}

.cart-price-table th {
    text-align: left;
    padding: 8px;
    line-height: 120%;
}

.cart-price-table td {
    text-align: right;
    padding: 8px;
    line-height: 120%;
}

.cart-price-table .payment-total th {
    font-size: 18px;
    font-weight: 500;
}

.cart-price-table .payment-total td {
    font-size: 18px;
    font-weight: 500;
    color: #fe6a2b;
}

.cart-price-table .payment-total td em {
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.cart-price-table .payment-total th.txt-14 {
    font-size: 14px;
}

.cart-price-table .payment-total td.txt-14 {
    font-size: 14px;
}

.cart-price-table .payment-total td.txt-14 em {
    font-size: 14px;
}

.cart-price-table .price-detail {
    font-size: 14px;
    color: #5b6068;
}

.cart-price-table .price-detail th {
    padding-left: 16px;
}

.cart-price-table .smart-pay-img {
    display: inline-block;
    width: auto;
    height: 20px;
}

.cart-price-table tbody tr.has-price-detail { cursor: pointer; }
.cart-price-table tbody tr.has-price-detail ~ .price-detail { display: none; }
.cart-price-table tbody tr.has-price-detail.on ~ .price-detail { display: table-row; }

.cart-price-table tbody tr.has-price-detail th,
.cart-price-table tbody tr.has-price-detail td {
    padding-bottom: 16px;
}

.cart-price-table tbody tr.has-price-detail.on th,
.cart-price-table tbody tr.has-price-detail.on td {
    padding-bottom: 8px;
}

.cart-price-table tbody tr.has-price-detail th {
    position: relative;
}

.cart-price-table tbody tr.has-price-detail th:after {
    content: '\e915';
    font-family: 'LineIcons';
    display: inline-block;
    vertical-align: middle;
    --icon-size: 20px;
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: var(--icon-size);
    font-size: var(--icon-size);
    transition: all 0.2s;
    transform: translateZ(0) rotate(0deg);
    position: relative;
    left: 4px;
}

.cart-price-table tbody tr.has-price-detail.on th:after { transform: translateZ(0) rotate(-180deg); }

#wrap:has(.order-payment-layout) { overflow: visible; }

.order-payment-layout {
    width: 100%;
    height: auto;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    padding-top: 32px;
}

.order-payment-layout .left-area {
    flex: 1 0 0;
    min-width: 0;
    height: auto;
    position: relative;
}

.order-payment-layout .right-area {
    flex: none;
    width: 360px;
    height: auto;
    background: #fff;
    position: sticky;
    top: 0;
    margin-top: 40px;
}

.order-payment-layout .right-area .section-header { padding: 16px 8px; }
.order-payment-layout .right-area .section-header h3 {
    font-size: 18px;
    font-weight: 500;
}

:root:has(.order-info-group) {
    scroll-behavior: smooth;
}

.order-info-group {
    width: 100%;
    height: auto;
    position: relative;
}

.order-info-group:not(:first-of-type) { margin-top: 80px; }

.order-info-group hgroup {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.order-info-group hgroup h3 {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.order-info-group .confirm-box {
    width: 100%;
    height: auto;
    position: relative;
    padding: 24px;
    background: #F2F2F7;
    border-radius: 8px;
    margin-top: 16px;
}

.order-info-group .confirm-box .row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.order-info-group .confirm-box .row:not(:first-of-type) { margin-top: 16px; }

.order-info-group .confirm-box .row .title {
    flex: none;
    width: 120px;
    line-height: 24px;
    font-size: 14px;
    color: #5b6068;
}

.order-info-group .confirm-box .row .data-area {
    flex: 1 0 0;
    min-width: 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0 4px;
}

.order-info-group .confirm-box .row .data-area .entered {
    flex: 1 1 0;
    min-width: 0;
    line-height: 20px;
}

.order-info-group .confirm-box .row .data-area .placeholder {
    color: #fe6a2b;
}

.order-info-group .confirm-box .row .data-area em {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.order-info-group .confirm-box .row > .btn-item {
    flex: none;
    min-width: 100px;
    height: 28px;
    line-height: 26px;
    border-radius: 4px;
    padding: 0 8px;
    margin-left: 4px;
}

.order-info-group .confirm-box .row > .btn-item .label-txt { font-size: 12px; font-weight: 500; }


:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: 12px;
}

:where(.total-coupon-popup) .order-product-item {
    padding: 12px;
    background: #F2F2F7;
    border-radius: 8px;
}

:where(.total-coupon-popup) .order-product-item .thumb-area {
    pointer-events: none;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item:not(:first-of-type) { margin-top: 20px;}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .thumb-area {
    flex: none;
    width: 116px;
    height: 116px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .thumb-area:hover { background: rgba(0,0,0,0.06);}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .thumb-area .img-layer {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .thumb-area .img-layer img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .thumb-area .brand-layer {
    width: 80px;
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .thumb-area .brand-layer img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area :where(.product-info, .price-info) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area .name {
    line-height: 24px;
    font-size: 18px;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area .price { line-height: 24px; font-size: 14px; }
:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area .price em { font-size: 18px; font-weight: 500; }

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area :where(.size, .quantity) {
    font-size: 14px;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area .smart-pay-img { height: 20px; }

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .info-area .price-info.total {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #d9dbdc;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .order-total-area {
    flex: none;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    justify-content: center;
    gap: 8px;
    border-left: 1px solid #d9dbdc;
    padding-left: 40px;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .order-total-area .price { line-height: 24px; font-size: 14px; }
:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .order-total-area .price em {
    font-size: 18px;
    font-weight: 500;
}

:where(.order-info-group .confirm-box, .total-coupon-popup) .order-product-item .order-total-area .quantity {
    border-top: 1px solid #d9dbdc;
    padding-top: 8px;
}


.order-info-group .confirm-box .dc-detail-list {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    margin-top: 16px;
    list-style: none;
}

.order-info-group .confirm-box .dc-detail-list > li {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.order-info-group .confirm-box .dc-detail-list > li:not(:first-of-type) { margin-top: 8px;}

.order-info-group .confirm-box .dc-detail-list > li span { line-height: 20px; }

.order-info-group .confirm-box .dc-detail-list > li .category {
    flex: 1 1 0;
    min-width: 0;
}

.order-info-group .confirm-box .dc-detail-list > li .amount {
    flex: none;
}

.order-info-group .confirm-box .dc-detail-list > li.total {
    font-weight: 500;
    padding-top: 16px;
    padding-bottom: 8px;
    margin-top: 12px;
    border-top: 1px solid #d9dbdc;
}

.order-info-group .confirm-box .dc-detail-list > li.total .amount em {  font-size: 18px; color: #fe6a2b; }

.order-info-group .confirm-box .smartpay-notice p {
    font-size: 14px;
    color: #5b6068;
    line-height: 24px;
}

.order-info-group .confirm-box .smartpay-notice:has(~ .dc-detail-list) {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d9dbdc;
}


.order-info-group .confirm-box .additional-msg-list {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px 16px;
}

.order-info-group .confirm-box .additional-msg-list:after { display: none; }

.order-info-group .confirm-box .additional-msg-list > li {
    flex: 0 0 calc((100% - 16px) / 2);
}

.order-info-group .confirm-box textarea {
    margin-top: 32px;
    margin-bottom: 8px;
}

.order-payment-layout .left-area .section-header {
    border-bottom: none;
    padding: 0;
}

.order-payment-layout .left-area .section-header h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
}

.order-payment-layout .left-area .pay_left .payment_box {
    --col-length: 7;
    --col-space: 4px;
    margin: 16px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--col-space);
}

.order-payment-layout .left-area .pay_left .payment_box:after { display: none; }

.order-payment-layout .left-area .pay_left .payment_box li {
    --col-length: inherit;
    --col-space: inherit;
    flex: 0 0 calc((100% - (var(--col-space) * (var(--col-length) - 1))) / (var(--col-length)));
    min-width: 0;
    float: none;
    width: auto;
    margin: 0;
}

.order-payment-layout .left-area .pay_left .payment_box .pay_radio[type="radio"] + label {
    background: #F9F9FA;
    color: #A0A6AF;
}

.order-payment-layout .left-area .pay_left .payment_box .pay_radio[type="radio"]:checked + label {
    background: #fe6a2b;
    color: #fff;
}

.order-payment-layout .order-info-group .order-section {
    background: #f9f9fa;
    border-radius: 8px;
    margin-top: 24px;
    padding: 32px 24px;
}

.order-payment-layout .order-info-group .order-section.order-account .info {
    width: 520px;
    margin: 0 auto;
}

.order-payment-layout .order-info-group .order-section .form-control.form-control-inline.inline-md { padding-left: 120px; }
.order-payment-layout .order-info-group .order-section .form-control.form-control-inline.inline-md label {
    font-size: 14px;
    color: #5b6068;
}

.order-payment-layout .order-info-group .order-section .btn-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.order-payment-layout .order-info-group .order-section .btn-container .btn-item { width: 160px; }


.order-payment-layout .order-info-group .order-section .schedule-picker {
    width: 640px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.order-payment-layout .order-info-group .order-section .date-pick-item {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
}

.order-payment-layout .order-info-group .order-section .date-pick-item .month-controller .btn-item { background: transparent; }

.order-payment-layout .order-info-group .order-section .date-pick-item .month-controller > span { width: 140px; line-height: 24px; }

.order-payment-layout .order-info-group .order-section .date-pick-item .day-controller {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    font-size: 0;
    padding: 20px 0 24px;
    background: #fff;
    border-radius: 8px;
    margin-top: 32px;
}

.order-payment-layout .order-info-group .order-section .time-pick-item {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
    margin-top: 24px;
    text-align: center;
    border-left: none;
}

.order-payment-layout .order-info-group .order-section .time-pick-item .times {
    --col-length: 8;
    --col-space: 4px;
    margin-top: 24px !important;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--col-space);
}

.order-payment-layout .order-info-group .order-section .time-pick-item .times > li {
    --col-length: inherit;
    --col-space: inherit;
    flex: 0 0 calc((100% - (var(--col-space) * (var(--col-length) - 1))) / (var(--col-length)));
    width: auto;
    text-align: center;
    font-size: 14px;
    line-height: 100%;
    float: none;
    padding: 0;
}

.order-payment-layout .order-info-group .order-section .time-pick-item .times .time-item .label-txt {
    font-size: 14px;
    line-height: 34px;
    background: #fff;
}

.order-payment-layout .order-info-group .order-section .time-pick-item .times .time-item input {
    top: 0;
    opacity: 0;
    visibility: hidden;
}

.order-payment-layout .order-info-group .order-section .time-pick-item .times .time-item input[type="radio"]:checked ~ .label-txt {
    border: 1px solid #fe6a2b;
    background-color: #fe6a2b;
    color: #fff;
}


.order-payment-layout .order-info-group .order-section.order-car .info {
    width: 560px;
    margin: 0 auto;
}

.order-payment-layout .order-info-group .order-section.order-car .order-car-info {
    margin-top: 24px;
}

.order-payment-layout .order-info-group .order-section.order-car .order-car-info .input-box,
.order-payment-layout .order-info-group .order-section.order-car .order-car-info .input-box::placeholder {
    font-size: 14px;
}


.order-info-group .order-car-pick {
    width: 100%;
    height: auto;
    padding: 16px 40px 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #f2f2f7;
    border-radius:44px;
    overflow: hidden;
}

.order-info-group .order-car-pick:not(:has(.order-car-pick-swiper .swiper-slide)) {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.order-info-group .order-car-pick .order-car-pick-swiper {
    flex: 1 0 0;
    min-width: 0;
    overflow: hidden;
    padding: 0 24px;
}

.order-info-group .order-car-pick .order-car-pick-swiper.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.order-info-group .order-car-pick .order-car-pick-swiper.disabled * { pointer-events: none; }

.order-info-group .order-car-pick .order-car-pick-swiper:after {
    content: '';
    display: block;
    width: 32px;
    height: 100%;
    background: linear-gradient(90deg, rgba(242,242,247,0), rgba(242,242,247,1) 96%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}

.order-info-group .order-car-pick .order-car-pick-swiper .slot-btn {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    width: 56px;
    height: 56px;
    position: relative;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
}

.order-info-group .order-car-pick .order-car-pick-swiper .slot-btn.my-car-btn:hover:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(42,49,56,0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.order-info-group .order-car-pick .order-car-pick-swiper .slot-btn .thumb-holder {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #D9DBDC;
    border-radius: 50%;
    background-color: #fff;
    background-image: url('../images/common/mycar_dummy.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
}

.order-info-group .order-car-pick .order-car-pick-swiper .slot-btn.act { pointer-events: none; }

.order-info-group .order-car-pick .order-car-pick-swiper .slot-btn.act .thumb-holder:after {
    content: '\e912';
    display: inline-block;
    font-family: 'LineIcons';
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #00B3C5;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(1px) translateY(-1px);
    z-index: 1;
}

.order-info-group .order-car-pick .order-car-pick-swiper.disabled .slot-btn.act .thumb-holder:after { display: none; }

.order-info-group .order-car-pick .order-car-pick-swiper ~ .btn-item {
    flex: none;
    min-width: 100px;
    height: 28px;
    line-height: 26px;
    border-radius: 4px;
    padding: 0 8px;
}


.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .labelling {
    padding: 16px;
}

.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .label-txt.txt-16 { font-size: 16px; font-weight: 500; line-height: 24px; }
.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .label-txt.txt-12 { font-size: 12px; line-height: 24px; margin-top: 4px; }

.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .icon-holder {
    width: 24px;
    height: 24px;
    left: 24px;
    z-index: 1;
}

.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .icon-holder:before {
    width: 24px;
    height: 24px;
}

.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .icon-holder span {
    width: 24px;
    height: 24px;
    line-height: 24px;
}

.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .labelling {
    background: #fff;
    box-shadow: none;
}

.order-payment-layout .order-info-group .order-section.store-visit .radio-item.visit-type-radio-item .pictogram-holder {
    width: 60px;
    height: 60px;
    right: 24px;
}

.order-payment-layout .order-info-group .order-section.store-visit .section-header {
    padding: 16px 0;
    border-bottom: 1px solid #d9dbdc;
}

.order-payment-layout .order-info-group .order-section.store-visit .section-header h4 {
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
}

.order-payment-layout .order-info-group .order-section.store-visit .section-header .btn-item.btn-s {
    flex: none;
    min-width: 100px;
    height: 28px;
    line-height: 26px;
    border-radius: 4px;
    padding: 0 8px;
}

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place dt h5 { font-size: 14px; }

.order-payment-layout .order-info-group .order-section.store-visit .check-item .label-txt { font-size: 12px; }

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place dd {
    padding: 12px 16px;
}

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place dd:after { right: 12px; }

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place dd p { padding-right: 24px; }
.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place dd p:not(.txt-neutral3):after { display: none; }

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place.confirm-mode {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place.confirm-mode dt {
    flex: none;
}

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place.confirm-mode dd {
    flex: 1 0 auto;
    min-height: 0;
    background: #fff;
    cursor: default;
    overflow: hidden;
    border: 1px solid transparent;
    background: #f2f2f7;
    border-radius: 8px;
}

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place.confirm-mode dd:has(p.txt-neutral3) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place.confirm-mode dd p {
    padding-right: 0;
    overflow: hidden;
    text-overflow: initial;
    white-space: normal;
    position: relative;
}

.order-payment-layout .order-info-group .order-section.store-visit .smart-pickup-place.confirm-mode dd:after { display: none; }




.accordion-item.order-notice {
    border-top: 4px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
    padding-top: 12px;
}

.accordion-item.order-notice .accordion-btn {
    height: 40px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion-item.order-notice .accordion-btn:after {
    content: '\e915';
    font-family: 'LineIcons';
    --icon-size: 24px;
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: var(--icon-size);
    font-size: var(--icon-size);
    transition: all 0.2s;
    transform: translateY(-50%) translateZ(0) rotate(0deg);
    position: absolute;
    top: 50%;
    right: 8px;
}

.accordion-item.order-notice.on .accordion-btn:after {
    transform: translateY(-50%) translateZ(0) rotate(-180deg);
}

.accordion-item.order-notice .accordion-cont {
    padding: 8px 8px 32px;
}

.accordion-item.order-notice .list-style-disc > li { line-height: 18px; }
.accordion-item.order-notice .list-style-disc > li + li { margin-top: 6px;}




.total-coupon-popup {
    width: 100%;
    height: auto;
}

.total-coupon-popup .radio-item .label-txt { font-size: 14px;}

.total-coupon-popup .coupon-apply {
    padding: 20px 24px 48px;
}

.total-coupon-popup .coupon-apply .coupon-group:not(:first-of-type) {
    margin-top: 40px;
    border-top: 1px dashed #d9dbdc;
}

.total-coupon-popup .coupon-apply .coupon-group .per-product {
    width: 100%;
    height: auto;
    position: relative;
}

.total-coupon-popup .coupon-apply .coupon-group .per-product:not(:first-of-type) { margin-top: 24px; }

.total-coupon-popup .coupon-apply .coupon-group dl {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 16px;
}

.total-coupon-popup .coupon-apply .coupon-group dl dt {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    margin-bottom: 8px;
}

.total-coupon-popup .coupon-apply .coupon-group dl dd {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
    margin: 0;
    margin: 4px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total-coupon-popup .coupon-reg {
    padding: 20px 24px 40px;
    margin-bottom: 16px;
    background: #F2F2F7;
}

.total-coupon-popup .coupon-reg hgroup h4 { line-height: 24px; font-size: 16px; }
.total-coupon-popup .coupon-reg hgroup p { line-height: 24px; font-size: 14px; color: #5b6068; margin-top: 4px; }

.total-coupon-popup .coupon-reg .form-control .input-group { margin-top: 8px; }

.total-coupon-popup .coupon-reg .form-control .input-group .input-box {
    padding-right: 120px !important;
    font-size: 14px;
}
.total-coupon-popup .coupon-reg .form-control .input-group .input-box::placeholder { font-size: 14px;}

.total-coupon-popup .coupon-reg .form-control .input-group .tools {
    right: 88px;
}

.total-coupon-popup .coupon-reg .form-control .input-group .btn-item {
    width: 80px;
    height: 28px;
    line-height: 26px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=car number search-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.number-select-wrap {
    padding-bottom: 62px;
    border-top: 1px solid #f2f2f7;
}

.number-select-wrap .check-item .label-txt {
    font-size: 11px;
    line-height: 14px;
}

.number-search-wrap {
    padding: 30px 20px 0px 20px;
}

.number-search-wrap.bg-gradient {
    background: white;
    background: linear-gradient(180deg, white 0%, #f9f9fa 100%);
}

.number-search-wrap .searching-car-view.has-tab {
    margin-top: 18px;
    border-bottom: none;
}

.searching-car-view.my-model {
    padding-top: 60px;
    padding-bottom: 30px;
}

.searching-car-view.my-model .img-holder {
    position: relative;
    height: 130px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
}

.number-search-wrap .select-opt-list {
    padding: 0px;
}

.number-search-wrap .button-wrap {
    padding: 40px 0 16px 0;
}

.my-car-search-wrap {
    min-height: 287px;
    padding: 28px 20px 0px 20px;
    border-top: 1px solid #f2f2f7;
}

.my-car-search-wrap h3 {
    font-size: 14px;
}

.my-car-search-wrap .button-wrap {
    margin-top: 12px;
}

.mycar-select-item + .button-wrap {
    margin-top: 20px;
}

.my-car-search-wrap .my-car-selected {
    overflow: hidden;
    padding: 0px;
    text-align: center;
}

.my-car-search-wrap .my-car-selected .info {
    position: static;
    transform: none;
    display: inline-block;
}

.my-car-search-wrap .my-car-selected .img-holder {
    display: inline-block;
    width: auto;
    height: 85px;
}

.my-car-search-wrap .my-car-selected p {
    text-align: left;
}

.my-car-search-wrap .mycar-select-item {
    width: 100%;
    height: 60px;
    background-color: #f2f2f7;
}

.my-car-search-wrap .mycar-select-swiper {
    padding: 10px 20px 0 20px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.my-car-search-wrap .mycar-select-swiper .swiper-slide {
    width: 44px;
    font-size: 0;
}

.my-car-search-wrap .mycar-select-swiper .btn-item {
    width: 44px;
    height: 44px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.my-car-search-wrap .mycar-select-swiper .btn-item.on:after {
    content: "\e90f";
    font-family: 'LineIcons', sans-serif !important;
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
    background: #58c1c7;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.my-car-select-bx {
    vertical-align: middle;
}

.my-car-select-bx .info-txt {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
}

.my-car-select-bx .img-box {
    display: inline-block;
    width: 193px;
    height: 112px;
    margin-left: 54px;
    vertical-align: middle;
}

.my-car-select-bx .img-box img, .my-search-bottom-result img {
    width: 100%;
}

.my-search-bottom-result {
    padding: 48px 20px 0px 20px;
}

.my-search-bottom-result .my-search-result-conts {
    border-top: 1px solid #f2f2f7;
    padding: 20px 20px 0px 20px;
}

/* 내 차 찾기 */
.my-search-bottom-result .my-search-result-conts .find-my-car-before {
    display: block;
}

.my-search-bottom-result .my-search-result-conts .find-my-car-after {
    display: none;
}

.my-search-bottom-result.done .my-search-result-conts .find-my-car-before {
    display: none;
}

.my-search-bottom-result.done .my-search-result-conts .find-my-car-after {
    display: block;
}

.my-search-result-conts .my-car-selected {
    float: left;
    text-align: left;
}

.my-search-result-conts .my-car-selected .info {
    display: inline-block;
}

.my-search-result-conts .my-car-selected .model {
    font-size: 20px;
}

.my-search-result-conts .my-car-selected .img-box {
    display: inline-block;
    width: 192px;
    margin-left: 30px;
}

.my-search-result-conts .mycar-select-item {
    float: right;
    margin-top: 30px;
    padding: 0px 32px;
}

.my-search-result-conts .mycar-select-item.no-swipe {
    padding: 0 12px;
}

.my-search-bottom-result .my-search-result-conts .btn-wrap {
    clear: both;
    text-align: center;
}

.my-search-bottom-result .mycar-select-swiper {
    width: 212px;
    max-width: 212px;
}

.my-search-bottom-result .mycar-select-item.no-swipe .mycar-select-swiper {
    width: 252px;
    max-width: 252px;
}

.my-search-bottom-result .mycar-select-swiper .btn-select-car.on:after {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
}

.my-search-bottom-result .mycar-select-item .btn-swiper-nav {
    width: 32px;
    padding: 0px;
}

.my-search-bottom-result .mycar-select-swiper .swiper-slide {
    width: 40px;
}

.my-search-bottom-result .mycar-select-swiper .btn-select-car {
    width: 40px;
    height: 40px;
    line-height: 38px;
    border-radius: 50%;
}

/* 차량 번호로 찾기 */
.find-car-by-number .find-car-by-number-before {
    display: block;
}

.find-car-by-number .find-car-by-number-after {
    display: none;
}

.find-car-by-number.done .find-car-by-number-before {
    display: none;
}

.find-car-by-number.done .find-car-by-number-after {
    display: block;
}

/* 차종으로 찾기 */
.find-car-by-model .contents {
    display: none;
}

.find-car-by-model .contents.on {
    display: block;
}

/* .scrollbar */
.custom-scrollbar {
    overflow-y: scroll !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 5px;
    background-color: #a0a6af;
    background-clip: padding-box;
}

.title-hr-center {
    position: relative;
    text-align: center;
}

.title-hr-center::before {
    content: "";
    overflow: hidden;
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #d9dbdc;
    z-index: -1;
}

.title-hr-center .label-txt {
    display: inline-block;
    background-color: #fff;
    padding: 0 10px;
}

.sel-car-lst li .radio-item {
    display: block;
    border-radius: 4px;
    background-color: #fff;
    height: 150px;
}

.sel-car-lst li .labelling {
    width: 100%;
    padding: 0px;
    padding-right: 12px;
    margin-top: 5px;
    font-size: 16px;
    letter-spacing: -0.6px;
    line-height: 20px;
    height: 40px;
    margin-bottom: 4px;
    overflow: hidden;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
}

.sel-car-lst li .radio-item .img-holder {
    height: 150px;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: 50% 50%;
}

/*매장예약*/
.store-search-wrap {
    position: relative;
    height: 100%;
}

.store-search-wrap .lft-info-wrap {
    position: absolute;
    top: 0px;
    left: -400px;
    width: 400px;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid #d9dbdc;
    box-shadow: 2px -3px 20px 0 rgba(91, 96, 104, 0.2);
    z-index: 101;
}

.store-search-wrap .lft-info-wrap.on {
    left: 0px;
}

.store-search-wrap .lft-info-wrap.raged .sort-result-section {
    height: 623px;
}

.store-search-wrap .lft-info-wrap.near .sort-result-section,
.store-search-wrap .lft-info-wrap.local .sort-result-section {
    height: 573px;
}

/* 20220622// */
.store-search-wrap .lft-info-wrap.on + .store-reserve-map-wrap {
    margin-left: 400px;
}

/* //20220622 */
.lft-info-wrap .handle-wrap {
    position: absolute;
    top: 193px;
    right: -30px;
    width: 20px;
    height: auto;
    transform: translateX(-50%);
    pointer-events: auto;
    box-shadow: 2px 0px 3px 0 rgba(91, 96, 104, 0.2);
    z-index: 1;
}

/* .lft-info-wrap .result-section-wrap{
    position: absolute;
    bottom:0;
} */
.lft-info-wrap .handle {
    width: 20px;
    height: 60px;
    padding-top: 20px;
    background-color: #ffffff;
    text-align: center;
    box-sizing: border-box;
}

.lft-info-wrap .handle:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 20px;
    top: -24px;
    left: -6px;
    background-image: url("../images/common/bottom-drawer-handdle-left.svg");
    transform: rotate(90deg);
}

.lft-info-wrap .handle:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 20px;
    left: -6px;
    bottom: -24px;
    background-image: url("../images/common/bottom-drawer-handdle-right.svg");
    transform: rotate(90deg);
}

.lft-info-wrap .handle .icon-holder {
    text-align: center;
    font-size: 0;
}

.store-search-wrap .lft-info-wrap h2 {
    padding: 16px 0px 16px 20px;
    border-bottom: 1px solid #d9dbdc;
    font-size: 24px;
}

.store-search-wrap .lft-info-wrap .tab-conts {
    padding: 12px 20px;
}

.store-search-wrap .lft-info-wrap h2 + .tab-item {
    margin-top: 20px;
}

.store-search-wrap .lft-info-wrap .sel-check-list-wrap {
    width: 360px;
    padding: 10px;
    border: 1px solid #d9dbdc;
    border-radius: 2px;
}

.store-search-wrap .lft-info-wrap .sel-check-list {
    margin-top: 10px;
}

.store-search-wrap .lft-info-wrap .sel-check-list li {
    display: inline-block;
    width: 167px;
}

.lft-info-wrap .sel-check-list-wrap .check-item .icon-holder {
    left: 0px;
}

.lft-info-wrap .sel-check-list-wrap .check-item .labelling {
    padding-left: 26px;
}

.lft-info-wrap .sel-check-list-wrap .check-item .label-txt {
    font-size: 12px;
}

/*.store-search-wrap .lft-info-wrap .list-guide-bar { margin-top:10px; }*/
.store-search-wrap .lft-info-wrap .list-guide-bar .tools {
    top: 17px !important;
}

.store-search-wrap .lft-info-wrap .list-guide-bar .guide-text {
    padding-left: 20px;
}

.list-guide-bar + .search-map {
    background-color: #f9f9fa;
    height: 623px;
    overflow-y: scroll;
    box-sizing: border-box;
}

.sort-result-section.search-map .store-lst {
    padding: 0px 20px 20px 20px;
}

.sort-result-section.search-map .store-lst:empty {
    display: none;
}

.sort-result-section.search-map .store-wrap {
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background-color: #fff;
    margin-top: 10px;
}

/* 20230130 start */
.sort-result-section.search-map .store-wrap .store-info {
    padding: 16px 12px 20px;
}

.sort-result-section.search-map .store-info .benefit-wrap {
    top: 15px;
    right: 15px;
}

.sort-result-section .distance .info span {
    vertical-align: middle;
}

.sort-result-section .star-wrap,
.sort-result-section .distance .info > .call,
.sort-result-section .distance .info > .time {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sort-result-section .info .line-icons {
    margin-right: 2px;
}
/* 20230130 end */

.sort-result-section.search-map .store-footer {
    padding-right: 15px;
    justify-content: flex-end;
}

.sort-result-section.search-map .store-footer .btn-item {
    margin-left: 8px;
}

.sort-result-section .pagenation-wrap {
    padding: 20px;
    background-color: #fff;
    border-top: 1px solid #d9dbdc;
    text-align: center;
}

.sort-result-section .pagenation-wrap:empty {
    display: none;
}

.pagenation-wrap .pagenation, .pagenation-wrap [class*="btn"] {
    display: inline-block;
    vertical-align: middle;
}

.pagenation-wrap .pagenation a {
    display: block;
    width: 20px;
}

.pagenation-wrap [class*="btn"] {
    color: #a0a6af;
}

.pagenation-wrap .pagenation li {
    display: inline-block;
}

.pagenation-wrap .pagenation .on a {
    color: #fe6a2b;
}

.store-reserve-map-wrap {
    position: relative;
    height: calc(100vh - 120px);
}

.store-reserve-map-wrap .marker-store-info {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 270px;
    height: 60px;
    padding: 13px 0 15px 13px;
    opacity: 0.95;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #d9dbdc;
    border-top: none;
    border-right: none;
    border-bottom-left-radius: 6px;
    box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.store-reserve-map-wrap .marker-store-info dl {
    float: left;
}

.store-reserve-map-wrap .marker-store-info dt, .store-reserve-map-wrap .marker-store-info dd {
    display: inline-block;
    vertical-align: middle;
}

.store-reserve-map-wrap .marker-store-info dt {
    width: 21px;
    height: 29px;
    margin-right: 8px;
    background-size: cover;
}

.store-reserve-map-wrap .marker-store-info dd {
    line-height: 16px;
}

.store-reserve-map-wrap .marker-store-info .smart-care {
    background: url("../images/common/map_marker_orange.svg") no-repeat;
}

.store-reserve-map-wrap .marker-store-info .t-station {
    margin-left: 15px;
    background: url("../images/common/map_marker_dark.svg") no-repeat;
}

/*.store-reserve-map-wrap .search-map{
    position:absolute;
    display:none;
}*/
.store-reserve-map-wrap .search-map {
    padding-bottom: 16px;
}

.store-reserve-map-wrap .search-map .store-wrap {
    min-width: 334px;
    margin-top: 0px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 2.5px 3.5px 0 rgba(0, 0, 0, 0.2);
}

.store-reserve-map-wrap .store-wrap + .close-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -34px;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
}

.store-reserve-map-wrap .store-wrap + .close-btn .line-icons {
    color: #fff;
    vertical-align: middle;
}

.store-reserve-map-wrap [class*="marker-btn"] {
    position: absolute;
    width: 21px;
    height: 29px;
    background-size: cover;
}

.store-reserve-map-wrap [class*="marker-btn"].on {
    width: 27px;
    height: 38px;
}

.store-reserve-map-wrap .marker-btn-smart {
    background: url("../images/common/map_marker_orange.svg") no-repeat;
}

.store-reserve-map-wrap .marker-btn-t {
    background: url("../images/common/map_marker_dark.svg") no-repeat;
}

.lft-info-wrap .input-group {
    margin-bottom: 10px;
}

.input-group .location-button {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 25px;
    height: 25px;
    margin-top: -12.5px;
    background-image: url("../images/common/bg_location.png");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: transparent;
    z-index: 1;
}

.container-store-reserve + #footer {
    margin: 0px;
}

.store-detail {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 30px;
}

.store-detail .store-thumb-wrap {
    position: relative;
    width: 680px;
}

.store-detail .store-info-wrap {
    position: relative;
    width: 450px;
    min-height: 440px;
    padding-bottom: 75px;
}

.store-detail-gallery {
    width: 100%;
    margin: auto;
}

.store-detail-gallery .swiper-slide {
    background-size: cover;
    background-position: center;
}

.store-detail-gallery .swiper-wrapper .swiper-slide {
    height: 362px;
}

.store-detail-gallery .swiper-wrapper .swiper-slide .gallery-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.store-detail-gallery .swiper-wrapper .swiper-slide img,
.store-detail-gallery .gallery-thumbs .swiper-slide img {
    width: 100%;
}

.store-detail-gallery .gallery-top {
    width: 100%;
    border-radius: 4px;
}

.store-detail-gallery .gallery-thumbs {
    box-sizing: border-box;
    padding-top: 10px;
}

.store-detail-gallery .gallery-thumbs .swiper-slide {
    overflow: hidden;
    width: 25%;
    height: 60px;
    opacity: 0.4;
    border-radius: 2px;
}

.store-detail-gallery .gallery-thumbs .swiper-slide .gallery-thumbs-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.store-detail-gallery .gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.store-detail-gallery .btn-item.btn-swiper-nav {
    background-color: rgba(255, 255, 255, 0.4);
}

.store-detail-gallery .flags {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1;
}

.store-detail-gallery .flags li {
    float: left;
    margin: 0;
    margin-left: 8px;
}

.store-info-wrap .store-manager .badge-wrap::after {
    content: "";
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    clear: both;
}

.store-info-wrap .badge-wrap .badge {
    float: left;
}

/* 20230130 start */
.store-info-wrap .store-manager .feature-badge-wrap {
    position: relative;
    font-size: 0;
    line-height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.store-info-wrap .store-manager .feature-badge-wrap .feature-badge {
    display: inline-block;
    width: auto;
    height: 21px;
    vertical-align: middle;
}

.store-info-wrap .name-wrap {
    min-height: 24px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.store-info-wrap .name-wrap .star-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.store-info-wrap .store-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 16px;
}

.store-info-wrap .store-meta > span {
    display: inline-block;
    width: auto;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background-color: #5b6068;
    border-radius: 2px;
}

.store-info-wrap .store-meta > span.great-store {
    background-color: #ff8c27;
}
/* 20230130 end */

/* 20211213 // */
.store-info-wrap .benefit-wrap {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    line-height: 38px;
}

.store-info-wrap .benefit-wrap .benefit {
    display: inline-block;
    margin-right: 4px;
    padding: 0 4px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 16px;
    letter-spacing: 0;
    vertical-align: middle;
}

.store-info-wrap .benefit.benefit-safe {
    background-color: #cbb58f;
}

/* !* 안심서비스 */
.store-info-wrap .benefit.benefit-smart {
    background-color: #ffa200;
}

/* !* 스마트케어 */
.store-info-wrap .benefit.benefit-superior-store {
    background-color: #f88c27;
}

/* !* 우수매장 */
.store-info-wrap .benefit.benefit-smart-pickup {
    background-color: #7abec2;
}

/* !* 픽업서비스 */
.store-info-wrap .benefit.benefit-imported-car {
    background-color: #008bec;
}

/* !* 수입차정비 */
/* // 20211213 */
.store-info-wrap .manager-wrap .manager-photo {
    overflow: hidden;
    float: left;
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 100%;
    background-image: url("../images/common/empty-manager.png");
    background-position: center;
}

.store-info-wrap .manager-wrap .manager-photo img {
    display: block;
    width: 100%;
}

.store-info-wrap .manager-wrap .manager-photo .inner {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.store-info-wrap .manager-wrap .manager-info {
    float: right;
    width: 288px;
}

.store-info-wrap .button-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 10px;
}

.tbl-basic-wrap tr {
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
}

.tbl-basic-wrap th,
.tbl-basic-wrap td {
    padding: 14px 20px;
    text-align: left;
    font-size: 16px;
}

.tbl-basic-wrap td {
    text-align: left;
}

.tbl-basic-wrap th {
    background-color: #f9f9fa;
}

.tbl-basic-wrap th .sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.store-benefit-list .item {
    float: left;
    width: 70px;
    margin-right: 10px;
}

.store-benefit-list .item .icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: auto;
}

.store-benefit-list .item .txt {
    display: block;
    margin-top: 2px;
    text-align: center;
    font-size: 12px;
    word-break: keep-all;
    line-height: 120%;
}

.deal-button-wrap {
    text-align: center;
}

.deal-button-wrap .btn-item {
    width: 270px;
}

.deal-button-wrap .btn-item .count {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: 56px;
    display: inline-block;
    font-size: 14px;
    line-height: 40px;
    transform: translate(-50%, -50%);
}

.deal-headline-wrap {
    line-height: 50px;
}

.deal-headline-wrap::after {
    content: "";
    display: table;
    width: 100%;
    clear: both;
}

.deal-headline-wrap .headline {
    float: left;
}

.deal-headline-wrap .sub {
    float: right;
}

.deal-headline-wrap.list-guide-bar .headline {
    line-height: 50px;
}

.deal-headline-wrap.list-guide-bar .tools {
    top: unset !important;
    bottom: 0;
    transform: none;
}

.customer-card-list .customer-card {
    border-radius: 4px;
}

.customer-card-list .customer-card > ul > li > * {
    vertical-align: middle;
}

.customer-card-list .customer-card .review-delete-btn {
    position: relative;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 6px;
    background-color: #5b6068;
    color: #ffffff;
    font-size: 0;
    border-radius: 4px;
    margin-left: 16px;
    overflow: hidden;
}

.customer-card-list .customer-card .review-delete-btn:hover:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.customer-card-list .customer-card .review-delete-btn .label {
    font-size: 14px;
}

.customer-card-list .customer-card .review-delete-btn > span {
    position: relative;
    vertical-align: middle;
    z-index: 1;
}

.customer-card-list .customer-card .name {
    position: relative;
    padding-right: 20px;
    margin-right: 8px;
}

.customer-card-list .customer-card .name::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 16px;
    margin-top: -8px;
    background-color: #777a7e;
}

.basic-naver-map {
    border: 1px solid #fdfdfe;
}

/*방문 예약*/
.order-upper-area .opt-checkbox-lst {
    padding-top: 16px;
}

.order-upper-area .opt-checkbox-lst li {
    display: inline-block;
}

.order-upper-area .noti-coupon-bx {
    padding: 16px 0px;
}

.order-upper-area .noti-coupon-bx .btn-item {
    width: 100%;
}

.order-upper-area .reserve-btn-wrap {
    margin-top: 60px;
    text-align: center;
}

.complete-reserve-msg {
    padding-top: 50px;
    color: #333;
    text-align: center;
}

.complete-reserve-msg .calendar-ico {
    color: #ff6a28;
}

.complete-reserve-msg .info-txt {
    font-size: 23px;
    line-height: 26px;
    margin-top: 20px;
}

.complete-reserve-msg .noti-txt {
    color: #5b6068;
    margin-top: 20px;
}

.complete-reserve-msg ~ .list-style-disc {
    margin-top: 20px;
    border-top: 1px solid #d9dbdc;
    padding-top: 10px;
}

.complete-btns {
    display: flex;
    justify-content: center;
}

.complete-btns .btn-item {
    margin: 0px 5px;
}

.modal-item .review_write .ip_txt01 {
    min-height: 200px;
}

.modal-item .review_write ol li.select01 {
    z-index: 1;
}

/* benefit checkbox*/
.visit-purpose .rowgroup {
    position: relative;
}

.visit-purpose .rowgroup::after {
    content: '';
    display: table;
    clear: both;
}

.visit-purpose .rowgroup .rowheader {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 110px;
    margin: 16px 0;
    background-color: #f9f9fa;
}

.visit-purpose .rowgroup .cell {
    overflow: hidden;
    padding: 16px 0 16px 130px;
}

.visit-purpose .store-benefit-list {
    float: left;
}

.visit-purpose .store-benefit-list .benefit {
    float: left;
}

.store-benefit-list .benefit-item {
    display: inline-block;
    width: 76px;
    height: auto;
    min-height: 88px;
    line-height: 100%;
    font-size: 0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    vertical-align: middle;
}

.benefit-item.benefit-item-block,
.benefit-item.benefit-item-block .labelling {
    display: block;
}

.benefit-item input {
    width: 0;
    height: 0;
    position: absolute;
    top: -100px;
}

.benefit-item .labelling {
    display: block;
    width: auto;
    height: auto;
    overflow: hidden;
    font-size: 0;
    position: relative;
    padding: 4px;
    padding-top: 68px;
}

.benefit-item .icon-holder {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: -25px;
    font-size: 0;
    overflow: hidden;
}

.benefit-item.txt-right .icon-holder {
    left: auto;
    right: 6px;
}

.benefit-item .icon-holder:before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
}

.benefit-item .icon-holder .line-icons.square:before {
    content: '' !important;
}

.benefit-item .icon-holder span:nth-of-type(1) {
    position: relative;
    top: 6px;
    color: #2a3138;
}

.benefit-item input[type="checkbox"]:checked ~ .icon-holder span:nth-of-type(1) {
    color: #d9dbdc;
}

.benefit-item .icon-holder span:nth-of-type(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.benefit-item .label-txt {
    display: block;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    letter-spacing: -.5px;
    color: #5b6068;
}

.benefit-item .label-txt.txt-16 {
    font-size: 16px;
}

.benefit-item input[type="checkbox"]:checked ~ .labelling .icon-holder span:after,
.benefit-item input[type="checkbox"]:checked ~ .icon-holder span:after {
    position: absolute;
    display: inline-block;
    content: '\e912';
    font-family: 'LineIcons', sans-serif;
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 44px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: #fe6a2b;
}

.benefit-item input[type="checkbox"]:checked ~ .labelling {
    font-weight: 500;
}

.benefit-item input[type="checkbox"]:checked ~ .labelling .label-txt {
    color: #2A3138;
}

.benefit-item .labelling:hover {
    background: rgba(0, 0, 0, 0.05);
}

.benefit-item input:disabled ~ .icon-holder {
    pointer-events: none;
}

.benefit-item input:disabled ~ .labelling {
    pointer-events: none;
}

.service-coupon-list:after {
    content: '';
    display: table;
    clear: both;
}

.service-coupon-list > li {
    position: relative;
    float: left;
}

.service-coupon-list > li:after {
    position: absolute;
    content: '';
    top: 50%;
    right: 0;
    width: 1px;
    height: 90px;
    background-color: #D9DBDC;
    transform: translateY(-46%);
}

.service-coupon-list > li:last-of-type:after {
    content: none;
}

.service-coupon-list > li:first-of-type .service-coupon {
    padding-left: 0;
}

.service-coupon-list > li:last-of-type .service-coupon {
    padding-right: 0;
}

.service-coupon {
    display: block;
    width: 120px;
    height: auto;
    text-align: center;
    padding: 0 26px;
}

.service-coupon .noti-able-block {
    display: block;
    width: 100%;
    height: 20px;
    font-size: 0;
}

.service-coupon .noti-able-block .noti-able {
    display: none;
    width: 60px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    background-color: #FE6A2B;
    border-radius: 10px;
}

.service-coupon .icon-block {
    display: block;
    width: 100%;
    height: auto;
    padding: 6px 0;
    color: #A0A6AF;
}

.service-coupon .label-block {
    display: block;
    width: 100%;
    height: 28px;
    font-size: 0;
}

.service-coupon .label-block .label {
    display: inline-block;
    font-size: 12px;
    letter-spacing: -0.5px;
    line-height: 14px;
    color: #A0A6AF;
}

.service-coupon.able .noti-able-block .noti-able {
    display: inline-block;
}

.service-coupon.able .icon-block {
    color: #FE6A2B;
}

.service-coupon.able .label-block .label {
    color: #2A3138;
    font-weight: 500;
}

/* 쿠폰 다운로드 확인 */
.coupon-download-btn.downloaded:disabled {
    opacity: 1;
    border-color: rgba(42, 49, 56, 0.3);
}

.coupon-download-btn.downloaded:disabled .label-txt {
    opacity: .3;
}

.coupon-download-btn .before {
    display: inline-block;
}

.coupon-download-btn .after {
    display: none;
}

.coupon-download-btn.downloaded .before {
    display: none;
}

.coupon-download-btn.downloaded .after {
    display: inline-block;
    color: #fe6a2b;
}

.release-info {
    display: flex;
}

.release-info span {
    vertical-align: middle;
}

/* 20211213 // */
.release-info > .call {
    margin-left: 12px;
}

.release-info .line-icons {
    margin-right: 2px;
}

/* // 20211213 */
.store-location-list-item .info-area .info ul.meta.release-info > li:after {
    display: none;
}

.list-bullet li {
    position: relative;
    padding-left: 8px;
}

.list-bullet li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 2px;
    margin-top: -1px;
    background-color: #000;
}

.tab-item > .line-50.txt-neutral1 {
    line-height: 50px;
    color: #2a2a2a;
}

.brand-carinfo-wrap {
    position: relative;
}

.brand-carinfo-wrap .brand-carinfo-tabs {
    overflow: hidden;
    padding-top: 20px;
}

.brand-carinfo-wrap .brand-carinfo-tabs li {
    text-align: center;
    float: left;
    margin: 0 4px;
}

.brand-carinfo-wrap .brand-carinfo-tabs li a {
    display: inline-block;
    width: 160px;
    line-height: 40px;
    background-color: #f2f2f7;
    font-size: 16px;
    border-radius: 4px;
}

.brand-carinfo-wrap .brand-carinfo-tabs li a.active {
    background-color: #fe6a2b;
    color: #fff;
}

.brand-carinfo-wrap .brand-carinfo-tabs::after {
    content: "";
    display: block;
    clear: both;
}

.brand-carinfo-container .button-wrap {
    text-align: right;
}

.position-map {
    position: relative;
}

.position-map .map-header {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    padding: 12px 20px;
    line-height: 45px;
}

.position-map .map-header .headcopy {
    font-size: 18px;
    letter-spacing: -.5px;
}

.position-map .map-header .sub-headcopy {
    padding-left: 8px;
    font-size: 14px;
}

.position-map.sedan {
    width: 870px;
    height: 933px;
    background-image: url("../images/common/bg_mapsedan.png");
    background-size: 870px 933px;
}

.map_tire_list .sedan_tire {
    position: absolute;
    z-index: 1;
}

.map_tire_list .sedan_tire a {
    cursor: pointer;
    display: block;
    width: 124px;
    height: 124px;
}

.map_tire_list .sedan_tire.info_h462 {
    left: 704px;
    top: 85px;
}

.map_tire_list .sedan_tire.info_h123 {
    left: 645px;
    top: 252px;
}

.map_tire_list .sedan_tire.info_k127 {
    left: 74px;
    top: 85px;
}

.map_tire_list .sedan_tire.info_k120 {
    left: 223px;
    top: 232px;
}

.map_tire_list .sedan_tire.info_h750 {
    left: 373px;
    top: 341px;
}

.map_tire_list .sedan_tire.info_h308 {
    left: 519px;
    top: 419px;
}

.map_tire_list .sedan_tire.info_h436 {
    left: 645px;
    top: 515px;
}

.map_tire_list .sedan_tire.info_h449 {
    left: 464px;
    top: 634px;
}

.position-map.suv {
    width: 870px;
    height: 933px;
    background-image: url("../images/common/bg_mapsuv.png");
    background-size: 870px 933px;
}

.map_tire_list .suv_tire {
    position: absolute;
    z-index: 1;
}

.map_tire_list .suv_tire a {
    cursor: pointer;
    display: block;
    width: 124px;
    height: 124px;
}

.map_tire_list .suv_tire.info_rt05 {
    left: 58px;
    top: 333px;
}

.map_tire_list .suv_tire.info_rf11 {
    left: 215px;
    top: 333px;
}

.map_tire_list .suv_tire.info_ra45 {
    left: 351px;
    top: 467px;
}

.map_tire_list .suv_tire.info_ra33 {
    left: 474px;
    top: 333px;
}

.map_tire_list .suv_tire.info_rh17 {
    left: 515px;
    top: 157px;
}

.map_tire_list .suv_tire.info_k127a {
    left: 671px;
    top: 87px;
}

.map_tire_list .suv_tire.info_rh15 {
    left: 262px;
    top: 633px;
}

.smarthero-section {
    background: url("../images/common/membership-benefit-keyvisual.png") center top;
    background-repeat: no-repeat;
}

.smarthero-section .container {
    overflow: hidden;
    position: relative;
    min-height: 400px;
}

.smarthero-section .herocopy {
    margin-bottom: 20px;
    font-size: 42px;
    color: #fff;
    line-height: 125%;
    font-weight: 300;
}

.smarthero-section .herocopy strong {
    font-weight: 700;
}

.smarthero-section .subcopy {
    font-size: 24px;
    line-height: 125%;
}

.smarthero-section .subcopy strong {
    font-weight: 500;
}

.smarthero-section .hero-thumb {
    height: 120px;
}

.membership-benefit-wrap {
    height: 80px;
}

.membership-benefit-tabs {
    overflow: hidden;
}

.membership-benefit-tabs.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10;
}

.membership-benefit-tabs li {
    text-align: center;
    float: left;
    margin: 0 4px;
}

.membership-benefit-tabs li a {
    display: inline-block;
    line-height: 40px;
    border-radius: 20px;
    font-size: 16px;
    padding: 0 30px;
    background-color: #5eb0b5;
    color: #fff;
}

/* line 14479, src/project/desktop/assets/styles/style_pc.scss */
.membership-benefit-tabs::after {
    content: "";
    display: block;
    clear: both;
}

/* line 14485, src/project/desktop/assets/styles/style_pc.scss */
.call-reg-car-section {
    padding: 50px 40px;
    background-color: #A0A6AF;
}

/* line 14489, src/project/desktop/assets/styles/style_pc.scss */
.call-reg-car-section .guardrail {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* line 14497, src/project/desktop/assets/styles/style_pc.scss */
.call-reg-car-section .info > h4 {
    font-size: 24px;
    line-height: 38px;
    font-weight: 300;
    color: #ffffff;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: -1px;
}

/* line 14506, src/project/desktop/assets/styles/style_pc.scss */
.call-reg-car-section .info .go-reg-btn {
    display: inline-block;
    width: 520px;
    background-color: #2A3138;
    color: #ffffff;
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    line-height: 52px;
    border-radius: 26px;
    margin-top: 34px;
}

/* line 14520, src/project/desktop/assets/styles/style_pc.scss */
.call-reg-car-section > .mockup-image {
    display: block;
    width: 446px;
    height: 140px;
}

.smartbuy-section .headcopy {
    position: relative;
    padding: 0 20px 0 75px;
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
    font-weight: 300;
    font-size: 24px;
    line-height: 90px;
}

.smartbuy-section .headcopy strong {
    font-weight: 500;
}

.smartbuy-section .headcopy .icon-wrap {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    border: 2px solid #5eb0b5;
    border-radius: 30px;
}

/* line 14553, src/project/desktop/assets/styles/style_pc.scss */
.smartbuy-section .headcopy .icon-wrap.icon-smartbuy::before {
    content: "";
    display: block;
    width: 34px;
    height: 24px;
    margin: 16px auto;
    background: url("../images/common/icon_smart_buy-mint.svg") 50% 50% no-repeat;
    background-size: 34px auto;
}

/* line 14563, src/project/desktop/assets/styles/style_pc.scss */
.smartservice-section .headcopy {
    position: relative;
    padding: 0 20px 0 75px;
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
    font-weight: 300;
    font-size: 24px;
    line-height: 90px;
}

/* line 14573, src/project/desktop/assets/styles/style_pc.scss */
.smartservice-section .headcopy strong {
    font-weight: 500;
}

/* line 14577, src/project/desktop/assets/styles/style_pc.scss */
.smartservice-section .headcopy .icon-wrap {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    border: 2px solid #5eb0b5;
    border-radius: 30px;
}

/* line 14589, src/project/desktop/assets/styles/style_pc.scss */
.smartservice-section .headcopy .icon-wrap.icon-smartservice::before {
    content: "";
    display: block;
    width: 37px;
    height: 29px;
    margin: 13px auto;
    background: url("../images/common/icon_smart_service-mint.svg") 50% 50% no-repeat;
    background-size: 43px auto;
}

/* line 14599, src/project/desktop/assets/styles/style_pc.scss */
.smartdriver-section .headcopy {
    position: relative;
    padding: 0 20px 0 75px;
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
    font-weight: 300;
    font-size: 24px;
    line-height: 90px;
}

/* line 14609, src/project/desktop/assets/styles/style_pc.scss */
.smartdriver-section .headcopy strong {
    font-weight: 500;
}

/* line 14613, src/project/desktop/assets/styles/style_pc.scss */
.smartdriver-section .headcopy .icon-wrap {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    border: 2px solid #5eb0b5;
    border-radius: 30px;
}

/* line 14626, src/project/desktop/assets/styles/style_pc.scss */
.smartdriver-section .headcopy .icon-wrap.icon-smartdriver::before {
    content: "";
    display: block;
    width: 43px;
    height: 20px;
    margin: 18px auto;
    background: url("../images/common/icon_smart_driver-mint.svg") 50% 50% no-repeat;
    background-size: 43px auto;
}

/* 20211206 START // */
.membership-benefit-list {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-flow: wrap;
    padding-bottom: 120px;
}

.membership-benefit-list .item {
    width: 320px;
    padding-top: 80px;
}

.membership-benefit-list .item .thumb {
    overflow: hidden;
    width: 320px;
    height: 185px;
}

.membership-benefit-list .item .thumb img {
    display: block;
    width: 100%;
    font-size: 0;
}

.membership-benefit-list .item .info .more-action {
    margin-top: 40px;
    text-align: center;
}

.membership-benefit-list .item .info .item-headcopy {
    margin-top: 24px;
    font-size: 20px;
    text-align: center;
    line-height: 125%;
}

.membership-benefit-list .item .info .item-description {
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
    line-height: 144%;
}

.membership-benefit-list .item .info .smartbuy-color {
    color: #5eb0b5;
}

.membership-benefit-list .item .info .smartservice-color {
    color: #fe6a2b;
}

.membership-benefit-list .item .info .smartdriver-color {
    color: #6d80f5;
}

/* 20211206 END // */
.smarlegal-hero-section {
    position: relative;
    background-color: #fff;
}

.smarlegal-hero-section::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 10px;
    background-color: #eceeef;
}

.smarlegal-hero-section .headcopy {
    position: relative;
    padding: 24px 20px 0;
    font-size: 24px;
    line-height: 64px;
}

.smarlegal-section {
    background-color: #f9f9fa;
}

.smarlegal-section .smarlegal-list {
    padding: 20px;
}

.smarlegal-section .smarlegal-list li {
    position: relative;
    padding: 0 0 20px 12px;
    font-size: 16px;
    color: #5b6068;
    letter-spacing: -1px;
}

.smarlegal-section .smarlegal-list li::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    width: 2px;
    height: 2px;
    background-color: #5b6068;
}

.guide-tip-bx {
    position: relative;
    padding: 4px 20px 0px 20px;
    z-index: 1;
    pointer-events: none;
}

.guide-tip-bx.top {
    position: absolute;
    top: 100%;
    width: 100%;
}

.guide-tip-bx.top .tooltip-bx {
    position: absolute;
    top: 18px;
    left: 50%;
    width: auto;
    background-color: #5b6068;
    border: 1px solid #f2f2f7;
    border-radius: 20px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(-50%);
    animation: anim-guide-tip 4s ease-in-out;
}

.guide-tip-bx.top.off .tooltip-bx {
    animation: fadeIn .5s forwards;
    animation-name: opacityDown;
}

@keyframes anim-guide-tip {
    10% {
        top: 0;
        opacity: 1;
    }
    90% {
        top: 0;
        opacity: 1;
    }
    100% {
        top: 18px;
        opacity: 0;
    }
}

@keyframes anim-today-tip {
    10% {
        top: 100%;
        opacity: 1;
    }
    90% {
        top: 100%;
        opacity: 1;
    }
    100% {
        top: calc(100% + 8px);
        opacity: 0;
    }
}

.guide-tip-bx.top .tooltip-bx .msg {
    padding: 10px 20px;
    color: #ffffff;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
}

.guide-tip-bx.top .tooltip-bx:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -8px;
    left: 50%;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #f2f2f7;
    transform: translateX(-50%);
}

.guide-tip-bx.top .tooltip-bx:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #5b6068;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.brand-lineinfo-wrap {
    position: relative;
}

.brand-lineinfo-wrap .brand-lineinfo-tabs {
    overflow: hidden;
    padding-top: 20px;
}

.brand-lineinfo-wrap .brand-lineinfo-tabs li {
    text-align: center;
    float: left;
    margin-right: 8px;
}

.brand-lineinfo-wrap .brand-lineinfo-tabs li a {
    display: inline-block;
    padding: 0 16px;
    line-height: 40px;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
}

.brand-lineinfo-wrap .brand-lineinfo-tabs li a.active {
    border: 1px solid #fe6a2b;
    background-color: #fe6a2b;
    color: #fff;
}

.brand-lineinfo-wrap .brand-lineinfo-tabs::after {
    content: "";
    display: block;
    clear: both;
}

.brand-lineinfo-swiper {
    margin: 20px 38px 40px;
    padding: 4px 4px 8px;
}

.card.card-brand-lineinfo {
    width: 252px;
    background-color: #fff;
    transition: all 0.2s;
}

.card.card-brand-lineinfo:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card.card-brand-lineinfo .time-deal-limit {
    font-size: 12px;
}

.card.card-brand-lineinfo .time-deal-limit > * {
    vertical-align: middle;
}

.card.card-brand-lineinfo .card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
}

.card.card-brand-lineinfo .card-inner .compare-check .icon-holder {
    width: 28px;
    height: 28px;
    top: 2px;
    left: 2px;
}

.card.card-brand-lineinfo .card-inner .thumb-wrap {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 16px;
    text-align: center;
}

.card.card-brand-lineinfo .card-inner .thumb-wrap .thumb-holder {
    position: relative;
    display: inline-block;
    width: 135px;
    height: auto;
}

.card.card-brand-lineinfo .card-inner .thumb-wrap .thumb-holder img {
    width: 100%;
    height: auto;
}

.card.card-brand-lineinfo .card-inner .thumb-wrap .thumb-holder .brands-logo {
    height: 34px;
    background-size: auto 24px;
}

.card.card-brand-lineinfo .card-inner .description-area {
    display: block;
    width: 100%;
    height: auto;
    font-size: 16px;
    padding: 16px 20px;
}

.card.card-brand-lineinfo .card-inner .description-area .model {
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card.card-brand-lineinfo .card-inner .description-area .model-sub {
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card.card-brand-lineinfo .card-inner .description-area .size {
    font-size: 14px;
    letter-spacing: -.5px;
    color: #5b6068;
}

.brand-lineinfo-container .con {
    background-color: #f2f2f7;
}

.brand-lineinfo-container .con img {
    display: block;
    width: 75%;
    margin: auto;
}

.brand-lineinfo-container .con.bg-fff {
    background-color: #fff;
}

.brand-line-bottom {
    background-color: #f2f2f7;
}

.brand-line-swiper-wrap {
    overflow: hidden;
    position: relative;
}

.brand-line-swiper-wrap .description-area .more-link {
    display: block;
    text-align: right;
}

.brand-linevideo-wrap {
    position: relative;
    width: 100%;
    height: auto;
    transition: all ease-in-out .15s;
}

.brand-linevideo-wrap .brand-linevideo {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    transition: all ease-in-out .15s;
}

.brand-linevideo-wrap .brand-linevideo.brand-linevideo-chart {
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 4px;
}

.brand-linevideo-wrap .brand-linevideo .thumb-area {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(16, 19, 20, 0.16);
    background-color: #E9E9E9;
}

/* 16:9 */
.brand-linevideo-wrap .brand-linevideo .thumb-area:before {
    display: block;
    content: '';
    padding-top: 56.25%;
}

.brand-linevideo-wrap .brand-linevideo .thumb-area.ration-16x9:before {
    padding-top: 56.25%;
}

.brand-linevideo-wrap .brand-linevideo .thumb-area.ration-1x1:before {
    padding-top: 100%;
}

.brand-linevideo-wrap .brand-linevideo .thumb-area.ration-3x2:before {
    padding-top: 66.6666666667%;
}

.brand-linevideo-wrap .brand-linevideo .thumb-area.ration-4x3:before {
    padding-top: 75%;
}

.brand-linevideo-wrap .brand-linevideo .thumb-area > iframe {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.brand-line-bottom .headcopy {
    padding: 50px 0 20px;
    background-color: #fff;
    border-bottom: 1px solid #d9dbdc;
}

.brand-line-swiper-wrap .btn-item.btn-swiper-nav.btn-prev {
    left: 8px;
}

.brand-line-swiper-wrap .btn-item.btn-swiper-nav.btn-next {
    right: 8px;
}

.brand-line-swiper-wrap .btn-item.btn-swiper-nav {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: rgba(42, 49, 56, 0);
}

.brand-line-swiper-wrap .btn-item.btn-swiper-nav i {
    border-color: #2a3138;
}

.easyshop-tire-wrap {
    position: relative;
}

.easyshop-tire-wrap .easyshop-tire-tabs {
    overflow: hidden;
    padding-top: 20px;
}

.easyshop-tire-wrap .easyshop-tire-tabs li {
    text-align: center;
    float: left;
    margin-right: 8px;
}

.easyshop-tire-wrap .easyshop-tire-tabs li a {
    display: inline-block;
    width: 160px;
    line-height: 40px;
    background-color: #f2f2f7;
    font-size: 16px;
    border-radius: 4px;
}

.easyshop-tire-wrap .easyshop-tire-tabs li a.active {
    background-color: #fe6a2b;
    color: #fff;
}

.easyshop-tire-wrap .easyshop-tire-tabs::after {
    content: "";
    display: block;
    clear: both;
}

.easyshop-tire-container {
    padding: 40px 0;
}

.bullet-list {
    position: relative;
    display: block;
    padding-left: 12px;
    font-size: 14px;
}

.bullet-list:before {
    position: absolute;
    content: '・';
    top: 0;
    left: 0;
}

.bullet-list.bullet-list-xs {
    font-size: 11px;
}

.custom-service .hero-section {
    height: 400px;
    background: url("../images/common/membership-service-keyvisual.png") no-repeat center top;
}

.custom-service .banner-section {
    text-align: center;
}

.custom-service .banner-section.mint {
    background-color: #aed7da;
}

.custom-service .banner-section.blue {
    background-color: #6d80f5;
}

.custom-service .banner-section .banner-copy {
    font-size: 24px;
    color: #fff;
}

.custom-service .banner-section.mint .banner-copy strong {
    font-weight: 500;
    color: #3f989d;
}

.custom-service .cta-section {
    text-align: center;
}

.custom-service .cta-section button {
    width: 280px;
}

.custom-service .step-section {
    padding: 54px 0 68px;
}

.custom-service .step-section .herocopy {
    margin-bottom: 36px;
    font-size: 36px;
    text-align: center;
}

.custom-service .step-section .herocopy strong {
    font-weight: 400;
    color: #fe6a2b;
}

.custom-service .step-section .todayservice-step-wrap {
    overflow: hidden;
    padding: 50px;
    border-radius: 4px;
    background-color: #f2f2f7;
}

.custom-service .step-section .todayservice-step-wrap::after {
    content: "";
    display: block;
    clear: both;
}

.custom-service .step-section .todayservice-step {
    position: relative;
    float: left;
    width: 33.3333%;
    text-align: center;
}

.custom-service .step-section .todayservice-step:nth-child(2)::before,
.custom-service .step-section .todayservice-step:nth-child(2)::after {
    content: ". . .";
    position: absolute;
    top: 40px;
    color: #a0a6af;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 4px;
}

.custom-service .step-section .todayservice-step:nth-child(2)::before {
    left: -16px;
}

.custom-service .step-section .todayservice-step:nth-child(2)::after {
    right: -16px;
}

.custom-service .step-section .todayservice-step .thumb-area {
    width: 109px;
    margin: auto;
}

.custom-service .step-section .todayservice-step .thumb-area img {
    width: 100%;
}

.custom-service .step-section .todayservice-step .description-area {
    margin-top: 20px;
    padding: 0 27px;
}

.custom-service .step-section .todayservice-step .title {
    font-size: 20px;
    font-weight: 600;
}

.custom-service .step-section .todayservice-step .description {
    padding: 20px 0;
    font-size: 16px;
}

.custom-service .step-section .todayservice-step .txt-mint {
    color: #5eb0b5;
}

.custom-service .step-section .smart-step-wrap {
    padding: 20px 0 32px;
    border-radius: 4px;
    background-color: #f2f2f7;
}

.custom-service .step-section .smart-step {
    position: relative;
    width: 600px;
    min-height: 156px;
    margin: auto;
    padding-right: 114px;
}

.custom-service .step-section .smart-step::before {
    content: ". . .";
    position: absolute;
    right: 35px;
    bottom: -7px;
    color: #a0a6af;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 100%;
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

.custom-service .step-section .smart-step:last-child::after,
.custom-service .step-section .smart-step:last-child::before {
    display: none;
}

.custom-service .step-section .smart-step::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 491px;
    height: 1px;
    background-color: #fff;
}

.custom-service .step-section .smart-step .thumb-area {
    position: absolute;
    right: 0;
    top: 50%;
    width: 109px;
    margin-top: -57px;
}

.custom-service .step-section .smart-step .thumb-area img {
    width: 100%;
}

.custom-service .step-section .smart-step .description-area {
    position: absolute;
    left: 0;
    top: 50%;
    width: 491px;
    padding-left: 30px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.custom-service .step-section .smart-step .title {
    font-size: 20px;
    font-weight: 600;
}

.custom-service .step-section .smart-step .description {
    margin-top: 20px;
    font-size: 16px;
    padding-right: 30px;
}

.custom-service .step-section .smart-step .txt-mint {
    color: #5eb0b5;
}

.custom-service .legal-section .headcopy {
    font-size: 24px;
}

.custom-service .legal-section .smarlegal-list {
    padding: 20px;
    background-color: #f9f9fa;
    border-radius: 4px;
}

.custom-service .legal-section .smarlegal-list li {
    position: relative;
    padding: 0 0 24px 16px;
    font-size: 16px;
    color: #5b6068;
}

.custom-service .legal-section .smarlegal-list li:last-child {
    padding-bottom: 0;
}

.custom-service .legal-section .smarlegal-list li::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    width: 2px;
    height: 2px;
    background-color: #000;
}

.custom-service .border-weibht {
    border-bottom: 8px solid #eceeef;
}

.smarthero-section .circle-gallery-wrap {
    position: absolute;
    right: 200px;
    top: 200px;
}

.smarthero-section .copy-kv {
    position: absolute;
    right: 300px;
    top: 100px;
    width: 250px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 125%;
}

.smarthero-section .copy-kv em {
    display: block;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.smarthero-section .copy-kv.copy-car {
    opacity: 0;
}

.smarthero-section .copy-kv.copy-map {
    opacity: 0;
}

.smarthero-section .copy-kv.copy-sale {
    opacity: 0;
}

.circle-gallery-animation {
    position: relative;
    height: 724px;
    width: 724px;
    box-sizing: border-box;
    border-radius: 100%;
    border: 1px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.circle-gallery-animation .icon-kv {
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-animation: arrowcar 12s  ease-in-out infinite;
    animation: arrowcar 12s ease-in-out infinite;
}

.circle-gallery-animation .icon-kv::before {
    position: absolute;
    content: "";
    background-size: 116px auto;
    width: 116px;
    height: 117px;
    margin: -58px -58px;
    transform-origin: center;
}

.circle-gallery-animation .arrow-car {
    -webkit-animation: arrowcar 12s  ease-in-out infinite;
    animation: arrowcar 12s ease-in-out infinite;
}

.circle-gallery-animation .arrow-map {
    -webkit-animation: arrowmap 12s  ease-in-out infinite;
    animation: arrowmap 12s ease-in-out infinite;
}

.circle-gallery-animation .arrow-sale {
    -webkit-animation: arrowsale 12s  ease-in-out infinite;
    animation: arrowsale 12s ease-in-out infinite;
}

.circle-gallery-animation .arrow-car::before {
    background: url("../images/common/icon-kv-car.png") left top;
    -webkit-animation: scalecar 12s ease-in-out infinite;
    animation: scalecar 12s ease-in-out infinite;
}

.circle-gallery-animation .arrow-map::before {
    background: url("../images/common/icon-kv-map.png") left top;
    -webkit-animation: scalemap 12s ease-in-out infinite;
    animation: scalemap 12s ease-in-out infinite;
}

.circle-gallery-animation .arrow-sale::before {
    background: url("../images/common/icon-kv-sale.png") left top;
    -webkit-animation: scalesale 12s ease-in-out infinite;
    animation: scalesale 12s ease-in-out infinite;
}

.smarthero-section .copy-kv.copy-car {
    -webkit-animation: copycar 12s ease-in-out infinite;
    animation: copycar 12s ease-in-out infinite;
}

.smarthero-section .copy-kv.copy-map {
    -webkit-animation: copymap 12s ease-in-out infinite;
    animation: copymap 12s ease-in-out infinite;
}

.smarthero-section .copy-kv.copy-sale {
    -webkit-animation: copysale 12s ease-in-out infinite;
    animation: copysale 12s ease-in-out infinite;
}

@keyframes arrowcar {
    0% {
        transform: rotate(360deg);
        opacity: 0;
    }
    10% {
        transform: rotate(330deg);
        opacity: 1;
    }
    30% {
        transform: rotate(330deg);
        opacity: 1;
    }
    40% {
        transform: rotate(300deg);
        opacity: 1;
    }
    60% {
        transform: rotate(300deg);
        opacity: 1;
    }
    70% {
        transform: rotate(270deg);
        opacity: 1;
    }
    90% {
        transform: rotate(270deg);
        opacity: 1;
    }
    100% {
        transform: rotate(240deg);
        opacity: 0;
    }
}

@keyframes arrowmap {
    0% {
        transform: rotate(330deg);
        opacity: 0;
    }
    10% {
        transform: rotate(300deg);
        opacity: 1;
    }
    30% {
        transform: rotate(300deg);
        opacity: 1;
    }
    40% {
        transform: rotate(270deg);
        opacity: 1;
    }
    60% {
        transform: rotate(270deg);
        opacity: 1;
    }
    70% {
        transform: rotate(240deg);
        opacity: 1;
    }
    90% {
        transform: rotate(240deg);
        opacity: 1;
    }
    100% {
        transform: rotate(210deg);
        opacity: 0;
    }
}

@keyframes arrowsale {
    0% {
        transform: rotate(300deg);
        opacity: 0;
    }
    10% {
        transform: rotate(270deg);
        opacity: 1;
    }
    30% {
        transform: rotate(270deg);
        opacity: 1;
    }
    40% {
        transform: rotate(240deg);
        opacity: 1;
    }
    60% {
        transform: rotate(240deg);
        opacity: 1;
    }
    70% {
        transform: rotate(210deg);
        opacity: 1;
    }
    90% {
        transform: rotate(210deg);
        opacity: 1;
    }
    100% {
        transform: rotate(180deg);
        opacity: 0;
    }
}

@keyframes scalecar {
    0% {
        transform: scale(0.8) rotate(0deg);
    }
    10% {
        transform: scale(0.8) rotate(30deg);
    }
    30% {
        transform: scale(0.8) rotate(30deg);
    }
    40% {
        transform: scale(0.8) rotate(60deg);
    }
    60% {
        transform: scale(0.8) rotate(60deg);
    }
    70% {
        transform: scale(1) rotate(90deg);
    }
    90% {
        transform: scale(1) rotate(90deg);
    }
    100% {
        transform: scale(0.8) rotate(120deg);
    }
}

@keyframes scalemap {
    0% {
        transform: scale(0.8) rotate(30deg);
    }
    10% {
        transform: scale(0.8) rotate(60deg);
    }
    30% {
        transform: scale(0.8) rotate(60deg);
    }
    40% {
        transform: scale(1) rotate(90deg);
    }
    60% {
        transform: scale(1) rotate(90deg);
    }
    70% {
        transform: scale(0.8) rotate(120deg);
    }
    90% {
        transform: scale(0.8) rotate(120deg);
    }
    100% {
        transform: scale(0.8) rotate(150deg);
    }
}

@keyframes scalesale {
    0% {
        transform: scale(0.8) rotate(60deg);
    }
    10% {
        transform: scale(1) rotate(90deg);
    }
    30% {
        transform: scale(1) rotate(90deg);
    }
    40% {
        transform: scale(0.8) rotate(120deg);
    }
    60% {
        transform: scale(0.8) rotate(120deg);
    }
    70% {
        transform: scale(0.8) rotate(150deg);
    }
    90% {
        transform: scale(0.8) rotate(150deg);
    }
    100% {
        transform: scale(0.8) rotate(180deg);
    }
}

@keyframes copysale {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes copymap {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes copycar {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.deal-store .legal-section .headcopy {
    font-size: 24px;
}

.deal-store .legal-section .smarlegal-list {
    padding: 20px;
    background-color: #f9f9fa;
    border-radius: 4px;
}

.deal-store .legal-section .smarlegal-list li {
    position: relative;
    padding: 0 0 24px 16px;
    font-size: 16px;
    color: #5b6068;
}

.deal-store .legal-section .smarlegal-list li:last-child {
    padding-bottom: 0;
}

.deal-store .legal-section .smarlegal-list li::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    width: 2px;
    height: 2px;
    background-color: #000;
}

.deal-store .border-weibht {
    border-bottom: 8px solid #eceeef;
}

.order-coupon-wrap .apply-coupon .noti {
    overflow: hidden;
    display: inline-block;
    padding-left: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 20px;
    letter-spacing: 0;
    font-size: 12px;
    color: #fe6a2b;
}

/* 2021-04-09 start */
.pickup-description {
    position: relative;
    padding: 8px 0 28px;
}

.pickup-description::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: 0;
    width: 277px;
    height: 126px;
    background-size: auto 126px;
    background-image: url("../images/common/bg_popup_smartpickup.png");
    background-repeat: no-repeat;
}

.badge-smartpickup {
    display: inline-block;
    width: auto;
    line-height: 16px;
    font-size: 11px;
    font-weight: 500;
    background: #fe6a2b;
    color: #fff;
    padding: 0 8px;
    border-radius: 4px;
    vertical-align: middle;
    position: relative;
    border: 1px solid transparent;
}

.smartpickup-line::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    position: relative;
    top: 3px;
    margin: 0 2px 0 6px;
    background-color: #a0a6af;
}

/* 2021-04-09 end */
/* 2021-04-22 end */
.mycar-more-path {
    position: relative;
}

.mycar-more-path::after {
    position: absolute;
    display: inline-block;
    content: '\e917';
    font-family: 'LineIcons';
    width: 24px;
    height: 45px;
    font-size: 32px;
    line-height: 45px;
    bottom: -2px;
    right: -20px;
}

/* 2021-04-22 end */
/* 2021-04-27 start */
#loginForm .login-button-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#loginForm .login-button-wrap button {
    margin-right: 5px;
    -ms-flex: 1;
}

#loginForm .login-button-wrap a {
    margin-left: 5px;
    -ms-flex: 1;
}

.member .login_02.sns-login-wrap {
    margin-bottom: 0;
}

.member .sns-login-wrap .sns_logo {
    padding-bottom: 20px;
}

.member .login_03.login-more-wrap {
    margin-top: 70px;
    padding: 25px 0 15px;
}

.member .login_03.login-more-wrap ul {
    display: flex;
    margin: 0 20px;
}

.member .login_03.login-more-wrap ul li {
    flex: 1;
    float: none;
    width: auto;
    padding: 0 !important;
}

.member .login_03.login-more-wrap ul > li a {
    display: block;
    padding: 0;
    text-align: center;
}

.member .login_03.login-more-wrap ul > li.sub.last:after {
    top: 4px;
    height: 22px;
}

/* 2021-04-27 end */
.individual-ux .go-my-membership {
    position: relative;
    background: none;
    padding: 0;
}

.individual-ux .go-my-membership img {
    display: block;
    width: 100%;
    font-size: 0;
}

.myname-viwer .btn-allmyt {
    width: 98px;
    height: 26px;
    background-size: 98px 26px;
    background-image: url("../images/common/btn_allmyt_mypage.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: transparent;
}

.store-reserve-map-wrap .marker-store-info dt.allmyt-store-marker {
    background: url("../images/common/icon_maps_spots.png") no-repeat;
    background-size: 62px 29px;
    width: 62px;
    height: 29px;
    margin-right: 8px;
}

.allmyt-smartstore {
    float: left;
    width: 93px;
    height: 21px;
    margin-right: 3px;
    background-image: url("../images/common/img_allmyt_store.png");
    background-size: 93px 21px;
    background-position: left 50%;
    background-repeat: no-repeat;
    line-height: 21px;
}

.icon-allmytpass-coupon {
    width: 45px;
    height: 14px;
    display: inline-block;
    background: url("../images/common/img_allmyt_fff.png") no-repeat 50% 50%;
    background-size: 45px 14px;
    font-size: 0 !important;
}

.link_allmyt_more {
    position: relative;
    display: inline-block;
    font-size: 14px;
    height: 28px;
    padding: 0 24px 0 94px;
    line-height: 28px;
}

.link_allmyt_more::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 87px;
    height: 27px;
    background-size: 87px 27px;
    background-image: url("../images/common/btn_allmyt.png");
    background-repeat: no-repeat;
}

.link_allmyt_more::after {
    content: "\e917";
    font-family: 'LineIcons', sans-serif !important;
    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=#youtube-player-------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/* line 14241, src/project/desktop/assets/styles/style_pc.scss */
.youtube-player {
    display: flex;
    justify-content: center;
    padding: 40px 0 80px;
}

/* line 14246, src/project/desktop/assets/styles/style_pc.scss */
.youtube-player .player-container {
    position: relative;
    display: block;
    width: 870px;
    height: 460px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=#amt-swiper-section---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/* line 14260, src/project/desktop/assets/styles/style_pc.scss */
/* 20211206 START // */
.amt-swiper-section .head-copy {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
}

/* line 14268, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .head-copy > .swiper-pagination {
    font-size: 14px;
}

/* line 14271, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .guardrail {
    padding: 0 140px;
    overflow: visible;
}

/* line 14276, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper {
    padding-top: 98px;
    padding-bottom: 60px;
}

/* line 14283, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper::before {
    position: absolute;
    display: block;
    content: '';
    width: 233px;
    height: 484px;
    left: 50%;
    top: 93px;
    border-radius: 30px;
    background-color: #ffffff;
    transform: translateX(-50%);
    box-shadow: 0 0 32px 4px rgba(169, 173, 191, 0.7);
}

/* line 14296, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper::after {
    position: absolute;
    display: block;
    content: '';
    width: 228px;
    height: 477px;
    top: 93px;
    left: 50%;
    border: 5px solid #ffffff;
    border-radius: 30px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none; /* [task]swiper update */
}

/* [task]swiper update start */
.amt-swiper-section .amt-benefit-swiper ~ .swiper-pagination-fraction {
    bottom: 20px;
}
/* [task]swiper update end */

/* line 14310, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper .swiper-slide {
    position: relative;
    width: auto;
    height: 491px;
}

/* line 14317, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper .swiper-slide.swiper-slide-active .smart-item::after {
    background-color: rgba(0, 0, 0, 0);
    transition: all 1s;
}

/* line 14322, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper .swiper-slide.swiper-slide-active .smart-item .item-description {
    opacity: 1;
    animation-delay: 1.5s;
    animation: bounce 1s;
}

.amt-swiper-section .amt-benefit-swiper .swiper-slide.swiper-slide-active .smart-item .item-description .txt-wrap {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background-color: #2a3138;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    border-radius: 30px;
    white-space: nowrap;
    opacity: 1;
    animation-delay: 1.5s;
    animation: bounce 1s;
}

/* line 14332, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper .swiper-slide .smart-item {
    text-align: center;
}

/* line 14348, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper .swiper-slide .smart-item img {
    width: 228px;
    border-radius: 30px;
}

/* line 14350, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper .swiper-slide .smart-item .item-description {
    position: absolute;
    top: -58px;
    left: -100px;
    right: -100px;
    width: auto;
    z-index: 1;
    text-align: center;
    opacity: 0;
    transition: all 0.5s;
}

/* line 14366, src/project/desktop/assets/styles/style_pc.scss */
.amt-swiper-section .amt-benefit-swiper .swiper-slide.swiper-slide-active .smart-item .item-description .txt-wrap::before {
    content: "";
    height: 0;
    width: 0;
    bottom: -7px;
    left: 50%;
    margin-left: -4px;
    position: absolute;
    border: 8px solid transparent;
    border-bottom-width: 0;
    border-top-color: #2a3138;
    opacity: 1;
    animation-delay: 1.5s;
}

.amt-swiper-section .amt-benefit-swiper .swiper-slide .smart-item .item-description .txt-wrap::before {
    opacity: 0;
    transition: all 0.5s;
}

/* // 20211206 END */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* line 14398, src/project/desktop/assets/styles/style_pc.scss */
.go-btn {
    display: inline-flex;
    align-items: center;
    line-height: 40px;
    padding: 0 18px;
    border: 1px solid #2A3138;
    vertical-align: middle;
    width: auto;
    border-radius: 20px;
}

/* line 14408, src/project/desktop/assets/styles/style_pc.scss */
.go-btn .label {
    font-size: 18px;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=#main-landing-popup---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/* line 15682, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
}

/* line 15695, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup.on {
    display: block;
}

#main-landing-popup .dim {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

/* 2021-06-14 start */
/* line 15703, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 691px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

/* line 15717, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-contents {
    flex-grow: 1;
    height: 630px;
}

/* line 15721, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-contents .landing-popup-swiper {
    height: 100%;
}

/* line 15725, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-contents .landing-popup-swiper .swiper-slide .img-amt {
    height: 100%;
    position: relative;
}

/* line 15729, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-contents .landing-popup-swiper .swiper-slide .img-amt img {
    width: 100%;
    height: auto;
}

/* line 15734, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-contents .landing-popup-swiper .swiper-slide .img-amt .more-link {
    position: absolute;
    display: block;
    top: 71%;
    left: 5%;
    width: 90%;
    height: 7%;
}

/* line 15746, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-contents .pagination-wrap {
    width: 40px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -20px;
}

/* line 15754, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-contents .pagination-wrap .swiper-pagination {
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

/* line 15766, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 60px;
    border-top: 1px solid #e4ecf1;
}

/* line 15773, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-tools .check-item .icon-holder::before {
    border-radius: 20px;
}

/* line 15777, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-tools .close-button {
    background-color: #fff;
    padding: 0 20px;
    line-height: 32px;
    border-radius: 4px;
}

/* line 15783, src/project/desktop/assets/styles/style_pc.scss */
#main-landing-popup .content-wrap .landing-popup-tools .close-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* line 15792, src/project/desktop/assets/styles/style_pc.scss */
.membership-smartpickup-service-title,
.membership-today-service-title {
    padding-left: 680px;
    min-height: 348px;
    position: relative;
}

/* line 15799, src/project/desktop/assets/styles/style_pc.scss */
.membership-smartpickup-service-title .title-img,
.membership-today-service-title .title-img {
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 0;
}

/* line 15807, src/project/desktop/assets/styles/style_pc.scss */
.membership-smartpickup-service-title .txt-wrap,
.membership-today-service-title .txt-wrap {
    padding-top: 32px;
}

/* line 15812, src/project/desktop/assets/styles/style_pc.scss */
.membership-smartpickup-service-title .txt-wrap > h2,
.membership-today-service-title .txt-wrap > h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 42px;
}

/* line 15819, src/project/desktop/assets/styles/style_pc.scss */
.membership-smartpickup-service-title .txt-wrap > h3,
.membership-today-service-title .txt-wrap > h3 {
    font-size: 24px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 8px;
}

/* line 15827, src/project/desktop/assets/styles/style_pc.scss */
.membership-smartpickup-service-title .txt-wrap > p,
.membership-today-service-title .txt-wrap > p {
    font-size: 16px;
    line-height: 28px;
    color: #5b6068;
    margin-top: 20px;
}

/* line 15835, src/project/desktop/assets/styles/style_pc.scss */
/* 20250204 [task]amt 업데이트 start */
.membership-smartpickup-service-title .txt-wrap > .btn-item,
.membership-today-service-title .txt-wrap > .btn-item {
    width: 380px;
    margin-top: 48px;
}
/* 20250204 [task]amt 업데이트 end */

/* 2021-06-15  */
#main-landing-popup .swiper-next {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 1;
    opacity: 1;
}

#main-landing-popup .swiper-next .line-icons {
    color: #fff;
    padding: 40px 20px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

#main-landing-popup .swiper-prev {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 1;
    opacity: 1;
}

#main-landing-popup .swiper-prev .line-icons {
    color: #fff;
    padding: 40px 20px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

#main-landing-popup .swiper-prev,
#main-landing-popup .swiper-next {
    cursor: pointer;
}

#main-landing-popup .swiper-prev:hover,
#main-landing-popup .swiper-next:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

#main-landing-popup .swiper-prev.swiper-button-disabled,
#main-landing-popup .swiper-next.swiper-button-disabled {
    opacity: 0;
}

.scroll-offset-wrap {
    height: 80px;
}

.scroll-offset.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10;
}

.membership-benefit-list .go-btn .label {
    font-size: 18px;
}

/* 2021-06-24 */
.mylocation-section {
    position: relative;
    margin: 12px 20px 0;
    padding: 12px 50px 12px 16px;
    background-color: #f2f2f7;
    border-radius: 8px;
}

.mylocation-section .info {
    font-size: 14px;
}

.mylocation-section .info strong {
    font-size: 14px;
    font-weight: normal;
    color: #008bec;
}

.mylocation-section .subinfo.icon-local {
    margin-top: 8px;
    padding-left: 25px;
    font-size: 12px;
    background-image: url("../images/common/icon_location.png");
    background-size: 13px 20px;
    background-position: 4px 50%;
    background-repeat: no-repeat;
}

.mylocation-section .subinfo .explan-copy {
    display: inline-block;
    padding: 0 14px;
    border-radius: 20px;
    background-color: #fff;
    font-size: 12px;
    line-height: 20px;
}

.mylocation-section .subinfo .street {
    color: #008bec;
    font-weight: bold;
}

/* 20211213 삭제 // 
.mylocation-section .location-button {
    overflow: hidden;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    background-image: url("../images/common/bg_location.png");
    background-size: 25px 25px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
    z-index: 1;
}
// 20211213 삭제 */
/* 0728 START */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=.page-title ----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.page-title {
    padding: 67px 0 16px;
    font-size: 30px;
}

.kv-blackdeal-section {
    position: relative;
}

.kv-blackdeal-section .deal-swiper {
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.kv-blackdeal-section .swiper-slide img {
    width: 100%;
}

.kv-blackdeal-section .control-wrap {
    position: absolute;
    right: 0;
    bottom: -26px;
    z-index: 1;
}

.kv-blackdeal-section .control-wrap .control-flex {
    position: relative;
    display: flex;
    padding-left: 36px;
}

.kv-blackdeal-section .control-wrap .control-flex .swiper-pagination {
    left: 0;
    bottom: 0;
}

.kv-blackdeal-section .control-wrap .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin-right: 12px;
    background-color: #d9dbdc;
}

.kv-blackdeal-section .control-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #fe6a2b;
}

.kv-blackdeal-section .control-wrap .play-button {
    overflow: hidden;
    display: none;
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid #d9dbdc;
    cursor: pointer;
}

.kv-blackdeal-section .control-wrap .play-button.active {
    display: block;
}

.kv-blackdeal-section .control-wrap .play-button.swiper-button-play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #2a3138;
    transform: translate(-50%, -50%);
}

.kv-blackdeal-section .control-wrap .play-button.swiper-button-pause::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    display: inline-block;
    width: 2px;
    height: 8px;
    transform: translateY(-50%);
    background-color: #2a3138;
}

.kv-blackdeal-section .control-wrap .play-button.swiper-button-pause::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    display: inline-block;
    width: 2px;
    height: 8px;
    transform: translateY(-50%);
    background-color: #2a3138;
}

.kv-blackdeal-section .swiper-button-prev {
    width: 49px;
    height: 49px;
    background-image: url("../images/deal/button_swiper_left.svg");
    background-size: 49px 49px;
    left: 14px;
}

.kv-blackdeal-section .swiper-button-next {
    width: 49px;
    height: 49px;
    background-image: url("../images/deal/button_swiper_right.svg");
    background-size: 49px 49px;
    right: 14px;
}

.store-location-wrap {
    padding: 0 56px;
}

/* 20220316 // */
.store-location-wrap .swiper-pagination {
    bottom: 0;
}

/* // 20220316 */
.store-location-wrap .swiper-pagination .swiper-pagination-bullet {
    margin: 0 4px;
    background-color: #aaafb8;
}

.store-location-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #303840;
}

.store-location-wrap .btn-item.btn-swiper-nav {
    background-color: #2a3138;
}

/* 20220316 // */
.store-location-wrap .allmyt-store {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 8px;
    padding-top: 48px;
    font-size: 11px;
    color: #fff;
    z-index: 1;
    background: black;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

/* // 20220316 */
.store-location-wrap .allmyt-store .allmyt-copy {
    display: inline-block;
    padding-left: 4px;
    line-height: 24px;
}

.store-location-wrap .allmyt-store .allmyt-img {
    display: inline-block;
    vertical-align: bottom;
}

.main-storesearch-empty {
    overflow: hidden;
    position: relative;
    height: 208px;
    margin-top: 28px;
    font-size: 14px;
    text-align: center;
    color: #a0a6af;
    background-color: #f9f9fa;
    border-radius: 8px;
}

.main-storesearch-empty::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 329px;
    height: 189px;
    background-image: url("../images/common/bg_store_empty.png");
    background-size: auto 189px;
    bottom: 0;
    right: 0;
}

/* 20220316 // */
.main-storesearch-empty .empty-copy {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.main-storesearch-empty .empty-copy::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    background-image: url("../images/common/icon_search_fail.png");
    background-size: 40px auto;
}

/* // 20220316 */
.csmain_01 .service li:nth-child(3) a:before {
    line-height: 50px;
    font-size: 36px;
    content: "\e998";
    font-family: 'LineIcons';
    text-align: center;
    background: none;
}

/* 1101 쿠폰 UI개선 // */
.coupon-card .coupon-card-info {
    overflow: hidden;
}

.coupon-card .haaer-label-use {
    position: absolute;
    left: 0;
    top: 0;
}

.coupon-card .haaer-label-use::before {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    height: 0px;
    border-bottom: 72px solid transparent;
}

.coupon-card .haaer-label-use.online::before {
    border-left: 72px solid #fe6a2b;
}

.coupon-card .haaer-label-use.online-store::before {
    border-left: 72px solid #5eb0b5;
}

.coupon-card .haaer-label-use.store::before {
    border-left: 72px solid #cbb58f;
}

.coupon-card .haaer-label-use .label-txt {
    position: absolute;
    left: 6px;
    top: 8px;
    width: 32px;
    height: 32PX;
    color: #fff;
    font-weight: 500;
    transform: rotate(-45deg);
    z-index: 1;
    line-height: 110%;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: keep-all;
}

.coupon-card .haaer-label-group {
    text-align: right;
}

.coupon-card .haaer-label-group .label-txt {
    display: block;
    line-height: 110%;
}

.txt-online {
    color: #fe6a2b;
    font-weight: 500;
}

.txt-online-store {
    color: #58c1c7;
    font-weight: 500;
}

.txt-store {
    color: #cbb58f;
    font-weight: 500;
}

.coupon-card .coupon-card-info .country-label-wrap .badge-inv {
    padding: 0 4px;
    line-height: 16px;
}

.suggest-group .suggest-item.allard2021 {
    width: 45px;
    height: 58px;
    margin-top: 8px;
    background-image: url("../images/goods/badge_allard2021.png");
    background-size: contain;
}

.suggest-group .suggest-item.auto2020_ex {
    width: 40px;
    height: 89px;
    margin-top: 8px;
    background-image: url("../images/goods/badge_auto2020_ex.png");
    background-size: contain;
}

.suggest-group .suggest-item.auto2020_good {
    width: 40px;
    height: 89px;
    margin-top: 8px;
    background-image: url("../images/goods/badge_auto2020_good.png");
    background-size: contain;
}

.suggest-group .suggest-item.auto2021 {
    width: 40px;
    height: 65px;
    margin-top: 8px;
    background-image: url("../images/goods/badge_auto2021.png");
    background-size: contain;
}

.suggest-tooltip-container {
    position: relative;
    display: inline-block;
}

.suggest-tooltip {
    display: none;
    position: absolute;
    border-radius: 4px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #2ed0ff;
    box-shadow: 0 2px 4px 0 rgba(160, 166, 175, 0.7);
    color: #2a3138;
    width: 164px;
    height: auto;
    z-index: 800;
    text-align: left;
    font-size: 12px;
}

.suggest-tooltip-container:hover .suggest-tooltip {
    display: block;
}

.suggest-tooltip-container .suggest-tooltip::before,
.suggest-tooltip-container .suggest-tooltip::after {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.suggest-tooltip-container.right .suggest-tooltip {
    margin-left: 10px;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

.suggest-tooltip-container.right .suggest-tooltip::after {
    top: 50%;
    left: -10px;
    margin-top: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: transparent #fff transparent transparent;
}

.suggest-tooltip-container.right .suggest-tooltip::before {
    top: 50%;
    left: -13px;
    margin-top: -6px;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color: transparent #2ed0ff transparent transparent;
}

.suggest-tooltip-container.f-top .suggest-tooltip {
    top: 0;
    transform: translateY(0);
}

.suggest-tooltip-container.f-top .suggest-tooltip:after {
    top: 14px;
}

.suggest-tooltip .suggest-tooltip-header {
    display: block;
    letter-spacing: -.5px;
}

.suggest-tooltip .suggest-tooltip-body {
    display: block;
    white-space: normal;
    letter-spacing: -.5px;
}

.list-size-free .main-menu.new-page::before {
    content: "NEW";
    position: absolute;
    display: block;
    left: 26px;
    top: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #58c1c7;
}

/* 20230130 start */
.check-interest {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 0;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
}

.check-interest:hover {
    background: rgba(0,0,0,0.05);
}

.check-interest input {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    opacity: 0;
}

.check-interest .labelling {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    opacity: 0;
}

.check-interest .icon-holder {
    display: inline-block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    text-align: center;
    position: relative;
    font-size: 0;
    pointer-events: none;
}

.check-interest.txt-right .icon-holder {
    left: auto;
    right: 6px;
}

.check-interest .icon-holder span:nth-of-type(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #c0c6ce;
}

.check-interest .icon-holder span:nth-of-type(2) {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fe6a2b;
}

.check-interest input[type="checkbox"]:checked ~ .icon-holder span:nth-of-type(1) { display: none; }
.check-interest input[type="checkbox"]:checked ~ .icon-holder span:nth-of-type(2) { display: inline-block; }

.check-interest .label-txt {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 14px;
    vertical-align: middle;
    font-size: 10px;
    letter-spacing: 0;
    color: #c0c6ce;
}

/* .check-interest .icon-holder .heart-fill {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url("../images/common/icon_hart_off.png") no-repeat 50% 50%;
    background-size: 37px 36px;
}

.check-interest input[type="checkbox"]:checked ~ .icon-holder .heart-fill {
    background: url("../images/common/icon_hart_active.png") no-repeat 50% 50%;
    background-size: 37px 36px;
}

.check-interest .icon-holder .bg-hart-fill {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url("../images/common/bg_hart.png") no-repeat 50% 50%;
    background-size: 40px 40px;
}

.check-interest input[type="checkbox"]:checked ~ .icon-holder .bg-hart-fill {
    background: url("../images/common/bg_hart_active.png") no-repeat 50% 50%;
    background-size: 40px 40px;
} */
/* 20230130 end */

.check-interest .labelling {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* //20220316 */
.check-interest .labelling:active {
    background: rgba(0, 0, 0, 0.05);
}

.check-interest input:disabled ~ .icon-holder {
    pointer-events: none;
    opacity: 0.3;
}

.check-interest input:disabled ~ .labelling {
    pointer-events: none;
    opacity: 0.3;
}

.check-interest.no-disabled-style input:disabled ~ .icon-holder {
    opacity: 1;
}

.check-interest.no-disabled-style input:disabled ~ .labelling {
    opacity: 1;
}

/* 20230130 start */
.interest-store-wrap.right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    transform: translate(-8px, 8px);
}

.interest-store-wrap.middle {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -20px;
}

.store-register .interest-store-wrap.right {
    transform: translate(0, -8px);
}

.store-search-wrap .interest-store-wrap.right {
    transform: translate(-8px, 8px);
}
/* 20230130 end */

.form-control .input-group .tools > .search-submit .search {
    font-size: 24px;
    font-weight: 400;
}

.interest-nodata .img-icons {
    margin: auto;
}

.img-icons.icon-tstore-gray {
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 50% 50%;
    background-image: url(../images/mypage/icon_tstore_gray.png);
    background-size: 30px auto;
}

/* 20220316// */
.img-icons.icon-bg-hart {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 50% 50%;
    background-image: url(../images/common/bg_hart.png);
    background-size: 40px auto;
    vertical-align: middle;
}

.img-icons.icon-hart {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 50% 50%;
    background-image: url(../images/common/icon_hart.png);
    background-size: 20px auto;
    vertical-align: middle;
}

/* 20230130 start */
.sort-result-section .interest-store-wrap.right {
    position: absolute;
    right: 0;
    top: 0;
}
/* 20230130 end */

.page-header .item-thumb-wrap .share-list .items {
    line-height: 40px;
    margin-left: 12px;
}

.store-info-wrap .benefit-wrap {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    line-height: 38px;
}

/* 20220316// */
.interest-location-list-wrapper {
    display: block;
    height: auto;
    padding: 0 16px;
}

.interest-location-list-wrapper .swiper-slide > div {
    padding-right: 16px;
}

.interest-location-list-wrapper .swiper-slide > div:first-child .store-location-list-item {
    border-bottom: 1px solid #d9dbdc;
}

.interest-location-list-wrapper .interest-location-list-item {
    border-bottom: 1px solid #fff;
}

.interest-location-list-wrapper .interest-location-list-item:last-child {
    border-bottom: 0;
}

.interest-location-list-item {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 16px 0;
}

.interest-location-list-item .info-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 120px;
    padding-left: 184px;
}

.interest-location-list-item .info-area .thumb-position {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: auto;
}

.interest-location-list-item .info-area .info {
    position: relative;
    min-height: 120px;
    padding-bottom: 24px;
}

.interest-location-list-item .info-area .thumb-area {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background-color: #E9E9E9;
    border-radius: 8px;
    background-size: contain;
    background-position: top;
    background-image: url("../images/common/shop_default.png");
}

.interest-location-list-item .info-area .thumb-area:before {
    display: block;
    content: '';
    padding-top: 56.25%;
}

.interest-location-list-item .info-area .thumb-area.ration-16x9:before {
    padding-top: 56.25%;
}

.interest-location-list-item .info-area .thumb-area.ration-1x1:before {
    padding-top: 100%;
}

.interest-location-list-item .info-area .thumb-area.ration-3x2:before {
    padding-top: 66.6666666667%;
}

.interest-location-list-item .info-area .thumb-area.ration-4x3:before {
    padding-top: 75%;
}

.interest-location-list-item .info-area .thumb-area > img {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.interest-location-list-item .info-area .info .title {
    font-size: 18px;
    font-weight: 400;
}

.interest-location-list-item .info-area .info ul.meta > li {
    display: inline-block;
}

.interest-location-list-item .info-area .info ul.meta > li > span {
    vertical-align: middle;
    font-size: 12px;
}

.interest-location-list-item .info-area .info ul.meta > li:after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 10px;
    vertical-align: middle;
    background-color: #E9E9E9;
    margin: 0 8px;
}

.interest-location-list-item .info-area .info ul.meta > li:last-child:after {
    content: none;
}

.interest-location-list-item .info-area .info .description {
    margin-top: 6px;
    padding-right: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14px;
}

.interest-location-list-item .info-area .info .more-shop {
    position: absolute;
    bottom: 0;
    left: 0;
}

.interest-location-list-item .action-area {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-left: 120px;
    margin-top: 12px;
}

.interest-location-list-item .action-area .left {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.interest-location-list-item .action-area .left ul li {
    display: inline-block;
}

.interest-location-list-wrapper .allmyt-store {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 8px 4px;
    padding-top: 48px;
    font-size: 14px;
    color: #fff;
    z-index: 1;
    background: black;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.interest-location-list-wrapper .allmyt-store .allmyt-copy {
    display: inline-block;
    padding-left: 4px;
    line-height: 20px;
}

.interest-location-list-wrapper .allmyt-store .allmyt-img {
    display: inline-block;
    width: 67px;
    vertical-align: bottom;
}

.interest-location-list-wrapper .allmyt-store .allmyt-img img {
    height: 21px;
}

.interest-location-list-wrapper .swiper-pagination-bullet {
    background-color: #a0a6af;
}

.interest-location-list-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #2a3138;
}

.interest-location-list-item .right .btn-item.btn-neutral {
    padding: 0px 4px 0 16px;
    white-space: nowrap;
}

.interest-location-list-item .right .btn-item .chev-right {
    margin-left: 0;
}

.interest-location-list-item .benefit-wrap {
    display: inline-block;
    font-size: 0;
    vertical-align: top;
    line-height: 24px;
}

.interest-location-list-item .benefit {
    display: inline-block;
    margin-right: 4px;
    padding: 0 4px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 16px;
    letter-spacing: 0;
    vertical-align: middle;
}

.interest-location-list-item .benefit-wrap .benefit.great-store {
    background-color: #ff8c27;
}

.interest-location-list-item .benefit-wrap .benefit.smart-pickup {
    background-color: #6eb8bc;
}

.interest-location-list-item .benefit-wrap .benefit.deal-store {
    background-color: #cbb58f;
}

.aside-layout .more-cta-myshop {
    position: relative;
    display: block;
    height: 28px;
    line-height: 28px;
    border-radius: 28px;
}

.aside-layout .more-cta-myshop::after {
    content: "\e917";
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -8px;
    line-height: 100%;
    font-family: 'LineIcons', sans-serif;
    font-size: 16px;
    display: inline-block;
    font-weight: 600;
    vertical-align: middle;
}

.mypage-menu-list-bx .img-icons {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 50% 50%;
}

.mypage-menu-list-bx .icon-safeservice {
    background-image: url(../images/mypage/icon_safeservice.png);
    background-size: 30px auto;
}

.mypage-menu-list-bx .icon-tstore {
    background-image: url(../images/mypage/icon_tstore.png);
    background-size: 25px auto;
}

/* 20250610 start */
.store-filter-section {
    width: 100%;
    height: auto;
    padding: 16px 32px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}

.store-filter-section .check-item {
    display: inline-flex;
    align-items: center;
    width: auto;
    position: relative;
    gap: 8px;
}

.store-filter-section .check-item .icon-holder {
    position: relative;
    top: auto;
    left: auto;
}

.store-filter-section .check-item .labelling {
    padding: 0;
}

.store-filter-section .check-item .labelling:hover { background: transparent;}

.store-filter-section .check-item .label-img {
    width: auto;
    height: 24px;
}

.service-available-date {
    padding: 0;
    min-height: 24px;
    display: inline-flex;
    position: relative;
    align-items: center;
}

.service-available-date span {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.connect-wrap .service-available-date span { font-size: 14px;}

.service-available-date.today-service { color: #008bec; }

.service-available-date.today-service:before {
    content: '';
    flex: none;
    display: block;
    width: 86px;
    height: 24px;
    background-image: url('../images/common/store_search/icon_today_service_bi.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

.service-available-date.t-baro-delivery { color: #FFA200; }

.service-available-date.t-baro-delivery:before {
    content: '';
    flex: none;
    display: block;
    width: 86px;
    height: 24px;
    background-image: url('../images/common/store_search/icon_t_baro_delivery_bi.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

/* 20250610 end */

/* 20220210 // */
.todayservice-trigger {
    display: flex;
    align-items: center;
}

.todayservice-trigger.disabled {
    pointer-events: none;
    opacity: .5;
}

.todayservice-trigger .toggle-switch {
    padding: 0;
}

.todayservice-trigger .toggle-switch .switch-track {
    width: 34px;
    box-shadow: inset 0px 1px 2px rgba(160, 166, 175, 0.7);
}

.todayservice-trigger .toggle-switch .switch-track, .todayservice-trigger .toggle-switch input:checked ~ .switch-track {
    border: 0;
    padding: 2px;
}

.todayservice-trigger .info-circle {
    top: -1px;
}

.icon-todayservice-78 {
    display: inline-block;
    padding-left: 77px;
    background-image: url("../images/common/store_search/icon_today_service_78.png");
    background-position: left 50%;
    background-size: 78px 24px;
    background-repeat: no-repeat;
}

.store-wrap .store-footer .connect-wrap .label-txt {
    color: #008bec;
    line-height: 24px;
}

/* 20220622 //*/
.icon-todayservice-86 {
    display: inline-block;
    padding-left: 90px;
    background-image: url("../images/common/store_search/icon_today_service_86.png");
    background-position: left -4px;
    background-size: 86px 32px;
    background-repeat: no-repeat;
}

.card-todayservice-wrap .icon-todayservice-86 {
    color: #008bec;
}

/* // 20220622 */
.todayservice-empty-box {
    display: table;
    width: 100%;
    min-height: 100px;
    height: auto;
    text-align: center;
}

.todayservice-empty-box .middler {
    display: table-cell;
    vertical-align: middle;
}

.todayservice-empty-box .middler > .line-icons {
    color: #d9dbdc;
}

.todayservice-empty-box .middler > .empty-msg {
    font-size: 12px;
    color: #a0a6af;
    margin-top: 8px;
}

.todayservice-empty-box .middler {
    pointer-events: unset;
}

.order-section .store-calendar .date-day-wrap .month {
    margin: 0;
}

.order-section .store-calendar .date-day-wrap .fast-button {
    background-color: transparent;
}

.date-day-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon-todayservice-empty {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url("../images/common/store_search/icon_todayservice_empty.png");
    background-position: left 50%;
    background-size: 48px 48px;
    background-repeat: no-repeat;
}

.card-todayservice-wrap .error-circle {
    top: -1px;
    margin-right: 2px;
}

.card-todayservice-wrap p:first-child {
    margin-top: 4px;
}

/* //20220210 */
.interest-location-headcopy {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.border-bottom-light3 {
    border-bottom: 1px solid #f2f2f7;
}

/* //20220316 */
/* 20220404// */
.noti-legal-area {
    padding: 16px 12px;
    background-color: #f9f9fa;
}

.noti-legal-area .smarlegal-list {
    margin-top: 8px;
}

.noti-legal-area .smarlegal-list li {
    position: relative;
    padding-left: 8px;
}

.noti-legal-area .smarlegal-list li::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    width: 2px;
    height: 2px;
    background-color: #fe6a2b;
}

/* //20220404 */
/* 20220420 // */
.review-card .thumb-area .thumb-image.photo-empty {
    background-image: url(../images/common/thumb_photo_empty.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #eceeef;
    background-position: center top;
    border-radius: 4px;
}

/* // 20220420 */
/* 20220425 // */
.form-control.form-control-inline label.top-fixed {
    top: 20px;
}

/* // 20220425 */
/* 20220502 // */
.salecheck-tooltip-wrap {
    display: flex;
}

.guide-tip-bx.left {
    position: relative;
    padding: 4px 20px 0px 20px;
    z-index: 1;
}

.guide-tip-bx.left {
    display: none;
}

.guide-tip-bx.left.active {
    display: block;
}

.guide-tip-bx.left .tooltip-bx {
    position: absolute;
    top: -6px;
    left: 68px;
    width: 120px;
    background-color: #5b6068;
    border-radius: 4px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
    opacity: 0;
    animation: anim-guide-left-tip 4s ease-in-out;
}

.guide-tip-bx.left.off .tooltip-bx {
    animation: fadeIn .5s forwards;
    animation-name: opacityDown;
}

@keyframes anim-guide-left-tip {
    10% {
        left: 72px;
        opacity: 1;
    }
    90% {
        left: 72px;
        opacity: 1;
    }
    100% {
        left: 68px;
        opacity: 0;
    }
}

.guide-tip-bx.left .tooltip-bx .msg {
    padding: 8px;
    color: #ffffff;
    font-size: 12px;
    line-height: 15px;
}

.guide-tip-bx.left .tooltip-bx:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid #5b6068;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    top: 14px;
    left: -16px;
}

/* //20220502 */
/* 20220622 // */
.store-reserve-map-wrap .rescan-button-wrap {
    display: none;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
}

.store-reserve-map-wrap .rescan-button-wrap.active {
    display: block;
}

.store-reserve-map-wrap .rescan-button-wrap .btn-rescan {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
}

/* // 20220622 */
/* 20220524// */
.line-icons.bg-bullet::before {
    z-index: 2;
    color: #fff;
    margin-left: -2px;
}

.line-icons.bg-bullet::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #fe6a2b;
}

.icon-word-copy {
    position: relative;
    padding-left: 20px;
}

.icon-word-copy .line-icons {
    position: absolute;
    left: 0;
}

/* //20220524*/
/* 20220525// */
.banner-goods-detail-wrap a {
    display: block;
}

.banner-goods-detail-wrap a img {
    width: 100%;
}

/* //20220525 */
/* 20220608// */
.key-visual-button-area {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100px;
    padding-top: 50px;
    padding-left: 20px;
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 0;
    text-align: center;
    background-image: linear-gradient(180deg, rgba(42, 49, 56, 0), rgba(42, 49, 56, 0.3));
    pointer-events: none;
}

.key-visual-button-area .key-visual-button-wrap {
    position: relative;
}

.key-visual-button-area .key-visual-console {
    width: auto;
}

.key-visual-button-area .swiper-controller {
    position: absolute;
    right: -48px;
    top: -14px;
    z-index: 1;
}

.key-visual-button-area .swiper-controller button {
    padding-left: 12px;
    background-color: transparent;
    pointer-events: all;
}

/* 20220622// */
.map-pointer-fixed {
    width: 38px;
    height: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.map-pointer-fixed::before {
    content: "";
    background-color: #000;
    width: 38px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.map-pointer-fixed::after {
    content: "";
    background-color: #000;
    width: 2px;
    height: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.txt-nowrap {
    white-space: nowrap;
}

.map-mylocation-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    padding: 16px 32px 0;
}

.map-mylocation-panel {
    position: relative;
    padding: 16px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);
}

.map-mylocation-wrap .info {
    font-size: 14px;
}

.map-mylocation-wrap .info strong {
    font-size: 14px;
    font-weight: normal;
    color: #008bec;
}

.map-mylocation-wrap .subinfo.icon-local {
    margin-top: 8px;
    padding-left: 25px;
    font-size: 12px;
    background-image: url("../images/common/icon_location.png");
    background-size: 13px 20px;
    background-position: 4px 50%;
    background-repeat: no-repeat;
}

.map-mylocation-wrap .subinfo .explan-copy {
    display: inline-block;
    padding: 0 8px;
    border-radius: 20px;
    background-color: #f2f2f7;
    font-size: 14px;
    line-height: 22px;
}

.map-mylocation-wrap .subinfo {
    margin-top: 8px;
}

.map-mylocation-wrap .subinfo .street {
    color: #008bec;
    font-weight: bold;
}

.map-mylocation-wrap .location-button {
    overflow: hidden;
    position: absolute;
    right: 16px;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 4px;
    background-image: url("../images/common/store_search/icon_location_20.png");
    background-size: 32px 32px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1;
}

/* 20230130 start */
.map-legend-wrap {
    position: absolute;
    top: 24px;
    right: 16px;
    z-index: 10;
}

.map-legend-wrap.bottom {
    position: absolute;
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
}

.map-legend-panel {
    position: relative;
    width: auto;
    min-height: 40px;
    padding: 6px 16px;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.8);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.map-legend-wrap.bottom .map-legend-panel {
    border-radius: 0 4px 0 0;
    box-shadow: none;
    background-color: #fff;
}

.map-legend-panel .map-legend {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.map-legend-panel .map-legend > img {
    width: auto;
    height: 25px;
}

.map-legend-panel .map-legend > span {
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
}
/* 20230130 end */

.map-empty-msg-wrap {
    display: none;
}

.map-empty-msg-wrap.active {
    display: block;
}

.map-empty-msg-wrap .map-empty-dimmed {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(2, 2, 2, 0.4);
    z-index: 1;
}

.map-empty-msg-wrap .map-empty-msg-pannel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 320px;
    padding: 30px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    z-index: 2;
}

.map-empty-msg-wrap .map-empty-msg-pannel .button-popup-close {
    position: absolute;
    right: 8px;
    top: 8px;
    background-color: transparent;
}

.map-empty-msg-wrap .map-empty-msg-pannel .around-popup-more {
    background-color: transparent;
}

.store-maps .rescan-button-wrap {
    display: none;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
}

/* 20230130 start */
.store-maps .rescan-button-wrap.active {
    display: block;
    z-index: 10;
}
/* 20230130 end */

.store-maps .rescan-button-wrap .btn-rescan {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
}

/* //20220622 */
/* 20220627 // */
.txt-blue {
    color: #008bec;
}

/* // 20220627 */
/* 20220629 // */
.brands-logo.laufenn-new {
    background-image: url("../images/goods/linelogo_laufenn_badge.png"), url("../images/goods/linelogo_laufenn.png");
    background-position: right 50%,
 50% 50%;
    background-size: auto 35px,
 auto 24px;
    background-repeat: no-repeat,
 no-repeat;
}

.item-detail .brands-logo.lf {
    background-image: url("../images/goods/linelogo_goodsdetails_laufenn.png");
    background-position: 50% 50%;
    background-size: auto 40px;
    background-repeat: no-repeat;
}

.laufenn-excla-info {
    margin-top: 4px;
    padding-left: 70px;
    background-image: url("../images/goods/icon_excla_hk.png");
    background-position: left 2px;
    background-size: auto 16px;
    background-repeat: no-repeat;
    color: #4a2785;
    font-size: 11px;
    font-weight: 300;
    line-height: 16px;
}

/* // 20220629 */
/* 20221007 // */
#header .gnb nav .sub-menu-wrap .guardrail .sub-menu .icon-bullet {
    display: inline-block;
    position: relative;
}

#header .gnb nav .sub-menu-wrap .guardrail .sub-menu .icon-bullet::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    line-height: 6px;
    border-radius: 50%;
    background: #fe6a2b;
    position: absolute;
    top: 2px;
    right: -8px;
}

/* // 20221007 */
/* 20220713 // */
.hero-exhibition-img {
    overflow: hidden;
    border-radius: 12px;
}

/* // 20220713 */
/*  200220715 //*/
.brands-logo.lf {
    background-image: url("../images/goods/linelogo_laufenn.png");
    background-position: 50% 50%;
    background-size: auto 20px;
    background-repeat: no-repeat;
}

.brandLogo.lf {
    background-image: url("../images/goods/linelogo_laufenn.png");
    background-position: 50% 50%;
    background-size: auto 16px;
    background-repeat: no-repeat;
}

/*  // 200220715 */
/* 20220719 // */
.icon-safeprivacy-info {
    position: relative;
    line-height: 16px;
    padding-left: 20px;
}

.icon-safeprivacy-info .line-icons {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-45%);
}

/* 20220719 // */
.sort-result-section .store-wrap.on-map.disable {
    pointer-events: none;
}

.sort-result-section .store-wrap.on-map.disable .store-info,
.sort-result-section .store-wrap.on-map.disable .store-footer {
    opacity: .5;
}

/* 20220725 // */
.gift-apply-page {
    width: 750px;
    margin: auto;
}

.gift-apply-page .form-control label {
    font-size: 14px;
    color: #5b6068;
}

.gift-apply-page .division-line {
    position: relative;
    padding-right: 16px !important;
}

.gift-apply-page .division-line::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    display: block;
    width: 8px;
    height: 1px;
    background-color: #5b6068;
}

.gift-apply-page option:disabled {
    color: #ddd;
}

.gift-apply-page .gift-terms-section {
    overflow: hidden;
}

.gift-apply-page .gift-terms-section .list .table-wrap {
    overflow: auto;
    width: 100%;
    border: 1px solid #e6e6e6;
}

.gift-apply-page .gift-terms-section .tbl {
    border-top: 1px solid #d9dbdc;
}

.gift-apply-page .gift-terms-section .tbl > table th {
    background: #f9f9fa;
    border-right: 1px solid #d9dbdc;
    color: #2a3138;
}

.gift-apply-page .gift-terms-section .tbl > table td {
    border-right: 1px solid #d9dbdc;
    color: #2a3138;
}

.gift-apply-page .gift-terms-section .agree_container table {
    text-indent: initial !important;
}

.gift-apply-page .gift-terms-section .tbl {
    margin: 8px 0 16px;
}

.gift-apply-page .gift-terms-section .tbl > table {
    width: 100%;
}

.gift-apply-page .gift-terms-section .tbl > table tr th:last-of-type {
    border-right: 0;
}

.gift-apply-page .gift-terms-section .tbl > table th {
    padding: 8px 16px;
    background: #f2f2f2;
    border-right: 1px solid #e6e6e6;
    color: #000;
    font-size: 12px;
    text-align: center;
}

.gift-apply-page .gift-terms-section .tbl > table td {
    padding: 8px 16px;
    border-right: 1px solid #e6e6e6;
    color: #333333;
    font-size: 12px;
    vertical-align: top;
}

.gift-apply-page .gift-terms-section .tbl > table tr td:last-of-type {
    border-right: 0;
}

/* // 20220725 */
/* 20220725 // */
.membership-freeday-service-title {
    padding-left: 680px;
    min-height: 348px;
    position: relative;
}

.membership-freeday-service-title .title-img {
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 70px;
    width: 510px;
}

.membership-freeday-service-title .txt-wrap {
    padding-top: 32px;
}

.membership-freeday-service-title .txt-wrap > h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 42px;
}

.membership-freeday-service-title .txt-wrap > h3 {
    font-size: 24px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 8px;
}

.membership-freeday-service-title .txt-wrap > p {
    font-size: 16px;
    line-height: 28px;
    color: #5b6068;
    margin-top: 20px;
}

.membership-freeday-service-title .txt-wrap > .btn-item {
    width: 380px;
    margin-top: 48px;
}

.custom-service .step-section .freedayservice-step-wrap {
    overflow: hidden;
    padding: 50px;
    border-radius: 4px;
    background-color: #f2f2f7;
}

.custom-service .step-section .freedayservice-step-wrap::after {
    content: "";
    display: block;
    clear: both;
}

.custom-service .step-section .freedayservice-step {
    position: relative;
    float: left;
    width: 33.3333%;
    text-align: center;
}

.custom-service .step-section .freedayservice-step:nth-child(2)::before,
.custom-service .step-section .freedayservice-step:nth-child(2)::after {
    content: ". . .";
    position: absolute;
    top: 40px;
    color: #a0a6af;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 4px;
}

.custom-service .step-section .freedayservice-step:nth-child(2)::before {
    left: -16px;
}

.custom-service .step-section .freedayservice-step:nth-child(2)::after {
    right: -16px;
}

.custom-service .step-section .freedayservice-step .thumb-area {
    width: 109px;
    margin: auto;
}

.custom-service .step-section .freedayservice-step .thumb-area img {
    width: 100%;
}

.custom-service .step-section .freedayservice-step .description-area {
    margin-top: 20px;
    padding: 0 27px;
}

.custom-service .step-section .freedayservice-step .title {
    font-size: 20px;
    font-weight: 600;
}

.custom-service .step-section .freedayservice-step .description {
    padding: 20px 0;
    font-size: 16px;
}

.custom-service .step-section .freedayservice-step .txt-mint {
    color: #5eb0b5;
}

/* // 20220725 */
/* 20220801// */
.reviewer-control {
    display: flex;
    justify-content: space-between;
}

.review-detail .reviewer-control.panel-hidden {
    margin-bottom: 72px;
}

.good-checkbox {
    display: flex;
    width: auto;
    height: auto;
    height: 24px;
    font-size: 0;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    vertical-align: middle;
}

.good-checkbox .labelling {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
}

.good-checkbox .icon-holder {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    border: 1px solid #d9dbdc;
    border-radius: 12px;
}

.good-checkbox .icon-holder .icon-good {
    display: inline-block;
    width: 100%;
    height: auto;
    padding-left: 28px;
    padding-right: 8px;
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-position: 8px 50%;
    background-image: url("../images/common/review/icon_good.png");
}

.good-checkbox .icon-holder .good-count {
    line-height: 22px;
    color: #a0a6af;
}

.good-checkbox .label-txt {
    display: inline-block;
    line-height: 22px;
}

.good-checkbox input[type="checkbox"]:checked ~ .icon-holder .good-count {
    color: white;
}

.good-checkbox input[type="checkbox"]:checked ~ .icon-holder {
    border-color: #fe6a2b;
    background-color: #fe6a2b;
}

.good-checkbox input[type="checkbox"]:checked ~ .icon-holder .icon-good {
    background-image: url("../images/common/review/icon_good_checked.png");
}

.reviewer-control .controlbox-list-wrap {
    position: relative;
}

.reviewer-control .controlbox-list-wrap .controlbox-toggle {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: 50% 50%;
    background-image: url("../images/common/review/button_controlbox_toggle.png");
}

.reviewer-control .controlbox-list-wrap .controlbox-list {
    position: absolute;
    right: 0;
    top: 24px;
    border: 1px solid #d9dbdc;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.reviewer-control .controlbox-list-wrap .controlbox-list .controlbox-button {
    display: block;
    width: 72px;
    background-color: #fff;
    text-align: center;
}

.reviewer-control .controlbox-list-wrap .controlbox-list .controlbox-button .label-txt {
    line-height: 32px;
}

.reviewer-control .controlbox-list-wrap .controlbox-list li + li .controlbox-button {
    border-top: 1px solid #d9dbdc;
}

.controlbox-panel {
    padding: 20px;
    background-color: #f9f9fa;
    background: #f9f9fa;
    background: linear-gradient(0deg, #f9f9fa 75%, #f9f9fa 98%, #efefef 100%);
}

.controlbox-panel .controlbox-headcopy {
    position: relative;
}

.controlbox-panel .controlbox-headcopy .controlbox-close {
    position: absolute;
    background-color: transparent;
    right: -12px;
    top: -12px;
}

.controlbox-panel textarea {
    border: 1px solid #f9f9f9;
}

.controlbox-panel textarea::placeholder {
    font-size: 11px;
    color: #a0a6af;
}

.goods_detail .review_list .reviewer-control {
    justify-content: flex-end;
}

.goods_detail .review_list .reviewer-control .controlbox-list-wrap {
    margin: 0 16px 0 8px;
}

.customer-card-list .item {
    position: relative;
    margin-bottom: 16px;
}

.customer-card-list .item .reviewer-control {
    justify-content: flex-end;
}

.customer-card-list .item .reviewer-control .controlbox-list-wrap {
    margin: 0 16px 0 8px;
}

.review-detail .thumb-area .review-break {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f2f2f7;
}

.review-detail .review-contents .review-text {
    overflow: hidden;
    position: relative;
}

.review-detail .review-contents .review-text.block-height-fix {
    height: 320px;
}

.review-detail .review-contents .review-break {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    object-fit: cover;
    background-color: white;
    z-index: 1;
}

.customer-card-list .item .review-break {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 238px;
    padding-bottom: 8px;
    object-fit: cover;
    background-color: #f9f9fa;
    z-index: 1;
}

.goods_detail .review_list li .review-break {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    object-fit: cover;
    background-color: white;
    z-index: 1;
}

.review-detail .review-contents .review-break.active {
    display: flex;
}

.customer-card-list .item .review-break.active {
    display: flex;
}

.goods_detail .review_list > ol {
    padding-bottom: 40px;
}

.goods_detail li .review-break.active {
    display: flex;
}

.customer-card-list .item.block-height-fix {
    height: 288px;
}

.goods_detail .review_list .box2.block-height-fix {
    overflow: hidden;
    position: relative;
    height: 240px;
}

.review-detail .review-contents .review-text.block-height-fix .contents {
    overflow: hidden;
    height: 40px;
    font-size: 0;
}

.customer-card-list .item.block-height-fix .review-contents {
    overflow: hidden;
    height: 40px;
    font-size: 0;
}

.goods_detail .review_list li.block-height-fix .cont {
    overflow: hidden;
    height: 40px;
    font-size: 0;
}

/* //20220801 */





/* 2022-10-21 마모도 측정 */
.tire-wear .page-header{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 10px;
}

/* 2022-11-23 수정 시작 */
.tire-wear .page-header .page-tit {
	display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.tire-wear .page-header .page-tit .beta-badge{
	width: 45px;
	margin-left: 10px;
}
.tire-wear .page-header .page-tit .beta-badge img{
	width: 100%;
	height: auto;
}
/* 2022-11-23 수정 끝 */

.tire-wear .page-header.mycar{
	align-items: center;
}

.tire-wear .page-header.mycar .btn-set .btn-item:last-child{
	margin-left: 10px;
}	

.tire-wear .page-header .line-icons{
	line-height: 15px;
}

.tire-wear .content-btn{
	display: flex;
	justify-content: center;
	padding: 40px 0;
	border-bottom: 1px solid #d9dbdc;
}

.tire-wear .content-btn .btn-item{
	width: 200px;
}

.tire-wear .card .thumb img {
	width: 100%;
	height: auto;
}

.tire-wear.tire-result-box .cont-area .tit-set {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 0;
  border-top: none;
}

.tire-wear.tire-result-box .cont-area .tit-set .tit {
	font-size: 16px;
	color: #2a3138;
}

.tire-wear .tab-set .tab-link {
	width: auto;
	padding: 0;
}

.tire-wear .tab-link {
	overflow: hidden;
	z-index: 800;
	top: 50px;
	left: 0;
	width: 100%;
	height: 45px;
	padding: 0 20px;
	line-height: 45px;
}

.tire-wear .tab-link > a {
	display: inline-block;
	text-decoration: none;
	width: 33.3333%;
	height: inherit;
	line-height: 44px;
	text-align: center;
	color: #5b6068;
	font-size: 14px;
	font-weight: 400;
	padding: 0 12px;
	position: relative;
	border-bottom: 1px solid transparent;
}

.tire-wear .tab-link::before {
	display: block;
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	border-bottom: 1px solid #d9dbdc;
}

.tire-wear .tab-link::before {
	display: block;
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	border-bottom: 1px solid #d9dbdc;
}

.tire-wear .tab-set .tab-link > a {
	width: inherit;
}

.tire-wear .tab-link > a.on::after {
	z-index: 1;
	position: absolute;
	display: block;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #fe6a2b;
	min-width: 0;
	transition: left ease-in-out .16s, width ease-in-out .16s;
}

.tire-wear .tab-link > a.on {
	color: #fe6a2b;
	font-weight: 500;
}

.tire-wear.tire-result-box .cont-area .tab-link::before {
  border-bottom: none;
}

.tire-wear.tire-result-box .cont-area .swiper-box{
	width: 475px;
} 

.tire-wear.tire-result-box .cont-area .swiper-box .swiper-container{
	border-radius: 4px;
} 

.tire-wear.tire-result-box .cont-area .swiper-box .swiper-container .swiper-pagination{
	bottom: 2px;
} 

.tire-wear.tire-result-box .cont-area .swiper-box .swiper-slide{
	max-height: 315px;
}

.tire-wear.tire-result-box .cont-area .swiper-box .swiper-slide img{
	width: 100%;
  height: auto;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .btn-item {
	width: 170px;
	margin-bottom: 10px;
}

.tire-wear .customer-center{
	padding-top: 40px;
}

.tire-wear .customer-center{
	padding-top: 40px;
}

.tire-wear .customer-center .txt{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.tire-wear .customer-center .txt strong{
	color: #fe6a2b;
}

.tire-wear .customer-center .txt .icon{
	margin-right: 10px;
	padding: 5px;
	background-color: #f2f2f7;
	border-radius: 36px;
}

.tire-wear .customer-center .txt .icon::before{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	content: '';
	width: 36px;
	height: 36px;
	background: url(../images/icon/icon_quick_customer.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear .customer-center.search .icon::before{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	content: '';
	width: 36px;
	height: 36px;
	background: url(../images/icon/icon-tire-search.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap {
	display: flex;
	align-items: flex-end;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box {
	position: relative;
	margin: 25px 0 0 10px;
	border-radius: 4px;
	text-align: center;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .color-box {
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
	height: 20px;
	margin-top: 20px;
	padding: 5px;
	background-color: #2a3138;
	border-radius: 11px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .color-box span {
	display: inline-flex;
	margin-left: 3px;
	width: 15px;
	height: 15px;
	border-radius: 15px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .color-box span:first-child {
	margin-left: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .cmt-box {
	margin-top: 15px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .cmt-box strong {
	font-size: 18px;
	font-weight: 500;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .cmt-box p {
	margin-top: 10px;
	padding-bottom: 10px;
	font-size: 12px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .info-wrap .img-set {
	position: relative;
	width: 380px;
	height: 140px;
	background: linear-gradient(to bottom, #fff 0%, #d9dbdc 100%);
	border-radius: 4px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .info-wrap .img-set img {
	width: 100%;
	height: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .info-wrap .tooltip-txt {
	position: absolute;
	left: 70%;
	top: 0;
	width: 112px;
	height: 60px;
	padding: 10px;
	background-color: rgba(42, 49, 56, 0.8);
	border-radius: 4px;
	font-size: 12px;
	color: #fff;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box .info-wrap .tooltip-txt::after {
	position: absolute;
	content: '';
	display: block;
	width: 0;
	bottom: 27px;
	left: -8px;
	border-style: solid;
	border-width: 0 5px 8px 5px;
	border-color: rgba(42, 49, 56, 0.8) transparent;
	transform: rotate(272deg) translateX(0px);
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.perfect .color-box .blue {
	background-color: #23dee7;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.perfect .color-box .brown {
	background-color: #ffa200;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.perfect .color-box .purple {
	background-color: #f73400;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.perfect .tooltip-txt {
	top: -16%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.good .color-box .blue {
	background-color: #23dee7;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.good .color-box .brown {
	background-color: #ffa200;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.good .color-box .purple {
	background-color: #f73400;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.good .tooltip-txt {
	top: 19%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.bad .color-box .green {
	background-color: #62bf00;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.bad .color-box .yellow {
	background-color: #ffa200;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.bad .color-box .purple {
	background-color: #f73400;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.bad .tooltip-txt {
	top: 32%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.danger .color-box .green {
	background-color: #62bf00;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.danger .color-box .brown {
	background-color: #ffa200;
	opacity: .3;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.danger .color-box .red {
	background-color: #f73400;
}

/* 2022-11-24 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap .result-wrap .status-box.danger .tooltip-txt {
	top: inherit;
	bottom: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .card-wrap {
	display: flex;
}
/* 2022-11-24 수정 시작 */

.tire-wear.tire-result-box .cont-area .cont-wrap .card-wrap .card {
	margin-left: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap .card-wrap .card:first-child {
	margin-left: 0;
}
/* 2022-11-10 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend {
	display: block;
	margin-top: 40px;
	padding: 15px;
	background-color: #f9f9fa;
	border-radius: 4px;
}
/* 2022-11-10 수정 끝 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .tab-set {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .tab-set .tit-wrap {
	display: flex;
	align-items: center;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .tab-set .tit-wrap .tit {
	font-size: 16px;
	color: #2a3138;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .tab-set .tit-wrap a {
	margin-left: 20px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .tab-set .tit-wrap a .link {
	display: flex;
	align-items: center;
	font-size: 12px;
}

/* 2022-11-28 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item {
	position: relative;
	width: 270px;
	min-height: 200px;
	padding-bottom: 30px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item.light-reserve {
	min-height: 200px;
}
/* 2022-11-28 수정 끝 */

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item.light-reserve .thumb-area {
	height: 140px;
	padding: 0 10px 10px;
}

/* 2022-11-10 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item.light-reserve .thumb-area .info .date {
	margin-top: 60px;
}
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item.light-reserve .description-area {
	height: auto;
}

/* 2022-11-28 수정 시작 */
/* .tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item.light-reserve .txt {
	margin-top: -10px;
} */
/* 2022-11-28 수정 끝 */
/* 2022-11-10 수정 끝 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item.light-reserve .description-area .top-info .model {
	margin-top: 10px;
	font-size: 16px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .thumb-area {
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100px;
	padding: 0 10px 10px;
	border-bottom: 1px solid #D9DBDC;
}
/* 2022-11-10 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .thumb-area .thumb {
	flex-shrink: 0;
	width: 140px;
	height: 140px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .thumb-area .thumb img {
	width: 100%;
	height: auto;
	margin: 25px 0 0 12px;
	transform: scale(1.3);
}
/* 2022-11-10 수정 끝 */

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .thumb-area .info {
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .thumb-area .info .brands-logo {
	position: initial;
	width: 95px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .thumb-area .info .date {
	width: 100%;
	margin-top: 30px;
	font-size: 10px;
	font-weight: 300;
	color: #5b6068;
	text-align: right;
}
/* 2022-11-10 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area {
	height: auto;
	padding: 10px;
}
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .txt {
	margin-top: 10px;
}
/* 2022-11-10 수정 끝 */

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/* 2022-11-28 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info .model-box{
	width: 100%;
}
/* 2022-11-28 수정 끝 */

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info .badge-discount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 4px;
	background: #fff;
	border-color: #fe6a2b;
	border-radius: 50%;
	font-size: 14px;
	color: #fe6a2b;
}

/* 2022-11-28  수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info .model {
	max-width: calc(100% - 40px);
	height: auto;
	padding-right: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info .model img {
	width: 100%;
	height: auto;
}
/* 2022-11-28 수정 끝 */

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info .keywords {
	width: 100%;
	margin-top: 20px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info .keywords .keyword {
	height: 17px;
	padding: 0 8px;
	border-radius: 4px;
	font-size: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .top-info .keywords .keyword::before {
	color: #2a3138;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .price {
	margin-top: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .price .txt-primary {
	font-size: 18px;
	font-weight: 700;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .description-area .price .discount {
	font-size: 14px;
	color: #a0a6af;
	text-decoration: line-through;
}

/* 2022-11-28 수정시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .btn-area {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
}
/* 2022-11-28 수정 끝 */

.tire-wear.tire-result-box .cont-area .cont-wrap.recommend .recommed-item .btn-area .btn-item {
	height: 100%;
	background-color: #2a3138;
	border: none;
	border-radius: 0%;
	font-size: 12px;
	color: #fff;
	font-weight: 300;
	line-height: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service {
	margin-top: 20px;
	padding: 20px;
	background-color: #f9f9fa;
	border-radius: 4px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .tit-set {
	padding-top: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .tooltip-container {
	margin-left: 5px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list li {
	height: 110px;
	padding: 15px;
	border-radius: 4px;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #d9dbdc;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list li .date strong {
	font-size: 16px;
	color: #5eb0b5;
}

/* 2022-11-25 수정 시작 */
.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list li .date p {
	font-size: 12px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list li .date span {
	font-size: 12px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list li .btm p {
	font-size: 12px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list li .btm .txt {
	font-size: 12px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list li .btm .txt .line-icons{
	margin-top: 1px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child {
	width: 60%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li {
	margin-left: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li:last-child {
	padding: 60px 0 0 0;
	background-color: transparent;
	border: none;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li .top {
	display: flex;
	align-items: flex-start;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li .top .date {
	margin-left: 20px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li .btm {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li .btm P {
	margin-right: 13px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li .btm .txt {
	display: flex;
	align-items: center;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li .cmt {
	font-size: 12px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:first-child li .cmt span {
	font-size: 12px;
	color: #fe6a2b;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-left: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li {
	width: 31.333%;
	margin-left: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li:nth-child(1) {
	margin-left: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li:nth-child(4) {
	margin-top: 10px;
	margin-left: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li:nth-child(5) {
	margin-top: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li:nth-child(6) {
	margin-top: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li .top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 15px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li .top .date {
	text-align: right;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li .btm {
	border-top: 1px solid #d9dbdc;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list:last-child li .btm .txt {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 5px;
	font-weight: 500;
}
/* 2022-11-25 수정 끝 */

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 {
	display: flex;
	align-items: center;
	width: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li {
	width: 20%;
	height: 60px;
	margin-left: 10px;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #d9dbdc;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li:first-child {
	margin-left: 0;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li:first-child a {
	padding: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft {
	display: flex;
	align-items: center;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft span {
	margin-left: 5px;
	font-size: 14px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft .icon {
	width: 24px;
	height: 24px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft .icon.tire {
	background: url(../images/icon/icon_tire_check.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft .icon.pressure {
	background: url(../images/icon/icon_pressure_check.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft .icon.oil {
	background: url(../images/icon/icon_oil_check.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft .icon.battery {
	background: url(../images/icon/icon_battery_check.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .lft .icon.washer {
	background: url(../images/icon/icon_washer_check.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.check-service .check-wrap .check-list2 li a .rgt .line-icons {
	line-height: 25px;
}
.tire-wear.tire-result-box .cont-area .cont-wrap.result-impossible {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.result-impossible .notice-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 48%;
	height: 315px;
	margin-left: 2%;
	background-color: #f9f9fa;
	border: 1px solid #fe6a2b;
	border-radius: 4px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.result-impossible .notice-box::before {
	display: flex;
	content: '';
	width: 90px;
	height: 90px;
	margin: 0 auto;
	background: url("../images/icon/icon-notice.png") no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.result-impossible .notice-box strong {
	display: inline-block;
	width: 100%;
	margin: 0 auto;
	padding-top: 15px;
	font-size: 16px;
	color: #fe6a2b;
	text-align: center;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.result-impossible .notice-box p {
	font-size: 12px;
	padding-top: 10px;
	text-align: center;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide {
	margin-top: 40px;
	padding: 20px;
	background-color: #f9f9fa;
	border-radius: 4px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide h3 {
	font-size: 16px;
	color: #2a3138;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 20px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img {
	width: calc(40% - 6px);
	height: 160px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img img {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	border: 1px solid #d9dbdc;
	object-fit: cover;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img:nth-child(2) {
	position: relative;
	width: calc(30% - 6px);
	margin-left: 9px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img:nth-child(2) img {
	border: 2px solid #2ed0ff;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img:nth-child(2)::before {
	position: absolute;
	content: '';
	width: 25px;
	height: 25px;
	bottom: 0;
	left: 0;
	margin: 5px;
	background: url(../images/icon/icon_check_blue.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img:last-child {
	position: relative;
	width: calc(30% - 6px);
	margin-left: 9px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img:last-child img {
	border: 2px solid #f73400;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-wrap .guide-img:last-child::before {
	position: absolute;
	content: '';
	width: 25px;
	height: 25px;
	bottom: 0;
	left: 0;
	margin: 5px;
	background: url(../images/icon/icon_x_red.png) no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-list {
	margin-top: 20px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-list li {
	position: relative;
	font-size: 12px;
	margin-left: 5px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.guide .guide-list li::before {
	position: absolute;
	content: '';
	top: 10px;
	left: -5px;
	width: 2px;
	height: 2px;
	background: #2a3138;
	border-radius: 2px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.driving {
	display: block;
	margin-top: 40px;
	padding: 20px;
	background-color: #f9f9fa;
	border-radius: 4px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.driving h3 {
	font-size: 16px;
	color: #2a3138;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.driving .drive-habit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 20px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.driving .drive-habit .list {
	width: calc(50% - 5px);
	border: 1px solid #d9dbdc;
	border-radius: 4px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.driving .drive-habit .list:nth-child(even) {
	margin-left: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.driving .drive-habit .list:nth-child(3), .tire-wear.tire-result-box .cont-area .cont-wrap.driving .drive-habit .list:nth-child(4) {
	margin-top: 10px;
}

.tire-wear.tire-result-box .cont-area .cont-wrap.driving .drive-habit .list img {
	width: 100%;
}

.tire-wear.tire-result-box .btm-set {
	display: flex;
	justify-content: center;
	align-items: center;
}

.tire-wear.tire-result-box .btm-set .customer-center:last-child {
	margin-left: 40px;
}

.tire-wear.tire-check-register .cont-area .top-area {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 30px;
}
.tire-wear.tire-result-list .cont-area .top-area{
	display: flex;
	align-items: center;
  justify-content: space-between;
	margin-top: 30px;
} 
.tire-wear.tire-result-list .cont-area .top-area .total {
  font-size: 16px;
}
.tire-wear.tire-result-list .cont-area .top-area .total span{
	color: #fe6a2b;
}
.tire-wear.tire-check-register .cont-area .top-area .cmt {
	font-size: 14px;
	color: #2a3138;
}

.tire-wear.tire-check-register .cont-area .top-area .btn-item {
	width: 155px;
	height: 30px;
	margin-left: 20px;
	padding: 0 5px;
	color: #2a3138;
	border: 1px solid #d9dbdc;
	border-radius: 3px;
	background: #fff;
	line-height: 30px;
}

.tire-wear.tire-check-register .cont-area .top-area .btn-item .label-txt {
	font-size: 11px;
}

/* 20250227 [task]마모도측정 수정 start */
.tire-wear.tire-check-register .cont-area .guide-wrap {
    align-self: stretch;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 0; 
}


.tire-wear.tire-check-register .cont-area .guide-wrap .tit {
	font-size: 16px;
}

.tire-wear.tire-check-register .cont-area .guide-wrap .guide-list {
	margin-left: 12px;
    margin-top: 16px;
}

.tire-wear.tire-check-register .cont-area .guide-wrap #uploadBtn {
    width: 200px;
    margin-bottom: 0;
    margin-top: auto;
}
/* 20250227 [task]마모도측정 수정 end */

.tire-wear.tire-check-register .cont-area .guide-wrap .guide-list li {
	position: relative;
	font-size: 12px;
}

.tire-wear.tire-check-register .cont-area .guide-wrap .guide-list li::before {
	position: absolute;
	content: '';
	top: 10px;
	left: -7px;
	width: 2px;
	height: 2px;
	background-color: #2a3138;
	border-radius: 2px;
}

/* 20250227 [task]마모도측정 수정 start */
.tire-wear.tire-check-register .cont-area .register-area {
    margin-top: 40px;
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

.tire-wear.tire-check-register .cont-area .register-wrap {
    flex: none;
    min-width: 0;
	padding: 24px 32px;
	background-color: #f9f9fa;
}
/* 20250227 [task]마모도측정 수정 end */

.tire-wear.tire-check-register .cont-area .register-wrap .tit {
	font-size: 16px;
	color: #2a3138;
	font-weight: 700;
}

.tire-wear.tire-check-register .cont-area .register-wrap .cmt-list {
	margin-top: 10px;
}

.tire-wear.tire-check-register .cont-area .register-wrap .cmt-list li {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #fe6a2b;
}

.tire-wear.tire-check-register .cont-area .register-wrap .cmt-list li::before {
	content: '';
	display: inline-flex;
	width: 2px;
	height: 2px;
	margin-right: 4px;
	background: #fe6a2b;
	border-radius: 2px;
}

/* 20250227 [task]마모도측정 수정 start */
.tire-wear.tire-check-register .cont-area .register-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	width: 100%;
	margin-top: 24px;
    gap: 12px;
}

.tire-wear.tire-check-register .cont-area .register-box .filebox {
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 2px;
	background: #fff url("../images/icon/icon-add.png") no-repeat 50% 50%;
	background-size: 30%;
}
/* 20250227 [task]마모도측정 수정 end */

.tire-wear.tire-check-register .cont-area .register-box .filebox input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.tire-wear.tire-check-register .cont-area .register-box .filebox label {
	width: 100%;
	height: 100%;
	border: 1px solid #d9dbdc;
}

.tire-wear.tire-check-register .cont-area .register-box .filebox label::before {
	display: none;
}

/* 20250227 [task]마모도측정 수정 start */
.tire-wear.tire-check-register .cont-area .register-box .filebox label img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 삭제 */
/* .tire-wear.tire-check-register .cont-area .register-box .filebox:nth-child(even) {
	margin-left: 10px;
}

.tire-wear.tire-check-register .cont-area .register-box .filebox:nth-child(3) {
	margin-left: 10px;
} */
 /* 20250227 [task]마모도측정 수정 end */

.tire-wear.tire-check-register .cont-area .register-box .filebox:first-child label {
	background-color: #eceeef;
	border: 1px solid #c0c6ce;
}

.tire-wear.tire-check-register .cont-area .register-box .filebox:first-child label::before {
	content: '';
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	width: 69px;
	height: 69px;
	background: url("../images/icon/icon-camera.png") no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-check-register .cont-area .register-box .filebox:first-child label::after {
	content: '사진추가';
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	color: #2a3138;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn {
	width: calc(25% - 10px);
	height: 140px;
	border-radius: 2px;
	background-color: #fff;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn::after {
	content: '';
	display: inline-flex;
	width: 45px;
	height: 45px;
	background: url("../images/icon/icon-add.png") no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn:first-child {
	background-color: #eceeef;
	border: 1px solid #c0c6ce;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn:first-child .label-txt {
	display: flex;
	justify-content: center;
	font-weight: 700;
	margin-top: -8px;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn:first-child::before {
	content: '';
	display: inline-flex;
	width: 48px;
	height: 48px;
	background: url("../images/icon/icon-camera.png") no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn:first-child::after {
	display: none;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn:nth-child(even) {
	margin-left: 10px;
}

.tire-wear.tire-check-register .cont-area .register-box .add-btn:nth-child(3) {
	margin-left: 10px;
}

.tire-wear.tire-check-register .cont-area .content-btn {
	border-bottom: none;
}

.tire-wear.tire-result-list .cont-area .top-area .cmt {
	font-size: 14px;
	color: #5b6068;
}

.tire-wear.tire-result-list .cont-area .table {
	margin-top: 20px;
}
.tire-wear.tire-result-list .cont-area .table thead {
	background-color: #f9f9fa;
	border-top: 1px solid #2a3138;
	border-bottom: 1px solid #d9dbdc;
}
.tire-wear.tire-result-list .cont-area .table thead th {
	padding: 20px;
	font-size: 14px;
	text-align: center;
}
.tire-wear.tire-result-list .cont-area .table td {
	padding: 25px 20px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;

}
.tire-wear.tire-result-list .cont-area .table td.left {
	text-align: left;
}
.tire-wear.tire-result-list .cont-area .table tr {
	border-top: 1px solid #d9dbdc;
}
.tire-wear.tire-result-list .cont-area .table tr:first-child{
	border-top: none;
}
.tire-wear.tire-result-list .cont-area .table td .img {
	display: inline-flex;
	justify-content: center;
}

.tire-wear.tire-result-list .cont-area .table td .img img {
	width: 100px;
	height: 60px;
	margin-right: 10px;
}

.tire-wear.tire-result-list .cont-area .table td .img img:last-child {
	margin-right: 0;
}

/* 2022-11-17 수정 시작 */
.tire-wear.tire-result-list .cont-area .table td.fc-g {
	color: #059c4c;
}

.tire-wear.tire-result-list .cont-area .table td.fc-o {
	color: #ffa200;
}

.tire-wear.tire-result-list .cont-area .table td.fc-r {
	color: #fe6a2b;
}
/* 2022-11-17 수정 끝 */

.tire-wear.tire-check .cont-area .banner {
	width: 100%;
	min-height: 230px;
	margin-top: 20px;
	background-color: #f2f2f7;
}

.tire-wear.tire-check .cont-area .banner img {
	width: 100%;
	height: inherit;
}

.tire-wear.tire-check .cont-area .tire-check-wrap {
	display: flex;
	align-items: center;
	padding-top: 20px;
	margin-top: 15px;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list {
	position: relative;
	width: calc(100% - 10px);
	min-height: 250px;
	margin-left: 15px;
	background: #f9f9fa;
	border-radius: 4px;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list:first-child {
	margin-left: 0;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .tit {
	margin: 0 20px;
	border-bottom: 1px solid #d9dbdc;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .tit a {
	display: inline-flex;
	align-items: center;
	padding: 15px 0;
	font-size: 15px;
	font-weight: 600;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .tit a::before {
	content: '';
	display: inline-flex;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	background: url("../images/icon/icon-round-check.png") no-repeat 0 0;
	background-size: 100%;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .cont-box {
	min-height: 180px;
	padding: 20px 20px 0px;
	font-size: 12px;
	color: #2a3138;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .cont-box span {
	color: #fe6a2b;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .cont-box.bg01 {
	background: url("../images/common/bg_tire01.png") no-repeat 100% -10%;
	background-size: 30%;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .cont-box.bg02 {
	background: url("../images/common/bg_tire02.png") no-repeat 100% -10%;
	background-size: 30%;
}

.tire-wear.tire-check .cont-area .tire-check-wrap .list .cont-box.bg03 {
	background: url("../images/common/bg_tire03.png") no-repeat 100% -10%;
	background-size: 30%;
}

.tire-wear.tire-check .cont-area .content-btn {
	border-bottom: none;
}

/* 2022-10-20 quick 메뉴 */
/* 2022-11-23 수정 시작 */
.biz-quick-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 70px;
	padding: 12px 10px;
	background: #f9f9fa;
	border-radius: 12px;
	border: 1px solid #d9dbdc;
  box-shadow: 3px 6px 12px rgba(0,0,0,0.12);
}
/* 2022-11-23 수정 끝 */

.biz-quick-item > .tit {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 10px;
}

.biz-quick-item > .tit a {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 23px;
  color: #fff;
}

/* 2022-11-16 수정 시작 */
.biz-quick-item > .tit a .thumb {
  width: 100%;
	height: 100%;
	object-fit: contain;
}
/* 2022-11-16 수정 끝 */

.biz-quick-item > .tit:hover .chip {
  opacity: 1;
}

.biz-quick-item > .tit.c-type1 a {
  background: #c0c6ce;
}

.biz-quick-item > .tit.c-type2 a {
  background: #5eb0b5;
}

.biz-quick-item > .tit.c-type3 a {
  background: #cbb58f;
}

.biz-quick-item > .tit.c-type4 a {
  background: #ffa200;
}

.biz-quick-item > .tit.c-type5 a {
  background: #6d80f5;
}

.biz-quick-item > .tit.disabled a {
  opacity: 0.6;
}

.biz-quick-item li {
	width: 100%;
	margin-top: 10px;
}

.biz-quick-item li:first-child {
	margin-top: 0;
}

.biz-quick-item li a, .biz-quick-item li span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 45px;
}

.biz-quick-item li a:before, .biz-quick-item li span:before {
  content: '';
  width: 30px;
  height: 30px;
}

.biz-quick-item li a:hover, .biz-quick-item li span:hover {
  border-radius: 12px;
  background: #fff;
}

/* 2022-11-23 수정 시작 */
.biz-quick-item .chip {
	display: flex;
	opacity: 0;
	visibility: hidden;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 55px;
	top: 50%;
	height: 20px;
	padding: 0 6px;
	background: #fe6a2b;
	border-radius: 10px;
	font-size: 10px;
	color: #fff;
	white-space: nowrap;
	transform: translateY(-50%);
}

.biz-quick-item a:hover .chip{
	opacity: 1 !important;
	visibility: visible;
	transition: all 0.3s;
}

.biz-quick-item li a:hover .chip, .biz-quick-item li span:hover .chip {
	opacity: 1 !important;
	visibility: visible;
	transition: all 0.3s;
}
/* 2022-11-23 수정 끝 */

/* 2022-11-22 수정 시작 */
.biz-quick-item a .beta-badge{
	position: absolute;
	right: -2px;
	bottom: 5px;
	width: 30px;
}
/* 2022-11-22 수정 끝 */

.biz-quick-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 0;
	border-top: 1px solid #d9dbdc;
	border-bottom: 1px solid #d9dbdc;
}

.biz-quick-menu li a:before {
	content: '';
	width: 30px;
	height: 30px;
}

.biz-quick-menu li.home a:before {
	background: url("../images/icon/icon_quick_home.svg") no-repeat 0 0;
	background-size: 100%;
}

.biz-quick-menu li.notice {
	position: relative;
}

.biz-quick-menu li.notice:hover .notice-wrap {
	opacity: 1;
	visibility: visible;
}

.biz-quick-menu li.notice:hover span .chip {
	opacity: 0;
}

.biz-quick-menu li.notice span:before {
	background: url("../images/icon/icon_quick_notice.svg") no-repeat 0 0;
	background-size: 100%;
}

.biz-quick-menu li.notice span .chip {
	opacity: 1;
	right: -4px;
	left: auto;
	top: 10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.biz-quick-menu li.notice span:hover .chip {
	opacity: 0 !important;
}

.biz-quick-menu li.notice .notice-wrap {
	opacity: 0;
	position: absolute;
	visibility: hidden;
	top: -2px;
	left: -88px;
	width: 90px;
	padding: 5px;
	background-color: #f2f2f7;
	border-radius: 4px;
}

.biz-quick-menu li.notice .notice-wrap::after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 8px;
	top: 35%;
	right: -15px;
	transform: rotate(-180deg);
	border-color: transparent #f2f2f7 transparent transparent;
}

.biz-quick-menu li.notice .notice-wrap li {
	margin-top: 2px;
}

.biz-quick-menu li.notice .notice-wrap li:first-child {
	margin-top: 0;
}

.biz-quick-menu li.notice .notice-wrap li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: auto;
	padding: 2px 5px;
}

.biz-quick-menu li.notice .notice-wrap li a:hover {
	border-radius: 3px;
}

.biz-quick-menu li.notice .notice-wrap li a::before {
	display: none;
}

.biz-quick-menu li.notice .notice-wrap li a .menu {
	font-size: 11px;
	font-weight: 700;
	color: #2a3138;
}

.biz-quick-menu li.notice .notice-wrap li a .badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	padding: 0 2px;
	border-radius: 15px;
	font-size: 12px;
	color: #fff;
}

.biz-quick-menu li.mypage a:before {
	background: url("../images/icon/icon_quick_mypage.svg") no-repeat 0 0;
	background-size: 100%;
}

.biz-quick-menu li.customer a:before {
	background: url("../images/icon/icon_quick_customer.svg") no-repeat 0 0;
	background-size: 100%;
}

.biz-quick-menu li.tire a:before {
	background: url("../images/icon/icon_quick_tire.svg") no-repeat 0 0;
	background-size: 100%;
}

.biz-quick-menu li.line a:before {
	background: url("../images/icon/icon_quick_lineup.svg") no-repeat 0 0;
	background-size: 100%;
}

.biz-quick-menu li.reserve a:before {
	background: url("../images/icon/icon_quick_reserve.svg") no-repeat 0 0;
	background-size: 100%;
}

/* 2022-11-23 수정 시작 */
.biz-quick-menu li.consult a:before {
	background: url("../images/icon/icon_quick_consult.svg") no-repeat 0 0;
	background-size: 100%;
}
/* 2022-11-23 수정 끝 */

.biz-quick-product {
	width: 100%;
	padding-top: 10px;
}

.biz-quick-product > .tit {
	margin-bottom: 20px;
	font-size: 10px;
	color: #2a3138;
	line-height: 1.2;
	text-align: center;
}

.biz-quick-product li {
	width: 100%;
}

/* 2022-11-23 수정 시작 */
.biz-quick-product li a{
	border-radius: 12px;
  background-color: #fff;
}

.biz-quick-product li a .info-wrap{
	opacity: 0;
  visibility: hidden;
  position: absolute;
  top: -45px;
  right: 57px;
  min-width: 105px;
  background-color: #5b6068;
  border-radius: 4px;
}

.biz-quick-product li a:hover .info-wrap{
	opacity: 1;
  visibility: visible;
}

.biz-quick-product li a .info-wrap::before{
	position: absolute;
  content: '';
	right: -20px;
  width: 25px;
	height: 100%;
  background-color: transparent;         
}

.biz-quick-product li a .info-wrap::after{
	content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px;
  top: 45%;
  right: -15px;
  transform: rotate(-180deg);
  border-color: transparent #5b6068 transparent transparent;          
}

.biz-quick-product li a .info-wrap li{
	height: auto;
  padding: 15px; 
}

.biz-quick-product li a .info-wrap li .model{
	font-size: 11px;
  color: #fff;
  text-align: center; 
}

.biz-quick-product li a .info-wrap li .price{
	display: inherit;
  font-size: 12px;
  color: #fff;
  text-align: center;
}

.biz-quick-product li a .info-wrap li:first-child{
	margin-top: 0;
}

.biz-quick-product li a .info-wrap li .price .txt-throughline{
	color: #8e939c;
	font-size: 12px;
}
/* 2022-11-23 수정 끝 */

.biz-quick-product li a::before {
	display: none;
}

.biz-quick-product li a .thumb {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 38px;
	padding: 0 8px;
	border-radius: 12px;
}

.biz-quick-product li a .thumb img {
	width: 100%;
	height: 100%;
}

.biz-quick-product li a .thumb .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 12px;
	background: rgba(255, 255, 255, 0.8);
}

.biz-quick-product li a .thumb .logo img {
	width: 72%;
	height: auto;
	object-fit: scale-down;
}

.biz-quick-product li a .chip {
	background: #5b6068;
}
/* 2022-11-10 수정 시작  */
.biz-quick-product.no-data .tit {
	margin-bottom: 10px;
}

.biz-quick-product.no-data li .icon.nodata {
	padding: 0;
}

.biz-quick-product.no-data li .icon.nodata::before {
	display: inline-flex;
	content: '';
	width: 25px;
	height: 25px;
	margin: 0;
	background: url(../images/icon/icon_nodata.png) no-repeat 0 0;
	background-size: 100%;
}

.biz-quick-product.no-data li .txt {
	margin-top: -5px;
	font-size: 10px;
	color: #5b6068;
	line-height: 1.4;
	text-align: center;
}
/* 2022-11-10 수정 끝  */

.register-guide-box-popup .guide-img {
	background-color: #f9f9fa;
	border-radius: 4px;
}
.register-guide-box-popup .guide-img img {
	width: 100%;
	max-height: 140px;
	object-fit: cover;
}
.register-guide-box-popup .guide-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 12px;
}
.register-guide-box-popup .guide-wrap .guide-img:first-child {
	position: relative;
}
.register-guide-box-popup .guide-wrap .guide-img:first-child img{
	border: 2px solid #2ed0ff;
}
.register-guide-box-popup .guide-wrap .guide-img:first-child::before{
	position: absolute;
  content: '';
  width: 25px;
  height: 25px;
  bottom: 0;
  left: 0;
  margin: 5px;
  background: url(../images/icon/icon_check_blue.png) no-repeat 0 0;
  background-size: 100%;                
}
.register-guide-box-popup .guide-wrap .guide-img {
	width: calc(50% - 6px);
}
.register-guide-box-popup .guide-img {
	background-color: #f9f9fa;
	border-radius: 4px;
}
.register-guide-box-popup .guide-wrap .guide-img:last-child {
	position: relative;
	margin-left: 12px;
}
.register-guide-box-popup .guide-wrap .guide-img:last-child img{
	border: 2px solid #f73400;
}
.register-guide-box-popup .guide-wrap .guide-img:last-child::before{
	position: absolute;
  content: '';
  width: 25px;
  height: 25px;
  bottom: 0;
  left: 0;
  margin: 5px;
  background: url(../images/icon/icon_x_red.png) no-repeat 0 0;
  background-size: 100%;                
}
.register-guide-box-popup .guide-list {
	margin-top: 20px;
}
.register-guide-box-popup .guide-list li {
	position: relative;
	font-size: 12px;
	margin-left: 5px;
}
.register-guide-box-popup .guide-list li::before {
	position: absolute;
	content: '';
	top: 10px;
	left: -5px;
	width: 2px;
	height: 2px;
	background: #2a3138;
	border-radius: 2px;
}
.line-icons.e-receipt::before {
	display: inline-flex;
	content: '';
	width: 30px;
	height: 30px;
	background: url('../images/icon/icon_e-receipt.png') no-repeat 0 0;
	background-size: 100%;
}
.mypage-menu-list-bx li a:hover .e-receipt::before {
	background-position: 0 -30px;
}
/* 2022-10-24 고객상담 */
.customer-center .contents2 {
	margin-left: 300px;
}
.customer-center .page-tit{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.customer-center .consulting-banner {
	display: flex;
	align-items: center;
	margin-top: 20px;
	padding: 10px;
}

.customer-center .consulting-banner img {
	width: 60px;
	height: 50px;
}

.customer-center .consulting-banner h3.tit {
	margin-left: 20px;
	font-size: 13px;
	font-weight: 400;
}

.customer-center .consulting-faq {
	margin: 15px 0 30px 0;
}

.customer-center .consulting-faq .faq-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 8px;
}

.customer-center .consulting-faq .faq-list li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 80px;
	padding: 15px 0px;
	border: 1px solid #d9dbdc;
	border-radius: 6px;
}

.customer-center .consulting-faq .faq-list li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 10px 0;
}

.customer-center .consulting-faq .faq-list li a .tit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 100px;
	max-height: 80px;
	padding: 7px 0;
	background-color: #f9f9fa;
	border-radius: 6px 0px 0px 6px;
}

.customer-center .consulting-faq .faq-list li a .tit .icon.shopping::before {
	content: '';
	display: inline-flex;
	width: 40px;
	height: 40px;
	background: url("../images/icon/icon-faq-shopping.png") no-repeat 0 0;
	background-size: 100%;
}

.customer-center .consulting-faq .faq-list li a .tit .icon.change::before {
	content: '';
	display: inline-flex;
	width: 40px;
	height: 40px;
	background: url("../images/icon/icon-faq-change.png") no-repeat 0 0;
	background-size: 100%;
}

.customer-center .consulting-faq .faq-list li a .tit .icon.search::before {
	content: '';
	display: inline-flex;
	width: 40px;
	height: 40px;
	background: url("../images/icon/icon-faq-search.png") no-repeat 0 0;
	background-size: 100%;
}

.customer-center .consulting-faq .faq-list li a .tit .label-txt {
	font-size: 12px;
	color: #fe6a2b;
	font-weight: 600;
}

.customer-center .consulting-faq .faq-list li a .con {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 100px);
	margin-left: 15px;
	font-size: 12px;
	color: #2a3138;
}

/* 2022-11-21 수정 시작 */
.customer-center .consulting-call {
	display: none;
	/* display: flex; */
	align-items: center;
	margin: 20px 0;
}
.customer-center .page-tit h2{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* 2022-11-21 수정 끝 */

.customer-center .consulting-call .info {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: 35px;
	color: #2A3138;
}

.customer-center .consulting-call .info::before {
	display: inline-block;
	position: absolute;
	content: '';
	top: -5px;
	left: 0;
	width: 30px;
	height: 30px;
	background: url("../images/icon/icon-call.png") no-repeat 0 0;
	background-size: 100%;
}

.customer-center .consulting-call .info .cmt {
	font-size: 11px;
}

.customer-center .consulting-call .info .num {
	position: relative;
	font-size: 13px;
	font-weight: 500;
}

.customer-center .consulting-call .info .num::before {
	display: inline-block;
	content: '';
	top: 0px;
	left: 0;
	width: 1px;
	height: 10px;
	margin: 0px 5px;
	background-color: #2A3138;
}

.customer-center .consulting-call .btn-area {
	display: flex;
	align-items: center;
	margin-left: 15px;
}

.customer-center .consulting-call .btn-area .btn-item {
	width: 90px;
	height: 30px;
	padding: 0 15px;
	border-color: #d9dbdc;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.customer-center .consulting-call .btn-area .btn-item:last-child {
	margin-left: 5px;
}
.biz-login-popup2 .pop-header .btn-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.biz-login-popup2 .pop-content {
	margin-top: 10px;
	text-align: center;
}

.biz-login-popup2 .pop-content .icon {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url(../images/icon/icon-notice-blk.png) no-repeat 0 0;
	background-size: 100%;
}

.biz-login-popup2 .pop-content .txt {
	margin: 10px 0 20px 0;
	font-size: 14px;
}

.biz-login-popup2 .pop-content strong {
	font-size: 16px;
}

.biz-join-popup .pop-header .btn-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.biz-join-popup .pop-content {
	margin-top: 30px;
	text-align: center;
}

.biz-join-popup .pop-content span {
	color: #fe6a2b;
}
.biz .item-info-wrap .price-wrap .rowheader {
	width: 105px;
}

.biz .item-info-wrap .price-wrap .rowgroup strong {
	color: #059c4c;
	font-weight: 400;
}

.biz .item-info-wrap .price-wrap .toggle-wrap .rowgroup:last-child {
	margin-top: 65px;
}

.biz .item-info-wrap .price-wrap .toggle-wrap .rowgroup:last-child em {
	font-size: 16px;
}
.biz-e-receipt-popup .top-area {
	z-index: 100;
	position: sticky;
	top: 0px;
	left: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 15px 20px;
	background: #fff;
}

.biz-e-receipt-popup .top-area .logo {
	width: 150px;
	height: 35px;
	background: url("../images/popup/logo_t.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-e-receipt-popup .top-area .btn-download {
	background: none;
}

.biz-e-receipt-popup .top-area .btn-download .line-icons::before {
	display: inline-flex;
	content: '';
	width: 30px;
	height: 30px;
	background: url("../images/icon/icon-download.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-e-receipt-popup .tit {
	padding: 10px 0px 15px;
	font-size: 16px;
	font-weight: 600;
	color: #2a3138;
}

.biz-e-receipt-popup .tit.top {
	padding: 25px 15px 10px;
}

.biz-e-receipt-popup .con-area .receipt-list {
	margin: 0 15px;
	padding: 15px 0;
	border-top: 1px dashed #5b6068;
}

.biz-e-receipt-popup .con-area .receipt-list li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 8px;
}

.biz-e-receipt-popup .con-area .receipt-list li .stit {
	font-size: 14px;
}

.biz-e-receipt-popup .con-area .receipt-list li .con {
	font-size: 14px;
	text-align: right;
}

.biz-e-receipt-popup .con-area .receipt-list li .con span {
	color: #5b6068;
}

.biz-e-receipt-popup .con-area .receipt-list li .con span.line {
	color: #2a3138;
	text-decoration: underline;
}

.biz-e-receipt-popup .con-area .receipt-list li .con.fc-o {
	color: #fe6a2b;
}

.biz-e-receipt-popup .con-area .receipt-list li:last-child {
	padding-bottom: 0;
}

.biz-e-receipt-popup .con-area .receipt-list.no-bd {
	border-top: none;
}

.biz-e-receipt-popup .con-area .receipt-list.bg {
	margin: 0;
	padding: 15px;
	background-color: #f9f9fa;
}

.biz-e-receipt-popup .con-area .receipt-list.total li.bold {
	margin: 10px 0;
}

.biz-e-receipt-popup .con-area .receipt-list.total li.none {
	margin-top: 0;
}

.biz-e-receipt-popup .con-area .receipt-list.total li strong {
	font-size: 16px;
	font-weight: 700;
}

.biz-e-receipt-popup .con-area .inner {
	padding: 0 15px;
}

.biz-e-receipt-popup .pop-table {
	padding: 15px 15px 0;
}

.biz-e-receipt-popup .pop-table table {
	table-layout: fixed;
	width: 100%;
	text-align: right;
	word-break: break-all;
}

.biz-e-receipt-popup .pop-table table th {
	padding: 5px 0px;
	font-size: 16px;
	font-weight: 500;
	word-break: break-all;
	border-bottom: 1px dashed #5b6068;
}

.biz-e-receipt-popup .pop-table table td {
	padding: 5px 0px;
	font-size: 14px;
	line-height: 1.3;
	word-break: break-all;
}

.biz-e-receipt-popup .btm-area {
	margin: 0 auto;
	padding: 0 15px;
}

.biz-e-receipt-popup .btm-area .cmt {
	padding-top: 20px;
	margin-bottom: 10px;
	border-top: 1px dashed #5b6068;
	text-align: center;
	font-size: 13px;
	color: #5b6068;
}

.biz-e-receipt-popup .btm-area .cmt:last-child {
	border-top: none;
	border-bottom: 1px dashed #5b6068;
	padding: 0px 0 20px;
}

.biz-e-receipt-popup .btm-area .cmt a {
	font-size: 13px;
	color: #5b6068;
}

/* 2022-11-10 수정 시작 */
.biz-container .tab-set{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.biz-container .tab-set .tab-link {
	width: auto;
	padding: 0;
}
.biz-container .tab-set .tab-link > a {
	width: inherit;
}
.biz-container .tab-link > a {
	display: inline-block;
	text-decoration: none;
	width: 33.3333%;
	height: inherit;
	line-height: 44px;
	text-align: center;
	color: #5b6068;
	font-size: 14px;
	font-weight: 400;
	padding: 0 12px;
	position: relative;
	border-bottom: 1px solid transparent;
}
.biz-container .tab-link {
	overflow: hidden;
	z-index: 800;
	top: 50px;
	left: 0;
	width: 100%;
	height: 45px;
	padding: 0 20px;
	line-height: 45px;
}
.biz-container .tab-link::before {
	display: block;
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	border-bottom: 1px solid #d9dbdc;
}
.biz-container .tab-link > a.on {
	color: #fe6a2b;
	font-weight: 500;
}
.biz-container .tab-link > a.on::after {
	z-index: 1;
	position: absolute;
	display: block;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #fe6a2b;
	min-width: 0;
	transition: left ease-in-out .16s, width ease-in-out .16s;
}
/* 2022-11-10 수정 끝 */

.biz-container .cont-area .top-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
}

.biz-container .cont-area .top-area .total span {
	color: #fe6a2b;
}

.biz-container .cont-area .top-area .cmt {
	font-size: 12px;
	text-align: right;
}

/* 2022-11-21 수정 시작 */
.biz-container .cont-area .top-info .total {
	font-size: 16px;
}

.biz-container .cont-area .top-info .total span {
	color: #fe6a2b;
}

.biz-container .cont-area .top-info .cmt {
	font-size: 12px;
	text-align: left;
}

.biz-container .cont-area .top-info .cmt span{
	margin-left: 5px;
}

.biz-container .cont-area .top-info .tab-link a::after{
	display: none;
}
/* 2022-11-21 수정 끝 */

.biz-container .cont-area .table {
	width: 100%;
	margin-top: 10px;
}

.biz-container .cont-area .table thead {
	background-color: #f9f9fa;
	border-top: 1px solid #2a3138;
	border-bottom: 1px solid #d9dbdc;
}

.biz-container .cont-area .table thead th {
	padding: 20px;
	font-size: 14px;
	text-align: center;
}

.biz-container .cont-area .table tr {
	border-top: 1px solid #d9dbdc;
}

.biz-container .cont-area .table tr:first-child {
	border-top: none;
}

.biz-container .cont-area .table td {
	padding: 25px 20px;
	font-size: 14px;
	text-align: center;
}

.biz-container .cont-area .table td .chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 85px;
	height: 30px;
	border: 1px solid #a0a6af;
	border-radius: 4px;
	font-size: 12px;
}

.biz-container .cont-area .table td .chip.buying {
	border: 1px solid #fe6a2b;
	color: #fe6a2b;
}

.biz-container .cont-area .table td .btn-item {
	width: 85px;
	height: 30px;
	line-height: 30px;
}

.biz-container .cont-area .table td .btn-item .label-txt {
	font-size: 12px;
}

.biz-container .cont-area .table td.left {
	text-align: left;
}

.biz-container .guardrail {
	width: 1170px;
	height: auto;
	position: relative;
	margin: 0 auto;
}

.biz-container .guardrail::after {
	content: '';
	display: table;
	clear: both;
}

.biz-container .container {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}

.biz-container h2.page-tit {
	width: 100%;
	margin: 40px 0;
	font-size: 30px;
}

.biz-container .page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 10px;
}

.biz-container .page-header .line-icons {
	line-height: 15px;
}

.biz-container .page-header.mycar {
	align-items: center;
}

.biz-container .page-header.mycar .btn-set .btn-item:last-child {
	margin-left: 10px;
}

.biz-container .content-btn {
	display: flex;
	justify-content: center;
	padding: 40px 0;
	border-bottom: 1px solid #d9dbdc;
}

.biz-container .content-btn .btn-item {
	width: 200px;
}

.biz-container .customer-center {
	padding-top: 40px;
}

.biz-container .customer-center .txt {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.biz-container .customer-center .txt strong {
	color: #fe6a2b;
}

.biz-container .customer-center .txt .icon {
	margin-right: 10px;
	padding: 5px;
	background-color: #f2f2f7;
	border-radius: 36px;
}

.biz-container .customer-center .txt .icon::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	content: '';
	width: 36px;
	height: 36px;
	background: url(../images/icon/icon_quick_customer.png) no-repeat 0 0;
	background-size: 100%;
}

.biz-container .customer-center.search .icon::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	content: '';
	width: 36px;
	height: 36px;
	background: url(../images/icon/icon-tire-search.png) no-repeat 0 0;
	background-size: 100%;
}

.biz-container .tab-set .tab-link {
	width: auto;
	padding: 0;
}

.biz-container .tab-set .tab-link > a {
	width: inherit;
}

.biz-container .content-area {
	margin-left: 300px;
	padding-top: 10px;
}

.biz-container .content-area .page-tit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 1px solid #d9dbdc;
}

.biz-container .content-area .page-tit h2 {
	font-size: 30px;
}

.biz-container .content-area .page-tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 15px;
	box-sizing: border-box;
}

.biz-container .content-area .page-tab::before {
	content: '';
	display: block;
	width: 100%;
	height: 0;
	border-bottom: 1px solid #d9dbdc;
	position: absolute;
	left: 0;
	bottom: 0;
}

.biz-container .content-area .page-top {
	position: relative;
}

.biz-container .content-area .page-top .stit {
	color: #2a3138;
}

.biz-container .content-area .page-top .select-box {
	position: absolute;
	right: 0;
	bottom: -8px;
}

.biz-container .content-area .search-box {
	position: relative;
}

.biz-container .content-area .search-box .ip-txt01 {
	width: 250px;
	height: 40px;
	margin-right: -4px;
	padding: 6px 30px 6px 15px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #d9dbdc;
	border-right: none;
	font-size: 12px;
	color: #2a3138;
	line-height: 20px;
}

.biz-container .content-area .search-box .btn-item {
	width: 85px;
	border-radius: 0 4px 4px 0;
}

.biz-container .content-area .select-box {
	position: relative;
	width: 150px;
	height: 40px;
	margin-top: -15px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #d9dbdc;
	color: #2a3138;
	line-height: 20px;
	background-position: 98% 50%;
}

.biz-container .content-area .select-box select {
	width: 100%;
	height: 40px;
	padding: 0 30px 0 10px;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	z-index: 1 !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url("../images/icon/icon_select.png") no-repeat 97% 50%;
	background-size: 20px auto;
	box-sizing: border-box;
}

.biz-container .content-area .select-box select:disabled {
	background-color: #d9dbdc;
}

.biz-container .content-area .faq-list {
	margin-top: 15px;
	padding: 0 10px;
}

.biz-container .content-area .faq-list li {
	height: 55px;
	border-top: 1px solid #d9dbdc;
}

.biz-container .content-area .faq-list li:first-child {
	border-top: none;
}

.biz-container .content-area .faq-list li > a {
	display: flex;
	align-items: center;
	height: 100%;
}

/* 2022-11-17 수정 시작 */
.biz-container .content-area .faq-list li > a .chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid #c0c6ce;
	font-size: 11px;
	color: #c0c6ce;
	text-align: center;
}
/* 2022-11-17 수정 끝 */

.biz-container .content-area .faq-list li > a .con {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 50px);
}

/* 2022-11-17 수정 시작 */
.biz-container .content-area .faq-list li > a .txt {
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 10px;
	font-size: 14px;
	font-weight: 400;
	color: #2a3138;
	white-space: nowrap;
}
/* 2022-11-17 수정 끝 */

.biz-container .content-area .faq-list li > a .txt strong {
	font-weight: 400;
	color: #fe6a2b;
}

.biz-container .content-area .faq-menu {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 5px;
	width: 100%;
	margin-top: 20px;
}

.biz-container .content-area .faq-menu li {
	width: 100%;
	height: 80px;
}

.biz-container .content-area .faq-menu li a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 14px 0;
	border: 1px solid #d9dbdc;
	border-radius: 4px;
	font-size: 12px;
}

.biz-container .content-area .faq-menu li a::before {
	content: '';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30px;
	text-align: center;
}

.biz-container .content-area .faq-menu li.on a {
	border-color: #fe6a2b;
	color: #fe6a2b;
	font-weight: 700;
}

.biz-container .content-area .faq-menu li.on.icon1 a:before {
	background: url("../images/icon/icon_tire_active.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.on.icon2 a:before {
	background: url("../images/icon/icon_mount_active.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.on.icon3 a:before {
	background: url("../images/icon/icon_order_active.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.on.icon4 a:before {
	background: url("../images/icon/icon_cancel_active.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.on.icon5 a:before {
	background: url("../images/icon/icon_member_active.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.on.icon6 a:before {
	background: url("../images/icon/icon_etc_active.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.icon1 a:before {
	background: url("../images/icon/icon_tire.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.icon2 a:before {
	background: url("../images/icon/icon_mount.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.icon3 a:before {
	background: url("../images/icon/icon_order.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.icon4 a:before {
	background: url("../images/icon/icon_cancel.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.icon5 a:before {
	background: url("../images/icon/icon_member.png") no-repeat 50% 0;
	background-size: 32px 100%;
}

.biz-container .content-area .faq-menu li.icon6 a:before {
	background: url("../images/icon/icon_etc.png") no-repeat 50% 0;
	background-size: 32px 100%;
}



.biz-container .content-area .faq-wrap {
	padding-top: 20px;
}

.biz-container .content-area .faq-wrap .faq-box {
	margin-top: 20px;
	padding: 10px 0px 20px 0px;
	background: #fff;
	border-radius: 4px;
}

.biz-container .content-area .faq-wrap .faq-box .tit {
	display: flex;
	align-items: center;
	height: 50px;
	background-color: #2a3138;
	border-radius: 2px;
	font-size: 16px;
	color: #fff;
}

.biz-container .content-area .faq-wrap .faq-box .tit.inquiry01::before {
	display: inline-flex;
	content: '';
	width: 24px;
	height: 24px;
	margin: 0 10px;
	background: url("../images/icon/icon-inquiry01.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-container .content-area .faq-wrap .faq-box .tit.inquiry02::before {
	display: inline-flex;
	content: '';
	width: 24px;
	height: 24px;
	margin: 0 10px;
	background: url("../images/icon/icon-inquiry02.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 35px;
	margin-top: 20px;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top .stit {
	padding: 0;
	font-size: 14px;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top .stit:first-child {
	margin-right: 10px;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top .mycar {
	display: flex;
	align-items: center;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top .mycar .mycar-select-item {
	overflow: hidden;
	width: 165px;
	margin-left: 10px;
	padding: 0 10px;
	background-color: #f2f2f7;
	border-radius: 4px;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top .mycar .mycar-select-item .swiper-slide {
	padding: 0;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top .mycar .mycar-select-item .swiper-slide .btn-item {
	width: 35px;
	height: 35px;
	line-height: 35px;
	padding: 0;
	background-size: 50px;
	background-repeat: no-repeat;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .list-top .mycar .mycar-select-item .swiper-slide .btn-item.on::after {
	display: inline-block;
	position: absolute;
	content: "\e90f";
	top: -1px;
	right: 0;
	width: 10px;
	height: 10px;
	background: #58c1c7;
	border-radius: 50%;
	color: #fff;
	font-size: 10px;
	font-family: 'LineIcons', sans-serif !important;
	line-height: 10px;
	pointer-events: none;
}

.biz-container .content-area .faq-wrap .faq-box .list-set .faq-list li:first-child {
	border-top: 1px solid #2a3138;
}

.biz-container .content-area .faq-wrap .faq-box .inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 8px;
}

.biz-container .content-area .faq-wrap .faq-box:first-child {
	margin-top: 0;
}

/* .biz-container .content-area .faq-wrap .faq-box:last-child .faq-list {
    border-top: 1px solid #d9dbdc;
  } */

.biz-container .content-area .consulting-banner {
	display: flex;
	align-items: center;
	margin-top: 20px;
	padding: 10px;
}

.biz-container .content-area .consulting-banner img {
	width: 60px;
	height: 50px;
}

.biz-container .content-area .consulting-banner h3.tit {
	margin-left: 20px;
	font-size: 13px;
	font-weight: 400;
}

.biz-container .content-area .consulting-faq {
	margin: 15px 0 30px 0;
}

.biz-container .content-area .consulting-faq .faq-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 8px;
}

.biz-container .content-area .consulting-faq .faq-list li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 80px;
	padding: 15px 0px;
	border: 1px solid #d9dbdc;
	border-radius: 6px;
}

.biz-container .content-area .consulting-faq .faq-list li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 10px 0;
}

.biz-container .content-area .consulting-faq .faq-list li a .tit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 100px;
	max-height: 80px;
	padding: 7px 0;
	background-color: #f9f9fa;
	border-radius: 6px 0px 0px 6px;
}

.biz-container .content-area .consulting-faq .faq-list li a .tit .icon.shopping::before {
	content: '';
	display: inline-flex;
	width: 40px;
	height: 40px;
	background: url("../images/icon/icon-faq-shopping.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-container .content-area .consulting-faq .faq-list li a .tit .icon.change::before {
	content: '';
	display: inline-flex;
	width: 40px;
	height: 40px;
	background: url("../images/icon/icon-faq-change.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-container .content-area .consulting-faq .faq-list li a .tit .icon.search::before {
	content: '';
	display: inline-flex;
	width: 40px;
	height: 40px;
	background: url("../images/icon/icon-faq-search.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-container .content-area .consulting-faq .faq-list li a .tit .label-txt {
	font-size: 12px;
	color: #fe6a2b;
	font-weight: 600;
}

.biz-container .content-area .consulting-faq .faq-list li a .con {
	width: calc(100% - 100px);
	margin-left: 15px;
	font-size: 12px;
	color: #2a3138;
}

.biz-container .content-area .consulting-call {
	display: flex;
	align-items: center;
	margin: 20px 0;
}

.biz-container .content-area .consulting-call .info {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: 35px;
	color: #2A3138;
}

.biz-container .content-area .consulting-call .info::before {
	display: inline-block;
	position: absolute;
	content: '';
	top: -5px;
	left: 0;
	width: 30px;
	height: 30px;
	background: url("../images/icon/icon-call.png") no-repeat 0 0;
	background-size: 100%;
}

.biz-container .content-area .consulting-call .info .cmt {
	font-size: 11px;
}

.biz-container .content-area .consulting-call .info .num {
	position: relative;
	font-size: 13px;
	font-weight: 500;
}

.biz-container .content-area .consulting-call .info .num::before {
	display: inline-block;
	content: '';
	top: 0px;
	left: 0;
	width: 1px;
	height: 10px;
	margin: 0px 5px;
	background-color: #2A3138;
}

.biz-container .content-area .consulting-call .btn-area {
	display: flex;
	align-items: center;
	margin-left: 15px;
}

.biz-container .content-area .consulting-call .btn-area .btn-item {
	width: 90px;
	height: 30px;
	padding: 0 15px;
	border-color: #d9dbdc;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.biz-container .content-area .consulting-call .btn-area .btn-item:last-child {
	margin-left: 5px;
}

.biz-container .content-area .stit {
	padding-top: 20px;
	font-size: 16px;
	font-weight: 500;
	color: #fe6a2b;
}

.biz-container .content-area .stit.blk {
	padding: 20px 0 0;
	color: #2a3138;
}

.biz-container .content-area .stit strong {
	margin-right: 5px;
	color: #fe6a2b;
}

.biz-container .content-area .btn-more {
	font-size: 12px;
}

.biz-container .content-area .btn-more::after {
	display: inline-flex;
	content: '';
	width: 16px;
	height: 16px;
	background: url("../images/icon/icon-arrow.png") no-repeat 0 3px;
	background-size: 100%;
}

.biz-container .cont-area .swiper-box {
	width: 475px;
}

.biz-container .cont-area .swiper-box .swiper-container {
	border-radius: 4px;
}

.biz-container .cont-area .swiper-box .swiper-container .swiper-pagination {
	bottom: 2px;
}

.biz-container .cont-area .swiper-box .swiper-slide {
	max-height: 315px;
}

.biz-container .cont-area .swiper-box .swiper-slide img {
	width: 100%;
	height: auto;
}
.biz-container .mydetail_02 .tit-set {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #e1e1e1;
}

.biz-container .mydetail_02 .tit-set h6 {
	border-bottom: 0px solid #e1e1e1;
}
.biz-container.reply .faq-wrap .tit {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 100%;
	padding: 20px 10px;
	border-top: 1px solid #d9dbdc;
	font-size: 14px;
	font-weight: 700;
	color: #2a3138;
}

.biz-container.reply .faq-wrap .tit span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 20px;
	margin-right: 10px;
	border-radius: 4px;
	border: 1px solid #c0c6ce;
	font-size: 11px;
	color: #c0c6ce;
	text-align: center;
}

.biz-container.reply .faq-wrap .txt {
	padding: 20px;
	background-color: #f9f9fa;
	border-top: 1px solid #d9dbdc;
}

/* 2022-11-24 수정 시작 */
.biz-container.reply .faq-wrap .txt img{
	display: block;
	width: auto !important;
	height: 300px !important;
	max-width: 100% !important;
	object-fit: cover;
}
/* 2022-11-24 수정 끝 */

.tit-set{
	display: flex;
	align-items: center;
	width: 100%;
	padding: 20px 10px;
	border-top: 1px solid #d9dbdc;
}

.tit-set .con{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.tit-set .chip{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 20px;
	margin-right: 10px;
	border-radius: 4px;
	border: 1px solid #c0c6ce;
	font-size: 11px;
	color: #c0c6ce;
	text-align: center;
}
.tit-set .title{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: #2a3138;
}
.tit-set .date{
	flex-shrink: 0;
}

.biz-container.reply .recommend-wrap {
	margin-top: 40px;
	padding: 0 100px 0 20px;
}

.biz-container.reply .recommend-wrap .stit {
	color: #2a3138;
}

/* 2022-11-10 수정 시작 */
.biz-container.reply .recommend-wrap .tab-set .tit {
	font-size: 16px;
}
/* 2022-11-10 수정 끝 */

/* 2022-12-01 수정 시작 */
.biz-container.reply .recommend-wrap .goods-list {
	display: flex;
	/* align-items: flex-start; */
	margin-top: 20px;
}

.biz-container.reply .recommend-wrap .goods-list li {
	display: flex;
	max-width: 240px;
	min-height: 200px;
	margin-left: 15px;
}
/* 2022-12-01 수정 끝 */

.biz-container.reply .recommend-wrap .goods-list li:first-child {
	margin-left: 0;
}

/* 2022-11-28 수정 시작 */
.biz-container.reply .recommend-wrap .goods-list li .discount-item {
	position: relative;
	width: 100%;
	min-height: 200px;
	padding-bottom: 30px;
}
/* 2022-11-28 수정 끝 */

.biz-container.reply .recommend-wrap .goods-list li .discount-item .thumb-area {
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	width: 100%;
	height: 100px;
	padding: 0 10px 10px;
	border-bottom: 1px solid #D9DBDC;
}
/* 2022-11-10 수정 시작 */
.biz-container.reply .recommend-wrap .goods-list li .discount-item .thumb-area .thumb {
	flex-shrink: 0;
	width: 110px;
	height: 110px;
}
/* 2022-11-10 수정 끝  */

/* 2022-11-10 수정 시작 */
.biz-container.reply .recommend-wrap .goods-list li .discount-item .thumb-area .thumb img {
	width: 100%;
	height: auto;
	margin: 12px 0 0 -12px;
	transform: scale(1.3);
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .thumb-area .info {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: space-between;
	z-index: 1;
}
/* 2022-11-10 수정 끝 */

.biz-container.reply .recommend-wrap .goods-list li .discount-item .thumb-area .info .brands-logo {
	position: initial;
	width: 95px;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .thumb-area .info .date {
	width: 100%;
	font-size: 10px;
	font-weight: 300;
	color: #5b6068;
	line-height: 1;
	text-align: right;
}
/* 2022-11-10 수정 시작  */
.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area {
	width: 100%;
	height: auto;
	margin-bottom: 15px;
	padding: 10px;
}
/* 2022-11-10 수정 끝  */

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .top-info {
	display: flex;
	justify-content: space-between;
}

/* 2022-11-27 수정 시작 */
.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .top-info .model {
	max-width: calc(100% - 40px);
	height: auto;
	padding-right: 10px;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .top-info .model img {
	width: 100%;
	height: auto;
}
/* 2022-11-27 수정 끝 */

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .keywords {
	width: 100%;
	margin-top: 20px;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .keywords .keyword {
	height: 17px;
	padding: 0 8px;
	border-radius: 4px;
	font-size: 10px;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .keywords .keyword::before {
	color: #2a3138;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .price {
	margin-top: 20px;
	font-size: 18px;
	font-weight: 700;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .price .discount {
	font-size: 14px;
	font-weight: 400;
	color: #a0a6af;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .description-area .price .badge-discount {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border-color: #fe6a2b;
	font-size: 14px;
	color: #fe6a2b;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .btn-area {
	width: 100%;
	padding: 10px;
	border-top: 1px solid #D9DBDC;
}

.biz-container.reply .recommend-wrap .goods-list li .discount-item .btn-area .btn-item {
	height: 30px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 300;
	line-height: 28px;
}

/* 2022-11-28 수정 시작 */
.biz-container.reply .recommend-wrap .goods-list li .btn-more {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
}
/* 2022-11-28 수정 끝 */

.biz-container.reply .recommend-wrap .goods-list li .btn-more::after {
	display: none;
}

.biz-container.reply .recommend-wrap .goods-list li .btn-more .btn-item {
	width: 100%;
	height: 100%;
	line-height: 30px;
}

.biz-container.reply .recommend-wrap .goods-list li .coupon-area {
	max-height: 165px;
	padding: 10px;
	background-color: #f9f9fa;
	border-top: 1px solid #d9dbdc;
}

.biz-container.reply .recommend-wrap .goods-list li .coupon-area .coupon-card .haaer-label-use .label-txt {
	left: 1px;
	top: 2px;
}

.biz-container.reply .recommend-wrap .goods-list li .coupon-area .coupon-card .haaer-label-use::before {
	border-left: 55px solid #fe6a2b;
	border-bottom: 55px solid transparent;
}

.biz-container.reply .recommend-wrap .goods-list li .coupon-area .coupon-card-info {
	max-width: calc(100% - 60px);
	height: auto;
	padding: 17px 0px 8px 6px;
}

.biz-container.reply .recommend-wrap .goods-list li .coupon-area .coupon-card-info .cmt {
	margin-top: 3px;
}

.biz-container.reply .recommend-wrap .goods-list li .coupon-area .coupon-card-action {
	min-width: 60px;
}
/* 2022-11-23 수정 시작 */
.biz-container.reply .banner {
	margin-top: 40px;
	width: 570px;
}

.biz-container.reply .banner a {
	overflow: hidden;
  display: block;
  border-radius: 20px;
}
.biz-container.reply .banner a img {
	width: 100%;
  height: auto;
}
/* 2022-11-23 수정 끝 */

.biz-container .card .thumb img {
	width: 100%;
	height: auto;
}

/* 2022-12-02 수정 시작 */
.coupon-online.coupon-card .coupon-card-action {
	background: #5eb0b5;
}

.coupon-online.coupon-card .coupon-card-action .download-after{
	display: none;
}

.coupon-online.coupon-card .coupon-card-action .download-before{
	display: block;
}

.coupon-online.coupon-card .coupon-card-action.comp{
	background: #f2f2f7;
}

.coupon-online.coupon-card .coupon-card-action.comp .download-after{
	display: block;
}

.coupon-online.coupon-card .coupon-card-action.comp .download-before{
	display: none;
}

.coupon-online.coupon-card .coupon-card-action .download-before .download-btn .icon{
	display: inline-flex;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: url(../images/icon/icon_download.png) no-repeat 0 0;
	background-size: 100%;
}

.coupon-online.coupon-card .coupon-card-action .download-before .download-btn .label-txt {
	margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.coupon-online.coupon-card .coupon-card-action .download-before .date{
	margin-top: 5px;
  font-size: 10px;
  font-weight: 400;
  color: #fff;
}
/* 2022-12-02 수정 끝 */

/* 2022-12-09 수정 시작 */
/* 로그인 계정 만료 */
.biz-container.expire .txt-wrap {
  text-align: center;
}

.biz-container.expire .txt-wrap .txt {
	font-size: 20px;
  color: #2a3138;
}

.biz-container.expire .txt-wrap .txt strong{
 font-weight: 500;
}

.biz-container.expire .txt-wrap .date {
  margin-top: 40px;
	font-size: 18px;
  color: #2a3138;
}

.biz-container.expire .txt-wrap .date span {
  color: #fe6a2b;
}

.biz-container.expire .txt-wrap p {
	margin-top: 25px;
  font-size: 14px;
  color: #5b6068;
}

.biz-container.expire .txt-wrap p strong{
	font-weight: 500;
}

.biz-container.expire .login-wrap {
  margin-top: 40px;
  border-top: 1px solid #d9dbdc;
}

.biz-container.expire .login-wrap.sns {
	margin-top: 50px;
}

.biz-container.expire .login-wrap .id-list {
  padding: 45px 50px 0;
}

.biz-container.expire .login-wrap .id-list li {
  padding-top: 15px;
}

.biz-container.expire .login-wrap .id-list li:first-child {
  padding-top: 0;
}

.biz-container.expire .login-wrap .id-list li .labelling strong {
  font-size: 14px;
  color: #5b6068;
  font-weight: 400;
}

/* 2022-12-29 수정 시작 */
.biz-container.expire .login-wrap .id-list li .labelling strong .status{
  font-size: 14px;
	color: #f73400;
}
/* 2022-12-29 수정 끝 */

.biz-container.expire .login-wrap .sns-list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}

.biz-container.expire .login-wrap .sns-list li {
	margin-left: 25px;
}

.biz-container.expire .login-wrap .sns-list li:first-child{
	margin-left: 0;
}

.biz-container.expire .login-wrap .sns-list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.biz-container.expire .login-wrap .sns-list li a span {
  margin-top: 5px;
  font-size: 14px;
  color: #2a3138;
}

.biz-container.expire .login-wrap .sns-list li .snskakao {
  width: 45px;
  height: 45px;
}

.biz-container.expire .login-wrap .sns-list li .snsnaver {
  width: 45px;
  height: 45px;
}

.biz-container.expire .login-wrap .sns-list li .snsapple {
  width: 45px;
  height: 45px;
}

.biz-container.expire .login-wrap p {
  margin-top: 50px;
  font-size: 14px;
  text-align: center;
}

.biz-container.expire .login-wrap .btn-area {
  margin-top: 15px;
}

.biz-container.expire .login-wrap .btn-area .btn-item {
  height: 48px;
  border-radius: 24px;
}

.biz-container.expire .btn-area {
	display: flex;
	justify-content: center;
  margin-top: 40px;
}

.biz-container.expire .btn-area .btn-item{
	width: 345px;
	height: 48px;
	border-radius: 24px;
}

.biz-container.expire .btn-area .btn-item .label-txt{
	font-size: 16px;
}

/* sns */
.biz-container .snskakao{
	background: url('../images/icon/icon_sns_kakao.png') no-repeat 0 0 !important;
	background-size: 100% !important;
}

.biz-container .snsnaver{
	background: url('../images/icon/icon_sns_naver.png') no-repeat 0 0 !important;
	background-size: 100% !important;
}

.biz-container .snsapple{
	background: url('../images/icon/icon_sns_apple.png') no-repeat 0 0 !important;
	background-size: 100% !important;
}

/* 애플계정 로그인 추가 */
.sns_logo .snsapple{
	width: 45px;
	height: 45px;
	background: url(../images/icon/icon_sns_apple.png) no-repeat 0 0;
	background-size: 100%;	
}

.login_02 .info-txt {
	margin-top: 70px;
	text-align: center;
}

.login_02 .info-txt span{
	font-size: 14px;
	color: #5b6068;
	font-weight: 400;
}

#loginForm .login-button-wrap.login button a{
	margin-left: 0;
}

#loginForm .login-button-wrap.login button {
	margin-right: 0;
}

#loginForm .login-button-wrap.login button {
	margin-left: 10px;
}

/* popup */
/* 휴면 해제 안내 팝업 */
.login-dormant-popup .pop-content {
  text-align: center;
}

.login-dormant-popup .pop-content .txt {
  font-size: 18px;
  color: #2a3138;
	line-height: 1.2;
}

.login-dormant-popup .pop-content .txt span{
  font-weight: 500;
}

.login-dormant-popup .pop-content .info {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  color: #5b6068;
}

.login-dormant-popup .pop-content .btn-area {
  margin-top: 30px;
}

.login-dormant-popup .pop-content .btn-area .btn-item {
  width: 345px;
	height: 48PX;
	border-radius: 24px;
  cursor: pointer;
}

.login-dormant-popup .pop-content .btn-area .btn-item .label-txt{
  font-size: 16px;
}

/* 로그인 계정 이용불가 안내 팝업 */
.login-impossible-popup .pop-content {
  text-align: center;
}

.login-impossible-popup .pop-content .txt {
  font-size: 18px;
  color: #2a3138;
	line-height: 1.2;
}

.login-impossible-popup .pop-content .txt span{
  font-weight: 500;
}

.login-impossible-popup .pop-content .info {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: #5b6068;
}

.login-impossible-popup .pop-content .btn-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.login-impossible-popup .pop-content .btn-area .btn-item {
  width: 345px;
	height: 48px;
	border-radius: 24px;
  cursor: pointer;
}

.login-impossible-popup .pop-content .btn-area .btn-item .label-txt {
	font-size: 16px;
}

.login-impossible-popup .pop-content .btn-area .btn-item:last-child {
  margin-top: 8px;
}

.login-impossible-popup .pop-content .btn-area .btn-item:last-child:hover::before{
  border-radius: 0;
}

.login-impossible-popup .pop-content .btn-area .btn-item:last-child .label-txt{
  font-size: 14px;
}

/* 로그인 계정 전환 완료 팝업 */
.login-change-popup .pop-content {
  text-align: center;
}

.login-change-popup .pop-content .sns-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-change-popup .pop-content .sns-wrap .snskakao {
  width: 45px;
  height: 45px;
  background: url(../images/icon/icon_sns_kakao.png) no-repeat 0 0;
  background-size: 100%;
}

.login-change-popup .pop-content .sns-wrap .snsfacebook {
  width: 45px;
  height: 45px;
  background: url(../images/common/icon_sns.png) no-repeat 0 -82px;
  background-size: 150px 180px;
  vertical-align: middle;
}

.login-change-popup .pop-content .sns-wrap .snsnaver {
  width: 45px;
  height: 45px;
  background: url(../images/icon/icon_sns_naver.png) no-repeat 0 0;
  background-size: 100%;
}

.login-change-popup .pop-content .sns-wrap .snsgoogle {
  width: 45px;
  height: 45px;
  background: url(../images/common/icon_sns.png) no-repeat 0 -131px;
  background-size: 150px 180px;
  vertical-align: middle;
}

/* 2022-12-28 수정 시작 */
.login-change-popup .pop-content .sns-wrap .snsemail {
  width: 45px;
  height: 45px;
  background: #fff url(../images/icon/icon_sns_email.png) no-repeat 0 0;
  background-size: 100%;
}
/* 2022-12-28 수정 끝 */

/* 2022-12-29 수정 시작 */
.login-change-popup .pop-content .sns-wrap .snsapple {
  width: 45px;
  height: 45px;
  background: url(../images/icon/icon_sns_apple.png) no-repeat 0 0;
  background-size: 100%;
}
/* 2022-12-29 수정 끝 */

.login-change-popup .pop-content .txt {
  margin-top: 30px;
  font-size: 18px;
  color: #2a3138;
	line-height: 1.2;
}

.login-change-popup .pop-content .info {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  color: #5b6068;
}

.login-change-popup .pop-content .txt span{
  font-weight: 500;
}

.login-change-popup .pop-content .info span{
  font-weight: 500;
}

.login-change-popup .pop-content .btn-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}

.login-change-popup .pop-content .btn-area .btn-item {
  width: 345px;
	height: 48px;
	border-radius: 24px;
  cursor: pointer;
}

.login-change-popup .pop-content .btn-area .btn-item .label-txt{
  font-size: 16px;
}
/* 2022-12-09 수정 끝 */



/* 20230313 start */

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=digital-warranty------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.digital-warranty-intro-overview {
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F7 68.23%);
}

.digital-warranty-intro-overview-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 12px;
}

.digital-warranty-intro-overview-card-list a.dw-overview-card {
    flex: 0 1 calc((100% - 24px)/3);
    display: block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: transparent;
    border-radius: 8px;
    padding: 16px 16px 42px 24px;
    border: none;
    position: relative;
    transition: all 0.3s;
}

.digital-warranty-intro-overview-card-list a.dw-overview-card > * { position: relative;}

.digital-warranty-intro-overview-card-list a.dw-overview-card:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #d9dbdc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: inherit;
    transition: all 0.3s;
}

.digital-warranty-intro-overview-card-list a.dw-overview-card:hover {
    z-index: 1;
    padding: 16px 4px 42px 12px;
}

.digital-warranty-intro-overview-card-list a.dw-overview-card:hover:before {
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    width: calc(100% + 28px);
    height: calc(100% + 28px);
}


.digital-warranty-intro-overview-card-list .dw-overview-card:nth-of-type(1) { --dw-key-color: #FFA200; }
.digital-warranty-intro-overview-card-list .dw-overview-card:nth-of-type(2) { --dw-key-color: #FE6A2B; }
.digital-warranty-intro-overview-card-list .dw-overview-card:nth-of-type(3) { --dw-key-color: #008BEC; }
.digital-warranty-intro-overview-card-list .dw-overview-card:nth-of-type(4) { --dw-key-color: #6D80F5; }
.digital-warranty-intro-overview-card-list .dw-overview-card:nth-of-type(5) { --dw-key-color: #00B3C5; }
.digital-warranty-intro-overview-card-list .dw-overview-card.closing { --dw-key-color: #FE6A2B; }

.digital-warranty-intro-overview-card-list .dw-overview-card .title-area h4 {
    color: var(--dw-key-color);
    font-size: 16px;
    font-weight: 700;
}

.digital-warranty-intro-overview-card-list .dw-overview-card .title-area .dw-symbol {
    width: 40px;
    height: 40px;
}

.digital-warranty-intro-overview-card-list .dw-overview-card .summary {
    min-height: 102px;
    font-size: 26px;
    font-weight: 200;
    margin-top: 12px;
    line-height: 34px;
    letter-spacing: -1px;
}

.digital-warranty-intro-overview-card-list .dw-overview-card .summary em {
    color: var(--dw-key-color);
    font-weight: 700;
}

.digital-warranty-intro-overview-card-list .dw-overview-card .closing-txt {
    font-size: 26px;
    font-weight: 200;
    line-height: 40px;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.digital-warranty-intro-overview-card-list .dw-overview-card .closing-txt em {
    color: var(--dw-key-color);
    font-weight: 700;
}

.digital-warranty-intro-overview-card-list .dw-overview-card .closing-txt img {
    height: 28px;
    margin-left: 8px;
    margin-right: 2px;
}

.digital-warranty-intro-overview-card-list .dw-overview-card hr.short {
    display: block;
    width: 32px;
}

.digital-warranty-intro-overview-card-list .dw-overview-card.closing {
    flex: 0 1 calc((100% - 24px)/3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    align-self: stretch;
    height: auto;
    user-select: none;
}



.digital-warranty-detail {
    position: relative;
    padding-top: 85px;
}

.digital-warranty-detail-header {
    width: 100%;
    height: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.digital-warranty-detail-header.fixed {
    position: fixed;
}

.digital-warranty-detail-trunk {
    
}

.digital-warranty-detail-sidebar {
    width: 240px;
    height: auto;
    background: #fff;
    padding-top: 44px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.digital-warranty-detail-sidebar.fixed {
    position: fixed;
    top: 85px;
    left: calc(50% - 585px);
}

.digital-warranty-detail-sidebar.absolute-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
}

.digital-warranty-detail-sidebar .btn-item {
    text-align: left;
    padding-left: 16px;
}

.digital-warranty-detail-sidebar .btn-item:not(:first-of-type) { margin-top: 16px;}

.digital-warranty-detail-sidebar .btn-item.act {
    border-color: var(--dw-key-color);
}

.digital-warranty-detail-sidebar .btn-item:nth-of-type(1) { --dw-key-color: #FFA200; }
.digital-warranty-detail-sidebar .btn-item:nth-of-type(2) { --dw-key-color: #FE6A2B; }
.digital-warranty-detail-sidebar .btn-item:nth-of-type(3) { --dw-key-color: #008BEC; }
.digital-warranty-detail-sidebar .btn-item:nth-of-type(4) { --dw-key-color: #6D80F5; }
.digital-warranty-detail-sidebar .btn-item:nth-of-type(5) { --dw-key-color: #00B3C5; }

.digital-warranty-detail-sidebar .btn-item .dw-bi {
    width: 24px;
    height: 24px;
}

.digital-warranty-detail-sidebar .btn-item .label-txt { margin-left: 8px;}

.digital-warranty-detail-content {
    width: auto;
    height: auto;
    padding-top: 44px;
    padding-left: 56px;
    margin-left: 240px;
    margin-right: 0;
}
/* 20230313 update#2 start */
.digital-warranty-detail-section .service-info {
    width: 600px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 40px;
}
/* 20230313 update#2 end */

.digital-warranty-detail-section .accent-box {
    width: 100%;
    height: auto;
    background: #f2f2f7;
    border-radius: 12px;
    overflow: hidden;
}


.digital-warranty-detail-section .ion-header {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.digital-warranty-detail-section .ion-header h3 {
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    flex: none;
}

.digital-warranty-detail-section .ion-header img {
    flex: none;
    width: 200px;
    margin-left: 60px;
}

.ion-mileage-process {
    overflow: visible;
    padding-top: 16px;
    padding-bottom: 8px;
}

.ion-mileage-process .swiper-slide {
    display: inline-flex;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.ion-mileage-process .swiper-slide img {
    width: 60px;
    height: 60px;
}

.ion-mileage-process .description-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    letter-spacing: -0.5px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    position: relative;
    margin-top: -4px;
}

.ion-mileage-process .description-card p {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.5px;
}

.ion-mileage-process .swiper-slide:not(:last-of-type) .description-card:after {
    content: "\e917";
    font-family: 'LineIcons';
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    color: #00B3C5;
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateX(50%) translateY(-50%);
}

.ion-mileage-process .swiper-slide.final-step { margin-right: 0 !important; }

.ion-mileage-process .swiper-slide.final-step .description-card {
    color: #fff;
    background: linear-gradient(180deg, #009FAF 0%, #2FD3E3 100%);
}

.ion-mileage-compensation li {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-left: 24px;
}

.ion-mileage-compensation li:before {
    content: "\e911";
    font-family: 'LineIcons';
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    color: #00B3C5;
    transform: translateX(-24px) scale(1,1);
}

.ion-mileage-compensation li p { line-height: 20px; }

.ion-mileage-compensation li .btn-item {
    display: block;
    border-color: #00B3C5;
    color: #00B3C5;
    font-weight: 400;
}


.digital-warranty-notice-section {
    margin-top: 80px;
    padding-top: 24px;
    padding-bottom: 56px;
    border-top: 4px solid #ECEEEF;
}

.digital-warranty-notice-section .accordion-item {
    width: 100%;
    height: auto;
    position: relative;
    user-select: none;
    overflow: visible;
}

.digital-warranty-notice-section .accordion-item dl {
    list-style: none;
    margin: 0;
    overflow: visible;
    margin-top: 40px;
}

.digital-warranty-notice-section .accordion-item dl + dl { margin-top: 40px; }

.digital-warranty-notice-section .accordion-item dl dt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    padding-right: 4px;
    border-bottom: 1px solid #A0A6AF;
    cursor: pointer;
}

.digital-warranty-notice-section .accordion-item dl dt * { pointer-events: none;}

.digital-warranty-notice-section .accordion-item dl dt .chev-wrap {
    width: 24px;
    height: 24px;
    transform: translateZ(0);
    transition: all 0.2s;
    position: relative;
}

.digital-warranty-notice-section .accordion-item dl dt.act .chev-wrap {
    transform: translateZ(0) rotate(90deg);
}

.digital-warranty-notice-section .accordion-item dl dt .chev-wrap .line-icons { position: relative; transform: scaleX(0.75);}

.digital-warranty-notice-section .accordion-item dl dt.act ~ dd { display: block; }

.digital-warranty-notice-section .accordion-item dl dd {
    display: none;
    list-style: none;
    margin: 0;
    padding: 16px 0 32px;
}

.digital-warranty-notice-section .accordion-item dl:last-of-type dd { padding-bottom: 0;}

.digital-warranty-notice-section .accordion-item .list-style-disc li { line-height: 20px; }

.digital-warranty-notice-section .accordion-item .list-style-disc li:not(:first-of-type) { margin-top: 4px; }




.my-warranty-tire-swiper {
    overflow: visible;
    padding: 0 56px;
}

.my-warranty-tire-swiper .swiper-slide {
    width: 100%;
    height: auto;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.my-warranty-tire-swiper .swiper-pagination.swiper-pagination-bullets {
    bottom: -28px;
    left: 0;
}

.my-warranty-tire-swiper .swiper-pagination .swiper-pagination-bullet { background: #d9dbdc; }
.my-warranty-tire-swiper .swiper-pagination .swiper-pagination-bullet-active { background: #2a3138; }

.my-warranty-tire-swiper .swiper-button-prev,
.my-warranty-tire-swiper .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background-color: #2a3138;
    color: #fff;
    opacity: 1;
}

.my-warranty-tire-swiper .swiper-button-prev { left: 0; }
.my-warranty-tire-swiper .swiper-button-next { right: 0; }

.my-warranty-tire-swiper .swiper-button-disabled { opacity: 0.2;}


.my-warranty-tire-swiper .swiper-slide .install-tire,
.my-warranty-tire-swiper .swiper-slide .install-car {
    flex: none;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px;
    position: relative;
}

.my-warranty-tire-swiper .swiper-slide .install-tire {
    background: #F9F9FA;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.12);
    border-radius: 8px;
    gap: 24px;
}

.my-warranty-tire-swiper .swiper-slide .install-car {
    padding-left: 40px;
    gap: 32px;
}

.my-warranty-tire-swiper .swiper-slide .install-tire .thumb-area {
    flex: none;
    width: 120px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.my-warranty-tire-swiper .swiper-slide .install-tire .thumb-area .thumb-holder {
    width: 120px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.my-warranty-tire-swiper .swiper-slide .install-tire .thumb-area .thumb-holder .tire-img {
    width: 100%;
    height: auto;
    mix-blend-mode: darken;
}

.my-warranty-tire-swiper .swiper-slide .install-tire .thumb-area .thumb-holder .ci-img {
    width: auto;
    height: 18px;
}

.my-warranty-tire-swiper .swiper-slide .install-tire.keeping .thumb-area .thumb-holder .tire-img { opacity: 0.3;}

.my-warranty-tire-swiper .swiper-slide .install-tire.keeping .thumb-area .thumb-holder:after {
    content: '보관 중';
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: #fe6a2b;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
}


.my-warranty-tire-swiper .swiper-slide .install-car .thumb-area .thumb-holder {
    width: 128px;
    height: 92px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.my-warranty-tire-swiper .swiper-slide .install-car.no-data .thumb-area .thumb-holder {
    background-image: url('../images/common/mycar_dummy.png') !important;
    border: none !important;
}

.my-warranty-tire-swiper .swiper-slide .info-area {
    width: 100%;
}

.my-warranty-tire-swiper .swiper-slide .install-tire .info-area {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}
/* 20230313 update#1 start */
.my-warranty-tire-swiper .swiper-slide .install-tire .info-area .tire-bi {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    font-size: 14px;
    font-weight: 700;
    margin-top: 8px;
}
/* 20230313 update#1 end */

.my-warranty-tire-swiper .swiper-slide .install-car .info-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}

.my-warranty-tire-swiper .swiper-slide .install-car .info-area .badge-xl {
    font-size: 11px;
    padding: 0 12px;
}
.my-warranty-tire-swiper .swiper-slide .install-car .info-area .model-n-number {
    width: 100%;
    min-width: 0;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
    overflow: hidden;
    margin-top: 4px;
}

.my-warranty-tire-swiper .swiper-slide .install-car .info-area .model-n-number .model {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-warranty-tire-swiper .swiper-slide .install-car .info-area .model-n-number .number {
    flex: 0 0 auto;
}

.my-warranty-tire-swiper .swiper-slide .install-car .info-area .model-n-number .number:before {
    content: '|';
    display: inline-block;
    margin: 0 4px;
    color: #A0A6AF;
}

.my-warranty-tire-swiper .swiper-slide .btn-remove-install-card {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
}

.my-warranty-tire-empty {
    width: 100%;
    height: 232px;
    border-radius: 8px;
    padding: 48px 0 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.my-warranty-state-card-overview {
    width: 100%;
    height: auto;
    padding: 32px 56px 36px;
    background: #F9F9FA;
    border-radius: 8px;
}

.my-warranty-state-card-overview h3 {
    text-align: center;
    font-weight: 400;
    margin-bottom: 24px;
}

.my-warranty-state-card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items:flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.my-warranty-state-card-list > li {
    flex: 0 1 calc((100% - 24px)/3);
    align-self: stretch;
}

.my-warranty-state-card-list > li:nth-of-type(1) { --dw-key-color: #FFA200; }
.my-warranty-state-card-list > li:nth-of-type(2) { --dw-key-color: #FE6A2B; }
.my-warranty-state-card-list > li:nth-of-type(3) { --dw-key-color: #008BEC; }
.my-warranty-state-card-list > li:nth-of-type(4) { --dw-key-color: #6D80F5; }
.my-warranty-state-card-list > li:nth-of-type(5) { --dw-key-color: #00B3C5; }

.my-warranty-state-card-list > li a {
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    border-radius: 4px;
    border: 1px dashed #D9DBDC;
    pointer-events: none;
    padding: 16px 8px;
    padding-left: 112px;
    font-size: 12px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transform: translateZ(0) scale(0);
    opacity: 0;
}

/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing,
.my-warranty-state-card-list > li a.status-no-dot,
.my-warranty-state-card-list > li a.status-notyet,
.my-warranty-state-card-list > li a.status-expired {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
/* 20230313 update#3 end */

.my-warranty-state-card-list > li a.change-motion {
    animation: dw-change-motion 0.4s forwards;
}

@keyframes dw-change-motion {
    0% { transform: translateZ(0) scale(0.5); opacity: 0; }
    100% { transform: translateZ(0) scale(1); opacity: 1; }
}

/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing,
.my-warranty-state-card-list > li a.status-no-dot,
.my-warranty-state-card-list > li a.status-notyet {
    border: 1px solid #D9DBDC;
}
/* 20230313 update#3 end */

.my-warranty-state-card-list > li a.status-expired {
    border: 1px solid transparent;
}

/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing:hover,
.my-warranty-state-card-list > li a.status-no-dot:hover,
.my-warranty-state-card-list > li a.status-notyet:hover {
    border: 1px solid var(--dw-key-color);
}

.my-warranty-state-card-list > li a.status-ongoing.on,
.my-warranty-state-card-list > li a.status-no-dot.on {
    border: 1px solid var(--dw-key-color);
}
/* 20230313 update#3 end */

.my-warranty-state-card-list > li a * { user-select: none; pointer-events: none;}

.my-warranty-state-card-list > li a .dw-bi-area {
    width: 80px;
    height: auto;
    padding: 0;
    text-align: center;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing .dw-bi-area,
.my-warranty-state-card-list > li a.status-no-dot .dw-bi-area { height: 52px; padding-top: 18px; }
/* 20230313 update#3 end */
.my-warranty-state-card-list > li a.dw-ion.status-ongoing .dw-bi-area { padding: 8px 0 0; transform: translateY(calc(-50% - 4px));}
.my-warranty-state-card-list > li a.dw-ion.status-expired .dw-bi-area { padding-top: 0;}
.my-warranty-state-card-list > li a.status-expired .dw-bi-area,
.my-warranty-state-card-list > li a.status-notyet .dw-bi-area {
    height: auto;
    padding-top: 0;
    margin-bottom: 0;
}

.my-warranty-state-card-list > li a .dw-bi {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}
.my-warranty-state-card-list > li a.status-expired .dw-bi { filter: grayscale(1); opacity: 0.7; }
/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing .dw-bi,
.my-warranty-state-card-list > li a.status-no-dot .dw-bi,
.my-warranty-state-card-list > li a.status-notyet .dw-bi { opacity: 1; }
/* 20230313 update#3 end */


.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator {
    width: 72px;
    height: 52px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.my-warranty-state-card-list > li a.dw-ion .dw-bi-area .dw-indicator {
    width: 52px;
}

/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing .dw-bi-area .dw-indicator,
.my-warranty-state-card-list > li a.status-no-dot .dw-bi-area .dw-indicator { display: block; }
/* 20230313 update#3 end */

.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .circ-chart svg {
    transform: rotate(162deg);
}

.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .circ-chart svg .chart-track {
    fill: transparent;
    stroke: #d9dbdc;
    stroke-width: 4;
    stroke-linecap: round;
}

.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .circ-chart svg .chart-fill {
    fill: transparent;
    stroke: var(--dw-key-color);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0 0;
}

.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart {
    display: flex;
    width: 100%;
    gap: 2px;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart div {
    width: 16px;
    height: 3px;
    background: #d9dbdc;
}

.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart[data-step="1"] div:nth-of-type(1) { background: #00B3C5; }
.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart[data-step="2"] div:nth-of-type(1),
.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart[data-step="2"] div:nth-of-type(2) { background: #00B3C5; }
.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart[data-step="3"] div:nth-of-type(1),
.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart[data-step="3"] div:nth-of-type(2),
.my-warranty-state-card-list > li a .dw-bi-area .dw-indicator .step-progress-chart[data-step="3"] div:nth-of-type(3) { background: #00B3C5; }




.my-warranty-state-card-list > li a h4 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: #A0A6AF;
    position: relative;
}

/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing h4,
.my-warranty-state-card-list > li a.status-no-dot h4,
.my-warranty-state-card-list > li a.status-notyet h4 { color: #2a3138; }
/* 20230313 update#3 end */
.my-warranty-state-card-list > li a.status-notyet h4 { margin-bottom: 8px; font-size: 0; line-height: 0; }

.my-warranty-state-card-list > li a.status-notyet h4:before {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 20px;
}

.my-warranty-state-card-list > li a.dw-ease.status-notyet h4:before { content: '안심서비스를\A가입해 주세요!'; }
.my-warranty-state-card-list > li a.dw-ion.status-notyet h4:before { content: '주행거리 보증가입을\A신청해 주세요!'; letter-spacing: -1px; }

.my-warranty-state-card-list > li a .status-msg {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: left;
    font-size: 0;
    line-height: 100%;
}

.my-warranty-state-card-list > li a .status-msg span {
    display: inline-block;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
}


/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-ongoing,
.my-warranty-state-card-list > li a.status-no-dot,
.my-warranty-state-card-list > li a.status-notyet { pointer-events: all; }
.my-warranty-state-card-list > li a.status-ongoing,
.my-warranty-state-card-list > li a.status-no-dot,
.my-warranty-state-card-list > li a.status-notyet,
.my-warranty-state-card-list > li a.status-expired { background: #fff; }
/* 20230313 update#3 end */

.my-warranty-state-card-list > li a .status-msg .msg-txt { display: none; }
.my-warranty-state-card-list > li a.status-ongoing .status-msg .msg-txt { display: inline-block; }
.my-warranty-state-card-list > li a .status-msg:after {
    content: '비적용 워런티';
    display: inline-block;
    line-height: 16px;
    font-size: 12px;
    color: #5B6068;
    font-weight: 700;
}

/* 20230313 update#3 start */
.my-warranty-state-card-list > li a.status-no-dot .status-msg:after {
    content: '제조일로 부터 6년';
    color: #2a3138;
    font-weight: 500;
}
/* 20230313 update#3 end */

.my-warranty-state-card-list > li a.status-expired .status-msg:after {
    content: '보증만료';
    color: #D03333;
    font-weight: 500;
}

.my-warranty-state-card-list > li a.status-notyet .status-msg:after {
    content: '가입신청';
    padding: 0 12px;
    line-height: 24px;
    border-radius: 12px;
    background: #2a3138;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
}

.my-warranty-state-card-list > li a.status-ongoing .status-msg:after { display: none; }


.my-warranty-detail > h3 {
    font-size: 20px;
    line-height: 26px;
}

.my-warranty-detail .state-card {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    position: relative;
    padding: 24px 24px 12px;
    border-radius: 4px;
    background: #F9F9FA;
    border: 1px solid #F2F2F7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.my-warranty-detail .warranty-compensation {
    flex: none;
    width: 380px;
}

.my-warranty-detail .state-card.dw-quality { --dw-key-color: #FFA200; }
.my-warranty-detail .state-card.dw-ease { --dw-key-color: #FE6A2B; }
.my-warranty-detail .state-card.dw-happy30 { --dw-key-color: #008BEC; }
.my-warranty-detail .state-card.dw-cord { --dw-key-color: #6D80F5; }
.my-warranty-detail .state-card.dw-ion { --dw-key-color: #00B3C5; }

.my-warranty-detail .state-card h4 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: -8px;
    margin-left: -8px;
}

.my-warranty-detail .state-card h4 .dw-bi {
    width: 40px;
    height: 40px;
}

.my-warranty-detail .state-card h4 span {
    font-size: 16px;
    font-weight: 400;
}

.my-warranty-detail .state-card .ongoing-info {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 24px;
}

.my-warranty-detail .state-card .ongoing-info .summary-txt {
    font-weight: 400;
    font-size: 16px;
    text-align: right;
}

.my-warranty-detail .state-card .ongoing-info .summary-txt em {
    font-size: 20px;
    font-weight: 500;
}

.my-warranty-detail .state-card .ongoing-info .graph-wrap {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
}

.my-warranty-detail .state-card .ongoing-info .graph-wrap .graph {
    width: 100%;
    height: 4px;
    background: #fff;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.my-warranty-detail .state-card .ongoing-info .graph-wrap .graph .fill {
    width: 100%;
    height: 4px;
    background: var(--dw-key-color);
    transform-origin: 0 50%;
    position: relative;
    transition: all 0.4s;
}

.my-warranty-detail .state-card .ongoing-info .graph-wrap .graph .fill:after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dw-key-color);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(50%) translateY(-50%);
}

.my-warranty-detail .state-card .ongoing-info .graph-wrap .graph-caption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 4px;
}

.my-warranty-detail .state-card .ongoing-info .due-date {
    font-size: 14px;
    font-weight: 400;
}

.my-warranty-detail .state-card .ongoing-info .expected-coupon {
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
}

.my-warranty-detail .state-card .ongoing-info .expected-coupon em {
    font-weight: 700;
    font-size: 16px;
}

.my-warranty-detail .state-card .btn-ion-join-modify {
    position: absolute;
    top: 16px;
    right: 16px;
}


.ion-exchange-step {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ion-exchange-step .btn-item {
    flex: 0 1 calc((100% - 20px)/3);
    width: auto;
    height: auto;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: #D9DBDC;
    background: #f9f9fa;
    color: #5B6068;
    padding: 12px;
    padding-left: 16px;
    text-align: left;
    pointer-events: none;
}

.ion-exchange-step .btn-item.status-ready,
.ion-exchange-step .btn-item.status-attention,
.ion-exchange-step .btn-item.status-done {
    pointer-events: all;
    color: #2a3138;
    background: #fff;
}

.ion-exchange-step .btn-item.status-attention { border-color: #fe6a2b; }
.ion-exchange-step .btn-item.status-done { border-color: #00B3C5; }

.ion-exchange-step .btn-item .header {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: inherit;
}

.ion-exchange-step .btn-item .header h4 {
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

.ion-exchange-step .btn-item .header:after {
    content: '등록대기';
    line-height: 20px;
    font-size: 11px;
    font-weight: 700;
    padding: 0 12px;
    color: #fff;
    border-radius: 2px;
    background: #C0C6CE;
    position: relative;
}

.ion-exchange-step .btn-item.status-ready .header:after,
.ion-exchange-step .btn-item.status-attention .header:after { background: #2a3138; }
.ion-exchange-step .btn-item.status-done .header:after { content: '등록완료'; background: #00B3C5; }


.ion-exchange-step .btn-item .footer {
    width: 100%;
    height: auto;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    color: inherit;
    position: relative;
}

.ion-exchange-step .btn-item .footer .status-msg { color: inherit; }

.ion-exchange-step .btn-item .footer .status-msg p {
    font-size: 11px;
    line-height: 16px;
}




.my-warranty-ion-reg h3 {
    font-size: 20px !important;
    font-weight: 400;
    line-height: 26px;
}

.my-warranty-ion-reg .reg-form {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-top: 40px;
}

.my-warranty-ion-reg .reg-form .form-group {
    display: block;
    width: 600px;
    height: auto;
    background: #F2F2F7;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.my-warranty-ion-reg .reg-form .form-group h4 {
    display: block;
    margin-left: -4px;
    margin-right: -4px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 1px solid #D9DBDC;
    padding-bottom: 8px;
    letter-spacing: -0.5px;
}

.my-warranty-ion-reg .reg-form .form-group .input-wrap {
    width: 100%;
    height: auto;
    position: relative;
}

.warranty-ion-reg-exception-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    background: #F2F2F7;
    padding: 60px;
    border-radius: 8px;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link {
    flex: 0 1 calc((100% - 16px)/2);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    height: 84px;
    padding: 0;
    padding-left: 24px;
    padding-right: 20px;
    border-radius: 4px;
    border-color: #D9DBDC;
    text-align: left;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .thumb-area {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .thumb-area .dw-bi {
    width: 40px;
    height: 40px;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .thumb-area .ion-lineup {
    width: 56px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    mix-blend-mode: darken;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .thumb-area .line-icons.warranty-ion {
    color: #A0A6AF;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .thumb-area .line-icons.check-circle-inv {
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: -2px;
    right: -6px;
    color: #fe6a2b;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .caption-area {
    flex: 1 0 auto;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .caption-area h5 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
}

.warranty-ion-reg-exception-link .btn-ion-reg-exception-link .caption-area p {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #5b6068;
    margin-top: 4px;
}



.receipt-input-method .receipt-input-method-1,
.receipt-input-method .receipt-input-method-2 {
    display: none;
    width: 100%;
    height: auto;
    position: relative;
}

.receipt-input-method .receipt-input-method-1.on,
.receipt-input-method .receipt-input-method-2.on { display: block;}

.receipt-input-method .receipt-search-item-wrap {
    width: 100%;
    height: 42px;
    position: relative;
}

.receipt-input-method .receipt-search-item {
    width: 100%;
    height: auto;
    max-height: 42px;
    position: relative;
    overflow: hidden;
    background: #fff;
    
    border-radius: 4px;
    transition: all 0.3s;
    z-index: 1;
}

.receipt-input-method .receipt-search-item.on {
    position: absolute;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-height: 422px;
}

.receipt-input-method .receipt-search-item .receipt-search-btn {
    width: 100%;
    height: 42px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    user-select: none;
    cursor: pointer;
}


.receipt-input-method .receipt-search-item .receipt-search-btn .label-txt {
    line-height: 20px;
    position: relative;
}

.receipt-input-method .receipt-search-item .receipt-search-btn:hover .line-icons:after {
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
}

.receipt-input-method .receipt-search-item .receipt-search-result {
    width: 100%;
    height: auto;
    background: #fff;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.receipt-input-method .receipt-search-item .receipt-search-result:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    border-top: 1px solid #f9f9fa;
    position: absolute;
    top: 0;
    left: 0;
}

.receipt-input-method .receipt-search-item .receipt-search-result .loading {
    flex: 0 0 auto;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receipt-input-method .receipt-search-item .receipt-search-result .loading .spinner {
    width: 24px;
    height: 24px;
}

.receipt-input-method .receipt-search-item .receipt-search-result .empty {
    flex: 0 0 auto;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receipt-input-method .receipt-search-item .receipt-search-result .result {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.receipt-input-method .receipt-search-item .receipt-search-result .result-summary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px 16px;
}

.receipt-input-method .receipt-search-item .receipt-search-result .receipt-select-btn {
    flex: 0 0 auto;
}

.receipt-input-method .receipt-search-item .receipt-search-result ul {
    flex: 1 1 auto;
    max-height: 300px;
    overflow: auto;
}

.receipt-input-method .receipt-search-item .receipt-search-result ul::-webkit-scrollbar { opacity: 0; width: 0;}

.receipt-input-method .receipt-search-item .receipt-search-result ul > li:not(:first-of-type):before {
    content: '';
    display: block;
    height: 0;
    border-top: 1px dashed #2a3138;
    position: absolute;
    top: 0;
    left: 44px;
    right: 16px;
}

.receipt-input-method .receipt-search-item .receipt-search-result ul > li .receipt-detail-btn {
    position: absolute;
    top: 14px;
    right: 8px;
}

.receipt-input-method .receipt-search-item .receipt-search-result .radio-item {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 0;
}

.receipt-input-method .receipt-search-item .receipt-search-result .radio-item input[type=radio] {
    top: 0;
    opacity: 0;
}

.receipt-input-method .receipt-search-item .receipt-search-result .radio-item * { user-select: none; }

.receipt-input-method .receipt-search-item .receipt-search-result .radio-item .icon-holder {
    left: 16px;
    top: 16px;
}

.receipt-input-method .receipt-search-item .receipt-search-result .radio-item .labelling {
    display: block;
    width: 100%;
    height: auto;
    padding: 16px 20px;
    padding-left: 48px;
}

.receipt-input-method .receipt-search-item .receipt-search-result .radio-item .labelling .label-txt { margin-bottom: 8px;}

.receipt-input-method .receipt-selected {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

.receipt-input-method .receipt-selected .selected-card {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    background: #fff;
    border-radius: 4px;
    padding: 16px 20px 20px;
    margin-top: 8px;
}

.receipt-input-method .receipt-selected .selected-card hr {
    border-top: 1px dashed #2a3138;
    margin-top: 12px;
    margin-bottom: 8px;
}

.receipt-input-method .receipt-selected .selected-card .receipt-detail-btn {
    position: absolute;
    top: 14px;
    right: 12px;
}

.photo-uploader-item {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    list-style: none;
}

.photo-uploader-item:after { display: none; }

.photo-uploader-item > .cell {
    flex: 0 1 calc((100% - 24px)/4);
    padding: 0;
    margin: 0;
}

.photo-uploader-item  .ratio-box {
    position: relative;
    width: 100%;
    padding-top: 75%;
}


.photo-uploader-item .ratio-box .box-cont-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.photo-uploader-item .ratio-box .box-cont-wrap .btn-item {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
}

.photo-uploader-item .ratio-box .box-cont-wrap .upload-btn { background: #fff; }

.photo-uploader-item .ratio-box .box-cont-wrap .btn-item .label-txt {
    margin: 0;
}

.photo-uploader-item .photo-slot {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.photo-uploader-item .photo-slot:before {
    content: "\e9a1";
    box-sizing: border-box;
    font-family: 'LineIcons';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 32px;
    font-size: 32px;
    border-radius: inherit;
    border: 1px dashed #D9DBDC;
    color: #C0C6CE;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.photo-uploader-item .photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.mileage-input .forecast-mileage-radio-group {
    gap: 8px;
    flex-wrap: wrap;
}

.mileage-input .forecast-mileage-radio-group .radio-item {
    flex: 0 1 calc((100% - 24px)/4);
    background: #fff;
}

.mileage-input .forecast-mileage-radio-group .radio-item:before {
    content: '';
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #D9DBDC;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.mileage-input .forecast-mileage-radio-group .radio-item input { top: 0; opacity: 0; }

.mileage-input .forecast-mileage-radio-group .radio-item input:checked ~ .labelling { background: #2a3138; color: #fff;}
.mileage-input .forecast-mileage-radio-group .radio-item .labelling {
    width: 100%;
    padding: 8px 0;
    text-align: center;
}

.mileage-input .forecast-mileage .direct-input { display: none; }
.mileage-input .forecast-mileage .direct-input.on { display: flex; }


.mileage-input .calc-expected-reward .calc-result {
    width: 100%;
    height: 56px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.mileage-input .calc-expected-reward .calc-result p {
    width: 100%;
}



.applied-digital-warranty-badge-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.applied-digital-warranty-badge {
    display: inline-flex;
    width: auto;
    height: 40px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 4px;
    background: #F2F2F7;
}

.applied-digital-warranty-badge .dw-bi {
    width: 32px;
    height: 32px;
}

.applied-digital-warranty-badge .label-txt {
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}



.digital-warranty-filter {
    width: 100%;
    height: auto;
    padding: 16px 20px;
    overflow-x: scroll;
    overflow-x: overlay;
    overflow-y: visible;
    line-height: 100%;
    font-size: 0;
    transition: all 0.3s;
    position: relative;
}

.digital-warranty-filter::-webkit-scrollbar { opacity: 0;}
.digital-warranty-filter::-webkit-scrollbar:horizontal{ height: 0; }

.digital-warranty-filter .scroll-cont {
    width: auto;
    height: auto;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    transition: all 0.3s;
    position: relative;
    font-size: 0;
    overflow: visible;
}

.digital-warranty-filter .scroll-cont .btn-item.btn-free {
    width: 120px;
    height: 88px;
    line-height: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: #D9DBDC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.digital-warranty-filter.as-btn { padding: 0;}

.digital-warranty-filter.as-btn .scroll-cont {
    width: 100%;
    display: flex;
    padding: 16px 0;
}
.digital-warranty-filter.as-btn .scroll-cont .btn-item.btn-free {
    flex: 1 1 0;
    width: auto;
    height: auto;
    padding: 16px 0 !important;
    border-color: #D9DBDC;
}

.digital-warranty-filter.as-btn .scroll-cont .btn-item .dw-bi { width: 40px; height: 40px; }
.digital-warranty-filter.as-btn .scroll-cont .btn-item.btn-free .label-txt { min-height: 0; font-size: 14px; line-height: 20px; }


.digital-warranty-filter .scroll-cont .btn-item {
    border-color: #D9DBDC;
    color: #2a3138;
    padding: 0 !important;
    white-space: nowrap;
    border-radius: 4px;
}
.digital-warranty-filter .scroll-cont .btn-item .dw-bi { width: 32px; height: 32px; }

.digital-warranty-filter .scroll-cont .btn-item .label-txt {
    font-size: 12px;
    line-height: 14px;
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.digital-warranty-filter .scroll-cont .btn-item.act { border-color: #FE6A2B; }

.digital-warranty-filter .scroll-cont .btn-item.act:after {
    content: "\e911";
    font-family: 'LineIcons';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    position: absolute;
    top: 1px;
    left: 1px;
    color: #FE6A2B;
}



.digital-warranty-filter-chips {
    width: 100%;
    height: auto;
    overflow-x: scroll;
    overflow-x: overlay;
    overflow-y: visible;
    line-height: 100%;
    font-size: 0;
    transition: all 0.3s;
    position: relative;
}

.digital-warranty-filter-chips::-webkit-scrollbar { opacity: 0;}
.digital-warranty-filter-chips::-webkit-scrollbar:horizontal{ height: 0; }

.digital-warranty-filter-chips .scroll-cont {
    width: auto;
    height: auto;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    transition: all 0.3s;
    position: relative;
    font-size: 0;
    overflow: visible;
}

.digital-warranty-filter-chips .scroll-cont .btn-item {
    white-space: nowrap;
}




.digital-warranty-tire-list {
    width: 100%;
    height: auto;
    position: relative;
    padding: 48px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px 12px;
}

.digital-warranty-tire-list .tire-item {
    flex: 0 1 calc((100% - 36px)/4);
    align-self: stretch;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
}

.digital-warranty-tire-list .tire-item:active { }

.digital-warranty-tire-list .tire-item .thumb-area {
    flex: none;
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
/* 20230313 update#1 start */
.digital-warranty-tire-list .tire-item .thumb-area .thumb-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #fff;
    transition: all 0.4s;
}
/* 20230313 update#1 end */

.digital-warranty-tire-list .tire-item:hover .thumb-area .thumb-holder {
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

.digital-warranty-tire-list .tire-item .thumb-area .badge-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.digital-warranty-tire-list .tire-item .thumb-area .thumb-holder .tire-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}

.digital-warranty-tire-list .tire-item .info-area {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 24px;
    padding-right: 24px;
}

.digital-warranty-tire-list .tire-item .info-area .upper-area { width: 100%; flex: 1 0 auto; }
.digital-warranty-tire-list .tire-item .info-area .lower-area { width: 100%; flex: none; }


.digital-warranty-tire-list .tire-item .info-area .badge-wrap {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.digital-warranty-tire-list .tire-item .info-area .badge-wrap .badge {
    line-height: 16px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
}

.digital-warranty-tire-list .tire-item .info-area .tire-name {
    width: 100%;
    height: auto;
    position: relative;
}
/* 20230313 update#1 start */
.digital-warranty-tire-list .tire-item .info-area .tire-name .tire-bi {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    font-size: 13px;
    font-weight: 700;
}
/* 20230313 update#1 end */

.digital-warranty-tire-list .tire-item .info-area .user-feedback {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 24px;
}

.digital-warranty-tire-list .tire-item .info-area .user-feedback .rating-count {
    line-height: 18px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
}

.digital-warranty-tire-list .tire-item .info-area .user-feedback hr.vertical {
    display: inline-block;
    height: 12px;
    border-left: 1px solid #A0A6AF;
    margin: 0 8px;
}

.digital-warranty-tire-list .tire-item .info-area .user-feedback .review-count {
    line-height: 18px;
    font-size: 12px;
}


.digital-warranty-tire-list .tire-item .info-area .usp-msg {
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    color: #5B6068;
    margin-top: 8px;
}

.digital-warranty-tire-list .tire-item .info-area .applied-digital-warranty {
    display: flex;
    width: 100%;
    padding: 12px 4px 4px;
    margin-top: 8px;
    color: #A0A6AF;
    border-top: 1px solid #D9DBDC;
    gap: 4px;
}
/* 20230313 end */


/* 20240219 start */
.my-warranty-state-card-list > li a.status-done {
    pointer-events: all;
    background: #fff;
    border: 1px solid #D9DBDC;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.my-warranty-state-card-list > li a.status-done:hover {
    border: 1px solid var(--dw-key-color);
}

.my-warranty-state-card-list > li a.status-done:before { display: none; }
.my-warranty-state-card-list > li a.status-done .dw-bi {
    filter: grayscale(1);
    opacity: 0.7;
}
.my-warranty-state-card-list > li a.status-done h4 { color: #2a3138; }
.my-warranty-state-card-list > li a.dw-ease.status-done { pointer-events: all; }


.my-warranty-state-card-list > li a.dw-ease.status-done .status-msg:before {
    content: '사용만료';
    color: #D03333;
    font-weight: 500;
    display: inline-block;
    line-height: 16px;
    font-size: 12px;
    vertical-align: middle;
}
.my-warranty-state-card-list > li a.dw-ease.status-done .status-msg:after {
    content: "\e917";
    font-family: 'LineIcons';
    display: inline-block;
    color: #D03333;
    font-weight: 400;
    line-height: 16px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    position: absolute;
}

.my-warranty-detail .state-card .ongoing-info .opt-info {
    line-height: 20px;
    font-size: 13px;
    font-weight: 400;
    margin-top: 0;
}

.my-warranty-detail .state-card .ongoing-info .opt-info em {
    font-weight: 500;
    color: #fe6a2b;
}

.my-warranty-detail .state-card .ongoing-info .opt-info-detail {
    line-height: 20px;
    font-size: 12px;
    font-weight: 400;
    margin-top: 0;
}

.my-warranty-detail .state-card .ongoing-info .opt-info-detail em {
    font-weight: 500;
}

.my-warranty-detail .state-card .ongoing-info .service-history {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 12px;
    margin-bottom: -16px;
}

.my-warranty-detail .warranty-compensation { position:relative; }

.my-warranty-detail .warranty-compensation.status-done:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    position: absolute;
    top: 0;
    left: 0;
}

.dw-ease-grade-info {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding: 0 20px;
}

.dw-ease-grade-info .grade-card {
    flex: 1 0 0;
    min-width: 0;
    height: auto;
    background: #F9F9FA;
    border: 1px solid #F2F2F7;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 16px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.dw-ease-grade-info .grade-card .title-area {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dw-ease-grade-info .grade-card .title-area .dw-bi {
    flex: none;
    width: 40px;
    height: 40px;
}

.dw-ease-grade-info .grade-card .descrition-area {
    width: 100%;
    height: auto;
    min-height: 72px;
    position: relative;
    font-size: 16px;
    line-height: 24px;
}

.dw-ease-grade-info .grade-card .descrition-area .txt-black { color: #000;}

.dw-ease-grade-info .grade-card .target-pattern {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #000;
    border-top: 1px solid #D9DBDC;
    padding: 24px 0;
}

.dw-ease-grade-info .grade-card .btn-area {
    margin-bottom: 0;
    margin-top: auto;
}

.modal-item:has(.unbound-modal-cont) .modal-pannel,
.modal-item:has(.unbound-modal-cont) .modal-pannel .modal-body,
.modal-item:has(.unbound-modal-cont) .modal-pannel .modal-body .modal-scroller { overflow: visible; }

/* 20241212 start */
.modal-item:has(.unbound-modal-cont) .modal-pannel { border: none; }
.unbound-modal-cont {
    max-height: calc(100vh - 40px);
    overflow: auto;
    overflow: overlay;
}
/* 20241212 end */

.unbound-modal-cont .btn-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-100%);
}

.unbound-modal-cont .btn-modal-close .label-txt {
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateX(-100%) translateY(-50%);
    margin: 0;
}

.unbound-modal-cont .btn-modal-close .line-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
}
/* 20240219 end */


/* 20230331 start */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=survey----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.survey-wrap {
    width: 540px;
    margin: 0 auto;
    padding: 0;
    padding-top: 72px;
    padding-bottom: 40px;
}

.survey-main-header .hash-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}
.survey-main-header .hash-badges .badge {
    font-size: 14px;
    font-weight: 400;
    padding: 0 16px;
    line-height: 32px;
    border-radius: 4px;
}

.survey-main-benefit .default-benefit {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
}

.survey-main-benefit .default-benefit:after { display: none; }

.survey-main-benefit .default-benefit li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid #D9DBDC;
}

.survey-main-benefit .default-benefit li:not(:first-of-type) {
    margin-top: 16px;
}

.survey-main-benefit .default-benefit li .survey-category {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.survey-main-benefit .default-benefit li .survey-category .line-icons {
    color: #FFA200;
}

/* 20230331 update start */
.survey-main-benefit .default-benefit li .benefit-badge {
    width: 224px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #fe6a2b;
    position: relative;
    transform: translateX(4px);
}

.survey-main-benefit .default-benefit li .benefit-badge:before {
    content: "\e905";
    font-family: 'LineIcons';
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    font-weight: 400;
    transform: translateX(-8px);
}

.survey-main-benefit .bonus-benefit {
    background: #F2F2F7;
    border-radius: 8px;
    padding: 20px 0 20px 124px;
    margin-top: 32px;
    position: relative;
    overflow: hidden;
}

.survey-main-benefit .bonus-benefit .bonus-benefit-img {
    width: 68px;
    height: auto;
    position: absolute;
    top: 8px;
    left: 36px;
}
/* 20230331 update end */

.btn-survey-start {
    width: 280px;
}

.btn-survey-start .line-icons {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}



.survey-qna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.survey-qna .upper-area {
    width: 100%;
    height: auto;
    flex: 1 0 auto;
    min-height: 0;
}

.survey-qna .lower-area {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    padding-left: 40px;
    padding-top: 40px;
}

.survey-step-progress {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 40px;
    gap: 16px;
    counter-reset: list-number;
}

.survey-step-progress:after { display: none; }

.survey-step-progress > li {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: #D9DBDC;
    position: relative;
    counter-increment: list-number;
}

.survey-step-progress > li:before {
    content: counter(list-number);
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.survey-step-progress > li.on { border: 1px solid #fe6a2b; background: #fff; }
.survey-step-progress > li.on:before { color: #fe6a2b; }

.survey-step-progress > li.done { background: #fe6a2b; }
.survey-step-progress > li.done:before { content: "\e912"; font-family: 'LineIcons'; font-size: 32px; }

.survey-step-progress > li:not(:last-of-type):after {
    content: '';
    display: block;
    width: 12px;
    height: 0;
    border-top: 1px solid #a0a6af;
    position: absolute;
    top: 50%;
    right: -3px;
    transform: translateX(100%);
}

.survey-qna-swiper {
    padding: 32px 0;
}

.survey-qna-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.survey-qna-swiper .swiper-slide {
    width: 100%;
    padding: 20px 0;
    padding-left: 40px;

}

.survey-qna-swiper .question {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

.survey-qna-swiper .answer {
    padding-top: 32px;
    padding-right: 32px;
    counter-reset: answer-number;
}

.survey-qna-swiper .answer .btn-item {
    width: 100%;
    height: auto;
    padding: 4px;
    padding-left: 56px;
    line-height: 24px;
    min-height: 40px;
    text-align: left;
    border: none;
    counter-increment: answer-number;
}

.survey-qna-swiper .answer .btn-item:not(:first-of-type) { margin-top: 16px;}

.survey-qna-swiper .answer .btn-item.on,
.survey-qna-swiper .answer .btn-item:hover { color: #fe6a2b; }
.survey-qna-swiper .answer .btn-item.on:after,
.survey-qna-swiper .answer .btn-item:hover:after { border: 1px solid #fe6a2b; }

.survey-qna-swiper .answer .btn-item:hover:before { display: none; }

.survey-qna-swiper .answer .btn-item:after {
    content: counter(answer-number , upper-alpha);
    display: inline-block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 18px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #2a3138;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.survey-qna-swiper .answer .btn-item .label-txt {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}

.survey-qna-swiper .answer .btn-item .label-txt .small {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.survey-complete-header {
    background: #F9F9FA;
    padding: 32px 72px 64px;
    text-align: center;
    overflow: hidden;
    border-radius: 8px;
}


.survey-complete-header h3 {
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.75px;
}



.survey-cate-step-progress {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 0;
    margin-top: 32px;
    overflow: visible;
}

.survey-cate-step-progress:after { display: none; }

.survey-cate-step-progress > div {
    flex: none;
    width: 120px;
    height: 120px;
    padding: 0;
    border-radius: 50%;
    position: relative;
    overflow: visible;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #FE6A2B;
    background: #FE6A2B;
    color: #fff;
}

.survey-cate-step-progress > div.on {
    border: 1px solid #FE6A2B;
    background: #FE6A2B;
    color: #fff;
}



.survey-cate-step-progress > div.on ~ div {
    border: 1px solid #F2F2F7;
    background: #fff;
    color: #A0A6AF;
}

.survey-cate-step-progress > div:before {
    content: '방금! 고객님의\A쿠폰함으로 전달완료!';
    white-space: pre-wrap;
    display: inline-block;
    width: 120%;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 16px;
    color: #FE6A2B;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) translateY(100%) translateZ(0);
    opacity: 0;
}

.survey-cate-step-progress > div.on:before { animation: survey-cate-step-progress-coupon-anim 1.2s 0.4s ease forwards; }

@keyframes survey-cate-step-progress-coupon-anim {
    0% { opacity: 0; }
    20% { opacity: 1; }
    40% { opacity: 0; }
    60% { opacity: 1; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

.survey-cate-step-progress > div.on ~ div:after { display: none; }
.survey-cate-step-progress > div:after {
    content: "\e9aa";
    font-family: 'LineIcons';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    background: #2a3138;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.survey-cate-step-progress > div .line-icons {
    color: inherit;
}

.survey-cate-step-progress > div p {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    margin-top: 4px;
    color: inherit;
}

.survey-cate-step-progress > hr {
    flex: 1 1 auto;
    display: block;
    width: auto;
    height: 0;
    border: none;
    outline: none;
    border-top: 1px solid #A0A6AF;
    margin: 0;
    padding: 0;
}


.survey-next-benefit {
    padding-top: 24px;
}

.survey-next-benefit.bonus {
    padding-top: 32px;
    padding-bottom: 44px;
    border-bottom: 1px solid #D9DBDC;
    overflow: hidden;
}

.survey-next-benefit.bonus p { line-height: 26px; }

.survey-next-benefit.bonus .bonus-benefit-img {
    width: 100px;
    height: auto;
    position: absolute;
    bottom: -12px;
    right: 94px;
}


.btn-item.btn-survey-next-step {
    padding-left: 16px;
    padding-right: 40px;
    transform: translateX(0) translateZ(0);
    animation: next-step-attention-anim 2.4s 3s ease-out infinite;
    border: none;
}

@keyframes next-step-attention-anim {
    0% { transform: translateX(0) translateZ(0); }
    8% { transform: translateX(0) translateZ(0); }
    20% { transform: translateX(-12%) translateZ(0); }
    28% { transform: translateX(0) translateZ(0); }
    40% { transform: translateX(-12%) translateZ(0); }
    48% { transform: translateX(0) translateZ(0); }
    100% { transform: translateX(0) translateZ(0); }
}

.btn-item.btn-survey-next-step .icon-holder {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    border-radius: 50%;
    background: #2a3138;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
}

.btn-item.btn-survey-next-step .icon-holder .line-icons {
    position: absolute;
    top: 4px;
    right: 4px;
    transform: translateX(0) translateZ(0);
}


/* 20230331 end */


/* 20230412 start */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=smartpay-intro--------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.smartpay-intro {
    padding: 100px 0 32px;
}
.smartpay-intro .membership-smartpay-title {
    padding-left: 588px;
    min-height: 348px;
    position: relative;
}

.smartpay-intro .membership-smartpay-title .title-img {
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 78px;
    width: 510px;
}

.smartpay-intro .membership-smartpay-title .txt-wrap .smartpay-bi {
    width: auto;
    height: 48px;
}

.smartpay-intro .membership-smartpay-title .txt-wrap .smartpay-bi + span { font-size: 32px; line-height: 100%; margin-left: 4px;}

.smartpay-intro .membership-smartpay-title .txt-wrap > h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 42px;
}

.smartpay-intro .membership-smartpay-title .txt-wrap > h3 {
    font-size: 24px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 8px;
}

.smartpay-intro .membership-smartpay-title .txt-wrap > p {
    font-size: 18px;
    line-height: 28px;
    color: #2A3138;
    margin-top: 16px;
}

.smartpay-intro .membership-smartpay-title .txt-wrap > .btn-item {
    width: 380px;
    margin-top: 40px;
}

.smartpay-intro .membership-smartpay-title .txt-wrap .banner-link {
    display: block;
    width: 489px;
    margin-top: 48px;
}


/* 20250204 [task]amt 업데이트 start */
.smartpay-advantage {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0 0 80px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 60px;
    position: absolute;
    top: 0;
    left: 0;
}
/* 20250204 [task]amt 업데이트 end */

.smartpay-advantage > div:nth-of-type(1) {
    flex: none;
    width: 528px;
}

.smartpay-advantage > div:nth-of-type(2) {
    flex: none;
    width: 480px;
}

.smartpay-advantage h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
}

.smartpay-advantage h3 .line-icons {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    text-align: center;
    background: #2a3138;
    color: #fff;
}

.smartpay-advantage .tip {
    min-height: 20px;
    line-height: 16px;
    padding: 2px 0;
    padding-left: 38px;
    position: relative;
    font-size: 12px;
}

.smartpay-advantage .tip:before {
    content: 'Tip';
    display: inline-block;
    width: 32px;
    height: 20px;
    line-height: 20px;
    border-radius: 4px 0 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    background: #FE6A2B;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
/* 20250204 [task]amt 업데이트 start */
.smartpay-advantage .infographic-box1 {
    width: 100%;
    height: auto;
    padding-bottom: 16px;
    border-radius: 8px;
     /*background: #F9F9FA; 삭제 */
}
/* 20250204 [task]amt 업데이트 end */

.smartpay-advantage .infographic-box1 .infographic-img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.smartpay-advantage .infographic-box2 {
    width: 100%;
    height: auto;
}

.smartpay-advantage .infographic-box2 .infographic-img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* 20230412 end */



/* 20230628 start */
.cs-recruit {
    width: 600px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 40px;
}

.cs-recruit section { border-bottom: 1px solid #d9dbdc; }
.cs-recruit section:after { display: none; }
.cs-recruit .summary-deco {
    position: absolute;
    bottom: 0;
    right: 20px;
}

.cs-recruit .recruit-step {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.cs-recruit .recruit-step .step {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.cs-recruit .recruit-step .step .img-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cs-recruit .recruit-step .step:not(:last-of-type) .img-wrap:after {
    content: "\e905";
    font-family: 'LineIcons';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(50%) translateY(-50%);
}

.cs-recruit .recruit-step .step .img-wrap img {
    width: 100px;
    height: 100px;
}

.cs-recruit .recruit-step .step > p {
    font-size: 12px;
    line-height: 20px;
}


.cs-recruit .apply-step {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
    padding: 12px;
}

.cs-recruit .apply-step .step {
    flex: 1 0 0;
    height: 52px;
    border-radius: 26px;
    border: 1px solid #d9dbdc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.cs-recruit .apply-step .step:not(:last-of-type):after {
    content: "\e905";
    font-family: 'LineIcons';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translateX(50%) translateY(-50%);
}

.input-box[type=file]::file-selector-button {
    height: 22px;
    font-size: 12px;
    line-height: 20px;
    border: 1px solid #d9dbdc;
    border-radius: 2px;
    padding: 0 12px ;
    background-color: #fff;
    transition: 1s;
}
/* 20230628 end */





/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=tire-list-item--------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.tire-list-item {
    width: 164px;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    -webkit-tap-highlight-color: transparent;
}

.tire-list-item:hover .thumb-area:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
    border-radius: inherit;
}

.tire-list-item .brand-area {
    width: 100%;
    height: 24px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.tire-list-item .brand-area .brand-logo {
    width: auto;
    height: 20px;
}

.tire-list-item .thumb-area {
    width: 100%;
    height: 200px;
    position: relative;
    background: #F2F2F7;
    border-radius: 4px;
}

.tire-list-item .thumb-area .img-layer {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.tire-list-item .thumb-area .img-layer img {
    width: auto;
    height: 90%;
}

.tire-list-item .thumb-area .brand-layer {
    width: 100%;
    height: auto;
    padding-right: 6px;
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tire-list-item .thumb-area .brand-layer .brand-logo {
    width: auto;
    height: 12px;
}

.tire-list-item .thumb-area .badge-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: inherit;
}

.tire-list-item .thumb-area .badge-layer .badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
    gap: 4px;
}

.theme-items .tire-list-item.soldout .thumb-area:after,
.theme-items .tire-list-item.soldout:hover .thumb-area:after,
.related-product .tire-list-item.soldout .thumb-area:after,
.related-product .tire-list-item.soldout:hover .thumb-area:after,
.tire-list:not(.compare-mode) .tire-list-item.soldout .thumb-area:after,
.tire-list:not(.compare-mode) .tire-list-item.soldout:hover .thumb-area:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    left: 0;
}

.theme-items .tire-list-item.soldout .thumb-area:before,
.related-product .tire-list-item.soldout .thumb-area:before,
.tire-list:not(.compare-mode) .tire-list-item.soldout .thumb-area:before {
    content: '현재 품절상품입니다.';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    padding: 0 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1;
}

.circle-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(141deg, #5B6068 0%, #202021 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    text-align: center;
    letter-spacing: -0.5px;
}

.circle-badge[data-badge-group="ranking"] { background: linear-gradient(141deg, #5B6068 0%, #202021 100%); }
.circle-badge[data-badge-group="event"] { background: linear-gradient(180deg, #FE6A2B, #EA5507); border-radius: 8px; }
.circle-badge[data-badge-group="selection"] { background: linear-gradient(141deg, #9CA9FF 0%, #485DE5 100%); }
.circle-badge[data-badge-group="specialty"] { background: linear-gradient(141deg, #00B3C5 0%, #007E8A 100%); }
.circle-badge[data-badge-group="winter"] { background: linear-gradient(141deg, #ACDDFF 6.76%, #2DA9FF 83.75%); }
.circle-badge[data-badge-group][style*="background-image"] {
    border-radius: 0;
    font-size: 0;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.tire-list-item .thumb-area .badge-layer .oe-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
    gap: 4px;
    position: absolute;
    right: 0;
    bottom: 0;
    user-select: none;
    pointer-events: none;
}

.tire-list-item .thumb-area .badge-layer .oe-wrap .maker-bi {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.tire-list-item .thumb-area .compare-layer {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    border-radius: inherit;
}

.compare-mode .tire-list-item .thumb-area .compare-layer { display: flex; }

.tire-list-item .thumb-area .compare-layer:before {
    content: '';
    font-family: 'LineIcons';
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    box-shadow: inset 0 0 0 1px #D9DBDC;
    text-align: center;
    vertical-align: middle;
    background: #fff;
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fe6a2b;
}

.tire-list-item.compare-pick .thumb-area .compare-layer:before {
    content: "\e90f";
}

.tire-list-item .thumb-area .compare-layer:after {
    content: '비교를 원하는 상품을\A선택해 주세요.';
    white-space: pre-wrap;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}

.tire-list-item .info-area {
    width: 100%;
    height: auto;
    position: relative;
}

.tire-list-item .info-area .meta-wrap {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.tire-list-item .info-area .badge-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.tire-list-item [data-badge] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    line-height: 12px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 400;
    border-radius: 2px;
    border: 1px solid transparent;
    background: #F2F2F7;
    color: #5B6068;
    vertical-align: middle;
}

.tire-list-item [data-badge="new"] { background: #D03333; color: #fff; }
.tire-list-item [data-badge="new"]:before { content: 'NEW';}

.tire-list-item [data-badge="premium"] { background: #fff; color: #FE6A2B; border-color: #FE6A2B;}
.tire-list-item [data-badge="premium"]:before { content: '프리미엄';}

.tire-list-item [data-badge="standard"] { background: #fff; color: #FFA200; border-color: #FFA200; }
.tire-list-item [data-badge="standard"]:before { content: '스탠다드';}

.tire-list-item [data-badge="economy"] { background: #fff; color: #A0A6AF; border-color: #A0A6AF; }
.tire-list-item [data-badge="economy"]:before { content: '이코노미'; }

.tire-list-item [data-badge="sport"]:before { content: '고속/제동성';}
.tire-list-item [data-badge="comfort"]:before { content: '정숙/승차감';}

.tire-list-item [data-badge="oe"] { background: #2a3138; color: #fff; }
.tire-list-item [data-badge="oe"]:before { content: 'OE 공급';}

.tire-list-item [data-badge="online-only"] { color: #6D80F5; font-weight: 700; letter-spacing: -0.5px; }
.tire-list-item [data-badge="online-only"]:before { content: '온라인 ONLY';}


.tire-list-item .info-area .product-name {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    line-height: 20px;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    margin-top: 16px;
    padding-right: 12px;
}

.tire-list-item .info-area .product-name [data-badge] { margin-right: 8px; }
.tire-list-item .info-area .product-name .name-txt ~ [data-badge] { margin-right: 0; margin-left: 8px; }

.tire-list-item .info-area .product-name .name-txt {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.tire-list-item .info-area .product-size {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 8px;
}

.tire-list-item .info-area .product-price {
    line-height: 20px;
    margin-top: 12px;
}

.tire-list-item .info-area .product-price .discount-rate { color: #FE6A2B; font-weight: 700; font-size: 14px; margin-right: 8px; }

.tire-list-item .info-area .product-price .price { float: none; font-weight: 500; font-size: 18px; }

.tire-list-item .info-area .rating-wrap {
    flex: none;
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.tire-list-item .info-area .rating-wrap .rating {
    display: inline-block;
    width: 60px;
    height: 10px;
    background: url('../images/common/rating-off.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
    line-height: initial;
    font-size: 0;
    text-align: left; /* 20250813 */
}

.tire-list-item .info-area .rating-wrap .rating span {
    display: inline-block;
    width: 100%;
    height: 10px;
    background: url('../images/common/rating-on.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
}

.tire-list-item .info-area .rating-wrap .rating-point {
    margin-left: 4px;
    font-weight: 400;
}

.tire-list-item .info-area .rating-wrap .review-count {
    margin-left: 2px;
    font-weight: 400;
    color: #A0A6AF;
}






/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=shopping-tire-list----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.shopping-tire-list {
    position: relative;
}

.shopping-tire-list .display-basis-section {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 702;
    background: #fff;
    margin-top: 28px;
    margin-bottom: 16px;
}

.shopping-tire-list .display-basis-section:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: -16px;
    border-bottom: 1px solid #d9dbdc;
}

.shopping-tire-list .display-basis-section.stuck:after {
    bottom: 0;
}

.shopping-tire-list .display-basis-section .display-basis-container {
    width: 100%;
    height: 80px;
    position: relative;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    padding-left: 32px;
}

.shopping-tire-list .display-basis-section .display-basis-container .thumb-area {
    flex: none;
}
.shopping-tire-list .display-basis-section .display-basis-container .thumb-area .thumb-holder {
    width: 140px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    position: relative;
}

.shopping-tire-list .display-basis-section .display-basis-container .thumb-area .thumb-holder .line-icons {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.shopping-tire-list .display-basis-section .display-basis-container .info-area {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 480px;
}

.shopping-tire-list .display-basis-section .display-basis-container .info-area .tire-size {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}

.shopping-tire-list .display-basis-section .display-basis-container .info-area .tire-size span { flex: none;}

.shopping-tire-list .display-basis-section .display-basis-container .btn-area {
    flex: none;
    padding: 0 32px;
}

.shopping-tire-list .display-basis-section .display-basis-container .extra-area {
    flex: 1 0 auto;
    min-width: 0;
    text-align: right;
}



.front-rear-tab {
    width: 100%;
    height: auto;
    position: relative;
    border-bottom: 1px solid #d9dbdc;
    padding: 0;
    margin-top: 60px;
    font-size: 0;
    /* 20240223 start */
    background:#fff;
    position: sticky;
    top: 80px;
    z-index: 701;
    /* 20240223 end */
}

.front-rear-tab .btn-item {
    padding: 0 16px;
    color: #2a3138;
}

.front-rear-tab .btn-item:not(:first-of-type) {
    margin-left: 20px;
}

.front-rear-tab .btn-item.on {
    color: #fe6a2b;
    font-weight: 500;
}

.front-rear-tab .btn-item.on:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #fe6a2b;
    position: absolute;
    left: 0;
    bottom: -2px;
}




.shopping-tire-list .theme-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 60px 0 80px;
}

.shopping-tire-list .theme-section .theme-header {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.shopping-tire-list .theme-section .theme-header .title-icon { width: 32px; height: 32px; margin-right: 8px;}

.shopping-tire-list .theme-section .theme-filter {
    padding: 0;
    margin-left: 32px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.shopping-tire-list .theme-section .theme-filter .btn-item { flex: none; color: #5b6068; }
.shopping-tire-list .theme-section .theme-filter .btn-item.on {
    border-color: #fe6a2b;
    color: #fe6a2b;
}

.shopping-tire-list .theme-section .theme-items {
    min-height: 288px;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 40px;
}

.shopping-tire-list .theme-section .theme-items .tire-list-item {
    width: auto;
    min-width: 0;
    flex: 0 0 calc((100% - 36px) / 4);
}

.shopping-tire-list .theme-section .product-not-found {
    width: 100%;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 1px solid #d9dbdc;
}



.shopping-tire-list .tire-list-section {
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 80px;
}

.tire-list-filter-position-anchor {
    height: 0;
    position: relative;
}

.shopping-tire-list .tire-list-section .tire-list-filter {
    height: auto;
    overflow: visible;
    background: #fff;
    position: sticky;
    top: 80px;
    z-index: 701;
}
/* 20240223 start */
.shopping-tire-list:has(.front-rear-tab) .tire-list-section .tire-list-filter {
    top: 130px;
}
/* 20240223 end */

.shopping-tire-list .tire-list-section .tire-list-filter.stuck:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    top: -1px;
    background: #fff;
}

.shopping-tire-list .tire-list-section .tire-list-filter.stuck:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: -1px;
    border-bottom: 1px solid #d9dbdc;
}

.shopping-tire-list .tire-list-section .tire-list-filter .dp-flex {
    width: 100%;
    height: auto;
    padding: 8px 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    position: relative;
}


.shopping-tire-list .tire-list-section .tire-list-filter::-webkit-scrollbar { display: none;}


.shopping-tire-list .tire-list-section .tire-list-filter .result {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: #fff;
    z-index: 2;
}

.shopping-tire-list .tire-list-section .tire-list-filter .result .result-txt {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: #fe6a2b;
}

.shopping-tire-list .tire-list-section .tire-list-filter .filter-reset-btn { white-space: nowrap;}

.shopping-tire-list .tire-list-section .tire-list-filter .tire-list-filter-swiper {
    flex: 1 0 0;
    min-width: 0;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    position: absolute;
    padding-left: 180px;
    padding-right: 160px;
    pointer-events: none;
}

.shopping-tire-list .tire-list-section .tire-list-filter .tire-list-filter-swiper .swiper-slide {
    width: auto;
    position: relative;
}



.shopping-tire-list .tire-list-section .tire-list-filter .filter-btn {
    flex: none;
    color: #5b6068;
    white-space: nowrap;
    padding-right: 12px;
    pointer-events: all;
}
.shopping-tire-list .tire-list-section .tire-list-filter .filter-btn.on {
    border-color: #fe6a2b;
    color: #fe6a2b;
    font-weight: 500;
}

.shopping-tire-list .tire-list-section .tire-list-func {
    width: 100%;
    height: auto;
    position: relative;
    padding: 12px 12px 12px 0;
    border-top: 8px solid #f2f2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    
}

.shopping-tire-list .tire-list-section .tire-list-func .compare-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.shopping-tire-list .tire-list-section .tire-list-func .compare-item .toggle-switch {
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    padding-right: 12px;
}

.shopping-tire-list .tire-list-section .tire-list-func .compare-item .toggle-switch span { font-size: 14px; margin-left: 8px; }

.shopping-tire-list .tire-list-section .tire-list-func .sroter-item select.input-box {
    border-color: transparent;
    font-size: 14px;
    font-weight: 400;
    text-align:right;
    padding-left: 8px;
    cursor: pointer;
}

.shopping-tire-list .tire-list-section .tire-list-func .sroter-item .form-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.shopping-tire-list .tire-list-section .tire-list-func .sroter-item .form-control .input-group .tools {
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.shopping-tire-list .tire-list-section .tire-list {
    width: 100%;
    height: auto;
    position: relative;
    padding: 32px 0 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 64px 12px;
}

.shopping-tire-list .tire-list-section .tire-list .product-not-found {
    width: 100%;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 1px solid #d9dbdc;
}

.shopping-tire-list .tire-list-section .tire-list .tire-list-item {
    width: auto;
    min-width: 0;
    flex: 0 0 calc((100% - 36px) / 4);
}

.shopping-tire-list .tire-list-section .compare-trigger {
    width: 100%;
    height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: sticky;
    bottom: calc(0px + constant(safe-area-inset-bottom));
    bottom: calc(0px + env(safe-area-inset-bottom));
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%) translateZ(0);
    transition: all 0.3s;
    z-index: 10;
}

.shopping-tire-list .tire-list-section .compare-trigger.on {
    height: 72px;
    transform: translateY(0) translateZ(0);
    opacity: 1;
    pointer-events: all;
}


/* 20240425 start */
:is(.tire-list-filter, .list-filter, .store-filter) .filter-popup {
    width: 0;
    height: auto;
    overflow: visible;
    position: relative;
    margin-top: 20px;
    margin-bottom: 12px;
    left: 50%;
    opacity: 0;
    transition: all 0.3s;
    transform: translateY(-20px) translateZ(0) scale(1);
    transform-origin: 50% -16px;
    pointer-events: none;
}

:is(.tire-list-filter, .list-filter, .store-filter) .swiper-slide.open .filter-popup {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0) translateZ(0) scale(1);
}

:is(.tire-list-filter, .list-filter, .store-filter) .filter-popup:after {
    content: '';
    display: block;
    width: 24px;
    height: 18px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy45LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAxOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMTg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KCS5zdDF7ZmlsbDojRDlEQkRDO30NCjwvc3R5bGU+DQo8Zz4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMC41LDE4bDktMTRjMS4yLTEuOCwzLjktMS44LDUuMSwwbDksMTQiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjMuMywxOC43TDE0LjEsNC4yQzEzLjYsMy41LDEyLjksMywxMiwzcy0xLjYsMC40LTIuMSwxLjJMMC43LDE4LjdsLTAuOC0wLjVMOS4xLDMuN2MwLjYtMSwxLjctMS42LDIuOS0xLjYNCgkJczIuMywwLjYsMi45LDEuNmw5LjIsMTQuNUwyMy4zLDE4Ljd6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==");
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet {
    width: 360px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    background: linear-gradient(#fff 12px, rgba(255,255,255,0.9) 36px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 4px;
    transform: translateX(-50%) translateY(0) translateZ(0);
    border: 1px solid #d9dbdc;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header {
    flex: none;
    width: 100%;
    padding: 32px 20px 16px;
    position: relative;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header:before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #D9DBDC;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header:after {
    content: '';
    display: block;
    width: auto;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    border-top: 1px solid #d9dbdc;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-action {
    flex: none;
    width: 100%;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    position: relative;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-action:after {
    content: '';
    display: block;
    width: auto;
    height: 0;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    border-top: 1px solid #d9dbdc;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    max-height: 400px;
    min-height: 132px;
    padding: 24px;
    overflow: auto;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header h4 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    pointer-events: none;
    user-select: none;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header h4 + h4 {
    border-top: 1px solid #d9dbdc;
    margin-top: 16px;
    padding-top: 24px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header h4 > span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 20px;
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    margin: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header h4 .front-rear-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 2px;
    background: #5B6068;
    color: #fff;
    margin-left: auto;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-header h4 .front-rear-badge.primary { background: #fe6a2b; }


:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-filter] .sheet-header h4 { gap: 0;}
:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-filter] .sheet-header h4 > span + span:before {
    content: "\e917";
    font-family: 'LineIcons';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    vertical-align: middle;
    margin: 0 2px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-filter] .sheet-body .local-sorter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-filter] .sheet-body .local-sorter .sort-btn {
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 400;
    position: relative;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-filter] .sheet-body .local-sorter .sort-btn + .sort-btn:before {
    content: '';
    display: inline-flex;
    width: 0;
    height: 16px;
    border-left: 1px solid #D9DBDC;
    pointer-events: none;
    margin: 0 12px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-filter] .sheet-body .local-sorter .sort-btn:hover { color: #fe6a2b; }

:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-filter] .sheet-body .local-sorter .sort-btn.on {
    font-weight: 500;
    color: #fe6a2b;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-2,
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-3,
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-4,
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-5,
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-6,
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-free {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 8px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-2 > [class*='-item'] {
    flex: 0 0 calc((100% - 8px) / 2);
    min-width: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-3 > [class*='-item'] {
    flex: 0 0 calc((100% - 16px) / 3);
    min-width: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-4 > [class*='-item'] {
    flex: 0 0 calc((100% - 24px) / 4);
    min-width: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-5 > [class*='-item'] {
    flex: 0 0 calc((100% - 32px) / 5);
    min-width: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.col-6 > [class*='-item'] {
    flex: 0 0 calc((100% - 42px) / 6);
    min-width: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group .labelling { border-radius: inherit; }

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group .btn-item {
    padding: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group .check-item .label-txt {
    font-size: 14px;
    margin-left: 4px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group .radio-item .label-txt {
    font-size: 14px;
    margin-left: 4px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-order] { display: none; }
:is(.tire-list-filter, .list-filter, .store-filter) .sheet[data-order].on { display: flex; }

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .order-quantity {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .order-quantity .radio-item.btn-type { flex: 1 1 0; }
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .order-quantity .radio-item.btn-type .labelling { width: 100%; border-color: #2a3138; }
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .order-quantity .radio-item.btn-type input:checked ~ .labelling { border-color: transparent; }
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .order-quantity .radio-item.btn-type input:disabled ~ .labelling { border-color: #d9dbdc; }


:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item {
    flex: 1 0 0;
    min-width: 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item:disabled {
    background: #f2f2f7;
    color: #a0a6af !important;
    border-color: transparent;
    opacity: 1;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item.on {
    border-color: #fe6a2b;
    color: #fe6a2b;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item .label-txt {
    transform-origin: 0 0;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item[data-selected-size] .label-txt {
    position: absolute;
    top: 4px;
    left: 4px;
    transform: translateX(0) translateY(0) translateZ(0) scale(0.7);
    transition: all 0.2s;
    
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item[data-selected-size=""] .label-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transition: all 0s;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item[data-selected-size=""].on .label-txt {
    color: #fe6a2b;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item:not([data-selected-size=""]).on { border-color: #d9dbdc; color: #2a3138; }

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select-control .btn-item[data-selected-size]:after {
    content: attr(data-selected-size);
    font-size: 18px;
    font-weight: 700;
    color: #fe6a2b;
}



:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    gap: 20px;
    padding: 0 20px;
    margin-left: -20px;
    margin-right: -20px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select::-webkit-scrollbar { display: none;}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select .filter-group {
    flex: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select .filter-group .btn-item { background: transparent; }
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select .filter-group .btn-item.on { color: #fe6a2b; }
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .size-select .filter-group .btn-item.on:after {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background: #fe6a2b;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}
/* 20240425 end */


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=tire-compare----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.modal-item[data-ref="compare-modal"]  .modal-pannel,
.modal-item[data-ref="compare-ptrn-modal"]  .modal-pannel { width: 1080px; height: calc(100% - 40px); max-height: 828px; }
.modal-item[data-ref="compare-modal"]  .modal-pannel .modal-header,
.modal-item[data-ref="compare-ptrn-modal"]  .modal-pannel .modal-header { z-index: 2; }
.modal-item[data-ref="compare-modal"]  .modal-pannel .modal-body,
.modal-item[data-ref="compare-ptrn-modal"]  .modal-pannel .modal-body { height: 100%;}
.modal-item[data-ref="compare-modal"]  .modal-pannel .modal-body .modal-scroller,
.modal-item[data-ref="compare-ptrn-modal"]  .modal-pannel .modal-body .modal-scroller { height: 100%; overflow: hidden; }
.modal-item[data-ref="compare-modal"]  .modal-pannel .modal-body .modal-scroller > .container,
.modal-item[data-ref="compare-ptrn-modal"]  .modal-pannel .modal-body .modal-scroller > .container { height: 100%; }
.modal-item[data-ref="compare-modal"]  .modal-pannel .modal-action,
.modal-item[data-ref="compare-ptrn-modal"]  .modal-pannel .modal-action { z-index: 3; }

.compare-product {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    --compare-item-width: 20%;
}

.compare-product-caution {
    width: 100%;
    height: 84px;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 16px 20px;
    box-shadow: 0 -1px 0 #d9dbdc;
    z-index: 2;
}

.compare-product-caution .msg-box {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9fa;
    border-radius: 4px;
    text-align: center;
}

.compare-product-caution .msg-box p {
    font-size: 12px;
    color: #5b6068;
    line-height: 16px;
}

.compare-product .compare-item-wrap {
    --compare-item-width: inherit;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    font-size: 0;
}

.compare-product .compare-item {
    display: inline-flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    width: var(--compare-item-width);
    padding-bottom: 20px;
}

.compare-product.target-fix .compare-item:first-of-type {
    position: sticky;
    left: 0;
    z-index: 1;
}

.compare-product .compare-item .thumb-wrap {
    --compare-item-width: inherit;
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    display: block;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.compare-product.target-fix:after {
    --compare-item-width: inherit;
    content: '';
    display: block;
    width: 8px;
    height: 100%;
    position: fixed;
    top: 0;
    left: var(--compare-item-width);
    background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}

.compare-product .compare-item .thumb-wrap a {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px 20px 12px;
    -webkit-tap-highlight-color: transparent;
}

.compare-product .compare-item .thumb-wrap a:after {
    content: '';
    display: block;
    position: absolute;
    height: 0;
    left: 20px;
    right: 20px;
    bottom: 0;
    border-bottom: 1px solid #d9dbdc;
}

.compare-product .compare-item .thumb-wrap .thumb-area {
    width: 100%;
    height: 120px;
    position: relative;
    background: #F2F2F7;
    border-radius: 4px;
}

.compare-product .compare-item .thumb-wrap a:hover .thumb-area:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
}

.compare-product .compare-item .thumb-wrap .thumb-area .img-layer {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.compare-product .compare-item .thumb-wrap .thumb-area .img-layer img {
    width: auto;
    height: 85%;
    transform: translateY(4px);
}

.compare-product .compare-item .thumb-wrap .thumb-area .brand-layer {
    width: 100%;
    height: auto;
    padding-right: 6px;
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.compare-product .compare-item .thumb-wrap .thumb-area .brand-layer .brand-logo {
    width: auto;
    height: 12px;
}

.compare-product .compare-item .thumb-wrap .product-name {
    width: 100%;
    height: 32px;
    line-height: 16px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    margin-top: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
}

.compare-product .compare-item .info-wrap {
    --compare-item-width: inherit;
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 20px;
    margin: 0;
    text-align: center;
    background: #fff;
    display: block;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

.compare-product .compare-item .info-wrap[data-grade]:before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 48px);
    height: 24px;
    border-radius: 12px;
    background: #F2F2F7;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin: 0 auto -16px;
}

.compare-product .compare-item .info-wrap[data-grade="premium"]:before { content: '프리미엄'; background: #FE6A2B; }
.compare-product .compare-item .info-wrap[data-grade="standard"]:before { content: '스탠다드'; background: #FFA200; }
.compare-product .compare-item .info-wrap[data-grade="economy"]:before { content: '이코노미'; background: #C0C6CE; }

.compare-product .compare-item .info-wrap .basic-info {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.compare-product .compare-item .info-wrap .basic-info > div {
    display: block;
    width: 100%;
    height: auto;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}

.compare-product .compare-item .info-wrap .basic-info > div em {
    font-weight: 700;
}

.compare-product .compare-item .info-wrap .basic-info .price {
    font-size: 18px;
    font-weight: 500;
    color: #2a3138;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.compare-product .compare-item .info-wrap .basic-info .price .discount-rate { font-size: 14px; font-weight: 700; color: #fe6a2b; }

.compare-product.target-fix .compare-item .info-wrap .basic-info  .price span[data-price-difference]:after {
    flex: none;
    content: attr(data-price-difference);
    display: block;
    text-align: center;
    position: relative;
    width: 100%;
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #a0a6af;
    margin-top: 4px;
}

.compare-product.target-fix .compare-item .info-wrap .basic-info .price span[data-price-difference^="+"]:after { color: #FE6A2B; }
.compare-product.target-fix .compare-item .info-wrap .basic-info .price span[data-price-difference^="-"]:after { color: #008BEC; }

.compare-product .compare-item .info-wrap .basic-info .rating {
    display: block;
    width: 100%;
    height: auto;
    background: none;
    overflow: visible;
    line-height: 20px;
    color: #a0a6af;
}

.compare-product .compare-item .info-wrap .basic-info .rating em { color: #2a3138; }

.compare-product .compare-item .info-wrap .basic-info .warranty {
    min-height: 48px;
    line-height: 16px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.compare-product .compare-item .info-wrap .basic-info .warranty span {
    display: inline-flex;
    line-height: 16px;
    position: relative;
    font-size: 12px;
    vertical-align: middle;
    color: #2A3138;
}


.compare-product .compare-item .info-wrap .basic-info .warranty:empty:after {
    content: '없음';
    display: inline-flex;
    line-height: 16px;
    position: relative;
    font-size: 12px;
    vertical-align: middle;
    color: #A0A6AF;
}

.compare-product .compare-item .info-wrap .basic-info .warranty span:not(:last-of-type):after {
    content: ',\00a0';
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}


.compare-product .compare-item .info-wrap .evaluate-info {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.compare-product .compare-item .info-wrap .evaluate-info .total-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    line-height: 32px;
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    color: #A0A6AF;
    text-align: center;
    background: #F2F2F7;
    border-radius: 4px;
}

.compare-product .compare-item .info-wrap .basic-info + .evaluate-info .total-rating {
    border-bottom: 1px solid #d9dbdc;
    padding-bottom: 8px;
    background: none;
    border-radius: 0;
}

.compare-product .compare-item .info-wrap .evaluate-info .total-rating:not(:empty):before {
    content: '\e933';
    font-family: 'LineIcons';
    font-size: 10px;
    color: #FFA200;
    margin-right: 8px;
}

.compare-product .compare-item .info-wrap .evaluate-info .total-rating:empty:before {
    content: '리뷰 데이터 부족';
    font-size: 12px;
    font-weight: 500;
    color: #A0A6AF;
}


.compare-product .compare-item .info-wrap .evaluate-info .total-rating em {
     color: #2a3138;
     margin-right: 4px;
}

.compare-product .compare-item .info-wrap .evaluate-info .evaluate-item {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.compare-product .compare-item .info-wrap .evaluate-info .evaluate-item .rating {
    display: inline-block;
    width: 32px;
    height: auto;
    font-weight: 500;
    font-size: 16px;
    color: #FFA200;
    text-align: center;
    background: none;
}

.compare-product .compare-item .info-wrap .evaluate-info .evaluate-item .rating:empty:before {
    content: '-';
    font-weight: 500;
    color: #A0A6AF;
}

.compare-product .compare-item .info-wrap .evaluate-info .evaluate-item[data-grade*="A"] .grade { color: #00B3C5; }
.compare-product .compare-item .info-wrap .evaluate-info .evaluate-item[data-grade*="B"] .grade { color: #FFA200; }
.compare-product .compare-item .info-wrap .evaluate-info .evaluate-item[data-grade*="C"] .grade { color: #A0A6AF; }

.compare-product .compare-item .info-wrap .evaluate-info .evaluate-item .labelling {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    padding-left: 8px;
}


.compare-product .compare-item .info-wrap .performance-factor-info {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
    border-radius: 4px;
    background: #F9F9FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 0;
    gap: 12px;
}

.compare-product .compare-item .info-wrap .performance-factor-info li {
    width: 100%;
    height: auto;
    position: relative;
    padding: 4px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}

.compare-product .compare-item .info-wrap .performance-factor-info li .title,
.compare-product .compare-item .info-wrap .performance-factor-info li .value {
    line-height: 20px;
}

.compare-product .compare-item .info-wrap .performance-factor-info li .title { font-size: 12px; color: #2a3138; }
.compare-product .compare-item .info-wrap .performance-factor-info li .value { font-size: 14px; color: #5B6068; }



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=shopping-tire-detail & shopping-auto-service-detail-------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
:is(.shopping-tire-detail, .shopping-auto-service-detail) { --detail-page-guardrail-width: 960px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) * { --detail-page-guardrail-width: inherit; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .guardrail { width: var(--detail-page-guardrail-width); }
:is(.shopping-tire-detail, .shopping-auto-service-detail) ~ #layerScarcePopup { z-index: 2100; }
#layerScarcePopup.detail-review-photo-popup { z-index: 2100 !important; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item-row {
    width: 100%;
    height: auto;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item[data-scroll-tracking] {
    width: var(--detail-page-guardrail-width);
    padding: 0;
    transition: all 0.2s;
    margin: 0 auto;
    position: relative;
    top: auto;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item[data-scroll-tracking]:before { display: none;}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item[data-scroll-tracking].hide { transform: translateY(-100%) translateZ(0); }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item[data-scroll-tracking] .indicator { display: none !important; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item[data-scroll-tracking] a {
    color: #2a3138;
    padding: 0;
    line-height: 58px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item[data-scroll-tracking] a.on { color: #fe6a2b; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .tab-item[data-scroll-tracking] a.on:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #fe6a2b;
    position: absolute;
    left: 0;
    bottom: 0;
}


#productKeyInfo {
    scroll-margin-top: 58px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section {
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 20px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .base-layer {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0;
    background: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 100px;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area {
    flex: 1 0 0;
    min-width: 0;
    height: auto;
    position: relative;
    position: sticky;
    top: 58px;
}

:is(.shopping-auto-service-detail) .hero-section .thumb-area { top: 72px;}

:is(.shopping-tire-detail) .hero-section .thumb-area .brand-logo {
    display: block;
    width: auto;
    height: 32px;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

:is(.shopping-auto-service-detail) .hero-section .thumb-area .brand-logo {
    display: block;
    width: auto;
    height: 40px;
    position: absolute;
    top: 0;
    right: 30px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .img-layer {
    width: 100%;
    height: 520px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
}

:is(.shopping-auto-service-detail) .hero-section .thumb-area .img-layer { height: 420px; }

:is(.shopping-tire-detail) .hero-section .thumb-area .img-layer img {
    width: auto;
    height: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    margin-top: 16px;
}

:is(.shopping-auto-service-detail) .hero-section .thumb-area .img-layer img {
    width: auto;
    height: 360px;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .badge-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: inherit;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .video-control-btn {
    position: absolute;
    top: calc(520px - 16px);
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: #000;
}

:is(.shopping-auto-service-detail) .hero-section .thumb-area .video-control-btn { top: calc(420px - 0px); }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .video-control-btn.hide {
    visibility: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .video-control-btn .line-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .video-control-btn .blind {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    font-size: 0;
    pointer-events: none;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .soldout-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 520px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.6);
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .thumb-area .soldout-layer p {
    width: auto;
    height: auto;
    padding: 12px 24px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    border-radius: 22px;
    margin-top: 16px;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 16px 0 0;
    border-top: 1px dashed #d9dbdc;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap:after { display: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap .circle-badge { flex: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap .oe-wrap {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap .oe-wrap .oe-info {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: 48px;
    background: #F2F2F7;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
    padding: 0 12px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap .oe-wrap .oe-info .txt-area {
    flex: 0 1 auto;
    min-width: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap .oe-wrap .oe-info .txt-area p {
    font-size: 11px;
    line-height: 14px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap .oe-wrap .oe-info .txt-area .model {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 160px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .badges-wrap .oe-wrap .oe-info .maker-bi {
    flex: none;
    width: 40px;
    height: 40px;
}




:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area {
    flex: none;
    width: 440px;
    min-height: 520px;
}

:is(.shopping-auto-service-detail) .hero-section .info-area { min-height: 420px; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .title {
    width: 100%;
    height: auto;
    font-size: 0;
    vertical-align: middle;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area :is(.tire-name, .product-name) {
    display: inline;
    line-height: 32px;
    font-size: 24px;
    font-weight: 500;
    vertical-align: middle;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area :is(.tire-name, .product-name).new:before {
    content: 'NEW';
    display: inline-block;
    width: auto;
    height: 24px;
    line-height: 24px;
    padding: 0 6px;
    border-radius: 2px;
    background: #D03333;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    margin-right: 8px;
    vertical-align: middle;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .tire-size-position {
    display: inline-block;
    line-height: 32px;
    font-size: 0;
    vertical-align: middle;
    white-space: nowrap;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .tire-size {
    display: inline-block;
    line-height: 28px;
    font-size: 20px;
    vertical-align: middle;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .front-rear-badge {
    display: inline-block;
    padding: 0 16px;
    margin-left: 8px;
    line-height: 26px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #2a3138;
    border-radius: 4px;
    vertical-align: middle;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .meta-wrap {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 24px;
    margin-top: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .property-wrap {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .property-wrap > span {
    flex: 0 0 auto;
    background: #5b6068;
    border-radius: 2px;
    line-height: 24px;
    font-size: 12px;
    font-weight: 500;
    padding: 0 12px;
    color: #fff;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .rating-wrap {
    flex: none;
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .rating-wrap .rating {
    display: inline-block;
    width: 60px;
    height: 10px;
    background: url('../images/common/rating-off.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
    line-height: initial;
    font-size: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .rating-wrap .rating span {
    display: inline-block;
    width: 100%;
    height: 10px;
    background: url('../images/common/rating-on.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .rating-wrap .rating-point {
    margin-left: 4px;
    font-weight: 500;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .info-area .rating-wrap .review-count {
    margin-left: 8px;
    font-weight: 500;
    color: #A0A6AF;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 900;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on { pointer-events: all; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .dim {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(0);
    opacity: 0;
    transition: all 0.4s;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on .dim {
    opacity: 1;
    backdrop-filter: blur(6px);
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .video-control-btn {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    left: calc(50% + 480px);
    top: calc(50% - 270px);
    transform: translateX(-100%) translateY(0) translateZ(0);
    -webkit-tap-highlight-color: transparent;
    color: #2a3138;
    transition: opacity 0s, transform 0s;
    opacity: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on .video-control-btn {
    opacity: 1;
    transform: translateX(-100%) translateY(-100%) translateZ(0);
    transition: opacity 0.2s 0.4s, transform 0.2s 0.4s;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .video-control-btn:hover { background: rgba(0,0,0,0.1);}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .video-holder {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    overflow: hidden;
    background: #000;
    visibility: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on .video-holder { visibility: visible; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .video-holder.transition {
    transition: all 0.4s;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on .video-holder.transition {
    opacity: 1;
    top: 50%;
    left: 50%;
    transition: all 0.4s;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .video-holder #thumbYTPlayer,
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .video-holder #thumbVideoPlayer {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    opacity: 0;
    transition: all 0.4s 0.4s;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on .video-holder #thumbYTPlayer,
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on .video-holder #thumbVideoPlayer {
    opacity: 1;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer .video-holder .video-control-btn { pointer-events: none; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .video-layer.on .video-holder .video-control-btn { pointer-events: all; }






:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info {
    padding: 0;
    margin-top: 48px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .col {
    flex: 1 1 0;
    min-width: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type h4 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .col.disabled h4 {
    color: #C0C6CE;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling {
    width: 100%;
    height: 80px;
    position: relative;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #D9DBDC;
    padding: 8px 16px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    user-select: none;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling * { user-select: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling:before,
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling:after {
    content: '';
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    background: #fff;
    position: absolute;
    
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling:before {
    width: 20px;
    height: 20px;
    border: 1px solid #d9dbdc;
    top: 12px;
    left: 12px;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling:after {
    width: 8px;
    height: 8px;
    top: 18px;
    left: 18px;
    background: #fe6a2b;
    transform: translateZ(0) scale(0);
    transition: all 0.2s;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .col.disabled .labelling:before { background: #f2f2f7; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .col.disabled .labelling,
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .col.disabled .labelling * { color: #C0C6CE !important; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item input:checked ~  .labelling:after { transform: translateZ(0) scale(1); }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item input:checked ~ .labelling {
    background: #FE6A2B;
    border-color: transparent;
    color: #fff;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling .upper-area,
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling .lower-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling .upper-area {
    font-size: 16px;
    font-weight: 500;
    height: 32px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling .upper-area em { font-size: 20px; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling .lower-area {
    font-size: 14px;
    height: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item input:checked ~ .labelling .upper-area { color: #fff; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item input:checked ~ .labelling .lower-area { color: #fff; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling .accent { color: #fe6a2b; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item input:checked ~ .labelling .accent { color: inherit; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item .labelling .txt-throughline { color: #a0a6af; font-size: 16px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .purchase-type-item input:checked ~ .labelling .txt-throughline { color: inherit; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .purchase-type .smartpay-na {
    width: 100%;
    height: 80px;
    background: #F9F9FA;
    border-radius: 4px;
    color: #a0a6af;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit {
    margin-top: 16px;
}

/* [task]UX개선(가격/쿠폰) start */
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-item { overflow: visible; }
:is(.shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-item { margin-top: 8px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont { overflow: visible; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit[data-purchase-type="common"] .purchase-type-common { display: block;}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit[data-purchase-type="common"] .purchase-type-smartpay { display: none;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit[data-purchase-type="smartpay"] .purchase-type-smartpay { display: block;}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit[data-purchase-type="smartpay"] .purchase-type-common { display: none;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .btn-coupon-modal-open { flex: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .btn-coupon-modal-open.btn-gray {
    background: #a0a6af;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn {
    padding-right: 28px;
    user-select: none;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .line-icons.chev-down { right: 0;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .benefit-summary {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 16px;
}

:is(.shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .benefit-summary {
    display: inline-flex;
    width: auto;
    justify-content: flex-start;
    gap: 8px;
}

:is(.shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .benefit-summary ~ .line-icons {
    right: auto;
    margin-left: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .benefit-summary .discount-rate { flex: none; font-weight: 500; font-size: 14px; color: #fe6a2b; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .benefit-summary del { flex: none; font-size: 14px; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .benefit-summary .maximum-benefit-price { flex: none; font-size: 20px; color: #FF6D00; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-btn .benefit-summary .maximum-benefit-price em { font-size: 24px; font-weight: 500;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont {
    background: #F9F9FA;
    padding: 20px;
    margin-top: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row:not(:first-of-type) {
    margin-top: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row .col {
    color: #2a3138;
    font-size: 14px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row .col .line-icons.check {
    color: #00B3C5;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row .col:has(.tip-msg) { flex-wrap: wrap; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row .col .tip-msg {
    flex: 1 0 100%;
    min-width: 0;
    line-height: 16px;
    font-size: 12px;
    color: #5b6068;
    margin-top: -4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row.total {
    border-top: 1px dashed #d9dbdc;
    padding-top: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .price-info .maximum-benefit .accordion-cont .benefit-detail-row.total .col:nth-of-type(2) {
    font-size: 16px;
    color: #fe6a2b;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .btn-item.bg-neutral2 { background: #5b6068; }


:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .benefit-summary {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .benefit-summary .left-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 400;
    font-size: 16px;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .benefit-summary .right-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .benefit-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    border-top: 1px dashed #d9dbdc;
    padding: 12px 0;
    margin-top: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .benefit-detail p {
    font-size: 12px;
    line-height: 20px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .title {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 400;
    font-size: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .title em { font-weight: 500; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .benefit-summary .maximum-benefit-price { font-size: 20px; color: #FF6D00; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section:has(.waiting-item) .maximum-benefit .benefit-summary .maximum-benefit-price { color: #2a3138;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .maximum-benefit .benefit-summary .maximum-benefit-price em { font-size: 24px; font-weight: 500;}




.modal-item[data-ref="coupon-download-modal"] .modal-pannel,
.modal-item[data-ref="coupon-download-modal"] .modal-pannel .modal-body,
.modal-item[data-ref="coupon-download-modal"] .modal-pannel .modal-body .modal-scroller { overflow: visible; }

.coupon-download-modal-cont {
    padding: 24px 24px 32px;
}

.coupon-download-modal-cont .btn-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-100%);
}

.coupon-download-modal-cont .btn-modal-close .label-txt {
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateX(-100%) translateY(-50%);
    margin: 0;
}

.coupon-download-modal-cont .btn-modal-close .line-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
}

.coupon-download-modal-cont .coupon-list {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
    margin-top: 24px;
    padding: 0 24px;
}

.coupon-download-modal-cont .coupon-list > li {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.coupon-download-modal-cont .coupon-list > li:not(:first-of-type) { margin-top: 16px; }

.coupon-download-modal-cont .coupon-list .txt-area {
    flex: 1 0 0;
    min-width: 0;
}

.coupon-download-modal-cont .coupon-list .txt-area .coupon-name {
    font-weight: 400;
    line-height: 24px;
    font-size: 16px;
}

.coupon-download-modal-cont .coupon-list .txt-area .coupon-status {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #5b6068;
}

.coupon-download-modal-cont .coupon-list .status-download-done .txt-area .coupon-status {
    color: #00B3C5;
    font-weight: 400;
}

.coupon-download-modal-cont .coupon-list .btn-area {
    flex: none;
}

.coupon-download-modal-cont .coupon-list .btn-coupon {
    appearance: none;
    width: 170px;
    height: 80px;
    position: relative;
    border: 1px solid transparent;
    background: #2a3138;
    border-radius: 2px;
    padding: 10px 0;
    padding-right: 56px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.coupon-download-modal-cont .coupon-list .btn-coupon:hover {
    background: #373c41;
}


.coupon-download-modal-cont .coupon-list .btn-coupon:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -0.5px;
    top: 50%;
    transform: translateX(50%) translateY(-50%);
}

.coupon-download-modal-cont .coupon-list .btn-coupon:before {
    content: "\e91e";
    font-family: 'LineIcons';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #fff;
}

.coupon-download-modal-cont .coupon-list .status-download-done .btn-coupon {
    border: 1px solid #d9dbdc;
    background: #f9f9fa;
    pointer-events: none;
}

.coupon-download-modal-cont .coupon-list .status-download-done .btn-coupon:before {
    content: "\e911";
    color: #00B3C5;
}

.coupon-download-modal-cont .coupon-list .status-download-done .btn-coupon:after {
    border: 1px solid transparent;
    border-left: 1px solid #d9dbdc;
    border-top: 1px solid #d9dbdc;
    transform: translateX(50%) translateY(-50%) rotate(-45deg);
}

.coupon-download-modal-cont .coupon-list .status-download-done .btn-coupon .labelling {
    color: #C0C6CE;
}


.coupon-download-modal-cont .coupon-list .btn-coupon .labelling {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.coupon-download-modal-cont .coupon-list .btn-coupon .labelling .label-txt {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.5px;
}

.coupon-download-modal-cont .coupon-list .btn-coupon .labelling .label-txt em {
    font-size: 40px;
    font-weight: 400;
    line-height: 100%;
}

.coupon-download-modal-cont .coupon-list:has(~ .coupon-apply-price-info) {
    margin-bottom: 24px;
}

.coupon-download-modal-cont .coupon-apply-price-info {
    width: 100%;
    height: auto;
    position: relative;
    padding: 20px 60px;
    background: #F9F9FA;
    border-top: 1px dashed #d9dbdc;
}

.coupon-download-modal-cont .coupon-apply-price-info .row {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.coupon-download-modal-cont .coupon-apply-price-info .row:not(:first-of-type) { margin-top: 8px; }

.coupon-download-modal-cont .coupon-apply-price-info .row .price-area {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.coupon-download-modal-cont .coupon-apply-price-info .row .price-area { font-size: 14px; font-weight: 400; line-height: 24px; }

.coupon-download-modal-cont .coupon-apply-price-info .row .title-area { display: block; font-size: 0; line-height: 24px; word-break: break-all; }
.coupon-download-modal-cont .coupon-apply-price-info .row .title-area > span:not(.line-icons) {
    font-weight: 400;
    font-size: 14px;
    vertical-align: middle;
}

.coupon-download-modal-cont .coupon-apply-price-info .row .title-area .line-icons.check-small {
    flex: none;
    color: #00B3C5;
}

.coupon-download-modal-cont .coupon-apply-price-info .row.final-purchase {
    border-top: 1px solid #d9dbdc;
    padding-top: 8px;
    margin-top: 12px;
}
.coupon-download-modal-cont .coupon-apply-price-info .row.final-purchase .title-area { font-size: 14px; font-weight: 500; }
.coupon-download-modal-cont .coupon-apply-price-info .row.final-purchase .price-area { font-size: 18px; font-weight: 500; }
/* [task]UX개선(가격/쿠폰) end */





:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order {
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 48px;
}

:is(.shopping-auto-service-detail) .hero-section .order { padding-top: 0; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order[data-purchase-type="common"] .order-type[data-order="common"] { display: flex; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order[data-purchase-type="common"] .order-type[data-order="smartpay"] { display: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order[data-purchase-type="smartpay"] .order-type[data-order="common"] { display: none; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order[data-purchase-type="smartpay"] .order-type[data-order="smartpay"] { display: flex; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order[data-purchase-type="smartpay"] { padding-top: 24px;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting {
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 24px;
    border-top: 1px dashed #5b6068;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    user-select: none;
    padding: 16px;
    padding-right: 12px;
    border: 1px solid transparent;
    border-radius: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item:first-of-type {
    border-color: #fe6a2b;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item:last-of-type {
    background: #f2f2f7;
    margin-top: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item * { user-select: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item > span {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 24px;
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    margin: 0;
    gap: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item > span.tire-name {
    font-weight: 500;
    margin-left: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item > span.tire-size {
    flex: none;
    margin-right: 12px;
    color: #a0a6af;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item .front-rear-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 28px;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
    padding: 0 16px;
    border-radius: 4px;
    background: #fff;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item .quantity-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 28px;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
    padding: 0 16px;
    border-radius: 4px;
    background: #fe6a2b;
    color: #fff;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item .current-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 24px;
    line-height: 16px;
    font-size: 11px;
    font-weight: 500;
    padding: 0 12px;
    border-radius: 12px;
    background: #5b6068;
    color: #fff;
    margin-right: 0;
    margin-left: auto;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-waiting .waiting-item .remove-btn {
    border: none;
    background: transparent;
    margin-right: 4px;
    margin-left: auto;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type {
    width: 100%;
    height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option {
    width: 100%;
    height: auto;
    position: relative;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-action {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-action .btn-item {
    flex: 1 0 0;
    min-width: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-quantity {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-quantity .radio-item.btn-type { flex: 1 1 0; cursor: default; user-select: none; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-quantity .radio-item.btn-type .labelling {
    width: 100%;
    border-color: #2a3138;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-quantity .radio-item.btn-type input:checked ~ .labelling { border-color: transparent; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-quantity .radio-item.btn-type input:disabled ~ .labelling { border-color: #d9dbdc; cursor: default; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-quantity .radio-item.btn-type .labelling .label-txt { font-size: 16px; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .smartpay-installment-month {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .smartpay-installment-month .radio-item.btn-type {
    min-height: 28px;
    border-radius: 2px;
    flex: none;
    user-select: none;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .smartpay-installment-month .radio-item.btn-type .labelling {
    width: 100%;
    border-color: #fe6a2b;
    color: #fe6a2b;
    line-height: 30px;
    padding: 0 28px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .smartpay-installment-month .radio-item.btn-type input:checked ~ .labelling {
    color: #fff;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .smartpay-installment-month .radio-item.btn-type .labelling .label-txt {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .smartpay-installment-month .radio-item.btn-type input:checked ~ .labelling .label-txt:after {
    content: "\e912";
    font-family: 'LineIcons';
    font-size: 24px;
    line-height: 24px;
    position: absolute;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 24px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row:not(:first-of-type) { margin-top: 16px; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row .title-area,
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row .price-area {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row .title-area { font-size: 16px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row .price-area { font-size: 16px; font-weight: 500; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row.final-purchase .title-area { font-size: 18px; font-weight: 500; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row.final-purchase .price-area { font-size: 20px; font-weight: 400; line-height: 40px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row.final-purchase .price-area em {  font-size: 30px; font-weight: 500; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-waiting ~ .order-option .order-price-info .row.final-purchase .price-area { color: #fe6a2b;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row.coupon-tip {
    padding-top: 16px;
    border-top: 1px dashed #d9dbdc;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .order-price-info .row.coupon-tip .title-area { color: #008BEC; font-weight: 500; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item {
    flex: 1 0 0;
    min-width: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item:disabled {
    background: #f2f2f7;
    color: #a0a6af !important;
    border-color: transparent;
    opacity: 1;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item.on {
    border-color: #fe6a2b;
    color: #fe6a2b;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item .label-txt {
    transform-origin: 0 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item[data-selected-size] .label-txt {
    position: absolute;
    top: 4px;
    left: 4px;
    transform: translateX(0) translateY(0) translateZ(0) scale(0.7);
    transition: all 0.2s;
    
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item[data-selected-size=""] .label-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transition: all 0s;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item[data-selected-size=""].on .label-txt {
    color: #fe6a2b;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item:not([data-selected-size=""]).on { border-color: #d9dbdc; color: #2a3138; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .order-type .order-option .size-select-control .btn-item[data-selected-size]:after {
    content: attr(data-selected-size);
    font-size: 18px;
    font-weight: 700;
    color: #fe6a2b;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .hero-section .order .soldout-btn-wrap {
    width: 100%;
    height: auto;
    padding: 48px 44px 0;
}



:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section {
    margin-top: 48px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section .most-mounted {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section .most-mounted .label {
    flex: none;
    line-height: 24px;
    font-size: 14px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section .most-mounted .models {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section .most-mounted .models > span {
    display: inline-block;
    width: auto;
    line-height: 24px;
    background: #F2F2F7;
    border-radius: 12px;
    color: #5b6068;
    font-size: 12px;
    font-weight: 500;
    padding: 0 12px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section .unspecified-price-info {
    width: 100%;
    padding: 24px;
    background: #f9f9fa;
    border-radius: 4px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section .unspecified-price-info p {
    color: #fe6a2b;
    font-size: 12px;
    line-height: 20px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .unspecified-price-section .btn-wrap {
    width: 100%;
    height: auto;
    padding: 48px 44px 0;
}




:is(.shopping-tire-detail, .shopping-auto-service-detail) .promo-section {
    padding: 24px 0 16px;
    overflow: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .promo-section:before {
    content: '';
    display: block;
    width: auto;
    height: 0;
    border-top: 1px solid #d9dbdc;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .promo-section .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 20px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .promo-section .header h4 { line-height: 24px; font-size: 16px; font-weight: 500; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .promo-section .related-promo-banner-swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0;
    border-radius: 4px;
    margin-top: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .promo-section .related-promo-banner-swiper .swiper-slide {
    border-radius: 4px;
    overflow: hidden;
}



:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section {
    padding: 24px 0 16px;
    overflow: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section:before {
    content: '';
    display: block;
    width: auto;
    height: 0;
    border-top: 1px solid #d9dbdc;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .promo-section + .warranty-section:before { display: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 20px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .header h4 { line-height: 24px; font-size: 16px; font-weight: 500; }

/* 20240219 update#3 start */
:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .applicated-warranty {
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 0;
    border-radius: 4px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .applicated-warranty::-webkit-scrollbar { display: none;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .applicated-warranty .warranty-chip {
    flex: 0 0 calc((100% - 32px) / 5);
    width: auto;
    height: 80px;
    line-height: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    border: 1px solid #d9dbdc;
    color: #2a3138;
    padding: 0 !important;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .applicated-warranty .warranty-chip:hover { background: rgba(42,49,56,0.04);}
/* 20240219 update#3 end */

:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .applicated-warranty .warranty-chip .dw-bi { width: 40px; height: 40px; user-select: none; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .warranty-section .applicated-warranty .warranty-chip .label-txt {
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: flex-start;
    user-select: none;
}

.warranty-info-modal-cont img {
    display: block;
    width: 100%;
}



:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section {
    border-top: 8px solid #ECEEEF;
    padding: 24px 0px 40px;
    margin-top: 64px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .evaluate-wrap {
    width: 100%;
    height: auto;
    position: relative;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .evaluate-wrap h4 {
    line-height: 24px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .performance-evaluate {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .performance-evaluate .evaluate-item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border-radius: 4px;
    background: #F2F2F7;
    padding: 0 16px 0 20px;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .performance-evaluate .evaluate-item .grade {
    flex: none;
    display: inline-block;
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    border-radius: 50%;
    background: #fff;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .performance-evaluate .evaluate-item[data-grade*="A"] .grade { color: #00B3C5; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .performance-evaluate .evaluate-item[data-grade*="B"] .grade { color: #FFA200; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .performance-evaluate .evaluate-item[data-grade*="C"] .grade { color: #A0A6AF; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .performance-evaluate .evaluate-item .labelling {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .etc-evaluate {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .etc-evaluate .etc-evaluate-item {
    flex: 0 0 calc((100% - 24px) / 2);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .etc-evaluate .bar {
    flex: none;
    width: 200px;
    height: 24px;
    border-radius: 2px;
    background: #D9DBDC;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .etc-evaluate .bar .fill {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #FFA300 0%, #FF6D00 100%);
    transform-origin: 0% 50%;
    border-radius: 2px 0 0 2px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .etc-evaluate .score {
    flex: none;
    width: 52px;
    text-align: right;
    font-size: 20px;
    line-height: 24px;
    position: relative;
    letter-spacing: -0.5px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .evaluate-section .etc-evaluate .label-txt {
    flex: 1 0 0;
    min-width: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
    padding-left: 8px;
}





:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section {
    border-top: 8px solid #ECEEEF;
    padding: 24px 0px 40px;
    margin-top: 40px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .compare-wrap {
    width: 100%;
    height: auto;
    position: relative;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .compare-wrap h4 {
    line-height: 24px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product {
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 4px;
    background: #F9F9FA;
    padding: 40px 80px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .vs-item {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    text-align: center;
    gap: 12px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .vs-item .thumb-area {
    width: auto;
    height: auto;
    position: relative;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .vs-item:after {
    content: 'VS';
    font-size: 30px;
    font-weight: 500;
    line-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .vs-item .thumb-area .img-layer {
    width: 200px;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .vs-item .thumb-area .img-layer img {
    width: 100%;
    height: auto;
    transform: scale(0.8);
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .vs-item .thumb-area .brand-layer {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .vs-item .thumb-area .brand-layer .brand-logo {
    width: auto;
    height: 20px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .info-area {
    flex: 1 0 0;
    min-width: 0;
    min-height: 64px;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .info-area .title { font-size: 16px;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .info-area .product-name { word-break: break-all; font-weight: 700; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .vs-product .info-area .btn-item { white-space: nowrap;}




:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product {
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    overflow: auto;
    scroll-behavior: smooth;
    padding-top: 8px;
}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product::-webkit-scrollbar { display: none;}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item { flex: none; width: 210px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item .info-area .product-name { font-size: 12px; padding-right: 8px; margin-top: 8px;}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item .info-area .product-price { margin-top: 8px;}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item .info-area .product-price .discount-rate { font-size: 12px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item .info-area .product-price .price { font-size: 14px; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item .thumb-area { height: 180px;}
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item .thumb-area .img-layer img { height: 90%; }
:is(.shopping-tire-detail, .shopping-auto-service-detail) .compare-section .related-product .tire-list-item .thumb-area .brand-layer { padding-right: 8px; top: 8px; }


#productReview {
    scroll-margin-top: 50px;
    border-top: 8px solid #ECEEEF;
    padding: 24px 0px 40px;
    margin-top: 40px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 24px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard {
    width: 100%;
    height: auto;
    position: relative;
    background: #F9F9FA;
    border-radius: 4px;
    padding: 60px 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .total-score {
    flex: none;
    width: 112px;
    height: 112px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .total-score .score {
    font-size: 56px;
    font-weight: 700;
    line-height: 100%;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .total-score .rating {
    margin-top: 8px;
    width: 79px;
    height: 16px;
    background-size: 79px auto;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .total-score .rating span {
    height: 16px;
    background-size: 79px auto;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .total-score .reviews {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #a0a6af;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .total-score .reviews em {
    color: #2a3138;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .itemize-score {
    flex: none;
    width: 440px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 24px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .itemize-score .item {
    flex: 0 1 calc((100% - 24px) / 2);
    min-width: 0;
    width: auto;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border-radius: 18px;
    padding: 0 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .itemize-score .item .label-txt { line-height: 20px; font-size: 14px; font-weight: 500; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .itemize-score .item .rating-wrap {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard .itemize-score .item .rating-wrap .score {
    flex: none;
    width: auto;
    text-align: right;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard:has(.keyword-review-sum) {
    padding: 24px 32px 24px 96px;
    background: #f2f2f7;
    border-radius: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard:has(.keyword-review-sum) .itemize-score {
    flex: none;
    align-self: stretch;
    width: 240px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    background: #fff;
    border-radius: 8px;
    padding: 16px 16px;
    margin-right: -36px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .review-dashboard:has(.keyword-review-sum) .itemize-score .item {
    flex: none;
    width: 100%;
}


:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .keyword-review-sum {
    flex: none;
    width: 370px;
    height: auto;
    position: relative;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .keyword-review-sum .item {
    width: 100%;
    height: 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 16px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .keyword-review-sum .item:first-of-type { margin-top: 0; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .keyword-review-sum .item .fill {
    height: 100%;
    background: #D0DBFF;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    top: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .keyword-review-sum .item [data-icon] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    border-radius: 4px;
    border: none;
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
    color: #000;
    position: relative;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .review-dashboard-section .keyword-review-sum .item .sum {
    font-weight: 500;
    font-size: 14px;
    margin-right: 16px;
    position: relative;
}

.shopping-auto-service-detail .review_list ~ .btn01 { margin-top: 0;}

.shopping-auto-service-detail .review_top .star02 em {
    color: #2a3138;
    font-size: 20px;
    font-weight: 500;
}

.shopping-auto-service-detail .review_list .star02 em {
    color: #2a3138;
    font-size: 14px;
    font-weight: 500;
}

.shopping-auto-service-detail .star01 {
    color: #2a3138;
    font-weight: 500;
}







.review-list-section .review-list-tab {
    width: 100%;
    height: auto;
    position: relative;
    border-bottom: 1px solid #d9dbdc;
    padding: 0;
    margin-top: 40px;
    font-size: 0;
    display: none;
}

.review-list-section .review-list-tab .btn-item {
    padding: 0 24px;
    color: #5b6068;
}

.review-list-section .review-list-tab .btn-item.on {
    color: #fe6a2b;
}

.review-list-section .review-list-tab .btn-item.on:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #fe6a2b;
    position: absolute;
    left: 0;
    bottom: -2px;
}


.review-list-section .review-list-console {
    width: 100%;
    height: auto;
    position: relative;
    padding: 12px 0;
    /* margin-top: 12px;
    margin-bottom: 12px; */
    border-bottom: 1px solid #d9dbdc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.review-list-section .review-list-console .toggle-switch {
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    padding-right: 8px;
}

.review-list-section .review-list-console .toggle-switch span { font-size: 12px; margin-left: 8px; }

.review-list-section .review-list-console .sroter-item {
    margin-left: auto;
    margin-right: 0;
}

.review-list-section .review-list-console .sroter-item select.input-box {
    border-color: transparent;
    font-size: 14px;
    font-weight: 400;
    text-align:right;
    padding-left: 8px;
    cursor: pointer;
}

.review-list-section .review-list-console .sroter-item .form-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.review-list-section .review-list-console .sroter-item .form-control .input-group .tools {
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    top: 50%;
    transform: translateY(-50%);
}


.review-list-section .review-list-wrap {
    width: 100%;
    height: auto;
    position: relative;
}

.review-list-section .review-list-wrap[data-review-type="common"] .review-type-common { display: block;}
.review-list-section .review-list-wrap[data-review-type="common"] .review-type-simple { display: none;}

.review-list-section .review-list-wrap[data-review-type="simple"] .review-type-simple { display: block;}
.review-list-section .review-list-wrap[data-review-type="simple"] .review-type-common { display: none;}

.review-list-section .review-list {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0 32px;
}

.review-list-section .review-list .review-not-found {
    width: 100%;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 1px solid #d9dbdc;
}


.review-item {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
}

.review-item:not(:first-of-type) {
    margin-top: 32px;
}

.review-item .review-header {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px 0 0 0;
    background: #F2F2F7;
    padding: 14px 24px;
    gap: 40px;
}


.review-item .review-header .rating-wrap {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.review-item .review-header .rating-wrap .rating {
    width: 69px;
    height: 14px;
    background-size: 69px auto;
    background-position: 0 50%;
}

.review-item .review-header .rating-wrap .rating span {
    height: 14px;
    background-size: 69px auto;
    background-position: 0 50%;
}

.review-item .review-header .rating-wrap .score {
    flex: none;
    text-align: right;
    line-height: 24px;
    font-size: 14px;
    font-weight: 700;
}


.review-item .review-header .left-area {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    line-height: 24px;
}

.review-item .review-header .left-area span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.review-item .review-header .left-area .tire {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    vertical-align: middle;
    line-height: 20px;
}

.review-item .review-header .left-area .tire:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 16px;
    border-left: 1px solid #d9dbdc;
    margin-right: 16px;
    vertical-align: middle;
}

.review-item .review-header .right-area {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.review-item .review-header .right-area .write-by {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.review-item .review-header .right-area .date {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    vertical-align: middle;
    line-height: 20px;
}

.review-item .review-header .right-area .date:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 16px;
    border-left: 1px solid #d9dbdc;
    margin-right: 8px;
    vertical-align: middle;
}

.review-item .review-declare-form {
    display: none;
    background: #F9F9FA;
    padding: 20px 24px;
}

.review-item.status-declare .review-declare-form { display: block; }

.review-item .review-declare-form textarea::placeholder { font-size: 14px;}

.review-item .review-declare-form .close-btn {
    position: absolute;
    background-color: transparent;
    right: -12px;
    top: -12px;
}

.review-item .review-body {
    padding: 20px 24px;
    position: relative;
}

.review-item .review-body .review-photo {
    margin-top: 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.review-item .review-body .review-photo .img-holder {
    flex: none;
    width: 176px;
    height: 132px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.review-item .review-body .review-photo .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-item .review-body .review-txt {
    font-size: 14px;
}

.review-item .review-body .review-txt p { line-height: 160%;}

.review-item .review-body .review-simple {
    width: 100%;
    height: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 8px;
}

.review-item .review-body .review-simple > li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    gap: 4px;
    font-size: 12px;
}

.review-item .review-body .review-simple > li:not(:first-of-type) {
    margin-top: 6px;
}

.review-item .review-body .review-simple > li:before {
    content: "\e912";
    font-family: 'LineIcons';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    color: #5EB0B5;
}

.review-item .store-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #fe6a2b;
    background: #fff;
    color: #fe6a2b;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
}

.review-item .review-block {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(3px);
    border-bottom: 1px solid #d9dbdc;
    z-index: 1;
}

.review-item.status-block .review-block { display: flex;}




.review-item .review-footer {
    width: 100%;
    height: auto;
}

.review-item .review-footer .review-itemize-rating {
    width: 100%;
    height: auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
    border-top: 1px solid #d9dbdc;
    border-bottom: 1px solid #d9dbdc;
}

.review-item .review-footer .review-itemize-rating .rating-wrap {
    flex: 0 1 auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.review-item .review-footer .review-itemize-rating .rating-wrap .title {
    line-height: 24px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 8px;
}

.review-item .review-footer .review-itemize-rating .rating-wrap .score {
    line-height: 24px;
    font-size: 14px;
    font-weight: 500;
}

.review-item .review-footer .review-console {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 8px 8px 8px 24px;
}

.review-item .review-footer .review-console .left-area {
    flex: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.review-item .review-footer .review-console .left-area span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.review-item .review-footer .review-console .left-area .date:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 12px;
    border-left: 1px solid #d9dbdc;
}

.review-item .review-footer .review-console .right-area {
    flex: none;
    min-width: 0;
}

.review-item .review-footer .review-console .thumbup-btn {
    border-color: #C0C6CE;
    color: #a0a6af;
}

.review-item .review-footer .review-console .thumbup-btn.on {
    border-color: transparent;
    background: #fe6a2b;
    color: #fff;
}

.review-item .review-footer .review-console .thumbup-btn .label-txt { font-size: 12px; font-weight: 500;}

.review-item .review-footer .popup-menu-item {
    width: auto;
    height: auto;
    position: relative;
}

.review-item .review-footer .popup-menu-item:hover .popup-menu-pannel { display: block;}

.review-item .review-footer .popup-menu-item .popup-menu-pannel {
    display: none;
    width: 72px;
    height: auto;
    overflow: hidden;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #d9dbdc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1;
}

.review-item .review-footer .popup-menu-item .popup-menu-pannel .btn-item {
    padding: 0;
}

.review-item .review-footer .popup-menu-item .popup-menu-pannel .btn-item:not(:last-of-type) {
    border-bottom: 1px solid #d9dbdc;
}




.shopping-auto-service-detail .goods_detail .review_top .list {
    padding: 20px 40px;
}

.shopping-auto-service-detail .goods_detail .review_top .list ol {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 60px;
}

.shopping-auto-service-detail .goods_detail .review_top .list li {
    flex: 0 0 calc((100% - 60px) / 2);

    width: auto;
    float: none;
    height: 32px;
    padding: 12px;
    padding-right: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.shopping-auto-service-detail .goods_detail .review_top .list li .tit {
    flex: none;
    width: 60px;
    position: relative;
    top: auto;
    left: auto;
}

.shopping-auto-service-detail .goods_detail .review_top .list li .star03 {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: 8px;
    background: #cccccc;
    border-radius: 4px;
    line-height: 8px;
}

.shopping-auto-service-detail .goods_detail .inner {
    padding: 24px;
    border: none;
    background: #f9f9fa;
    border-radius: 8px;
}

.shopping-auto-service-detail .item-related-section .item-list-wrap .related-swiper-wrap {
    margin: 16px auto;
}

.shopping-auto-service-detail .item-related-section .btn-item.btn-prev { left: -40px; }
.shopping-auto-service-detail .item-related-section .btn-item.btn-next { right: -40px; }

.shopping-auto-service-detail .item-related-section img[src*="bg_notires.png"] {
    width: 260px;
    margin-bottom: 12px;
}


#productDetailInfo {
    scroll-margin-top: 50px;
    border-top: 8px solid #ECEEEF;
    padding: 24px 0px 40px;
    margin-top: 40px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section {
    position: relative;
    width: 750px;
    margin: 0 auto;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-info {
    display: block;
    width: 100%;
    height: auto;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-info .ckEditor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 60px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-info .ckEditor > img {
    width: 100%;
    height: auto;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-info .ckEditor .iframe-container {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-info .ckEditor .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti {
    display: block;
    width: auto;
    height: auto;
    padding: 24px;
    margin-top: 60px;
    background: #F9F9FA;
    border-radius: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti ol {
    list-style: none;
    width: 100%;
    height: auto;
    position: relative;
    padding: 20px 0 0;
    margin: 0;
    margin-top: 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti ol * { font-family: 'NotoSansKR','Malgun Gothic',sans-serif !important; font-size: 12px !important; }

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti ol + ol {
    border-top: 1px dashed #D9DBDC;
    margin-top: 20px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti ol > li {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 16px;
    font-size: 12px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti ol > li:not(:first-of-type) { margin-top: 16px;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti ol > li .tit {
    flex: none;
    width: 100px;
    position: relative;
    line-height: 16px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti ol > li .tit:before {
    content: '·';
    margin-right: 2px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor {
    width: 100%;
    height: auto;
    padding: 0 40px;
    --key-color: #2a3138;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor:empty {
    display: none;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor ul {
    width: 100%;
    height: auto;
    position: relative;
    --key-color: inherit;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor ul:after { display: none;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor ul > li {
    flex: 0 1 50%;
    min-width: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 20px;
    --key-color: inherit;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor ul > li .title {
    --key-color: inherit;
    flex: none;
    width: 120px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 16px;
    background: var(--key-color);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor ul > li .value-wrap {
    flex: 1 1 auto;
    line-height: 32px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor ul > li .value-wrap .value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 8px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .performance-factor ul > li .value-wrap .value em {
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail {
    padding: 0;
    margin-top: 60px;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail .inner {
    border: none;
    padding: 0;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail .inner .tbl01 { border-top: none;}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail .inner .tbl01 table {
    border: 1px solid #d9dbdc;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail .inner .tbl01 table th,
:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail .inner .tbl01 table td {
    text-align: center;
    border: 1px solid #d9dbdc;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail .inner .tbl01 table thead th {
    border-right: none;
    border-left: none;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-size.goods_detail .inner .tbl01 table tbody th {
    vertical-align: top;
    color: #2a3138;
    background: #F9F9FA;
}






.smartpay-standby {
    display: none;
    width: auto;
    height: auto;
    position: fixed;
    left: calc(50% + 585px);
    transform: translateX(20px);
    bottom: 20px;
    z-index: 1000;
    --compact-transition-dur: 0.3s;
}

:is(.shopping-tire-detail, .shopping-auto-service-detail) .smartpay-standby {
    bottom: calc(20px + 16px + 46px + env(safe-area-inset-bottom));
}

.smartpay-standby.on {
    display: block;
}

.smartpay-standby .btn-item {
    --compact-transition-dur: inherit;
    border-radius: 2px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    position: absolute;
    top: -2px;
    right: 0;
    transform: translateY(-100%) translateZ(0);
    opacity: 1;
    transition: all var(--compact-transition-dur);
    pointer-events: all;
}

.smartpay-standby .card {
    --compact-transition-dur: inherit;
    width: 100px;
    height: 142px;
    position: relative;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12), inset 0 0 0 0 #D9DBDC;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: all var(--compact-transition-dur);
    transform-origin: 50% 0;
    z-index: 1;
}

.smartpay-standby .card.compact {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.smartpay-standby .card.compact ~ .btn-item {
    transform: translateY(0) translateZ(0);
    opacity: 0;
    pointer-events: none;
}

.smartpay-standby .card.compact .smartpay-standby-item {
    transform: translateY(-39px) translateZ(0);
}

.smartpay-standby-item {
    --compact-transition-dur: inherit;
    flex: none;
    width: 100px;
    height: auto;
    position: relative;
    padding: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--compact-transition-dur);
    transform: translateY(0) translateZ(0);
}

.smartpay-standby-item > h5 {
    --compact-transition-dur: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 8px;
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--compact-transition-dur);
}

.smartpay-standby .card.compact h5 { opacity: 0; }

.smartpay-standby-item .thumb-area {
    --compact-transition-dur: inherit;
    width: 100%;
    height: 68px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--compact-transition-dur);
}

.smartpay-standby .card.compact .thumb-area { transform: translateY(0) translateZ(0) scale(0.7); }
.smartpay-standby .card.compact .thumb-area .brand-layer { opacity: 0;}

.smartpay-standby-item .thumb-area .img-layer {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.smartpay-standby-item .thumb-area .img-layer img {
    width: auto;
    height: 100%;
}

.smartpay-standby-item .thumb-area .brand-layer {
    --compact-transition-dur: inherit;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--compact-transition-dur);
}

.smartpay-standby-item .thumb-area .brand-layer .brand-logo {
    width: auto;
    height: 10px;
}

.smartpay-standby-item .info-area {
    --compact-transition-dur: inherit;
    width: 84px;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    transition: all var(--compact-transition-dur);
}

.smartpay-standby .card.compact .info-area { opacity: 0; }

.smartpay-standby > .front-rear-indicator,
.smartpay-standby-item .info-area .front-rear-indicator {
    flex: none;
    display: inline-block;
    width: auto;
    height: 16px;
    line-height: 16px;
    border-radius: 2px;
    background: #fe6a2b;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 0 4px;
}

.smartpay-standby > .front-rear-indicator {
    --compact-transition-dur: inherit;
    position: absolute;
    bottom: -4px;
    left: -2px;
    z-index: 1;
    transition: all var(--compact-transition-dur);
    opacity: 0;
    pointer-events: none;
}

.smartpay-standby .card.compact ~ .front-rear-indicator { opacity: 1; }

.smartpay-standby-item .info-area .product-name {
    flex: 1 0 0;
    line-height: 16px;
    font-size: 10px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 32px;
}







/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=auto-service-list-item------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

.auto-service-list-item {
    width: 164px;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    -webkit-tap-highlight-color: transparent;
}

.auto-service-list-item:hover .thumb-area:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
    border-radius: inherit;
}

.auto-service-list-item .brand-area {
    width: 100%;
    height: 24px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.auto-service-list-item .brand-area .brand-logo {
    width: auto;
    height: 20px;
}

.auto-service-list-item .thumb-area {
    width: 100%;
    height: 200px;
    position: relative;
    background: #F2F2F7;
    border-radius: 4px;
}

.auto-service-list-item .thumb-area .img-layer {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.auto-service-list-item .thumb-area .img-layer img {
    width: auto;
    height: 90%;
}

.auto-service-list-item .thumb-area .brand-layer {
    width: 100%;
    height: auto;
    padding-right: 6px;
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.auto-service-list-item .thumb-area .brand-layer .brand-logo {
    width: auto;
    height: 12px;
}

.auto-service-list-item .thumb-area .badge-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: inherit;
}

.auto-service-list-item .thumb-area .badge-layer .badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
    gap: 4px;
}

.theme-items .auto-service-list-item.soldout .thumb-area:after,
.theme-items .auto-service-list-item.soldout:hover .thumb-area:after,
.related-product .auto-service-list-item.soldout .thumb-area:after,
.related-product .auto-service-list-item.soldout:hover .thumb-area:after,
.auto-service-list:not(.compare-mode) .auto-service-list-item.soldout .thumb-area:after,
.auto-service-list:not(.compare-mode) .auto-service-list-item.soldout:hover .thumb-area:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    left: 0;
}

.theme-items .auto-service-list-item.soldout .thumb-area:before,
.related-product .auto-service-list-item.soldout .thumb-area:before,
.auto-service-list:not(.compare-mode) .auto-service-list-item.soldout .thumb-area:before {
    content: '현재 품절상품입니다.';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    padding: 0 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1;
}

.circle-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(141deg, #5B6068 0%, #202021 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    text-align: center;
    letter-spacing: -0.5px;
}

.circle-badge[data-badge-group="ranking"] { background: linear-gradient(141deg, #5B6068 0%, #202021 100%); }
.circle-badge[data-badge-group="event"] { background: linear-gradient(180deg, #FE6A2B, #EA5507); border-radius: 8px; }
.circle-badge[data-badge-group="selection"] { background: linear-gradient(141deg, #9CA9FF 0%, #485DE5 100%); }
.circle-badge[data-badge-group="specialty"] { background: linear-gradient(141deg, #00B3C5 0%, #007E8A 100%); }
.circle-badge[data-badge-group="winter"] { background: linear-gradient(141deg, #ACDDFF 6.76%, #2DA9FF 83.75%); }
.circle-badge[data-badge-group="best-parts"] { background: linear-gradient(141deg, #FFA200 0%, #FF8A00 100%); }
.circle-badge[data-badge-group][style*="background-image"] {
    border-radius: 0;
    font-size: 0;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.auto-service-list-item .thumb-area .badge-layer .oe-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
    gap: 4px;
    position: absolute;
    right: 0;
    bottom: 0;
    user-select: none;
    pointer-events: none;
}

.auto-service-list-item .thumb-area .badge-layer .oe-wrap .maker-bi {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.auto-service-list-item .thumb-area .compare-layer {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    border-radius: inherit;
}

.compare-mode .auto-service-list-item .thumb-area .compare-layer { display: flex; }

.auto-service-list-item .thumb-area .compare-layer:before {
    content: '';
    font-family: 'LineIcons';
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    box-shadow: inset 0 0 0 1px #D9DBDC;
    text-align: center;
    vertical-align: middle;
    background: #fff;
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fe6a2b;
}

.auto-service-list-item.compare-pick .thumb-area .compare-layer:before {
    content: "\e90f";
}

.auto-service-list-item .thumb-area .compare-layer:after {
    content: '비교를 원하는 상품을\A선택해 주세요.';
    white-space: pre-wrap;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}

.auto-service-list-item .info-area {
    width: 100%;
    height: auto;
    position: relative;
}

.auto-service-list-item .info-area .meta-wrap {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.auto-service-list-item .info-area .badge-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.auto-service-list-item [data-badge] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    line-height: 12px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 400;
    border-radius: 2px;
    border: 1px solid transparent;
    background: #F2F2F7;
    color: #5B6068;
    vertical-align: middle;
}

.auto-service-list-item [data-badge="new"] { background: #D03333; color: #fff; }
.auto-service-list-item [data-badge="new"]:before { content: 'NEW';}

.auto-service-list-item [data-badge="premium"] { background: #fff; color: #FE6A2B; border-color: #FE6A2B;}
.auto-service-list-item [data-badge="premium"]:before { content: '프리미엄';}

.auto-service-list-item [data-badge="standard"] { background: #fff; color: #FFA200; border-color: #FFA200; }
.auto-service-list-item [data-badge="standard"]:before { content: '스탠다드';}

.auto-service-list-item [data-badge="economy"] { background: #fff; color: #A0A6AF; border-color: #A0A6AF; }
.auto-service-list-item [data-badge="economy"]:before { content: '이코노미'; }

.auto-service-list-item [data-badge="sport"]:before { content: '고속/제동성';}
.auto-service-list-item [data-badge="comfort"]:before { content: '정숙/승차감';}

.auto-service-list-item [data-badge="oe"] { background: #2a3138; color: #fff; }
.auto-service-list-item [data-badge="oe"]:before { content: 'OE 공급';}

.auto-service-list-item [data-badge="online-only"] { color: #6D80F5; font-weight: 700; letter-spacing: -0.5px; }
.auto-service-list-item [data-badge="online-only"]:before { content: '온라인 ONLY';}

.auto-service-list-item [data-badge="gasoline"]:before { content: '가솔린';}
.auto-service-list-item [data-badge="diesel"]:before { content: '디젤';}


.auto-service-list-item .info-area .product-name {
    width: 100%;
    min-width: 0;
    max-height: 40px;
    /* display: flex;
    align-items: center; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 20px;
    vertical-align: top;
    font-size: 16px;
    font-weight: 500;
    margin-top: 16px;
    padding-right: 12px;
}

.auto-service-list-item .info-area .product-name [data-badge] { margin-right: 8px; vertical-align: top; }
.auto-service-list-item .info-area .product-name .name-txt ~ [data-badge] { margin-right: 0; margin-left: 8px; }

.auto-service-list-item .info-area .product-name .name-txt {
    /* flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
    line-height: 20px;
    word-break: break-all;
    font-size: 16px;
    vertical-align: top;
}

.auto-service-list-item .info-area .product-size {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 8px;
}

.auto-service-list-item .info-area .product-price {
    line-height: 20px;
    margin-top: 12px;
}

.auto-service-list-item .info-area .product-price .discount-rate { color: #FE6A2B; font-weight: 700; font-size: 14px; margin-right: 8px; }

.auto-service-list-item .info-area .product-price .price { float: none; font-weight: 500; font-size: 18px; }

.auto-service-list-item .info-area .rating-wrap {
    flex: none;
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.auto-service-list-item .info-area .rating-wrap .rating {
    display: inline-block;
    width: 60px;
    height: 10px;
    background: url('../images/common/rating-off.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
    line-height: initial;
    font-size: 0;
}

.auto-service-list-item .info-area .rating-wrap .rating span {
    display: inline-block;
    width: 100%;
    height: 10px;
    background: url('../images/common/rating-on.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
}

.auto-service-list-item .info-area .rating-wrap .rating-point {
    margin-left: 4px;
    font-weight: 400;
}

.auto-service-list-item .info-area .rating-wrap .review-count {
    margin-left: 2px;
    font-weight: 400;
    color: #A0A6AF;
}





/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=shopping-auto-service-list--------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.shopping-auto-service-list {
    position: relative;
}

.shopping-auto-service-list .display-basis-section {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 700;
    background: #fff;
    margin-top: 28px;
    margin-bottom: 28px;
}

.shopping-auto-service-list .display-basis-section:after {
    content: '';
    display: block;
    width: 1170px;
    height: 0;
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid #d9dbdc;
}

.shopping-auto-service-list .display-basis-section.stuck:after {
    bottom: 0;
}

.shopping-auto-service-list .display-basis-section .display-basis-container {
    width: 100%;
    height: 80px;
    position: relative;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    padding-left: 32px;
}

.shopping-auto-service-list .display-basis-section .display-basis-container .thumb-area {
    flex: none;
}
.shopping-auto-service-list .display-basis-section .display-basis-container .thumb-area .thumb-holder {
    width: 140px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    position: relative;
}

.shopping-auto-service-list .display-basis-section .display-basis-container .thumb-area .thumb-holder .line-icons {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.shopping-auto-service-list .display-basis-section .display-basis-container .info-area {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 480px;
}

.shopping-auto-service-list .display-basis-section .display-basis-container .info-area .tire-size {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}

.shopping-auto-service-list .display-basis-section .display-basis-container .info-area .tire-size span { flex: none;}

.shopping-auto-service-list .display-basis-section .display-basis-container .btn-area {
    flex: none;
    padding: 0 32px;
}

.shopping-auto-service-list .display-basis-section .display-basis-container .extra-area {
    flex: 1 0 auto;
    min-width: 0;
    text-align: right;
}


/* photo review swiper */
#layerScarcePopup .layer_box { max-height: calc(100vh - 40px);  }
.photo .swiper-container .swiper-slide {
    width: 100%;
    max-height: calc(100vh - 160px);
}

.photo .swiper-container .swiper-slide img {
    max-height: calc(100vh - 160px);
    object-fit: contain;
}
.photo .swiper-container .swiper-pagination { font-size: 0; bottom: 0; }
.photo .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #2a3138; }
.photo .swiper-container .swiper-pagination .swiper-pagination-bullet { background-color: rgba(42,49,56,0.2); }
.photo .swiper-button-next,
.photo .swiper-button-prev {
    width: 40px;
    height: 40px;
    line-height: 100%;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(42,49,56,0.4);
    border-radius: 50%;
    z-index: 2;
    color: #fff;
}

.photo .swiper-button-next:hover,
.photo .swiper-button-prev:hover { background: rgba(42,49,56,0.6); }

.photo .swiper-button-prev.swiper-button-disabled,
.photo .swiper-button-next.swiper-button-disabled { opacity: 0;}

.photo .swiper-button-next { right: 8px;}
.photo .swiper-button-prev { left: 8px;}

.photo .swiper-button-next:before,
.photo .swiper-button-prev:before {
    
    font-family: 'LineIcons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 24px;
}

.photo .swiper-button-next:before { content: '\e917'; }
.photo .swiper-button-prev:before { content: '\e916'; }



.shopping-auto-service-list .result-txt {
    padding: 8px 0;
    line-height: 36px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.shopping-auto-service-list .list-func {
    width: 100%;
    height: auto;
    position: relative;
    padding: 12px 12px 12px 0;
    margin: 0 auto;
    border-top: 8px solid #f2f2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    
}

.shopping-auto-service-list .list-func .compare-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.shopping-auto-service-list .list-func .compare-item .toggle-switch {
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    padding-right: 12px;
}

.shopping-auto-service-list .list-func .compare-item .toggle-switch span { font-size: 14px; margin-left: 8px; }

.shopping-auto-service-list .list-func .sroter-item select.input-box {
    border-color: transparent;
    font-size: 14px;
    font-weight: 400;
    text-align:right;
    padding-left: 8px;
    cursor: pointer;
}

.shopping-auto-service-list .list-func .sroter-item .form-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.shopping-auto-service-list .list-func .sroter-item .form-control .input-group .tools {
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.auto-service-list .compare-trigger {
    width: 100%;
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}

.auto-service-list .compare-trigger.on {
    height: 48px;
    opacity: 1;
    pointer-events: all;
    margin-top: 12px;
}

.auto-service-list .compare-trigger .btn-item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(16px) translateZ(0);
    transition: all 0.3s;
}

.auto-service-list .compare-trigger.on .btn-item {
    transform: translateX(-50%) translateY(0) translateZ(0);
}

.shopping-auto-service-list .auto-service-list .auto-service-list-item {
    width: 100%;
}

.shopping-auto-service-list .auto-service-list {
    padding: 40px 0;
}

.shopping-auto-service-list .auto-service-list.engineOil-section { padding-top: 20px;}

.auto-service-list .section-title-bar .title {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    font-size: 20px;
    font-weight: 500;
}
.auto-service-list .section-title-bar .title small { font-size: 16px; font-weight: 400; color: #2a3138; margin-left: 8px; }
.auto-service-list .section-title-bar .description { font-size: 14px; margin-top: 8px; color: #2a3138; }

.shopping-auto-service-list .nodata-product {
    width: 100%;
    height: 288px;
    background: #F9F9FA;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    border-radius: 8px;
}

.shopping-auto-service-list .nodata-product > .line-icons { color: #fe6a2b; }

.shopping-auto-service-list .nodata-product .empty-msg p {
    line-height: 24px;
    color: #5b6068;
    font-size: 20px;
    font-weight: 400;
}

.shopping-auto-service-list .nodata-product .empty-msg p.sub {
    color: #a0a6af;
    font-size: 14px;
    font-weight: 400;
    margin-top: 8px;
}

.auto-service-list .swiper-slide:has(.search-battery-slide) {
    align-self: stretch;
    height: auto;
}

.auto-service-list .search-battery-slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 32px;
    padding: 20px 0;
}

.auto-service-list .search-battery-slide .icon-img {
    width: 64px;
    height: 64px;
    margin-bottom: -12px;
}

.auto-service-list .search-battery-slide > p {
    color: #5b6068;
    font-size: 14px;
    line-height: 20px;
}


.auto-service-list .ts-shopping-section-swiper {
    padding: 0;
}

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 144px;
    left: 0;
    width: 48px;
    height: 48px;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d9dbdc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2;
}

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev:before {
    content: '\e916';
    display: block;
    font-family: 'LineIcons';
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: none;
    transition: all 0.2s;
}

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev:after { display: none; }

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-next {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 144px;
    right: 0;
    width: 48px;
    height: 48px;
    transform: translateX(50%) translateY(-50%);
    cursor: pointer;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d9dbdc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2;
}

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-next:before {
    content: '\e917';
    display: block;
    font-family: 'LineIcons';
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: none;
    transition: all 0.2s;
}

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-next:after { display: none; }

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-next.swiper-button-disabled,
.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev.swiper-button-disabled { display: none; }

.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-next:hover,
.auto-service-list .ts-shopping-section-swiper .ts-shopping-section-swiper-button-prev:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: #fe6a2b;
}

.modal-item .modal-pannel:has(.battery-search) .modal-header { z-index: 3;}
.modal-item .modal-pannel:has(.battery-search) { background: #f9f9fa; }

.battery-search {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.battery-search * { user-select: none; }

.battery-search .battery-search-step-nav {
    flex: none;
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #d9dbdc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    background: #fff;
    padding: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 2;
}

.battery-search .battery-search-step-nav .btn-item {
    width: 132px;
    background: transparent;
    color: #a0a6af;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}

.battery-search .battery-search-step-nav .btn-item .line-icons { color: #d9dbdc; transition: all 0.16s ease-in-out; }

.battery-search .battery-search-step-nav .btn-item:hover:before { display: none; }
.battery-search .battery-search-step-nav .btn-item:hover .line-icons { color: #fe6a2b !important; }

.battery-search .battery-search-step-nav .btn-item.act { color: #2a3138; }
.battery-search .battery-search-step-nav .btn-item.act .line-icons { color: #fe6a2b; }

.battery-search .battery-search-step-nav .btn-item:has(~ .act) {
    color: #2a3138;
    pointer-events: all;
}

.battery-search .battery-search-step-nav .btn-item:has(~ .act) .line-icons { color: #2a3138; }


.battery-search .battery-search-step-swiper {
    flex: 1 0 0;
    width: 100%;
}

.battery-search .battery-search-step-swiper .swiper-slide {
    padding: 32px 24px;
    overflow: overlay;
    min-height: 456px;
}

.battery-search .battery-search-step-swiper .battery-type-slide { padding: 48px;}
.battery-search .battery-search-step-swiper .battery-spec-slide { padding: 32px 134px 48px;}


.battery-search .battery-search-step-swiper .swiper-slide::-webkit-scrollbar {
    width: 4px;
}

.battery-search .battery-search-step-swiper .swiper-slide::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.4);
    border-radius: 2px;

}

.battery-search .battery-type-radio-group {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.battery-search .battery-type-radio-item {
    flex: 1 0 0;
    min-width: 0;
    display: block;
    width: auto;
    height: auto;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    border-radius: 8px;
}

.battery-search .battery-type-radio-item input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: -1px;
    visibility: hidden;
}

.battery-search .battery-type-radio-item input:checked ~ .labelling { border-color: #fe6a2b; }

.battery-search .battery-type-radio-item .labelling {
    width: 100%;
    min-height: 132px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 28px 12px 0;
    border: 1px solid #d9dbdc;
    border-radius: 8px;
    pointer-events: none;
    user-select: none;
    transition: all 0.3s;
}

.battery-search .battery-type-radio-item .labelling * { user-select: none; }

.battery-search .battery-type-radio-item:hover .labelling { border-color: #fe6a2b; }

.battery-search .battery-type-radio-item .labelling .info-area {
    flex: 1 0 0;
    min-width: 0;
}

.battery-search .battery-type-radio-item .labelling .info-area hgroup {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.battery-search .battery-type-radio-item .labelling .info-area hgroup h4 {
    color: #000;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.battery-search .battery-type-radio-item .labelling .info-area hgroup [data-badge] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    line-height: 12px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 2px;
    border: 1px solid transparent;
    color: #5B6068;
    vertical-align: middle;
}
.battery-search .battery-type-radio-item .labelling .info-area hgroup [data-badge="premium"]:before { content: '프리미엄'; }
.battery-search .battery-type-radio-item .labelling .info-area hgroup [data-badge="premium"] { color: #FE6A2B; border-color: #FE6A2B; }

.battery-search .battery-type-radio-item .labelling .info-area hgroup [data-badge="standard"]:before { content: '스탠다드'; }
.battery-search .battery-type-radio-item .labelling .info-area hgroup [data-badge="standard"] { color: #FFA200; border-color: #FFA200; }

.battery-search .battery-type-radio-item .labelling .info-area hgroup [data-badge="economy"]:before { content: '이코노미'; }
.battery-search .battery-type-radio-item .labelling .info-area hgroup [data-badge="economy"] { color: #A0A6AF; border-color: #A0A6AF; }

.battery-search .battery-type-radio-item .labelling .info-area .desc {
    font-size: 14px;
    line-height: 20px;
    color: #5b6068;
    margin-top: 8px;
}

.battery-search .battery-type-radio-item .labelling .thumb-area {
    flex: none;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery-search .battery-type-radio-item .labelling .thumb-area img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.battery-search .type-indicator {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.battery-search .type-indicator .sub-title {
    font-size: 14px;
    line-height: 20px;
}

.battery-search .type-indicator .tip {
    font-size: 12px;
    line-height: 16px;
    color: #5b6068;
}

.battery-search .type-indicator h4 {
    font-size: 20px;
    line-height: 28px;
    padding: 8px 0;
}

.battery-search .type-indicator .dummy-img {
    width: 116px;
    height: 116px;
}

.battery-search .battery-spec-radio-group {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 16px;
}

.battery-search .battery-spec-radio-group:not(:has(*)) {
    height: 92px;
    border-radius: 8px;
    background: rgba(255,255,255,0.8);
    border: 1px solid #f2f2f7;
}

.battery-search .battery-spec-radio-group:not(:has(*)):before {
    content: '세부 규격을 불러오고 있습니다.';
    color: #a0a6af;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: battery-search-wait-anim 2s infinite;
}

@keyframes battery-search-wait-anim {
    0% { opacity: 1; }
    40% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}

.battery-search .battery-spec-radio-item {
    flex: 0 0 calc((100% - 24px) / 4);
    min-width: 0;
    display: block;
    width: auto;
    height: auto;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    border-radius: 4px;
}

.battery-search .battery-spec-radio-item input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: -1px;
    visibility: hidden;
}

.battery-search .battery-spec-radio-item input:checked ~ .labelling { border-color: #fe6a2b; }

.battery-search .battery-spec-radio-item .labelling {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9dbdc;
    border-radius: 4px;
    pointer-events: none;
    user-select: none;
}

.battery-search .battery-spec-radio-item .labelling * { user-select: none; }

.battery-search .battery-spec-radio-item:hover .labelling { border-color: #a0a6af; }








/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(메인)-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.swiper-container .progress-bullet-pagination {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.swiper-container .progress-bullet-pagination .swiper-pagination-bullet {
    --progress: 0;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #d9dbdc;
    margin: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
}

.swiper-container .progress-bullet-pagination .swiper-pagination-bullet-active {
    --progress: 0;
    width: 26px;
}

.swiper-container .progress-bullet-pagination .swiper-pagination-bullet-active:before {
    --progress: inherit;
    content: '';
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #fe6a2b;
    transform-origin: 0 50%; 
    transform: translateZ(0) scaleX(var(--progress));
}


.basis-section {
    width: 100%;
    background: #2a3138;
    z-index: 700;
    position: sticky;
    top: 0;
}

.basis-section .main-basis {
    flex: 1 0 auto;
    min-width: 0;
    padding: 12px 0;
    position: relative;
}

.main-basis.case-general {
    height: 80px;
    overflow: hidden;
}

.main-basis.case-general .basis-car-reg-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
}

.main-basis.case-general .basis-car-reg-btn * { user-select: none; }

.main-basis.case-general .basis-car-reg-btn .thumb-holder {
    flex: none;
    width: 56px;
    height: 56px;
    border: 1px solid #D9DBDC;
    border-radius: 50%;
    background-image: linear-gradient(#D0D3DE, #fff);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
    position: relative;
}

.main-basis.case-general .basis-car-reg-btn:hover .thumb-holder {
    background-image: linear-gradient(#D0D3DE, #D0D3DE);
}

.main-basis.case-general .basis-car-reg-btn .thumb-holder:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
    background-image: url('../images/common/mycar_dummy.png');
    mix-blend-mode: multiply;
}

.main-basis.case-general .basis-car-reg-btn .thumb-holder:after {
    content: '\e900';
    display: inline-block;
    font-family: 'LineIcons';
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
}

.main-basis.case-general .basis-car-reg-btn .label-txt {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}







.main-basis.case-specific {
    height: 80px;
    transition: height 0.2s;
    overflow: hidden;
    will-change: auto;
}

.main-basis.case-specific .basis-car {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.2s;
    gap: 40px;
}

.main-basis.case-specific .basis-car .basis-car-change-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
}

.main-basis.case-specific .basis-car .basis-car-change-btn * { user-select: none; }

.main-basis.case-specific .basis-car .basis-car-change-btn .thumb-holder {
    flex: none;
    width: 56px;
    height: 56px;
    border: 1px solid #D9DBDC;
    border-radius: 50%;
    background-color: #fff;
    background-image: url('../images/common/mycar_dummy.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
}

.main-basis.case-specific .basis-car .basis-car-change-btn .info-area {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}

.main-basis.case-specific .basis-car .basis-car-change-btn .info-area .car-model {
    width: 100%;
    max-width: 360px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main-basis.case-specific .basis-car .basis-car-change-btn .info-area .car-number {
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.main-basis.case-specific .basis-car .basis-car-change-btn .info-area .car-number:after {
    content: '\e915';
    font-family: 'LineIcons';
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    transition: all 0.2s;
    transform: translateZ(0) rotate(0);
}

.main-basis.case-specific .basis-car .basis-car-change-btn.on .info-area .car-number:after {
    transform: translateZ(0) rotate(180deg);
}

.main-basis.case-specific .basis-car .basis-car-change-btn .info-area .car-number span {
    display: inline-block;
    font-size: 18px;
    line-height: 24px;
    position: relative;
}

.main-basis.case-specific .basis-car .shopping-start-btn {
    flex: none;
    width: auto;
    padding-left: 20px;
    padding-right: 12px;
    font-weight: 500;
}

.main-basis.case-specific:has(.basis-car-change-btn.on) { height: 168px; }

.my-garage {
    width: 100%;
    height: auto;
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    transition: all 0.2s;
}

.my-garage .my-car-list-area {
    flex: 1 1 auto;
    min-width: 0;
}

.my-garage .my-car-list-area .car-slot-swiper { overflow: visible; }

.my-garage .my-car-list-area .car-slot-swiper .slot-btn {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    width: 56px;
    height: 56px;
    position: relative;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
}

.my-garage .my-car-list-area .car-slot-swiper .slot-btn.my-car-btn:hover:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(42,49,56,0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.my-garage .my-car-list-area .car-slot-swiper .slot-btn .thumb-holder {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #D9DBDC;
    border-radius: 50%;
    background-color: #fff;
    background-image: url('../images/common/mycar_dummy.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
}

.my-garage .my-car-list-area .car-slot-swiper .slot-btn.act { pointer-events: none; }

.my-garage .my-car-list-area .car-slot-swiper .slot-btn.act .thumb-holder:after {
    content: '\e912';
    display: inline-block;
    font-family: 'LineIcons';
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #00B3C5;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(1px) translateY(-1px);
    z-index: 1;
}

.my-garage .my-car-list-area .car-slot-swiper .slot-btn.add-car-btn {
    background-image: linear-gradient(#D0D3DE, #fff);
}

.my-garage .my-car-list-area .car-slot-swiper .slot-btn.add-car-btn:hover {
    background-image: linear-gradient(#D0D3DE, #D0D3DE);
}

.my-garage .my-car-list-area .car-slot-swiper .slot-btn.add-car-btn:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
    background-image: url('../images/common/mycar_dummy.png');
    mix-blend-mode: multiply;
}

.my-garage .my-car-list-area .car-slot-swiper .slot-btn.add-car-btn:after {
    content: '\e900';
    display: inline-block;
    font-family: 'LineIcons';
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
}

.basis-section .search-area {
    flex: none;
    padding: 16px 12px;
    transition: all 0.2s;
}

.basis-section .search-field-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    width: 320px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    background: #f2f2f7;
    border-radius: 24px;
    text-align: center;
    gap: 8px;
}

.basis-section .search-field-btn * { user-select: none; }

.basis-section .search-field-btn:after {
    content: '\e92e';
    font-family: 'LineIcons';
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    pointer-events: none;
}

.basis-section .search-field-btn:hover { background: #f9f9fa; }

.basis-section .search-field-btn p {
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basis-section .search-field-btn p.placeholder { color: #A0A6AF; }




.main-banner-section {
    overflow: hidden;
    padding: 16px 0 24px;
}

.main-banner-section > .guardrail { width: 1298px; }

.main-banner-section h1 { display: none; }

.main-banner-swiper {
    width: 100%;
    overflow: visible;
}

.main-banner-swiper .swiper-slide {
    /* width: 1180px; */
    width: auto;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 8px;
}

.main-banner-swiper .swiper-slide .main-banner-item {
    flex: 0 0 auto;
    min-width: 1164px;
}

.main-banner-swiper .swiper-slide .main-banner-item.half-banner { min-width: 574px; }

.main-banner-swiper .swiper-slide h2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 0;
}

.main-banner-swiper .swiper-slide h2 .banner-title {
    line-height: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.main-banner-swiper .swiper-slide h2 .banner-date {
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #5b6068;;
}

.main-banner-swiper .swiper-slide a {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    overflow: hidden;
}

.main-banner-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-banner-swiper .swiper-slide a .label-txt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    height: 48px;
    border-radius: 24px;
    padding: 0 16px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    background-color: rgba(0,0,0,0.4);
    border: 1px solid #fff;
    backdrop-filter: blur(4px);
    position: absolute;
    left: 40px;
    bottom: 28px;
    pointer-events: none;
    user-select: none;
    color: #fff;
    white-space: nowrap;
}

.main-banner-swiper .swiper-slide a:hover .label-txt { background-color: rgba(0,0,0,0.5); }

.main-banner-swiper .swiper-slide a .label-txt:after {
    content: '\e9be';
    font-family: 'LineIcons';
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    pointer-events: none;
    user-select: none;
}

.main-banner-swiper .swiper-console {
    width: 1164px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    user-select: none;
}

.main-banner-swiper .swiper-console .progress-bullet-pagination {
    flex: 1 1 auto;
    width: auto;
    
}

.main-banner-swiper .swiper-console .control-area {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.main-banner-swiper .swiper-console .fraction-txt { font-size: 12px; font-weight: 500; }

.main-banner-swiper .swiper-console .control-btns-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    border-radius: 16px;
    overflow: hidden;
}

.main-banner-swiper .swiper-console .control-btns-group .play-btn .line-icons:before { content: '\e9b7'; }
.main-banner-swiper .swiper-console .control-btns-group .play-btn.pause .line-icons:before { content: '\e9b6'; }







.brand-gate-section {
    overflow: hidden;
    padding: 32px 0;
}

.brand-gate-swiper {
    overflow: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.brand-gate-swiper::-webkit-scrollbar { display: none;}

.brand-gate-swiper .gate-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding-top: 24px;
    position: relative;
}

.brand-gate-swiper h1 { display: none; }

.brand-gate-swiper .gate-group h1 {
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    color: #5B6068;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
}

.brand-gate-swiper .gate-group h1.txt-primary { color: #fe6a2b; }

.brand-gate-swiper .swiper-slide {
    flex: none;
    display: block;
    width: 84px;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    user-select: none;
}

.brand-gate-swiper .swiper-slide .thumb-area {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    overflow: hidden;
    background: #F9F9FA;
    position: relative;
}

.brand-gate-swiper .swiper-slide .thumb-area > img {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-gate-swiper .swiper-slide .thumb-area:after {
    content: '';
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(160,166,175,0.1);
}

.brand-gate-swiper .swiper-slide:hover .thumb-area:after {
    background: rgba(42,49,56,0.1);
}

.brand-gate-swiper .swiper-slide .title-area {
    margin-top: 8px;
    text-align: center;
    color: #000;
}

.brand-gate-swiper .swiper-slide .title-area p {
    font-size: 14px;
    line-height: 20px;
}

.brand-gate-swiper .divider {
    width: 0;
    height: 80px;
    border-left: 1px solid #D9DBDC;
}





.recommend-tire-section {
    overflow: hidden;
    padding: 24px 0 0;
    padding: 40px 0;
    margin-top: 80px;
}

.recommend-tire-section h1 {
    font-size: 20px;
    line-height: 28px;
}

.recommend-tire-section h1 .btn-item {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}

.recommend-tire-section h1 .btn-item > .label-txt { font-size: 14px; font-weight: 500;}
.recommend-tire-section h1 .btn-item > .line-icons { margin-left: 8px;}

.recommend-tire-section h1 .btn-item:hover:before { display: none;}

.recommend-tire-section h1 .title-graphic {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    display: inline-block;
    position: relative;
}

.recommend-tire-section h1 .tooltip-container { left: 4px;}

.recommend-tire-section .tire-size-tab {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 24px;
}

.recommend-tire-section .tire-size-tab .size-tab-btn {
    flex: none;
    color: #5b6068;
}
.recommend-tire-section .tire-size-tab .size-tab-btn.act { color: #fe6a2b; border-color: #fe6a2b; }

.recommend-tire-section .tire-size-tab ~ .recommend-tire-swiper { margin-top: 24px;}

.recommend-tire-swiper {
    height: auto;
    margin-top: 40px;
    overflow: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

.recommend-tire-swiper::-webkit-scrollbar { display: none;}

.recommend-tire-swiper .tire-list-item {
    width: auto;
    min-width: 0;
    flex: 0 0 calc((100% - 64px) / 5);
}

.recommend-tire-swiper .tire-list-item .thumb-area { overflow: hidden;}

.recommend-tire-swiper .tire-list-item .info-area .product-name { font-size: 12px; padding-right: 8px; margin-top: 8px;}
.recommend-tire-swiper .tire-list-item .info-area .product-price { margin-top: 8px;}
.recommend-tire-swiper .tire-list-item .info-area .product-price .discount-rate { font-size: 12px; }
.recommend-tire-swiper .tire-list-item .info-area .product-price .price { font-size: 14px; }
.recommend-tire-swiper .tire-list-item .thumb-area { height: 180px;}
.recommend-tire-swiper .tire-list-item .thumb-area .img-layer img { height: 90%; }
.recommend-tire-swiper .tire-list-item .thumb-area .brand-layer { padding-right: 8px; top: 8px; }
.recommend-tire-swiper .tire-list-item .rating-wrap { margin-top: 4px;}
.recommend-tire-swiper .tire-list-item .product-name + .rating-wrap { margin-top: 8px;}

.main-best-badge {
    height: 24px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #000;
    border-radius: 0 0 4px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    top: 0px;
    left: 0px;
}



.best-review-section {
    overflow: hidden;
    margin-top: 40px;
    padding: 40px 0;
}

.best-review-section .cont-row {
    background: #f9f9fa;
}

.best-review-section h1 {
    font-size: 20px;
    line-height: 28px;
    width: 1170px;
    height: auto;
    margin: 0 auto;
}


.best-review-section h1 .btn-item {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}

.best-review-section h1 .btn-item > .label-txt { font-size: 14px; font-weight: 500;}
.best-review-section h1 .btn-item > .line-icons { margin-left: 8px;}

.best-review-section h1 .btn-item:hover:before { display: none;}

.best-review-section h1 .title-graphic {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.best-review-swiper {
    width: 1170px;
    overflow: hidden;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding: 24px 6px 16px;
}

.best-review-swiper .swiper-pagination {
    line-height: 0;
    position: relative;
    font-size: 0;
    margin-top: 16px;
}

.best-review-swiper .swiper-pagination .swiper-pagination-bullet { background: #d9dbdc; }
.best-review-swiper .swiper-pagination .swiper-pagination-bullet-active { background: #fe6a2b; }

.best-review-swiper .swiper-slide {
    width: 380px;
    height: auto;
    background: transparent;
    overflow: visible;
}

.best-review-swiper .best-review-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    background: #fff;
    border-radius: 8px;
    margin: 0;
    padding: 16px;
    border: 1px solid #d9dbdc;
    overflow: hidden;
    position: relative;
    user-select: none;
    text-decoration: none;
    transition: all 0.2s;
}

.best-review-swiper .best-review-card * { user-select: none; }

.best-review-swiper .best-review-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.best-review-swiper .best-review-card .header-area {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}

.best-review-swiper .best-review-card .header-area .review-product {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.best-review-swiper .best-review-card .header-area .review-product .thumb-holder {
    flex: none;
    width: 60px;
    height: 56px;
    position: relative;
}

.best-review-swiper .best-review-card .header-area .review-product .thumb-holder img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.9);
}

.best-review-swiper .best-review-card .header-area .review-product .info {
    flex: 1 1 auto;
    min-width: 0;
}

.best-review-swiper .best-review-card .header-area .review-product .info .brand-logo {
    width: auto;
    height: 20px;
}

.best-review-swiper .best-review-card .header-area .review-product .info .product-name {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 4px;
}

.best-review-swiper .best-review-card .header-area .review-photo {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
}

.best-review-swiper .best-review-card .header-area .review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.best-review-swiper .best-review-card .middle-area {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    padding-top: 28px;
}

.best-review-swiper .best-review-card .middle-area .writer {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    gap: 4px;
}

.best-review-swiper .best-review-card .middle-area .writer .name {
    flex: none;
    font-weight: 500;
    line-height: 20px;
}

.best-review-swiper .best-review-card .middle-area .writer .car {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5B6068;
    line-height: 20px;
    padding-left: 4px;
    margin-left: 4px;
    position: relative;
    border-left: 1px solid #d9dbdc;
}

.best-review-swiper .best-review-card .middle-area .rating-wrap {
    flex: none;
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.best-review-swiper .best-review-card .middle-area .rating-wrap .rating {
    display: inline-block;
    width: 60px;
    height: 10px;
    background: url('../images/common/rating-off.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
    line-height: initial;
    font-size: 0;
}

.best-review-swiper .best-review-card .middle-area .rating-wrap .rating span {
    display: inline-block;
    width: 100%;
    height: 10px;
    background: url('../images/common/rating-on.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
}

.best-review-swiper .best-review-card .middle-area .rating-wrap .rating-point {
    margin-left: 4px;
    font-weight: 400;
}


.best-review-swiper .best-review-card .cont-area {
    padding-top: 12px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.best-review-swiper .best-review-card .cont-area p {
    min-height: 40px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}


.best-review-swiper .best-review-card .cont-area:after {
    content: '더보기';
    display: inline-block;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    padding: 0 8px;
    font-size: 12px;
    background: #F2F2F7;
    align-self: flex-end;
    margin-top: 8px;
}

.best-review-swiper .best-review-card:has(.footer-area) .cont-area:after { display: none; }

.best-review-swiper .best-review-card .cont-area .keyword-review {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 12px 0;
}

.best-review-swiper .best-review-card .cont-area .keyword-review:empty { display: none; }
.best-review-swiper .best-review-card .cont-area .keyword-review:not(:has(*)) { display: none; }

.best-review-swiper .best-review-card .cont-area .keyword-review > span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    border-radius: 4px;
    border: none;
    background: #F2F2F7;
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
    color: #000;
}


.best-review-swiper .best-review-card .footer-area {
    margin-top: auto;
    margin-bottom: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.best-review-swiper .best-review-card .footer-area:not(:has(.write-time)) { justify-content: flex-end; }

.best-review-swiper .best-review-card .footer-area .write-time {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.best-review-swiper .best-review-card .footer-area .write-time .title {
    flex: none;
    font-size: 12px;
    line-height: 20px;
}

.best-review-swiper .best-review-card .footer-area .write-time .value-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    border-radius: 4px;
    color: #fff;
    background: #fe6a2b;
    padding: 0 8px;
}

.best-review-swiper .best-review-card .footer-area .write-time .value-badge[data-range="10"] { background: #ffa200; }
.best-review-swiper .best-review-card .footer-area .write-time .value-badge[data-range="20"] { background: #FF9709; }
.best-review-swiper .best-review-card .footer-area .write-time .value-badge[data-range="30"] { background: #FF8F0F; }
.best-review-swiper .best-review-card .footer-area .write-time .value-badge[data-range="40"] { background: #FF8715; }
.best-review-swiper .best-review-card .footer-area .write-time .value-badge[data-range="50"] { background: #FF7E1C; }
.best-review-swiper .best-review-card .footer-area .write-time .value-badge[data-range="60"] { background: #FF7523; }
.best-review-swiper .best-review-card .footer-area .write-time .value-badge[data-range="70"] { background: #fe6a2b; }

.best-review-swiper .best-review-card .footer-area:after {
    content: '더보기';
    display: inline-block;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 12px;
    background: #F2F2F7;
    align-self: flex-end;
}

.best-review-swiper .review-block {
    position: absolute;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 8px;
    border: 1px solid #d9dbdc;
    z-index: 1;
}

.best-review-swiper .status-block ~ .review-block { display: flex;}




.curation-section {
    padding: 40px 0;
    margin-top: 40px;
}

.curation-section h1 {
    font-size: 20px;
    line-height: 28px;
}

.curation-tile-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    gap: 12px 16px;
    margin-top: 24px;
}

.curation-tile-list .tile-item {
    flex: 1 0 calc((100% - 32px) / 3);
    height: 128px;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-image: linear-gradient(#F1F2F5 0%, #fff 50%);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 28px;
    user-select: none;
    position: relative;
}

.curation-tile-list .tile-item:hover { background-image: linear-gradient(#F1F2F5 0%, #fff 120%); }

.curation-tile-list .tile-item:nth-child(1),
.curation-tile-list .tile-item:nth-child(2) { flex: 1 0 calc((100% - 16px) / 2); height: 148px; padding: 28px; }

.curation-tile-list .tile-item h2 {
    flex: none;
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.curation-tile-list .tile-item:nth-child(1) h2,
.curation-tile-list .tile-item:nth-child(2) h2 {
    font-size: 24px;
}

.curation-tile-list .tile-item img { position: absolute; transform-origin: 100% 100%; height: auto; }
.curation-tile-list .tile-item:nth-child(1) img { bottom: 36px; right: 44px; width: 108px; }
.curation-tile-list .tile-item:nth-child(2) img { bottom: 38px; right: 48px; width: 62px; }
.curation-tile-list .tile-item:nth-child(3) img { bottom: 20px; right: 20px; width: 79px; }
.curation-tile-list .tile-item:nth-child(4) img { bottom: 20px; right: 20px; width: 74px; }
.curation-tile-list .tile-item:nth-child(5) img { bottom: 20px; right: 20px; width: 90px; }

.curation-tile-list .tile-item .label-txt {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    position: absolute;
    bottom: 20px;
    left: 28px;
}

.curation-tile-list .tile-item .label-txt:after {
    content: '\e9be';
    font-family: 'LineIcons';
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height:24px;
}



.sub-banner-section {
    padding: 40px 0;
    margin-top: 40px;
}

.sub-banner-swiper {
    width: 1170px;
    margin: 0 auto;
    overflow: hidden;
}

.sub-banner-swiper .swiper-slide {
    overflow: hidden;
    aspect-ratio: 1170/128;
}

.sub-banner-swiper .swiper-slide a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    position: relative;
}

.sub-banner-swiper .swiper-slide img {
    width: 100%;
    height: auto;
}

.sub-banner-swiper .swiper-slide .label-txt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 144px;
    height: 48px;
    border-radius: 24px;
    padding: 0 16px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    background-color: rgba(192,198,206,0.3);
    border: 1px solid #fff;
    backdrop-filter: blur(4px);
    position: absolute;
    right: 48px;
    top: 50%;
    pointer-events: none;
    user-select: none;
    color: #fff;
    transform: translateY(-50%);
}

.sub-banner-swiper .swiper-slide:hover .label-txt { background-color: rgba(192,198,206,0.4); }

.sub-banner-swiper .swiper-slide .label-txt:after {
    content: '\e9be';
    font-family: 'LineIcons';
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    pointer-events: none;
    user-select: none;
}

.sub-banner-swiper .sub-banner-pagination {
    height: 20px;
    margin-top: 10px;
}

.sub-banner-swiper .progress-bullet-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 3px;
}

.sub-banner-swiper .progress-bullet-pagination .swiper-pagination-bullet-active { width: 20px; }



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=quick-menu-item-------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
div#skyScraper:has(.quick-menu-item.on) {
    z-index: 1000;
}

.quick-menu-item {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
}

.quick-menu-item.off { display: none; }

.quick-menu-item .dim {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(2px);
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}

.quick-menu-item.on .dim {
    opacity: 1;
    pointer-events: all;
}

.quick-menu-item .quick-menu-guardrail {
    width: 1170px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    pointer-events: none;
}

.quick-menu-item .quick-menu-container {
    width: 80px;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: -20px;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 32px 0;
    pointer-events: none;
}

.quick-menu-item .trigger-wrap {
    width: 80px;
    height: 80px;
    perspective: 280px;
    position: absolute;
    right: 0;
    bottom: 32px;
    z-index: 1;
}

.quick-menu-item .quick-menu-trigger {
    appearance: none;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    pointer-events: all;
    position: relative;
    background: transparent;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 0.4s ease-in-out;
    transform-origin: 50% 100%;
}

.quick-menu-item:not(.on) .quick-menu-trigger:not(:hover) {
    animation: quickMenuAttentionAnim 6s 0.5s infinite;
}

.quick-menu-item:not(.on) .quick-menu-trigger:hover {
    /* transform: rotateY(0deg);  */
    transform: translateY(0) translateZ(0) rotateY(0deg) rotateZ(-15deg);
    transition: transform 0.2s ease-in-out;
}

@keyframes quickMenuAttentionAnim {
    0% { transform: rotateY(0deg); }
    15% { transform: rotateY(540deg); }
    30% { transform: rotateY(540deg); }
    45% { transform: rotateY(1080deg); }
    100% { transform: rotateY(1080deg); }
}

.quick-menu-item .quick-menu-trigger .back-face {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(#000 65%, #464646 100%);
    box-shadow: 0 12px 16px rgba(0,0,0,0.4);
    transform: rotateY(180deg);
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: #fff;
}

.quick-menu-item .quick-menu-trigger .front-face {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-image: linear-gradient(#000 65%, #464646 100%);
    box-shadow: 0 12px 16px rgba(0,0,0,0.4);
    backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.quick-menu-item .quick-menu-trigger .front-face .icon-img {
    width: auto;
    height: 20px;
}

.quick-menu-item .quick-menu-trigger .front-face:after {
    content: '';
    display: block;
    width: 40px;
    height: 120%;
    background: rgba(255,255,255,0.2);
    background: linear-gradient(90deg, rgba(255,255,255,0.4),rgba(255,255,255,0));
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(230%) translateY(-50%) translateZ(0) skewX(20deg);
    pointer-events: none;
}

.quick-menu-item:not(.on) .quick-menu-trigger:not(:hover) .front-face:after {
    animation: btnGlossAnim 6s 0.5s infinite;
}

@keyframes btnGlossAnim {
    0% { transform: translateX(230%) translateY(-50%) translateZ(0) skewX(20deg); }
    35% { transform: translateX(230%) translateY(-50%) translateZ(0) skewX(20deg); }
    65% { transform: translateX(-140%) translateY(-50%) translateZ(0) skewX(20deg); }
    100% { transform: translateX(-140%) translateY(-50%) translateZ(0) skewX(20deg); }
}

.quick-menu-item .sub-menu-wrap {
    width: 80px;
    height: auto;
    position: relative;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item {
    --item-height: 80px;
    --item-gutter: 8px;
    --transform-offset: calc( var(--item-height) + var(--item-gutter));
    width: 80px;
    height: 80px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(0) translateZ(0);
    opacity: 0;
    z-index: calc(var(--item-nth) * -1);
    pointer-events: none;
    transition: transform 0.4s ease-in-out, opacity 0s 0.4s linear;
    transform-origin: 50% 100%;
}

.quick-menu-item.on .sub-menu-wrap .sub-menu-item {
    transform: translateY( calc(var(--transform-offset) * var(--item-nth) * -1) ) translateZ(0);
    opacity: 1;
    transition: transform 0.4s ease-in-out, opacity 0s linear;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item:nth-of-type(1) { --item-nth: 1; }
.quick-menu-item .sub-menu-wrap .sub-menu-item:nth-of-type(2) { --item-nth: 2; }
.quick-menu-item .sub-menu-wrap .sub-menu-item:nth-of-type(3) { --item-nth: 3; }
.quick-menu-item .sub-menu-wrap .sub-menu-item:nth-of-type(4) { --item-nth: 4; }
.quick-menu-item .sub-menu-wrap .sub-menu-item:nth-of-type(5) { --item-nth: 5; }
.quick-menu-item .sub-menu-wrap .sub-menu-item:nth-of-type(6) { --item-nth: 6; }

.quick-menu-item:not(.on) .trigger-wrap:has(.quick-menu-trigger:hover) ~ .sub-menu-wrap .sub-menu-item {
    transition: all 0.2s ease-in-out;
    /* transform: translateY(calc(4px * var(--item-nth) * -1)) translateZ(0) rotate(calc( (3deg * var(--item-nth)) )); */
    transform: translateY(0) translateZ(0) rotate(calc( (5deg * var(--item-nth)) - 15deg ));
    opacity: 1;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item:has(.btn:hover) { z-index: 6;}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #d9dbdc;
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn:not(div):hover { background: #eceeef;}

.quick-menu-item.on .sub-menu-wrap .sub-menu-item .btn { pointer-events: all; }

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn p {
    margin: 0;
    margin-top: 2px;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
    color: #2a3138;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .icon-holder {
    width: auto;
    height: auto;
    position: relative;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .line-icons {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 28px;
    color: #2a3138;
    transition: all 0.2s;
}
.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .badge { pointer-events: none; }

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .badge.badge-xs {
    display: inline-block;
    width: auto;
    min-width: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    background: #fe6a2b;
    border: none;
    color: #fff;
    padding: 0 4px;
    border-radius: 8px;
    vertical-align: middle;
    position: absolute;
    top: -3px;
    right: -3px;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .badge.dot {
    display: inline-block;
    width: 6px;
    min-width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #fe6a2b;
    position: absolute;
    top: 0;
    right: 0;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu {
    min-width: 112px;
    height: auto;
    min-height: 80px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-100%) translateY(-50%) scale(0);
    box-shadow: 0 6px 10px rgba(0,0,0,0.3);
    z-index: 1;
    transition: all 0.3s;
    opacity: 0;
    transform-origin: calc(100% + 9px) 50%;
    padding: 8px;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn:hover .hidden-sub-menu {
    transform: translateX(calc(-100% - 12px)) translateY(-50%) scale(1);
    opacity: 1;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu.recent-view-menu {
    top: 0;
    transform: translateX(-100%) translateY(0) scale(0);
    transform-origin: calc(100% + 9px) 40px;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn:hover .hidden-sub-menu.recent-view-menu {
    transform: translateX(calc(-100% - 12px)) translateY(0) scale(1);
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu:before {
    content: '';
    display: block;
    width: 12px;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(100%) translateY(-50%);
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 9px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateX(100%) translateY(-50%);
    pointer-events: none;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu.recent-view-menu:after {
    top: 40px;
    transform: translateX(100%) translateY(-50%);
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a {
    width: 100%;
    height: auto;
    font-size: 0;
    padding: 8px;
    -webkit-tap-highlight-color: transparent;
    color: #2a3138;
    text-decoration: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a:hover {
    background: #eceeef;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu > hr {
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    border-top: 1px solid #d9dbdc;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a .label-txt {
    display: inline-block;
    line-height: 20px;
    font-size: 13px;
    white-space: nowrap;
    position: relative;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a .label-txt .badge.dot {
    width: 4px;
    min-width: 4px;
    height: 4px;
    top: 0;
    right: auto;
    margin-left: 2px;
    margin-top: 2px;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view {
    width: 148px;
    height: auto;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px;
    border: none;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .thumb-area {
    flex: none;
    width: 48px;
    height: 48px;
    position: relative;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .thumb-area .tire-img {
    width: 100%;
    height: 100%;
    position: relative;
    mix-blend-mode: darken;
    transform: translateY(6px);
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .thumb-area .brand-logo {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(0);
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .txt-area {
    flex: 1 1 auto;
    position: relative;
    color: #2a3138;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .txt-area .model {
    width: 100%;
    word-break: break-all;
    line-height: inherit;
    font-size: 12px;
    margin-bottom: 4px;
}
.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .txt-area .discount {
    width: 100%;
    color: #a0a6af;
    text-decoration: line-through;
    line-height: inherit;
    font-size: 11px;
}
.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .txt-area .price {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    line-height: inherit;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu a.recent-view .txt-area .price .txt-throughline { color: #a0a6af; font-size: 11px;}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu .recent-view-empty {
    width: 100%;
    height: auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 12px 0;
}

.quick-menu-item .sub-menu-wrap .sub-menu-item .btn .hidden-sub-menu .recent-view-empty p {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #a0a6af;
    margin: 0;
    text-align: center;
}

.quick-menu-item .quick-menu-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    position: absolute;
    padding: 0 24px;
    top: 50%;
    right: 100%;
    color: #fff;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s;
}

.quick-menu-item.on .quick-menu-info {
    opacity: 1;
    transition: all 0.6s calc( (0.03s * var(--item-nth)) + 0.2s ); 
}

.quick-menu-item .quick-menu-info p {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.quick-menu-item.on .sub-menu-item .btn ~ .quick-menu-info p { opacity: 0.8; }
.quick-menu-item.on .sub-menu-item .btn:hover ~ .quick-menu-info p { opacity: 1; }

.quick-menu-item .trigger-wrap .quick-menu-info {
    transition: all 0.3s;
}

.quick-menu-item.on .trigger-wrap .quick-menu-info {
    opacity: 1;
}

.quick-menu-item .trigger-wrap .quick-menu-info p {
    font-size: 16px;
    line-height: 24px;
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=positioning-map-------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
:has(.positioning-map .diagram-section) #wrap { overflow: visible;}

.positioning-map .tab.scrollable-tab {
    width: 100%;
    padding: 0;
    transition: all 0.2s;
    z-index: 700;
    top: 0;
    margin-top: 16px;
}

.positioning-map .tab.scrollable-tab:before { border-bottom: 1px solid #f2f2f7; }

.positioning-map .tab.scrollable-tab .scroll-wrap {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.positioning-map .tab.scrollable-tab .scroll-wrap::-webkit-scrollbar { display: none; }
.positioning-map .tab.scrollable-tab .indicator { display: none !important; }
.positioning-map .tab.scrollable-tab a {
    appearance: none;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 0;
    white-space: nowrap;
    font-size: 14px;
    color: #2a3138;
    padding: 0 20px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
}

.positioning-map .tab.scrollable-tab a:hover {
    background: rgba(0, 0, 0, 0.05);
}
.positioning-map .tab.scrollable-tab a.on { color: #fe6a2b; }
.positioning-map .tab.scrollable-tab a.on:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #fe6a2b;
    position: absolute;
    left: 0;
    bottom: 0;
}

.positioning-map .property-tab {
    width: 100%;
    height: auto;
    position: relative;
    padding: 12px 20px;
    background: #F9F9FA;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.positioning-map .property-tab .btn-item.on {
    border-color: #fe6a2b;
    color: #fe6a2b;
}

.positioning-map .diagram-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

.positioning-map .diagram-section:after { display: none; }

.positioning-map .diagram-section .y-axis-bar {
    flex: 0 0 auto;
    min-width: 0;
    width: 24px;
    align-self: stretch;
    position: relative;
    background: linear-gradient(#00B3C5, #FFA200);
    border-radius: 12px;
    pointer-events: none;
    user-select: none;
}

.positioning-map .diagram-section .y-axis-bar * { pointer-events: none; user-select: none; }

.positioning-map .diagram-section .y-axis-bar .upper {
    width: 100%;
    height: calc(100% - 84px);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 0;
}

.positioning-map .diagram-section .y-axis-bar .lower {
    width: 100%;
    height: calc(100% - 84px);
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 0;
}


.positioning-map .diagram-section .y-axis-bar :is(.upper-label, .lower-label) {
    width: 24px;
    height: 60px;
    position: sticky;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.positioning-map .diagram-section .y-axis-bar .upper-label { align-items: flex-start; top: 12px; }
.positioning-map .diagram-section .y-axis-bar .lower-label { align-items: flex-end; bottom: 12px; }

.positioning-map .diagram-section .y-axis-bar .upper-label:before {
    content: '\e906';
    font-family: 'LineIcons';
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    font-weight: 400;
}

.positioning-map .diagram-section .y-axis-bar .lower-label:after {
    content: '\e903';
    font-family: 'LineIcons';
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    font-weight: 400;
}

.positioning-map .diagram-section .y-axis-bar .upper-label .label-txt {
    position: absolute;
    top: 20px;
    left: 50%;
    transform-origin: 0% 50%;
    transform: translateY(-50%) rotate(90deg);
}

.positioning-map .diagram-section .y-axis-bar .lower-label .label-txt {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform-origin: 100% 50%;
    transform: translateX(-100%) translateY(50%) rotate(90deg);
}

/* .positioning-map .diagram-section:has(.positioning-map-product-list > li:only-child) .y-axis-bar :is(.upper-label, .lower-label) { display: none; } */

.positioning-map-product-list {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

.positioning-map-product-list:after { display: none; }

.positioning-map-product-list > li {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #d9dbdc;
}

.positioning-map-product-list > li:not(:first-of-type) {
    margin-top: 16px;
}

.positioning-map-product-list > li.title {
    height: 40px;
    background: #5b6068;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.positioning-map-product-list > li.title h5 {
    font-size: 16px;
    line-height: 24px;
}

.positioning-map-product-list a {
    display: block;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    height: auto;
    position: relative;
    text-decoration: none;
}

.positioning-map .diagram-section:not(:has(.y-axis-bar)) .positioning-map-product-list a {
    padding-right: 48px;
}

.positioning-map-product-list a img {
    flex: none;
    display: block;
    width: 360px;
    height: auto;
    aspect-ratio: 45/16;
}

.positioning-map-product-list a:after {
    content: '\e9be';
    font-family: 'LineIcons';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    color: #000;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.positioning-map-product-list a:before {
    content: '';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    background: rgba(0,0,0,0.06);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) scale(0);
    transition: all 0.3s;
}

.positioning-map-product-list a:hover:before {
    transition: all 0s;
    transform: translateY(-50%) scale(1.4);
}

.positioning-map .positioning-map-cont-item { scroll-margin-top: 45px; }
.positioning-map:not(:has(.positioning-map-cont-item:target)) .positioning-map-cont-item[data-car-category="sedan"] { display: block; }
.positioning-map .positioning-map-cont-item:not(:target) { display: none; }
.positioning-map .positioning-map-cont-item:target { display: block; }




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=ts-shopping-guide-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.ts-shopping-guide-detail {
    position: relative;
    padding-top: 108px;
}

.ts-shopping-guide-detail-header {
    width: 100%;
    height: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.ts-shopping-guide-detail-header.fixed {
    position: fixed;
}

.ts-shopping-guide-detail-trunk {
    
}

.ts-shopping-guide-detail-sidebar {
    width: 280px;
    height: auto;
    background: #fff;
    padding-top: 44px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.ts-shopping-guide-detail-sidebar.fixed {
    position: fixed;
    top: 108px;
    left: calc(50% - 585px);
}

.ts-shopping-guide-detail-sidebar.absolute-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
}

.ts-shopping-guide-detail-sidebar .btn-item {
    
}

.ts-shopping-guide-detail-sidebar .btn-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    height: 60px;
    border-radius: 4px;
    background: #F9F9FA;
    color: #000;
    text-align: left;
    padding-left: 20px;
}

.ts-shopping-guide-detail-sidebar .btn-item .label-txt { font-size: 14px; }
.ts-shopping-guide-detail-sidebar .btn-item .label-txt em { font-weight: 700; color: #fe6a2b; }
.ts-shopping-guide-detail-sidebar .btn-item .line-icons {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.ts-shopping-guide-detail-sidebar .btn-item:not(:first-of-type) { margin-top: 8px;}

.ts-shopping-guide-detail-sidebar .btn-item.act {
    border-color: #fe6a2b;
}

.ts-shopping-guide-detail-sidebar .btn-item .label-txt { line-height: 120%; }

.ts-shopping-guide-detail-content {
    width: auto;
    height: auto;
    padding-top: 44px;
    padding-left: 80px;
    margin-left: 280px;
    margin-right: 0;
}


.ts-shopping-guide-detail .ts-shopping-guide-detail-section { scroll-margin-top: 152px; }
.ts-shopping-guide-detail:not(:has(.ts-shopping-guide-detail-section:target)) .ts-shopping-guide-detail-section:first-of-type { display: block; }
.ts-shopping-guide-detail .ts-shopping-guide-detail-section:not(:target) { display: none; }
.ts-shopping-guide-detail .ts-shopping-guide-detail-section:target { display: block; }

.ts-shopping-guide-detail .ts-shopping-guide-detail-section .detail-cont {
    width: 640px;
    margin: 0;
}


.ts-shopping-guide-detail .ts-shopping-guide-detail-section .detail-cont hgroup h3 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
}

.ts-shopping-guide-detail .ts-shopping-guide-detail-section .detail-cont hgroup h3 em { color: #fe6a2b;}

.ts-shopping-guide-detail .ts-shopping-guide-detail-section .detail-cont hgroup p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 12px;
    color: #5b6068;
}

.ts-shopping-guide-detail .ts-shopping-guide-detail-section .detail-cont .popup-btn {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
    position: absolute;
    border-radius: 23px;
}



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(기획전)---------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=deal-main-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#wrap:has(.deal-main.local-deal) {
    background: #f2f2f7;
}

.deal-main {
    position: relative;
}

.deal-list-section {
    position: relative;
    padding: 48px 0 40px;
    background: #fff;
}

.deal-list-section h1 {
    font-size: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.deal-list-section h1 .title-graphic {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    position: relative;
}

.deal-list-section .deal-thumb {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px 10px;
    margin-top: 28px;
}

.deal-list-section .deal-thumb a {
    flex: 0 0 calc((100% - 40px) / 5);
    min-width: 0;
    display: block;
    width: auto;
    height: auto;
    text-decoration: none;
}

.deal-list-section .deal-thumb a .thumb-holder {
    width: 100%;
    height: 64px;
    border-radius: 8px;
    background: #f9f9fa;
    position: relative;
    overflow: hidden;
}

.deal-list-section .deal-thumb a .thumb-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deal-list-section .deal-thumb a:hover .thumb-holder:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(42,49,56,0.1);
    position: absolute;
    top: 0;
    left: 0;
}

.deal-list-section .deal-thumb a h2 {
    margin-top: 8px;
    font-size: 12px;
    line-height: 20px;
    color: #000;
    text-align: center;
}

.deal-list-section .deal-thumb a.act h2 {
    color: #fe6a2b;
    font-weight: 900;
}

.deal-info-section { background: #fff; }

.deal-info-section > .guardrail > img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}


.deal-main .deal-notice-section { background: #fff; }

.deal-main .deal-notice-section .accordion-item { border-bottom: 8px solid #F2F2F7; }
.deal-main.local-deal .deal-notice-section .accordion-item { border-bottom: 1px solid #d9dbdc; }

.deal-main .deal-notice-section .accordion-btn {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    gap: 8px;
    user-select: none;
}

.deal-main .deal-notice-section .accordion-btn .line-icons.chev-down {
    position: relative;
    right: auto;
    top: auto;
    transform: translateZ(0) rotate(0deg);
}

.deal-main .deal-notice-section .accordion-item.on .accordion-btn .line-icons.chev-down { transform: translateZ(0) rotate(180deg); }

.deal-main .deal-notice-section .accordion-btn .label-txt {
    font-size: 16px;
}

.deal-main .deal-notice-section .accordion-cont {
    padding: 4px 24px 32px;
}

.deal-main .deal-notice-section .accordion-cont .editor-cont {
    padding: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    background: #F9F9FA;
    font-size: 14px;
    color: #5b6068;
}

.deal-main .deal-notice-section .accordion-cont .editor-cont * { color: #5b6068; }

.deal-main .deal-notice-section .accordion-cont .editor-cont ul > *:before {
    content: '●';
    position: absolute;
    display: inline-block;
    width: 20px;
    line-height: inherit;
    font-size: inherit;
    text-align: center;
    vertical-align: middle;
    color: inherit;
    transform: translateX(-100%) scale(0.3, 0.3);
}

.deal-main .deal-notice-section .accordion-cont .editor-cont ul li { line-height: 20px; color: #5b6068; padding-left: 20px; margin: 12px 0; }


.deal-main .display-basis-section {
    width: 100%;
    height: auto;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 702;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.deal-main .display-basis-section .basis-seq {
    width: 100%;
    height: 72px;
    border-bottom: 1px solid #d9dbdc;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    gap: 16px;
}

.deal-main .display-basis-section .basis-seq .search-btn {
    background: #f2f2f7;
    padding-left: 32px;
    padding-right: 24px;
}

.deal-main .display-basis-section .basis-seq .search-btn .label-txt { color: #5b6068;}
.deal-main .display-basis-section .basis-seq .search-btn .line-icons { margin-left: 16px; }

.deal-main .display-basis-section .basis-seq .basis-size-btn {
    flex: none;
    height: 40px;
    line-height: 38px;
    border-radius: 20px;
    padding-left: 16px;
    padding-right: 24px;
    border-color: #d9dbdc;
    color: #5b6068;
}

.deal-main .display-basis-section .basis-seq .basis-size-btn.on {
    background: #2a3138;
    border-color: transparent;
    color: #fff;
    pointer-events: none;
}

.deal-main .display-basis-section .basis-seq .basis-size-btn svg {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: 36px;
}

.deal-main .display-basis-section .basis-seq .basis-size-btn svg path,
.deal-main .display-basis-section .basis-seq .basis-size-btn svg circle { fill: #cacbce; }

.deal-main .display-basis-section .basis-seq .basis-size-btn.on svg path,
.deal-main .display-basis-section .basis-seq .basis-size-btn.on svg circle { fill: #fff; }

.deal-main .display-basis-section .basis-seq .basis-size-btn[data-tire-position="front"] svg circle:nth-of-type(1) { fill: #fe6a2b; }
.deal-main .display-basis-section .basis-seq .basis-size-btn[data-tire-position="rear"] svg circle:nth-of-type(2) { fill: #fe6a2b; }

.deal-main .display-basis-section .basis-seq .basis-size-btn .label-txt { font-size: 16px;}


.deal-main .tire-list-section .tire-list-func {
    width: 100%;
    height: auto;
    position: relative;
    padding: 12px 12px 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    
}

.deal-main .tire-list-section .tire-list-func .compare-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.deal-main .tire-list-section .tire-list-func .compare-item .toggle-switch {
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    padding-right: 12px;
}

.deal-main .tire-list-section .tire-list-func .compare-item .toggle-switch span { font-size: 14px; margin-left: 8px; }

.deal-main .tire-list-section .tire-list-func .sroter-item select.input-box {
    border-color: transparent;
    font-size: 14px;
    font-weight: 400;
    text-align:right;
    padding-left: 8px;
    cursor: pointer;
}

.deal-main .tire-list-section .tire-list-func .sroter-item .form-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.deal-main .tire-list-section .tire-list-func .sroter-item .form-control .input-group .tools {
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.deal-main .tire-list-section .tire-list {
    width: 100%;
    height: auto;
    position: relative;
    padding: 32px 0 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 64px 12px;
}

.deal-main .tire-list-section .tire-list .product-not-found {
    width: 100%;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 24px;
    border-bottom: 1px solid #d9dbdc;
}

.deal-main .tire-list-section .tire-list .tire-list-item {
    width: auto;
    min-width: 0;
    flex: 0 0 calc((100% - 36px) / 4);
}

.deal-main .tire-list-section .compare-trigger {
    width: 100%;
    height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: sticky;
    bottom: calc(0px + constant(safe-area-inset-bottom));
    bottom: calc(0px + env(safe-area-inset-bottom));
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%) translateZ(0);
    transition: all 0.3s;
    z-index: 10;
}

.deal-main .tire-list-section .compare-trigger.on {
    height: 72px;
    transform: translateY(0) translateZ(0);
    opacity: 1;
    pointer-events: all;
}



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=local-deal-list-------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.deal-main .filter-section {
    width: 100%;
    height: auto;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 702;
}

.deal-main .filter-section .list-filter {
    height: auto;
    overflow: visible;
}

.deal-main .filter-section.stuck:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    top: -1px;
    background: #fff;
}

.deal-main .filter-section.stuck:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: -1px;
    border-bottom: 1px solid #d9dbdc;
}

.deal-main .filter-section .list-filter .dp-flex {
    width: 100%;
    height: auto;
    padding: 8px 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    position: relative;
}

.deal-main .filter-section .list-filter::-webkit-scrollbar { display: none;}

.deal-main .filter-section .list-filter .result {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: #fff;
    z-index: 2;
}

.deal-main .filter-section .list-filter .result .result-txt {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: #fe6a2b;
}

.deal-main .filter-section .list-filter .filter-reset-btn { white-space: nowrap;}

.deal-main .filter-section .list-filter .list-filter-swiper {
    flex: 1 0 0;
    min-width: 0;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    position: absolute;
    padding-left: 180px;
    padding-right: 160px;
    pointer-events: none;
}

.deal-main .filter-section .list-filter .list-filter-swiper .swiper-slide {
    width: auto;
    position: relative;
}

.deal-main .filter-section .list-filter .filter-btn {
    flex: none;
    color: #5b6068;
    white-space: nowrap;
    padding-right: 12px;
    pointer-events: all;
}
.deal-main .filter-section .list-filter .filter-btn.on {
    border-color: #fe6a2b;
    color: #fe6a2b;
    font-weight: 500;
}

.deal-main.local-deal {
    background: #F2F2F7;
}
.deal-main.local-deal .local-deal-list-section {
    width: 100%;
    height: auto;
    position: relative;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list {
    width: 100%;
    height: auto;
    position: relative;
    padding: 32px 0 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px 12px;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item {
    flex: 0 0 calc((100% - 12px) / 2);
    min-width: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: flex-start;
    gap: 20px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d9dbdc;
    padding: 24px 40px 24px;
    position: relative;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item:hover {
    background: #F9F9FA;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .thumb-area {
    flex: none;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .thumb-area .line-icons {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 60px;
    color: #000;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area {
    flex: 1 0 0;
    min-width: 0;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area .store-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area .store-info .location-badge {
    height: 20px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFA200;
    border-radius: 2px;
    color: #FFA200;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area .store-info .store-name {
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area .service-info { margin-top: 8px; }

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area .service-info p {
    font-size: 18px;
    line-height: 24px;
}

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area .date-info { margin-top: 8px; }

.deal-main.local-deal .local-deal-list-section .local-deal-list .local-deal-list-item .info-area .date-info p {
    font-size: 13px;
    line-height: 16px;
    color: #5b6068;
}


.deal-main.local-deal .local-deal-list-section .local-deal-list .product-not-found {
    width: 100%;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 24px;
    border-bottom: 1px solid #d9dbdc;
    text-align: center;
}

:is(.tire-list-filter, .list-filter, .store-filter) .filter-group :is(.radio-item, .check-item) input { top: 0; visibility: hidden; }

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter .radio-item.btn-type {
    flex: 0 0 calc((100% - 12px) / 4);
    min-width: 0;
}
:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter .radio-item.btn-type .labelling {
    width: 100%;
    border-color: transparent;
    background: #f9f9fa;
    text-align: center;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter .radio-item.btn-type input:checked ~ .labelling {
    background: #fe6a2b;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter .radio-item.btn-type input:disabled ~ .labelling {
    opacity: 1;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter .radio-item.btn-type input:disabled ~ .labelling .label-txt {
    opacity: 0.3;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter .radio-item.btn-type .label-txt {
    margin: 0 auto;
}

:is(.tire-list-filter, .list-filter, .store-filter) .sheet .sheet-body .filter-group.local-deal-location-filter .radio-item.btn-type .icon-holder { display: none; }




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(리뷰)-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

.review-article {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0 0 24px;
    border-bottom: 1px dashed #d9dbdc;
    overflow: hidden;
}


.modal-item[data-ref="all-review-modal"] .modal-pannel .modal-header { z-index: 2; }

.modal-item:not([data-ref="all-review-modal"]) .modal-pannel:has(.review-article) {
    background: #F9F9FA;
}

.modal-item:not([data-ref="all-review-modal"]) .review-article {
    padding: 24px 24px 32px;
    border-radius: 0;
    border: none;
}

.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition {
    padding: 32px 0 24px;
}

.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition .rating-item { margin-top: 12px; }
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition .rating-item .rating-btn:disabled { pointer-events: none; }
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition .rating-item .rating-btn:disabled ~ .rating-detail { display: flex; }
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition .rating-item .rating-btn:disabled:after { display: none; }
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition .review-timing { margin: 16px 0; }
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition .text-review { max-height: none; }
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-composition .text-review p {
    max-height: none;
    display: block;
    overflow: hidden;
}

.modal-item:not([data-ref="all-review-modal"]) .review-article .review-photo-swiper {
    width: auto;
    height: auto;
    aspect-ratio: 3/2;
    overflow: hidden;
    margin-top: -24px;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 24px;
}
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-photo-swiper .swiper-pagination {
    bottom: 8px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-photo-swiper .swiper-pagination-bullet { background: #D9DBDC; }
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-photo-swiper .swiper-pagination-bullet-active { background: #fe6a2b;}
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-photo-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-item:not([data-ref="all-review-modal"]) .review-article .review-photo-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.modal-item:not([data-ref="all-review-modal"]) .review-article .review-block {
    background-color: rgba(249,249,250,0.9);
}


:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-list .review-article:not(:first-of-type) { margin-top: 40px; }

.review-article .review-target {
    -webkit-tap-highlight-color: transparent;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;
}

.review-article .review-target:is(a, button):hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

.review-article .review-target .info-area .equipment-info { margin-top: 8px; }

.review-article .review-composition {
    padding: 0;
}

.review-main .review-article .review-composition {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
}

.review-article .review-composition .reviewer-wrap {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 20px;
}

:is(.review-main, :is(.shopping-tire-detail, .shopping-auto-service-detail)) .review-article .review-composition .reviewer-wrap { padding-right: 0;}


.review-article .review-composition .reviewer-wrap .reviewer {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
}

.review-article.best-review .review-composition .reviewer-wrap .reviewer:before {
    flex: none;
    content: 'BEST';
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 2px;
    background: #fe6a2b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.review-article .review-composition .reviewer-wrap .reviewer .name {
    flex: none;
    display: inline-block;
    line-height: 20px;
    font-weight: 400;
}

.review-article .review-composition .reviewer-wrap .reviewer .car {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 20px;
    color: #5b6068;
    gap: 8px;
}

.review-article .review-composition .reviewer-wrap .reviewer .car:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 16px;
    border-left: 1px solid #a0a6af;
    position: relative;
    top: 2px;
}

.review-article .review-composition .reviewer-wrap .reviewer .store {
    width: auto;
    height: 20px;
    padding: 0 8px;
    border: 1px solid #fe6a2b;
    border-radius: 2px;
    color: #fe6a2b;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    margin-left: auto;
}

.review-article .review-composition .popup-menu-item {
    width: auto;
    height: auto;
    position: absolute;
    top: -6px;
    right: -8px;
}

.review-article .review-composition .footer .popup-menu-item {
    position: relative;
    top: auto;
    right: auto;
    margin-top: -4px;
    margin-bottom: -4px;
    margin-left: 8px;
}

.review-article .review-composition .popup-menu-item .popup-trigger-btn { background: transparent; }

.review-article .review-composition .popup-menu-item:hover .popup-menu-pannel { display: block;}

.review-article .review-composition .popup-menu-item .popup-menu-pannel {
    display: none;
    width: 72px;
    height: auto;
    overflow: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #d9dbdc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1;
}

.review-article .review-composition .footer .popup-menu-item .popup-menu-pannel { top: auto; bottom: 100%;}

.review-article .review-composition .popup-menu-item .popup-menu-pannel .btn-item {
    padding: 0;
}

.review-article .review-composition .popup-menu-item .popup-menu-pannel .btn-item:not(:last-of-type) {
    border-bottom: 1px solid #d9dbdc;
}

.review-article .review-composition .review-timing {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.review-article .review-composition .review-timing p {
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.review-article .review-composition .review-timing p.justify-between { justify-content: space-between; }

.review-article .review-composition .review-timing p em {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-weight: 500;
    color: #fe6a2b;
}

.review-article .review-composition .review-timing p em:before {
    content: '\e9c8';
    font-family: 'LineIcons';
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-weight: 400;
    color: #2a3138;
}

.review-article .review-composition .review-timing .graph {
    --fill: attr(data-fill);
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: #d9dbdc;
    margin-top: 6px;
    overflow: hidden;
    position: relative;
}

.review-article .review-composition .review-timing .graph .fill {
    display: block;
    width: 0;
    height: 100%;
    background: #fe6a2b;
    position: absolute;
    top: 0;
    left: 0;
}

.review-article .review-composition .text-review {
    width: 100%;
    height: auto;
    max-height: 48px;
    overflow: hidden;
    position: relative;
}

.review-article .review-composition .text-review.clamped.on {
    max-height: none;
}

.review-article .review-composition .text-review p {
    font-size: 14px;
    line-height: 24px;
    word-break: break-all;
    position: relative;
    cursor: default;
}

.review-article .review-composition .text-review:not(:has(p)) { display: none; }
.review-article .review-composition .text-review:has(p:empty) { display: none; }

.review-article .review-composition .text-review p .space {
    display: inline-block;
    width: 20px;
    height: 1px;
    line-height: 1px;
}

.review-article .review-composition .text-review .expand-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #2a3138;
    border-radius: 50%;
    background: transparent;
    border: none;
    outline: none;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(4px) translateY(4px);
    z-index: 1;
}

.review-article .review-composition .text-review .expand-btn:after {
    content: '\e915';
    font-family: 'LineIcons';
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    transform: translateZ(0) rotate(0deg);
    transition: all 0.2s;
}

.review-article .review-composition .text-review.clamped:not(.on):hover .expand-btn:after { transform: translateY(4px) translateZ(0) rotate(0deg); }
.review-article .review-composition .text-review .expand-btn:hover:after { transform: translateY(4px) translateZ(0) rotate(0deg); }

.review-article .review-composition .text-review.clamped.on .expand-btn:after {
    transform: translateZ(0) rotate(-180deg);
}

.review-article .review-composition .text-review.clamped.on .expand-btn:hover:after {
    transform: translateY(-4px) translateZ(0) rotate(-180deg);
}

.review-article .review-composition .text-review.clamped p { cursor: pointer; }

.review-article .review-composition .text-review.clamped:before {
    content: '⋯';
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 80px;
    height: 24px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 60%);
    font-size: 14px;
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 32px;
    pointer-events: none;
    z-index: 1;
}

.review-article .review-composition .text-review.clamped.on:before { display: none; }

.review-article .review-composition .text-review.clamped:after {
    content: '\e915';
    font-family: 'LineIcons';
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateZ(0) rotate(0deg);
    transition: all 0.2s;
    pointer-events: none;
    z-index: 1;
}

.review-article .review-composition .text-review.clamped.on:after {
    transform: translateZ(0) rotate(180deg);
}

.review-article .review-composition .text-review .btn-item {
    background: transparent;
}

.review-article .review-composition .keyword-review > span {
    border: 1px solid #f2f2f7;
}

.review-main .review-article .review-composition .keyword-review > span { background: #f9f9fa;}
:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-article .review-composition .keyword-review > span { background: #f9f9fa;}

.review-article .review-composition .footer {
    justify-content: flex-start;
}

.review-main .review-article .review-composition .footer {
    margin-top: auto;
    margin-bottom: 0;
}

.review-article .review-composition .thumbup-btn {
    border-color: #C0C6CE;
    color: #a0a6af;
}

.review-article .review-composition .thumbup-btn.on {
    border-color: transparent;
    background: #fe6a2b;
    color: #fff;
}

.review-article .review-composition .thumbup-btn .label-txt { font-size: 12px;}


.review-article .review-declare-form {
    display: none;
    width: 100%;
    background: #F9F9FA;
    padding: 20px 0;
    margin-top: 8px;
}

.review-main .review-article .review-declare-form { padding: 20px; }

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-article .review-declare-form { padding: 20px; }

.review-article.status-declare .review-declare-form { display: block; }

.review-article .review-declare-form textarea::placeholder { font-size: 12px;}

.review-article .review-declare-form .close-btn {
    position: absolute;
    background-color: transparent;
    right: -12px;
    top: -12px;
}


.review-article .review-block {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1;
}

.review-article.status-block .review-block { display: flex;}



.review-target {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
    background: #F2F2F7;
    border-radius: 4px;
}


 .review-target .thumb-area {
    -webkit-tap-highlight-color: transparent;
    flex: none;
    width: 80px;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    pointer-events: none;
}

 .review-target .thumb-area:hover { background: rgba(0,0,0,0.06);}

 .review-target .thumb-area .img-layer {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

 .review-target .thumb-area .img-layer img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

 .review-target .thumb-area .brand-layer {
    width: 80px;
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

 .review-target .thumb-area .brand-layer img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

 .review-target .info-area {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

 .review-target .info-area :where(.product-info, .option-info, .equipment-info) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.review-target .info-area .product-info {
    flex-wrap: wrap;
    gap: 4px 8px;
}

 .review-target .info-area .product-info .name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    word-break: normal;
}

.review-target .info-area .cate-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.review-target .info-area .cate-badge span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 20px;
    border-radius: 10px;
    background: #fff;
    color: #5b6068;
    font-size: 11px;
    font-weight: 400;
    padding: 0 8px;
}

:where(.review-article, .available-review-item, .my-review-item) .review-target .info-area .cate-badge span { background: #F2F2F7; }

 .review-target .info-area :where(.size, .quantity) {
    font-size: 14px;
    line-height: 20px;
}

 .review-target .info-area .equipment-info {
    margin-top: 8px;
}

 .review-target .info-area .store {
    width: auto;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #fe6a2b;
    border-radius: 2px;
    color: #fe6a2b;;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

 .review-target .info-area .date {
    color: #5b6068;
    font-size: 12px;
    line-height: 16px;
}


.review-composition {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
}

.review-composition .header {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

.review-composition .body {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 0;
}

.review-composition .footer {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.review-composition .equipment-review-timing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .equipment-review-timing .equipment-info {
    margin-right: 16px;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .equipment-review-timing .equipment-info:after {
    content: '';
    display: block;
    width: 0;
    height: 20px;
    border-left: 1px solid #d9dbdc;
    margin-left: 8px;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .equipment-review-timing .equipment-info:not(:has(~ .review-timing)) {
    margin-right: 0;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .equipment-review-timing .equipment-info:not(:has(~ .review-timing)):after {
    display: none;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .equipment-review-timing .review-timing { width: 220px;}

.review-main .review-composition .equipment-review-timing .review-timing {
    width: 220px;
    position: absolute;
    bottom: -16px;
    right: 0;
    margin: 0;
    transform: translateY(100%);
}


.review-composition .equipment-info {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.review-composition .equipment-info .store {
    width: auto;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #fe6a2b;
    border-radius: 2px;
    color: #fe6a2b;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.review-composition .equipment-info .date {
    color: #5b6068;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}



.review-composition .rating-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.review-composition .rating-item {
    width: 100%;
}

.review-composition .rating-item .date {
    font-size: 12px;
    line-height: 16px;
    color: #5b6068;
}

.review-composition .rating-item .btn-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.review-composition .rating-item .rating-btn {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background: transparent;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: left;
    line-height: 24px;
    height: 24px;
}

.review-composition .rating-item .rating-btn:hover { background: rgba(0,0,0,0.04);}

.review-composition .rating-item .rating-btn * { user-select: none; }

.review-composition .rating-item .rating-btn:after {
    content: '\e915';
    font-family: 'LineIcons';
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    transition: all 0.2s;
}

.review-composition .rating-item .rating-btn.on:after { transform: translateZ(0) rotate(-180deg); }

.review-composition .rating-item:has(.rating-btn.on) .rating-detail { display: flex; }

.review-composition .rating-item .rating-detail {
    display: none;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 48px;
    padding: 12px 24px;
    background: #fff;
    border-radius: 4px;
    margin-top: 16px;
}

.review-main .review-composition .rating-item .rating-detail {
    flex-wrap: nowrap;
    background: #f9f9fa;
    gap: 20px;
    justify-content: space-between;
}

.review-main .review-composition .rating-item .rating-detail .rating-wrap { flex: none; }

.review-main .review-composition .rating-item .rating-detail .rating-title { flex: none; line-height: 20px; }

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail)) .review-composition .rating-item {
    background: #f9f9fa;
    gap: 20px;
    justify-content: space-between;
    display: flex;
    border-radius: 4px;
    padding-left: 24px;
}

:is([data-ref="all-review-modal"]) .review-composition .rating-item {
    background: #f9f9fa;
    gap: 20px;
    justify-content: space-between;
    display: flex;
    border-radius: 4px;
    padding-left: 16px;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .rating-item .rating-total {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .rating-item .rating-total .rating {
    flex: none;
    width: 80px;
    height: 16px;
    background-size: 80px auto;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .rating-item .rating-total .rating span {
    height: 16px;
    background-size: 80px auto;
}

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .rating-item .rating-detail {
    flex-wrap: nowrap;
    background: transparent;
    justify-content: flex-end;
    display: flex;
    margin-top: 0;
}
:is(:is(.shopping-tire-detail, .shopping-auto-service-detail)) .review-composition .rating-item .rating-detail { gap: 40px; }
:is([data-ref="all-review-modal"]) .review-composition .rating-item .rating-detail { gap: 24px; padding: 12px 16px; }

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .rating-item .rating-detail .rating-wrap { flex: none; }



:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .rating-item .rating-total .rating-point { font-size: 14px; line-height: 20px; }

:is(:is(.shopping-tire-detail, .shopping-auto-service-detail), [data-ref="all-review-modal"]) .review-composition .rating-item .rating-detail .rating-title { flex: none; line-height: 20px; }

.review-composition .rating-item .rating-detail .rating-wrap {
    flex: 0 0 calc((100% - 48px) / 2);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.review-composition .rating-item .rating-detail .rating-title {
    flex: 1 0 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.review-composition .rating {
    flex: none;
    width: 80px;
    height: 16px;
    background-size: 80px auto;
}

.review-composition .rating span {
    height: 16px;
    background-size: 80px auto;
}

.review-composition .rating-detail .rating {
    flex: none;
    width: 60px;
    height: 12px;
    background-size: 60px auto;
}

.review-composition .rating-detail .rating span {
    height: 12px;
    background-size: 60px auto;
}

.review-composition .rating-item .rating-point,
.review-composition .rating-wrap .rating-point {
    flex: none;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

.review-composition .write-time {
    font-size: 12px;
    line-height: 16px;
    color: #5b6068;
}

.review-composition .write-time em { color: #2a3138; font-weight: 400;}

.review-composition .text-review {
    font-size: 14px;
    line-height: 24px;
    word-break: break-all;
}

.review-composition .keyword-review {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.review-composition .keyword-review:empty { display: none; }
.review-composition .keyword-review:not(:has(*)) { display: none; }

.modal-item[data-ref="review-detail"] .review-composition .keyword-review { margin: 16px 0;}

.review-composition .keyword-review > span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid #d9dbdc;
    background: #fff;
    font-size: 12px;
    line-height: 16px;
    padding: 4px 8px;
    color: #000;
}

[data-icon]:before {
    --icon-size: 20px;
    --icon-sheet-row: 5;
    content: '';
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-image: url('../images/icon/keyword_review_icon_sheet.png');
    background-size: auto calc(var(--icon-size) * var(--icon-sheet-row));
    background-repeat: no-repeat;
}

[data-icon^="price"]:before { background-position-y: calc(var(--icon-size) * 0); }
[data-icon^="product"]:before { background-position-y: calc(var(--icon-size) * -1); }
[data-icon^="recommend"]:before { background-position-y: calc(var(--icon-size) * -2); }
[data-icon^="service"]:before { background-position-y: calc(var(--icon-size) * -3); }
[data-icon^="braking"]:before { background-position-y: calc(var(--icon-size) * -4); }

[data-icon$="val-1"]:before { background-position-x: calc(var(--icon-size) * 0); }
[data-icon$="val-2"]:before { background-position-x: calc(var(--icon-size) * -1); }
[data-icon$="val-3"]:before { background-position-x: calc(var(--icon-size) * -2); }
[data-icon$="val-4"]:before { background-position-x: calc(var(--icon-size) * -3); }
[data-icon$="val-5"]:before { background-position-x: calc(var(--icon-size) * -4); }

.review-composition .photo-review {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.review-composition .photo-review .img-holder {
    flex: none;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.review-composition .photo-review .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-composition .keyword-photo-wrap {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
}

.review-composition .keyword-photo-wrap .keyword-review {
    width: auto;
    flex: 1 0 0;
    min-width: 0;
}

.review-composition .keyword-photo-wrap .keyword-review:empty { display: none; }
.review-composition .keyword-photo-wrap .keyword-review:not(:has(*)) { display: none; }


.review-composition .keyword-photo-wrap .photo-review {
    width: auto;
    flex: none;
    flex-wrap: nowrap;
    min-width: 0;
}


.review-composition .footer .write-time { color: #2a3138;}

.review-composition .footer .btns-wrap {
    flex: none;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.review-composition .footer .btns-wrap .btn-item.btn-s { height: 28px; line-height: 26px; border-radius: 2px; }


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=mypage-myreview-------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mypage-myreview {
    width: 100%;
    height: auto;
    position: relative;
}

.mypage-myreview .head-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 24px 0 16px;
    background: #fff;
}

.mypage-myreview .head-section hgroup {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
}

.mypage-myreview .head-section hgroup h3 {
    font-size: 30px;
    line-height: 42px;
}

.mypage-myreview .head-section hgroup .title-icon {
    width: 56px;
    height: auto;
    margin-right: 16px;
}

.mypage-myreview .head-section .review-info-box {
    width: 100%;
    height: auto;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 16px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
}

.mypage-myreview .head-section .review-info-box:after { display: none;}

.mypage-myreview .head-section .review-info-box > li {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: auto;
    position: relative;
    border-radius: 8px;
    background: #F2F2FF;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.mypage-myreview .head-section .review-info-box > li:nth-of-type(2) {
    flex: none;
    width: 40%;
}


.mypage-myreview .head-section .review-info-box > li .bullet-icon {
    flex: none;
    width: 48px;
    height: 48px;
}

.mypage-myreview .head-section .review-info-box > li .cont-wrap {
    min-height: 0;
    height: auto;
    margin-bottom: 40px;
}

.mypage-myreview .head-section .review-info-box > li:nth-of-type(2) .cont-wrap { margin-bottom: 12px; }

.mypage-myreview .head-section .review-info-box > li .cont-wrap p {
    font-size: 14px;
    line-height: 20px;
    color: #5b6068;
}

.mypage-myreview .head-section .review-info-box > li .cont-wrap p em { font-weight: 500; color: #2a3138;}

.mypage-myreview .head-section .review-info-box > li .cont-wrap .infographic-benefit {
    width: auto;
    height: 100px;
    margin-top: 20px;
}


.mypage-myreview .review-notice-section {
    background: #fff;
    padding-bottom: 8px;
}

.mypage-myreview .review-list-section .item-not-found {
    width: 100%;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 24px;
}


.mypage-myreview .review-notice-section .accordion-item {
    border-bottom: 8px solid #F2F2F7;
}

.mypage-myreview .review-notice-section .accordion-btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    gap: 4px;
}

.mypage-myreview .review-notice-section .accordion-btn .line-icons.chev-down {
    position: relative;
    right: auto;
    top: auto;
    transform: translateZ(0) rotate(0deg);
}

.mypage-myreview .review-notice-section .accordion-item.on .accordion-btn .line-icons.chev-down { transform: translateZ(0) rotate(180deg); }

.mypage-myreview .review-notice-section .accordion-btn .label-txt {
    font-size: 16px;
    line-height: 20px;
}

.mypage-myreview .review-notice-section .accordion-cont {
    padding: 4px 0 20px;
}

.mypage-myreview .review-notice-section .accordion-cont .notice-box {
    border-radius: 8px;
    background: #F9F9FA;
    font-size: 12px;
    padding: 16px 24px;
    
}

.mypage-myreview .review-notice-section .accordion-cont * { color: #5b6068;}

.mypage-myreview .review-notice-section .accordion-cont .list-style-disc > li {
    padding-left: 20px;
    line-height: 20px;
    margin: 8px 0;
}

.mypage-myreview .tab-item {
    position: relative;
    top: auto;
    margin-top: 48px;
}

.mypage-myreview .tab-item .btn-item {
    background: transparent;
    color: #5b6068;
}

.mypage-myreview .tab-item .btn-item.on {
    border-bottom: 1px solid #fe6a2b;
    color: #fe6a2b;
}

.mypage-myreview .review-list-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0 0 32px;
}

.mypage-myreview :is(.available-review-item, .my-review-item) {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    padding: 16px 16px 24px 0;
    margin: 24px 0;
    border-bottom: 1px dashed #d9dbdc;
}

.mypage-myreview :is(.available-review-item, .my-review-item) .review-target {
    flex: none;
    width: 280px;
    background: #fff;
    gap: 16px;
}

.mypage-myreview :is(.available-review-item, .my-review-item) .review-target .cate-badge { margin-bottom: -4px; }


.available-review-item .equipment-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.available-review-item .equipment-info .store {
    width: auto;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #fe6a2b;
    border-radius: 2px;
    color: #fe6a2b;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.available-review-item .equipment-info .date {
    color: #5b6068;
    font-size: 12px;
    line-height: 16px;
}


.available-review-item .review-status {
    width: 100%;
    height: auto;
    position: relative;
}

.available-review-item .review-status .status-msg { margin-top: 8px; }

.available-review-item .review-status .status-msg p {
    font-size: 14px;
    line-height: 20px;
}

.available-review-item .review-status .status-action {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
    margin-top: 16px;
}

.available-review-item .review-status .status-action .progress-item .step-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.available-review-item .review-status .status-action .progress-item .step-indicator .step {
    flex: none;
    width: 22px;
    height: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    --status-color: #d9dbdc;
}

.available-review-item .review-status .status-action .progress-item .step-indicator .step.done { --status-color: #00B3C5; }
.available-review-item .review-status .status-action .progress-item .step-indicator .step.on { --status-color: #fe6a2b; }

.available-review-item .review-status .status-action .progress-item .step-indicator .step:before {
    font-family: 'LineIcons';
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    color: var(--status-color);
}

.available-review-item .review-status .status-action .progress-item .step-indicator .step.done:before { content: '\e9aa'; }
.available-review-item .review-status .status-action .progress-item .step-indicator .step.on:before { content: '\e9c7'; }
.available-review-item .review-status .status-action .progress-item .step-indicator .step.missed:before { content: '\e9c9'; }

.available-review-item .review-status .status-action .progress-item .step-indicator .step:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--status-color);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.available-review-item .review-status .status-action .progress-item .due-date {
    font-size: 14px;
    line-height: 20px;
    color: #5b6068;
    margin-top: 8px;
}

.available-review-item .review-status .status-action .progress-item .due-date em {
    color: #2a3138;
}

.available-review-item .review-status .status-action .btn-item.btn-s { height: 28px; line-height: 26px; border-radius: 2px;}

.my-review-item .review-composition { padding: 0; }

.my-review-item .review-composition .header {
    margin-top: 16px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.my-review-item .review-composition .header .dp-flex {
    gap: 8px;
    flex-direction: column;
}

.my-review-item .review-composition .photo-review {
    width: auto;
    flex: none;
}

.my-review-item .review-composition .write-time {
    font-size: 14px;
    line-height: 20px;
    color: #5b6068;
    white-space: nowrap;
}

.my-review-item .review-composition .footer {
    align-items: flex-end;
    gap: 20px;
}

.my-review-item .review-composition .footer .control-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

.my-review-item .review-composition .footer  .write-time { font-size: 12px;}


.my-review-item .review-composition .keyword-review > span {
    background: #f2f2f7;
    border: none;
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=review-main-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.review-main {
    --detail-page-guardrail-width: 960px;
}

.review-main .guardrail {
    width: var(--detail-page-guardrail-width);
}

.review-main .review-intro-section {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding-top: 48px;
}

.review-main .review-intro-section > h1 {
    font-size: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.review-main .review-intro-section > h1 .title-graphic {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    position: relative;
}

.review-main .review-intro-section .hero-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 32px;
    border-radius: 12px;
}


.review-main .review-intro-section .hero-anim {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    margin-top: 32px;
    aspect-ratio: 960/268;
}

.review-main .review-intro-section .hero-anim .hero-bg {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.review-main .review-intro-section .hero-anim .hero-swiper {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.review-main .review-intro-section .hero-anim .hero-swiper .swiper-wrapper {
    transition-timing-function: ease-in-out;
}

.review-main .review-intro-section .hero-anim .hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.review-main .review-intro-section .hero-anim .hero-swiper .swiper-slide .hero-tire {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 50% 80%;
    transform: translateZ(0) scale(1);
    transition: all 0.1s ease-out;
}

.review-main .review-intro-section .hero-anim .hero-swiper.move .swiper-slide .hero-tire {
    transform: translateZ(0) scale(1.2);
    transition: all 0.1s ease-in;
}

.review-main .review-intro-section .hero-anim .hero-swiper .swiper-slide .hero-msg {
    display: block;
    width: 263px;
    height: auto;
    position: absolute;
    top: 4%;
    left: 50%;
    transform-origin: 50% 120%;
    transform: translateX(-50%) translateY(0) translateZ(0) scale(1);
    opacity: 1;
    transition: all 0.4s 0.2s cubic-bezier(0.000, 1.030, 0.600, 1.515);
}

.review-main .review-intro-section .hero-anim .hero-swiper.move .swiper-slide .hero-msg {
    transition: all 0s ease-in;
    transform: translateX(-50%) translateY(40px) translateZ(0) scale(1);
    opacity: 0;
}

.review-main .brand-filter-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 56px 0 40px;
    overflow: hidden;
}


.review-main .brand-filter-scroller {
    --col-num: 8;
    width: 100%;
    padding: 0;
    overflow: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.review-main .brand-filter-scroller::-webkit-scrollbar { display: none;}

.review-main .brand-filter-scroller .brand-filter-btn {
    flex: 0 0 calc((100% - ((var(--col-num) - 1) * 8px)) / var(--col-num));
    display: block;
    width: auto;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    background: transparent;
}

.review-main .brand-filter-scroller .brand-filter-btn .thumb-area {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #F9F9FA;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-main .brand-filter-scroller .brand-filter-btn .thumb-area > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-main .brand-filter-scroller .brand-filter-btn .thumb-area:has(img[src*='bi_full_on_dark.svg']) {
    background: linear-gradient(#000, #666);
}
.review-main .brand-filter-scroller .brand-filter-btn .thumb-area > img[src*='bi_full_on_dark.svg'] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(0.8);
}

.review-main .brand-filter-scroller .brand-filter-btn .thumb-area:after {
    content: '';
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(160,166,175,0.1);
    pointer-events: none;
}

.review-main .brand-filter-scroller .brand-filter-btn:hover .thumb-area:after {
    background: rgba(42,49,56,0.1);
}

.review-main .brand-filter-scroller .brand-filter-btn .title-area {
    margin-top: 8px;
    text-align: center;
}

.review-main .brand-filter-scroller .brand-filter-btn .title-area p {
    font-size: 12px;
    line-height: 16px;
    color: #5b6068;
}

.review-main .brand-filter-scroller .brand-filter-btn.on .title-area p { font-weight: 700; color: #fe6a2b; }


.review-main .list-filter {
    height: auto;
    overflow: visible;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 701;
}

.review-main .list-filter .dp-flex {
    width: 100%;
    height: auto;
    padding: 8px 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    position: relative;
}

.review-main .list-filter::-webkit-scrollbar { display: none;}

.review-main .list-filter .result {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: #fff;
    z-index: 2;
}

.review-main .list-filter .result .result-txt {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: #fe6a2b;
}

.review-main .list-filter .filter-reset-btn { white-space: nowrap;}

.review-main .list-filter .list-filter-swiper {
    flex: 1 0 0;
    min-width: 0;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    position: absolute;
    padding-left: 180px;
    padding-right: 160px;
    pointer-events: none;
}

.review-main .list-filter .list-filter-swiper .swiper-slide {
    width: auto;
    position: relative;
}

.review-main .list-filter .filter-btn {
    flex: none;
    color: #5b6068;
    white-space: nowrap;
    padding-right: 12px;
    pointer-events: all;
}
.review-main .list-filter .filter-btn.on {
    border-color: #fe6a2b;
    color: #fe6a2b;
    font-weight: 500;
}

.review-main .list-filter.stuck:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: -1px;
    border-bottom: 1px solid #d9dbdc;
}

.list-filter-position-anchor {
    height: 0;
    position: relative;
}


.review-main .list-func {
    width: 100%;
    height: auto;
    position: relative;
    padding: 12px 12px 12px 0;
    border-top: 8px solid #f2f2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    
}

.review-main .list-func .compare-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
}

.review-main .list-func .compare-item .toggle-switch {
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    padding-right: 12px;
}

.review-main .list-func .compare-item .toggle-switch span { font-size: 14px; margin-left: 8px; }

.review-main .list-func .sroter-item {
    margin-left: auto;
    margin-right: 0;
}

.review-main .list-func .sroter-item select.input-box {
    border-color: transparent;
    font-size: 14px;
    font-weight: 400;
    text-align:right;
    padding-left: 8px;
    cursor: pointer;
}

.review-main .list-func .sroter-item .form-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.review-main .list-func .sroter-item .form-control .input-group .tools {
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.review-main .review-list .review-article {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px;
}

.review-main .review-list .review-article:not(:first-of-type) { margin-top: 40px; }

.review-main .review-article .review-target-area {
    flex: none;
    width: 280px;
    padding: 32px 24px;
    background: #f2f2f7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
}

.review-main .review-article .review-target-area .review-target {
    align-self: stretch;
    padding: 0;
    background: transparent;
}

.review-main .review-target .info-area .cate-badge span { background: #fff; }



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=review-reg------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.full_review .layerC:has(.qna_write) {
    width: 100%;
    max-height: calc(100vh - 110px);
    overflow-y: scroll;
}

.full_review .layerC .qna_write {
    width: 100%;
    padding: 0;
    height: auto;
    overflow: hidden;
}

#layerScarcePopup .layer_box:has(.review-reg, .qna_write) { border: none; }

.review-reg {
    width: 100%;
    max-height: calc(100vh - 110px);
    overflow-y: scroll;
}

.review-reg .target-section {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 20px 32px;
}

.review-reg .target-section:after { display: none; }

.review-reg .target-section .thumb-area {
    flex: none;
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    pointer-events: none;
    background: #F2F2F7;
}

.review-reg .target-section .thumb-area .img-layer {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.review-reg .target-section .thumb-area .img-layer img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.review-reg .target-section .thumb-area .brand-layer {
    width: 80px;
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-reg .target-section .thumb-area .brand-layer img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.review-reg .target-section .info-area {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.review-reg .target-section .info-area p {
    font-size: 14px;
    line-height: 24px;
}

.review-reg .target-section .info-area p em {
    color: #fe6a2b;
    font-weight: 500;
}

.review-reg .step-indicator-section {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 32px;
}

.review-reg .step-indicator-section:after { display: none; }

.review-reg .step-indicator-section .step-indicator {
    flex: none;
    width: 72px;
    height: 72px;
    position: relative;
    background: #F2F2F7;
    border: 1px solid transparent;
    border-radius: 12px;
    user-select: none;
}

.review-reg .step-indicator-section .step-indicator:before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
}

.review-reg .step-indicator-section .step-indicator:nth-of-type(1):before { background-image: url('../images/icon/icon_review_step_rating.png'); }
.review-reg .step-indicator-section .step-indicator:nth-of-type(2):before { background-image: url('../images/icon/icon_review_step_keyword.png'); }
.review-reg .step-indicator-section .step-indicator:nth-of-type(3):before { background-image: url('../images/icon/icon_review_step_text.png'); }
.review-reg .step-indicator-section .step-indicator:nth-of-type(4):before { background-image: url('../images/icon/icon_review_step_photo.png'); }

.review-reg .step-indicator-section .step-indicator.option { opacity: 0.2; }

.review-reg .step-indicator-section:has(.step-indicator.on) .step-indicator:has(~ .step-indicator.on) {
    background: #fff;
    opacity: 1;
}

.review-reg .step-indicator-section:has(.step-indicator.on) .step-indicator:has(~ .step-indicator.on):before { background-image: url('../images/icon/icon_review_step_done.png'); }

.review-reg .step-indicator-section .step-indicator.on {
    background: #fff;
    border-color: #fe6a2b;
    opacity: 1 !important;
}

.review-reg .step-indicator-section .step-indicator > p {
    width: 100%;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #000;
    user-select: none;
    position: absolute;
    left: 0;
    bottom: 8px;
}

.review-reg .step-swiper-section {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 32px; 
}

.review-reg .step-swiper-section .review-step-swiper {
    width: 100%;
}

.review-reg .step-swiper-section .review-step-swiper .prev-step-btn {
    padding: 0 8px 0 4px;
    position: absolute;
    bottom: 0;
    left: 32px;
    z-index: 2;
    background: transparent;
    opacity: 0;
    pointer-events: all;
    transition: all 0.3s;
}

.review-reg .step-swiper-section .review-step-swiper .prev-step-btn .label-txt { font-size: 14px; }

.review-reg .step-swiper-section .review-step-swiper .prev-step-btn.on { opacity: 1; pointer-events: all; }

.review-reg .step-swiper-section .review-step-swiper .prev-step-btn .line-icons {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    background: #2a3138;
    color: #fff;
}

.review-reg .review-step {
    padding: 16px 32px 0;
    overflow: hidden;
    height: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.review-reg .review-step hgroup {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.review-reg .review-step hgroup .is-required {
    display: inline-block;
    width: auto;
    height: 20px;
    line-height: 20px;
    border-radius: 12px;
    background: #fe6a2b;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 0 12px;
}

.review-reg .review-step.option hgroup .is-required {
    background: transparent;
    color: #00B3C5;
    font-size: 14px;
    padding: 0;
}

.review-reg .review-step hgroup h3 {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.5px;
    margin-top: 8px;
}

.review-reg .review-step hgroup p {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 4px;
    color: #5b6068;
}

.review-reg .review-step .input-wrap {
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.review-reg .review-step .list-style-disc { flex: none; margin-top: 8px;}

.review-reg .review-step .list-style-disc > li {
    line-height: 16px;
    padding-left: 16px;
    font-size: 12px;
    color: #5b6068;
}

.review-reg .review-step .list-style-disc > *:before { width: 16px; }

.review-reg .review-step .action-btns {
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    opacity: 1;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 2;
    position: relative;
}

.review-reg .review-step .action-btns.on {
    opacity: 1;
    pointer-events: all;
    transition: all 0.3s 0.3s;
}

.review-reg .review-step .action-btns .btn-item.btn-s { width: 100px; }

.review-reg .review-step .action-btns .btn-item.btn-s .label-txt { font-size: 14px;}

.review-reg .review-step .mileage-input {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 32px;
}

.review-reg .review-step .mileage-input .radio-item.btn-type {
    flex: 0 0 calc((100% - 8px) / 2);
}

.review-reg .review-step .mileage-input .radio-item.btn-type .labelling {
    width: 100%;
    line-height: 34px;
    padding: 0;
    border-radius: inherit;
    border: 1px solid #d9dbdc;
    text-align: center;
    pointer-events: none;
}

.review-reg .review-step .mileage-input .radio-item.btn-type:hover .labelling { background: rgba(0,0,0,0.05);}

.review-reg .review-step .mileage-input .radio-item.btn-type input:checked ~ .labelling {
    background: transparent;
    border-color: #fe6a2b;
    color: #2a3138;
}

.review-reg .review-step .rating-input {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 28px;
}

.review-reg .review-step .rating-input .category {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 12px 8px 8px;
    border-bottom: 1px solid #f2f2f7;
}

.review-reg .review-step .rating-input h4 {
    font-size: 14px;
    line-height: 20px;
}

.review-reg .review-step .rating-input .star-rating {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    gap: 4px;
}

.review-reg .review-step .rating-input .star-rating input {
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
}

.review-reg .review-step .rating-input .star-rating .star {
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 24px;
    height: 24px;
    font-size: 0;
    background-image: url('../images/icon/icon_star_rating.png');
    background-size: cover;
    background-position: 0 50%;
    position: relative;
}

.review-reg .review-step .rating-input .star-rating .star:hover:before,
.review-reg .review-step .rating-input .star-rating:has(.star:hover) .star:has(~ .star:hover):before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
    background-image: url('../images/icon/icon_star_rating.png');
    background-size: cover;
    background-position: 100% 50%;
    opacity: 0.5;
    pointer-events: none;
}


.review-reg .review-step .rating-input .star-rating:has(input:checked[value="1"]) .star:is(:nth-of-type(1)) { background-position: 100% 50%;}
.review-reg .review-step .rating-input .star-rating:has(input:checked[value="2"]) .star:is(:nth-of-type(1), :nth-of-type(2)) { background-position: 100% 50%;}
.review-reg .review-step .rating-input .star-rating:has(input:checked[value="3"]) .star:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) { background-position: 100% 50%;}
.review-reg .review-step .rating-input .star-rating:has(input:checked[value="4"]) .star:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) { background-position: 100% 50%;}
.review-reg .review-step .rating-input .star-rating:has(input:checked[value="5"]) .star:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5)) { background-position: 100% 50%;}




.review-reg .review-step .keyword-input {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 28px;
    padding: 0;
    overflow: visible;
}
.review-reg .review-step .keyword-input .scroller { width: auto; }
.review-reg .review-step .keyword-input .scroller::-webkit-scrollbar { display: none; }

.review-reg .review-step .keyword-input .category {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: auto;
}

.review-reg .review-step .keyword-input h4 {
    font-size: 14px;
    line-height: 16px;
    pointer-events: none;
}

.review-reg .review-step .keyword-input .btns-wrap {
    margin-top: 12px;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.review-reg .review-step .keyword-input * { user-select: none; }

.review-reg .review-step .keyword-input .swiper-scrollbar { height: 2px; border-radius: 1px; bottom: -12px; z-index: 2;}
.review-reg .review-step .keyword-input .swiper-scrollbar .swiper-scrollbar-drag { background: rgba(42,49,56,0.5);}

.review-reg .review-step .keyword-input .btns-wrap .check-item .labelling {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid #d9dbdc;
    background: #fff;
    font-size: 12px;
    line-height: 16px;
    padding: 8px 12px;
    color: #000;
    user-select: none;
    pointer-events: none;
}

.review-reg .review-step .keyword-input .btns-wrap .check-item:hover .labelling { background: rgba(0,0,0,0.05);}

.review-reg .review-step .keyword-input .btns-wrap .check-item input:checked ~ .labelling { border-color: #fe6a2b; }

.review-reg .review-step .text-input {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 24px;
}

.review-reg .review-step .text-input textarea {
    width: 100%;
    height: 196px;
    line-height: 24px;
    font-size: 14px;
    resize: none;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #F2F2F7;
    background: #f9f9fa;
}

.review-reg .review-step .text-input textarea:focus { border-color: #fe6a2b;}

.review-reg .review-step .text-input textarea::placeholder { font-size: 14px; color: #A0A6AF; }

.review-reg .review-step .text-input .limit {
    font-size: 12px;
    line-height: 16px;
    position: absolute;
    right: 16px;
    bottom: 8px;
    color: rgba(160,166,175,0.8);
}

.review-reg .review-step .photo-input {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 24px;
}

.review-reg .review-step .photo-input .file-upload-btn {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.review-reg .review-step .photo-input .file-upload-btn input {
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.review-reg .review-step .photo-input .file-upload-btn .labelling {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #2a3138;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.review-reg .review-step .photo-input .file-upload-btn:hover .labelling { background: #2a3138; color: #fff;}

.review-reg .review-step .photo-input .file-upload-btn .labelling .label-txt {
    font-size: 14px;
    line-height: 16px;
}

.review-reg .review-step .photo-input .thumb-container {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 24px;
}

.review-reg .review-step .photo-input .thumb-container .thumb-holder {
    flex: 1 0 calc((100% - 16px) / 3);
    min-width: 0;
    height: 100px;
    overflow: hidden;
    position: relative;
    border: 1px solid #F2F2F7;
    border-radius: 4px;
}

.review-reg .review-step .photo-input .thumb-container .thumb-holder:before {
    content: '\e9a1';
    font-family: 'LineIcons';
    color: #C0C6CE;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
}

.review-reg .review-step .photo-input .thumb-container .thumb-holder .img-layer {
    width: 100%;
    height: 100%;
    position: relative;
}

.review-reg .review-step .photo-input .thumb-container .thumb-holder .img-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-reg .review-step .photo-input .thumb-container .thumb-holder .img-layer:empty ~ .remove-btn { display: none; }

.review-reg .review-step .photo-input .thumb-container .thumb-holder .remove-btn {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #000;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
}


.review-complete {
    width: 100%;
    padding: 60px 0;
    text-align: center;
}

.review-complete h3 {
    font-size: 20px;
    line-height: 32px;
}

.review-complete .benefit-info {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 24px;
}

.review-complete .benefit-info img {
    width: 180px;
    height: auto;
    aspect-ratio: 3/2;
}

.review-complete .benefit-info .msg-box {
    padding: 12px 24px;
    border-radius: 8px;
    background: #F2F2F7;
}

.review-complete .benefit-info .msg-box p { font-size: 14px; line-height: 24px;}







/* 20241212 start */
.size-confirm {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: auto;
    padding: 48px 24px 32px;
}

.size-confirm .primary-msg {
    font-size: 20px;
    text-align: center;
}

.size-confirm .selected-size {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    margin-top: 20px;
    gap: 8px;
}

.size-confirm .selected-size .label-txt { font-size: 14px;}


.size-confirm .selected-size .size-txt-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
}

.size-confirm .selected-size:has(.size-txt-wrap .size-txt:nth-child(2)) {
    flex-direction: column;
}

.size-confirm .selected-size .size-txt-wrap:has(.size-txt:nth-child(2)) .size-txt:nth-child(1):after {
    content: '';
    display: inline-block;
    width: 0;
    height: 20px;
    border-right: 1px solid #C0C6CE;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.size-confirm .selected-size .size-txt-wrap:has(.size-txt:nth-child(2)) .size-txt:nth-child(1):before {
    content: '전륜';
    font-size: 14px;
}

.size-confirm .selected-size .size-txt-wrap:has(.size-txt:nth-child(2)) .size-txt:nth-child(2):before {
    content: '후륜';
    font-size: 14px;
}

.size-confirm .selected-size .size-txt-wrap:has(.size-txt:nth-child(2)) .size-txt { font-size: 20px; }

.size-confirm .selected-size .size-txt {
    display: inline-flex;
    line-height: 24px;
    font-size: 24px;
    font-weight: 500;
    gap: 4px;
    color: #fe6a2b;
}

.size-confirm .selected-size .btn-reselect {
    height: 28px;
    line-height: 26px;
    border-radius: 14px;
    padding: 0 4px 0 12px;
    background: #f2f2f7;
}

.size-confirm .selected-size:has(.size-txt-wrap .size-txt:nth-child(2)) ~ .tip-img { margin-top: 20px; }

.size-confirm .tip-img {
    display: block;
    width: 335px;
    margin: 40px auto 0;
    user-select: none;
}

.size-confirm .btn-container:has(.btn-size-confirm) {
    text-align: center;
    margin-top: 60px;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    bottom: 12px;
}

.size-confirm .btn-size-confirm {
    background: #000;

}
.size-confirm .btn-size-confirm .label-txt { margin-left: 40px;}
.size-confirm .btn-size-confirm .line-icons { margin-left: 16px;}
/* 20241212 end */



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(검색)-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
body:has(#searchPopup.on) { height: 100%; overflow: hidden; }

#searchPopup {
    width: 100%;
    height: 100%;
    padding-right: 4px;
    position: fixed;
    top: 0;
    left: 0;
    background: #FE6A2B;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(80px) translateZ(0);
    transition: all 0.2s;
    --search-popup-guardrail-width: 960px;
}

#searchPopup.on {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

#searchPopup *:not(input, select) { user-select: none; }

#searchPopup .search-header {
    flex: none;
    width: 100%;
    height: auto;
    padding: 0;
    background: #FE6A2B;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
}

#searchPopup .search-header .navbar {
    width: var(--search-popup-guardrail-width);
    height: 48px;
    position: relative;
    top: 0;
    left: 0;
    border-bottom: none;
    padding: 0;
    background: transparent;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#searchPopup .search-header .navbar h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
}

#searchPopup .search-header .navbar .btn-item.btn-close {
    flex: none;
    margin: 0 -8px 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

#searchPopup .search-header .navbar .btn-item.btn-close:hover:before { background: rgba(255,255,255,0.1); }

#searchPopup .search-header .search-input-wrap {
    width: var(--search-popup-guardrail-width);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

#searchPopup .size-search-input-wrap {
    width: 100%;
    padding: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

#searchPopup .size-search-input-wrap.on { display: flex; }

#searchPopup .bottom-sticky {
    width: auto;
    height: auto;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(254,106,43,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    z-index: 1;
}

#searchPopup .btn-container {
    width: 100%;
    height: auto;
    padding: 0 0 24px;
    padding-bottom: calc(24px + constant(safe-area-inset-bottom));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#searchPopup .btn-container .btn-item {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 40px;
}

#searchPopup .btn-container .btn-item:disabled {
    opacity: 1;
    background: #c0c6ce;
}

#searchPopup .btn-container .btn-item:disabled .label-txt { opacity: 0.7;}

#searchPopup .btn-container .btn-item .label-txt { font-size: 18px; }

#searchPopup .btn-container .btn-item:only-child { flex: none; }

#searchPopup .search-input-item {
    flex: none;
    display: none;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 72px;
    padding: 0 36px 0 40px;
    border-radius: 500px;
    position: relative;
    background: #fff;
    overflow: hidden;
}


#searchPopup .search-input-item.on { display: flex; }

#searchPopup .search-input-item input {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: inherit;
    position: relative;
    font-size: 18px;
    color: #2a3138;
    border: none;
    outline: none;
    padding: 0;
    background: transparent;
    caret-color: #fe6a2b;
    line-height: 32px;
    vertical-align: middle;
}

#searchPopup .search-input-item .btn-clear {
    flex: none;
    display: inline-block;
}

#searchPopup .search-input-item input:placeholder-shown ~ .btn-clear { display: none; }

#searchPopup .search-input-item .btn-clear .line-icons {
    color: #2a3138;
    border-radius: 100px;
}

#searchPopup .search-input-item input::placeholder {
    font-size: 18px;
    color: #A0A6AF;
}

#searchPopup .search-input-item input:read-only {
    font-size: 18px;
    color: #A0A6AF;
}

#searchPopup .search-input-item:after {
    content: "\e92e";
    font-family: 'LineIcons';
    --size: 40px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    text-align: center;
    font-size: 32px;
    color: #2a3138;
    pointer-events: none;
    display: none;
}

#searchPopup .search-input-item:has(input:placeholder-shown):after { display: block; }
#searchPopup .search-input-item:has(input:read-only):after { display: none !important; }
#searchPopup .search-input-item[data-input-sequence="car-number-search"]:has(input:placeholder-shown):after { display: none !important; }


#searchPopup .search-input-item .search-type-chip {
    flex: none;
    width: auto;
    height: 32px;
    padding-left: 12px;
    border-radius: 4px;
    background: #2a3138;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    overflow: hidden;
    overflow-x: clip;
    white-space: nowrap;
    margin-right: 16px;
}

#searchPopup .search-input-item:has([data-is-done="true"]) .search-type-chip {
    background: transparent;
    color: #A0A6AF;
    padding: 0;
    margin-right: 0;
    font-size: 0;
}

#searchPopup .search-input-item:has([data-is-done="true"]) .search-type-chip > span { display: none; }
#searchPopup .search-input-item:has([data-is-done="true"]) .search-type-chip:before { font-size: 18px; }

#searchPopup .search-input-item.by-size:has([data-is-done="true"]):not(:has(~ .search-input-item.by-size)) .search-type-chip:before { content: ''; }



#searchPopup .search-input-item.by-size:has([data-is-done="true"]):has(~ .search-input-item.by-size) .search-type-chip:before { content: '전륜 사이즈 : '; margin-right: 8px; }

#searchPopup .search-input-item.by-size ~ .search-input-item.by-size:has([data-is-done="true"]) .search-type-chip:before { content: '후륜 사이즈 : '; margin-right: 8px; }

#searchPopup .search-input-item:has([data-is-done="true"]) .search-type-chip .btn-item { display: none; }


#searchPopup [data-differ-front-rear="false"] .search-input-item.by-size:nth-of-type(1) { display: flex; }
#searchPopup [data-differ-front-rear="false"] .search-input-item.by-size:nth-of-type(2) { display: none; }

#searchPopup [data-differ-front-rear="true"] .search-input-item.by-size:nth-of-type(1) { display: flex; }
#searchPopup [data-differ-front-rear="true"] .search-input-item.by-size:nth-of-type(2) { display: flex; }

#searchPopup [data-differ-front-rear="false"] .search-input-item.by-size:has([data-is-done="true"]) .search-type-chip:before { content: '' !important; margin-right: 0 !important; }

#searchPopup .btn-add-rear-size {
    display: none;
    margin: 0 auto;
    padding: 0 24px;
}

#searchPopup .btn-add-rear-size.on { display: inline-block; }

#searchPopup .btn-add-rear-size .label-txt { font-size: 16px;}

#searchPopup .btn-add-rear-size:hover:before { background: rgba(255,255,255,0.1);}

#searchPopup .btn-add-rear-size .line-icons.size-32 {
    border-radius: 50%;
    border: 1px solid #fff;
    font-size: 20px;
    margin-left: 8px;
}

#searchPopup .search-input-item.user-name:has(input:placeholder-shown):after { display: none; }

#searchPopup .search-input-item.user-name input:disabled { background: transparent; }

#searchPopup .search-input-item.user-name input::placeholder { color: #A0A6AF; }

#searchPopup .search-input-item.user-name input:placeholder-shown ~ .btn-submit {
    background: #A0A6AF;
    pointer-events: none;
    width: 48px;
}

#searchPopup [data-input-sequence="car-number-search"].on:has(input:placeholder-shown) ~ [data-input-sequence="owner-search"] .btn-submit {
    background: #A0A6AF;
    pointer-events: none;
    width: 48px;
}

#searchPopup .search-input-item.user-name .btn-submit {
    flex: none;
    width: 120px;
    margin-right: -20px;
    transition: all 0.2s;
}

#searchPopup .search-input-item.user-name .btn-submit .spinner {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
    opacity: 0;
}

#searchPopup .search-header:has(.waiting) .search-input-item { pointer-events: none; }
#searchPopup .search-header:has(.waiting) .search-input-item input { color: #A0A6AF; }

#searchPopup .search-input-item.user-name.waiting {
    pointer-events: none;
}

#searchPopup .search-input-item.user-name.waiting input {
    color: #A0A6AF;
}

#searchPopup .search-input-item.user-name.waiting .btn-submit {
    background: #A0A6AF;
    pointer-events: none;
    width: 48px;
}

#searchPopup .search-input-item.user-name.waiting .btn-submit .line-icons.arrow-right { opacity: 0; }

#searchPopup .search-input-item.user-name.waiting .btn-submit .spinner { opacity: 1; }





#searchPopup .recent-search {
    display: none;
    width: var(--search-popup-guardrail-width);
    height: auto;
    padding: 24px 0 0;
    margin-left: auto;
    margin-right: auto;
    background: #FE6A2B;
    border-bottom: 1px dashed #fff;
}

#searchPopup .recent-search:not(:has(.chip)) { display: none; }
#searchPopup .recent-search.on:not(:has(.chip)) { display: none; }
#searchPopup .recent-search.on { display: block; }
#searchPopup .search-body:has([data-sequence="result-car-model"].on) .recent-search { display: none; }
#searchPopup .search-body:has([data-sequence="result-car-model-cartype"].on) .recent-search { display: none; }

#searchPopup .recent-search h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

#searchPopup .recent-search .chips-wrap {
    width: auto;
    height: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 0 24px;
    gap: 8px;
}

#searchPopup .recent-search .chips-wrap::-webkit-scrollbar { display: none; }

#searchPopup .recent-search .chip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 36px;
    padding: 0 8px 0 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.24);
    white-space: nowrap;
    color: #fff;
    user-select: none;
    box-shadow: inset 0 0 0 1px #fff;
    cursor: pointer;
    transform: translateZ(0);
}

#searchPopup .recent-search .chip * { user-select: none; }

#searchPopup .recent-search .chip:has(.label-txt:hover) { background: rgba(255,255,255,0.3);}

#searchPopup .recent-search .chip:has(.btn-remove:hover) { background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); }
#searchPopup .recent-search .chip:has(.btn-remove:hover) .label-txt { opacity: 0.4; text-decoration: line-through; }

#searchPopup .recent-search .chip .label-txt {
    display: inline-block;
    width: auto;
    max-width: 200px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#searchPopup .recent-search .chip .btn-remove {
    appearance: none;
    display: inline-block;
    padding: 0;
    background: transparent;
    color: #fff;
    margin: 0;
    border: none;
    outline: none;
}

#searchPopup .recent-search .chip .btn-remove:hover:before { display: none; }



#searchPopup .search-body {
    flex: 1 0 0;
    min-height: 0;
    width: 100%;
    overflow: auto;
    position: relative;
}

#searchPopup .search-body::-webkit-scrollbar {
    width: 6px;
    mix-blend-mode: multiply;
}

#searchPopup .search-body::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    mix-blend-mode: multiply;
}

#searchPopup .search-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    mix-blend-mode: multiply;
}

#searchPopup .search-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}


#searchPopup .choose-search-type {
    width: 100%;
    height: auto;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

#searchPopup .choose-search-type > p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
}

#searchPopup .choose-search-type .btn-item {
    width: 360px;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

#searchPopup .choose-search-type .btn-item:hover:before { display: none; }

#searchPopup .choose-search-type .btn-item .label-txt {
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;

    background-position: 0 100%;
    background-size: 0% 1px;
    background-repeat: no-repeat;
}

#searchPopup .choose-search-type .btn-item:hover .label-txt {
    background-image: linear-gradient(#fff 0 0);
    background-size: 100% 1px;
    transition: background-size 0.2s;
}

#searchPopup .choose-search-type .btn-item .line-icons {
    border-radius: 500px;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
}




#searchPopup .data-container {
    display: none;
    width: var(--search-popup-guardrail-width);
    height: auto;
    position: relative;
    color: #fff;
    padding: 40px 0;
    margin-left: auto;
    margin-right: auto;
    /* overflow: clip; */
}

#searchPopup .data-container.on { display: block; }

#searchPopup .data-container:has(.car-model-result) {
    display: block;
    height: 0;
    padding: 0 !important;
}

#searchPopup .data-container:has(.car-model-result).on { height: auto; }

#searchPopup .data-container.loading {
    padding: 120px 0;
    text-align: center;
}

#searchPopup .data-container.loading * {
    display: none;
}

#searchPopup .data-container.loading:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    position: relative;
    background-image: url('../images/common/spinner_w.svg');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    user-select: none;
    pointer-events: none;
}

#searchPopup .data-container.no-result {
    padding: 120px 0;
    text-align: center;
}

#searchPopup .data-container.no-result * {
    display: none;
}

#searchPopup .data-container.no-result:before {
    content: '\e96f';
    font-family: 'LineIcons';
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 40px;
    color: #fff;
    user-select: none;
    pointer-events: none;
}

#searchPopup .data-container.no-result:after {
    content: '검색 결과가 없습니다.';
    display: block;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    margin-top: 16px;
    user-select: none;
    pointer-events: none;
}



#searchPopup .car-model-card {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px;
    overflow: hidden;
    user-select: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 60px;
    overflow: hidden;
    background: #fff;
    height: 72px;
    border-radius: 36px;
    transition: all 0.3s;
}

#searchPopup .car-model-card * { user-select: none; }

#searchPopup .data-container:has(.car-model-card) { overflow: clip; }

#searchPopup .data-container.on .car-model-card {
    height: auto;
    height: calc-size(auto, size);
    border-radius: 32px;
}

#searchPopup .data-container.on .car-model-card [data-fade-in] {
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0);
}

#searchPopup .car-model-card [data-fade-in] {
    opacity: 0;
    transform: translateX(0) translateY(12px) translateZ(0);
    transition-duration: 0.4s;
    transition-property: opacity, transform;
    transition-timing-function: ease-out;
}

#searchPopup .car-model-card [data-fade-in="1"] { transition-delay: calc(0.3s + 0.2s * 1); }
#searchPopup .car-model-card [data-fade-in="2"] { transition-delay: calc(0.3s + 0.2s * 2); }
#searchPopup .car-model-card [data-fade-in="3"] { transition-delay: calc(0.3s + 0.2s * 3); }
#searchPopup .car-model-card [data-fade-in="5"] { transition-delay: calc(0.3s + 0.2s * 5); }
#searchPopup .car-model-card [data-fade-in="6"] { transition-delay: calc(0.3s + 0.2s * 6); }
#searchPopup .car-model-card [data-fade-in="4"] {
    transition-delay: calc(0.3s + 0.2s * 4);
    transform: translateX(24px) translateY(0) translateZ(0);
    transition-duration: 0.6s;
}

#searchPopup .car-model-card .detail-select-list {
    flex: none;
    width: 400px;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: 20px;
}

#searchPopup .car-model-card .detail-select-list .select-row {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#searchPopup .car-model-card .detail-select-list .select-row h6 {
    flex: none;
    display: inline-block;
    width: 60px;
    font-size: 14px;
    font-weight: 500;
}

#searchPopup .car-model-card .detail-select-list .select-row .select-item {
    flex: 1 0 0;
    min-width: 0;
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 8px;
    background: #f2f2f7;
}

#searchPopup .car-model-card .detail-select-list .select-row .select-item:after {
    content: '\e915';
    font-family: 'LineIcons';
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    pointer-events: none;
}

#searchPopup .car-model-card .detail-select-list .select-row .input-box {
    width: 100%;
    height: auto;
    padding: 8px;
    padding-right: 24px;
    font-size: 14px;
    line-height: 24px;
    color: #2a3138;
    border: none;
    border-radius: 8px;
    background: transparent;
    position: relative;
    text-overflow: ellipsis;
}

#searchPopup .car-model-card .detail-select-list .select-row .input-box:disabled {
    pointer-events: none;
    color: #a0a6af;
}

#searchPopup .car-model-card .detail-select-list .select-row .select-item:has(.input-box:disabled):after { color: #d9dbdc;}

#searchPopup .data-container .shopping-option {
    overflow: clip;
    height: 0;
    opacity: 0;
    transition: height 0.1s 1.6s, opacity 1s 1.6s;
}

#searchPopup .data-container.on .shopping-option {
    opacity: 1;
    height: auto;
    height: calc-size(auto, size);
}



#searchPopup .car-model-card:has(option:checked:disabled) ~ .shopping-option .size-option-list {
    padding: 40px 0 80px;
    text-align: center;
}

#searchPopup .car-model-card:has(option:checked:disabled) ~ .shopping-option .size-option-list * { display: none; }

#searchPopup .car-model-card:has(option:checked:disabled) ~ .shopping-option .size-option-list:before {
    content: '\e96f';
    font-family: 'LineIcons';
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 40px;
    color: #fff;
    user-select: none;
    pointer-events: none;
}

#searchPopup .car-model-card:has(option:checked:disabled) ~ .shopping-option .size-option-list:after {
    content: '차량 세부 정보를 선택하셔야\A타이어 사이즈 확인 후 쇼핑이 가능합니다.';
    white-space: pre;
    display: block;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    margin-top: -4px;
    user-select: none;
    pointer-events: none;
}


#searchPopup .car-model-card ~ .shopping-option .size-option-list.loading {
    padding: 40px 0 80px;
    text-align: center;
}

#searchPopup .car-model-card ~ .shopping-option .size-option-list.loading * {
    display: none !important;
}

#searchPopup .car-model-card ~ .shopping-option .size-option-list.loading:before {
    content: '' !important;
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    position: relative;
    background-image: url('../images/common/spinner_w.svg');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    user-select: none;
    pointer-events: none;
}

#searchPopup .car-model-card ~ .shopping-option .size-option-list.loading:after { display: none !important; }



#searchPopup .car-model-card .car-model-info {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

#searchPopup .car-model-card hgroup {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1;
}

#searchPopup .car-model-card hgroup h4 { line-height: 20px; font-size: 18px; font-weight: 500; color: #000; }
#searchPopup .car-model-card hgroup h5 {
    line-height: 20px;
    font-size: 14px;
    margin-top: 8px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

#searchPopup .car-model-card .btn-item.btn-reg-mycar {
    height: 32px;
    line-height: 30px;
    border-radius: 100px;
    padding: 0 16px;
    border-color: #d9dbdc;
    margin-top: 16px;
}

#searchPopup .car-model-card .btn-item.btn-reg-mycar .line-icons { color: #d9dbdc; }

#searchPopup .car-model-card .btn-item.btn-reg-mycar.on { color: #fe6a2b; }
#searchPopup .car-model-card .btn-item.btn-reg-mycar.on .line-icons { color: #fe6a2b; }

#searchPopup .car-model-card .img-holder {
    flex: none;
    width: 240px;
    height: 132px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}



#searchPopup .suggestion-list {
    width: 100%;
    height: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #fff;
}

#searchPopup .suggestion-list li {
    width: 100%;
    height: auto;
    padding: 0;
    line-height: 24px;
    position: relative;
    color: #fff;
    font-size: 0;
    vertical-align: middle;
}

#searchPopup .suggestion-list li *,
#searchPopup .suggestion-list li *:before,
#searchPopup .suggestion-list li *:after { user-select: none; }

#searchPopup .suggestion-list li:not(:first-of-type) { margin-top: 16px; }


#searchPopup .common-result {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    text-align: left;
}

#searchPopup .common-result .label-txt {
    vertical-align: middle;
    display: inline;
    line-height: 40px;
    font-size: 30px;
    font-weight: 400;
    user-select: none;
    color: #fff;
    background-position: 0 100%;
    background-size: 0% 1px;
    background-repeat: no-repeat;
}

#searchPopup .common-result:hover .label-txt {
    background-image: linear-gradient(#fff 0 0) !important;
    background-size: 100% 1px;
    transition: background-size 0.2s;
}

#searchPopup .suggestion-list li.on .common-result .label-txt {
    background-image: linear-gradient(rgba(255,255,255,0.6) 0 0);
    background-size: 100% 1px;
    transition: background-size 0.2s;
}


#searchPopup .common-result .label-txt:has(em) { color: rgba(255,255,255,0.6); }
#searchPopup .common-result .label-txt em { color: #fff; }




#searchPopup .size-option-list-wrap {
    width: 100%;
    height: auto;
    position: relative;
    text-align: left;
    padding: 24px 0 40px;
}

#searchPopup .size-option-list-wrap .btn-size-check-tooltip {
    margin-bottom: 40px;
    padding: 0 4px;
}

#searchPopup .size-option-list-wrap .btn-size-check-tooltip .label-txt {
    border-bottom: 1px dotted #fff;
    font-weight: 700;
}

#searchPopup .size-option-list-wrap .size-option-list {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding-left: 8px;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item input {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item .icon-holder {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #d9dbdc;
    background-color: #fff;
    margin-right: 8px;
    position: relative;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item .icon-holder:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fe6a2b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(0);
    transition: all 0.2s;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item input:checked ~ .icon-holder:before {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item .label-txt {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 24px;
    font-size: 24px;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item:has(.label-txt:nth-of-type(2)) .label-txt:nth-of-type(1) {
    border-right: 1px solid #fff;
    padding-right: 12px;
    margin-right: 12px;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item:has(.label-txt:nth-of-type(2)) .label-txt:nth-of-type(1):before {
    content: '전륜';
    white-space: pre;
    font-size: 14px;
    line-height: 20px;
    margin-right: 6px;
}

#searchPopup .size-option-list-wrap .size-option-list .size-radio-item:has(.label-txt:nth-of-type(2)) .label-txt:nth-of-type(2):before {
    content: '후륜 ';
    white-space: pre;
    font-size: 14px;
    line-height: 20px;
    margin-right: 6px;
}

#searchPopup .size-radio-item.basic-size:after {
    content: '기본 옵션';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    color: #fe6a2b;
    vertical-align: middle;
    padding: 0 8px;
    margin-left: 8px;
    white-space: nowrap;
}

#searchPopup .size-caution {
    width: auto;
    height: auto;
    border-top: 1px dashed #fff;
    padding: 24px 0 24px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    user-select: none;
    text-align: center;
}

#searchPopup .select-brand {
    width: 100%;
    height: auto;
    position: relative;
    color: #fff;
}

#searchPopup .select-brand h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

#searchPopup .select-brand h4:not(:first-of-type) { margin-top: 48px; }

#searchPopup .select-brand .brand-list {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px 64px;
    margin-top: 32px;
}

#searchPopup .select-brand .brand-list button {
    flex: 0 0 calc((100% - 56px) / 8);
    flex: 0 0 64px;
    max-width: 64px;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: center;
    color: #fff;
}

#searchPopup .select-brand .brand-list button .emblem-holder {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.16);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#searchPopup .select-brand .brand-list button:hover .emblem-holder {
    background-color: #f2f2f7;
}

#searchPopup .select-brand .brand-list button .emblem-holder img {
    width: 80%;
    height: 80%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    user-select: none;
}

#searchPopup .select-brand .brand-list button p {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

#searchPopup .detail-model-result {
    width: auto;
    height: auto;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    position: relative;
    color: #fff;
    text-align: left;
    user-select: none;
}

#searchPopup .detail-model-result * { user-select: none; }

#searchPopup .detail-model-result .img-holder {
    flex: none;
    width: 114px;
    height: 64px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

#searchPopup .detail-model-result .label-holder {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: auto;
    color: #fff;
}

#searchPopup .detail-model-result .label-txt {
    display: inline;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    background-position: 0 100%;
    background-size: 0% 1px;
    background-repeat: no-repeat;
}

#searchPopup .detail-model-result:hover .label-txt {
    background-image: linear-gradient(#fff 0 0) !important;
    background-size: 100% 1px;
    transition: background-size 0.2s;
}

#searchPopup .suggestion-list li.on .detail-model-result .label-txt {
    background-image: linear-gradient(rgba(255,255,255,0.6) 0 0);
    background-size: 100% 1px;
    transition: background-size 0.2s;
}

#searchPopup .detail-model-result .label-txt:has(em) { color: rgba(255,255,255,0.6);}
#searchPopup .detail-model-result .label-txt em { color: #fff; }


#searchPopup .select-size {
    width: 100%;
    height: auto;
    position: relative;
}

#searchPopup .select-size .caution-txt {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 40px;
    color: #fff;
}

#searchPopup .select-size .caution-txt em { font-weight: 700;}

#searchPopup .select-size .size-list {
    width: auto;
    height: auto;
    margin-left: 120px;
    margin-right: 120px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

#searchPopup .size-btn {
    flex: 0 0 calc((100% - 64px) / 5);
    width: auto;
    height: 48px;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #000;
    text-align: center;
    user-select: none;
    border-radius: 4px;
    font-size: 18px;
}

#searchPopup .size-btn:hover { background: #f2f2f7; }

#searchPopup [data-size-step] [data-size-group] { display: none; }
#searchPopup [data-size-step="1"] [data-size-group="1"] { display: flex; }
#searchPopup [data-size-step="2"] [data-size-group="2"] { display: flex; }
#searchPopup [data-size-step="3"] [data-size-group="3"] { display: flex; }



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(쇼룸)-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.showroom-main {
    position: relative;
    padding-top: 48px;
}

.showroom-main-swiper-section {
    width: 100%;
    height: auto;
    position: relative;
}

.showroom-main-swiper-section h1 {
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
}

.showroom-main-swiper-section h1 em { font-weight: 700; }

.showroom-main-swiper {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0;
    margin-top: -24px;
}

.showroom-main-swiper .swiper-pagination.showroom-main-swiper-pagination { bottom: 8px; }
.showroom-main-swiper .swiper-pagination .swiper-pagination-bullet-active { background: #2a3138; }

.showroom-main-swiper-button-next,
.showroom-main-swiper-button-prev {
    width: 60px;
    height: 60px;
    background-color: rgba(42,49,56,0.65);
    top: 50%;
    transform: translateX(0) translateY(-50%) translateZ(0);
    transition: all 0.2s ease-out, background-color 0.1s;
    margin-top: 0;
}

.showroom-main-swiper-button-next { right: 0; transform: translateX(100%) translateY(-50%) translateZ(0); }
.showroom-main-swiper-button-prev { left: 0; transform: translateX(-100%) translateY(-50%) translateZ(0); }

.showroom-main-swiper-button-next:hover,
.showroom-main-swiper-button-prev:hover { background-color: rgba(42,49,56,0.85); }

.showroom-main-swiper-button-next.swiper-button-disabled { transform: translateX(100%) translateY(-50%) translateZ(0) !important; }
.showroom-main-swiper-button-prev.swiper-button-disabled { transform: translateX(-100%) translateY(-50%) translateZ(0) !important; }

.showroom-main-swiper:hover .showroom-main-swiper-button-next,
.showroom-main-swiper:hover .showroom-main-swiper-button-prev { transform: translateX(0) translateY(-50%) translateZ(0); }

.showroom-main-swiper-button-next:after,
.showroom-main-swiper-button-prev:after {
    font-family: 'LineIcons';
    display: inline-block;
    font-weight: 100;
    font-size: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    transform: translateX(0) translateZ(0);
    transition: all 0.2s;
}

.showroom-main-swiper-button-next:after { content: '\e917';}
.showroom-main-swiper-button-prev:after { content: '\e916';}

.showroom-main-swiper-button-next:hover:after { transform: translateX(4px) translateZ(0);}
.showroom-main-swiper-button-prev:hover:after { transform: translateX(-4px) translateZ(0);}

.showroom-main-swiper .swiper-slide {
    width: 540px;
    height: 390px;
    overflow: clip;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    backface-visibility: hidden;
}

.showroom-main-swiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s;
    background: #A0A6AF;
    transform: translateZ(0);
    border-radius: 24px;
}

.showroom-main-swiper .swiper-slide a * { user-select: none;}

.showroom-main-swiper .swiper-slide.swiper-slide-active {
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.showroom-main-swiper .swiper-slide.swiper-slide-active a {
    opacity: 1;
}

.showroom-main-swiper .swiper-slide.swiper-slide-prev a,
.showroom-main-swiper .swiper-slide.swiper-slide-next a {
    opacity: 0.7;
}

.showroom-main-swiper .swiper-slide:not(.swiper-slide-active,.swiper-slide-prev,.swiper-slide-next ) a {
    opacity: 0.2;
}


.showroom-main-swiper .img-holder {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: clip;
    position: relative;
    mix-blend-mode: multiply;
    transform: translateZ(0);
}

.showroom-main-swiper .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateZ(0) scale(1.2);
    animation: showroomMainBanner linear 8s infinite alternate;
    animation-play-state: paused;
}

.showroom-main-swiper .swiper-slide.swiper-slide-active .img-holder img {
    animation-play-state: running;
}

@keyframes showroomMainBanner {
    0% { transform: translateZ(0) scale(1.2); }
    100% { transform: translateZ(0) scale(1); }
}

.showroom-main-swiper .swiper-slide.swiper-slide-active hgroup {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.showroom-main-swiper hgroup {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -48px;
    color: #fff;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    user-select: none;
    opacity: 0;
    transform: translateY(60px) translateZ(0);
    transition: all 0.4s ease-out;
}

.showroom-main-swiper hgroup:before {
    content: 'SHOWROOM';
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.showroom-main-swiper hgroup h2 {
    font-size: 32px;
    font-weight: 900;
    line-height: 40px;
    margin-top: 8px;
    letter-spacing: -0.5px;
}

.showroom-main-swiper hgroup h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 16px;
    letter-spacing: -0.5px;
}


.showroom-brands-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 60px 0;
}

.showroom-brands-section h2 {
    font-size: 20px;
    font-weight: 300;
    line-height: 32px;
}

.showroom-brands-section h2 em { font-weight: 700; }

.showroom-brands {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 24px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.showroom-brands a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height:  64px;
    padding: 4px;
    padding-right: 32px;
    gap: 16px;
    background: #f2f2f7;
    border-radius: 100px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    text-decoration: none;
}

.showroom-brands a:hover {
    background: #eceeef;
}

.showroom-brands a .bi-holder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

.showroom-brands a .bi-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.showroom-brands a .label-txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}


.showroom-detail {
    position: relative;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

:has(.showroom-detail) #footer { margin-top: 0;}

.showroom-detail .guardrail.w-960 {
    width: 960px;
    height: auto;
    position: relative;
    margin: 0 auto;
}

.showroom-detail-header-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 48px 0 0;
}

.showroom-detail-header-section .page-title {
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
    padding: 0 0 16px;
    border-bottom: 2px solid #5B6068;
    color: #000;
}

.showroom-detail-header-section .page-title em {
    font-weight: 700;
}

.showroom-detail-header-section hgroup {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #d9dbdc;
}

.showroom-detail-header-section h1 {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.showroom-detail-header-section .date {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #a0a6af;
}

.showroom-detail-hero-section {
    width: auto;
    height: 390px;
    margin: 40px 0;
    background: linear-gradient(#fff 20%, #3F4349);
    border-radius: 24px;
}

.showroom-detail-hero-section .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    border-radius: inherit;
}

.showroom-detail-hero-section .txt-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    padding: 40px;
}

.showroom-detail-hero-section h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
}

.showroom-detail-hero-section h1:before {
    content: "SHOWROOM";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    position: absolute;
    top: -8px;
    left: 0;
    transform: translateY(-100%);
}

.showroom-detail-hero-section .summary {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 16px;
}

.showroom-detail-benefit-section {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    padding: 16px;
    user-select: none;
}

.showroom-detail-benefit-section h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.showroom-detail-benefit-section h2:before {
    content: "BENEFIT";
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 12px;
}

.showroom-benefit-coupon {
    width: auto;
    min-width: 264px;
    height: 156px;
    padding: 24px 40px 24px 32px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    color: #000;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.showroom-benefit-coupon:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 50'%3E%3Cpath d='M16,50c0-3.5-2.1-6.7-5.3-8.3C4.3,38.6,0,32.3,0,25S4.3,11.4,10.7,8.3c3.3-1.6,5.3-4.8,5.3-8.3v50Z' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    mask-size:  auto 43.1%, 100%;
    mask-repeat: no-repeat;
    mask-position: 100% 50%, 50%;
    mask-composite: exclude;
    background-image: linear-gradient(#FFA35D, #FE6A2B);
    background-size: calc(100% - 1px);
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.showroom-benefit-coupon:hover {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.showroom-benefit-coupon * {
    user-select: none;
    position: relative;
}

.showroom-benefit-coupon .coupon-accent {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #000;
}

.showroom-benefit-coupon .coupon-accent .coupon-rate {
    font-size: 24px;
    font-weight: 400;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.showroom-benefit-coupon .coupon-accent .coupon-rate em {
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
}

.showroom-benefit-coupon .coupon-accent .download-label {
    width: auto;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 0 28px;
}

.showroom-benefit-coupon .coupon-msg {
    font-size: 12px;
    font-weight: 300;
    margin-top: 16px;
    line-height: 20px;
    text-align: left;
}

.showroom-detail-benefit-section .coupon-notice {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 16px;
}

.showroom-detail-benefit-section .coupon-notice p {
    font-size: 12px;
    font-weight: 300;
}


.showroom-detail-body-section {
    width: 100%;
    height: auto;
    position: relative;
    user-select: none;
}

.showroom-detail-body-section * { user-select: none; }

.showroom-story {
    width: 100%;
    height: auto;
    position: relative;
    padding: 80px 0;
}

.showroom-story .story-img-area {
    width: auto;
    height: auto;
    position: relative;
    background: #A0A6AF;
}

.showroom-story .story-img-area .story-img {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
}

.showroom-story .product-anchor {
    width: 0;
    height: 0;
    position: absolute;
    z-index: 1;
    transition: all 0s 0.3s ease;
}

.showroom-story .product-anchor.act {
    z-index: 10;
    transition: all 0s ease;
}

.showroom-story .product-anchor:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    outline: 1px solid #fff;
    outline-offset: 4px;
    opacity: 0;
    transition: all 0.3s 0.3s ease;
}

.showroom-story .product-anchor.act:before {
    opacity: 1;
    transition: all 0.3s ease;
}


.showroom-story .product-anchor .anchor-point {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
    transition: all 0.3s 0.3s ease;
}

.showroom-story .product-anchor.act .anchor-point {
    transition: all 0.3s ease;
}

.showroom-story .product-anchor .anchor-point:before {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(217,217,217,0.6);
    border-radius: 100px;
    transform: translateX(-50%) translateY(-50%) scale(0.6);
    animation: ripple-pulse-scale 1.2s infinite cubic-bezier(0.165, 0.840, 0.440, 1.000), ripple-pulse-opacity 1.2s infinite linear;
    opacity: 1;
    transition: all 0.6s 1s;
}

.showroom-story .product-anchor.act .anchor-point:before {
    animation: none;
    opacity: 0;
    width: 0;
    height: 0;
    transition: all 0.6s;
}

@keyframes ripple-pulse-scale {
    0% { transform: translateX(-50%) translateY(-50%) scale(0.6); }
    100% { transform: translateX(-50%) translateY(-50%) scale(1.2); }
}

@keyframes ripple-pulse-opacity {
    0% { opacity: 1; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

.showroom-story .product-anchor .anchor-point:after {
    content: '\e9bd';
    font-family: "LineIcons";
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 36px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(1);
    transition: all 0.3s 0.6s ease;
    cursor: pointer;
}

.showroom-story .product-anchor.act .anchor-point:after {
    transform: translateX(-50%) translateY(-50%) scale(0);
    transition: all 0.3s ease;
}

.showroom-story .product-anchor .story-product-card {
    width: 0;
    height: 0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    will-change: auto;
    transition: all 0.3s 0.3s ease;
}

.showroom-story .product-anchor.act .story-product-card {
    width: 176px;
    height: 292px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.showroom-story .product-anchor .story-product-card > * {
    transform: translateY(16px) translateZ(0);
    transition: all 0.3s;
    opacity: 0;
}

.showroom-story .product-anchor.act .story-product-card > * {
    transform: translateY(0) translateZ(0);
    transition: all 0.3s 0.3s;
    opacity: 1;
}

.showroom-story .product-anchor .showroom-product-item {
    width: 176px;
}

.showroom-story .product-anchor .showroom-product-item .thumb-area { height: 144px; border-radius: 0; }
.showroom-story .product-anchor .showroom-product-item .thumb-area .img-layer img { transform: scale(0.94);}
.showroom-story .product-anchor .showroom-product-item .info-area {
    padding: 0 12px;
    margin-top: 8px;
}

.showroom-story .product-anchor .showroom-product-item .info-area:after {
    content: '상품보기';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 500;
    color: #000;
    text-align: center;
    line-height: 16px;
    border-top: 1px solid #D9DBDC;
    margin-top: 8px;
    padding: 8px 0 8px;
}


.showroom-story p {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}

.showroom-story p + p { margin-top: 8px;}

.showroom-story .inline-gutter {
    display: inline-block;
    width: 100%;
    height: 0;
    line-height: 0;
}

.showroom-detail-closing-section {
    width: 100%;
    height: auto;
    position: relative;
    user-select: none;
    margin-top: 80px;
}


.showroom-story-products {
    width: 100%;
    height: auto;
    position: relative;
    margin: 60px 0;
}

.showroom-story-products h3 {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.showroom-story-products h3 em { font-weight: 700;}

.showroom-story-products .product-list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px 20px;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
    margin-top: 24px;
}

.showroom-product-item {
    flex: none;
    display: block;
    width: 176px;
    height: auto;
    background: #fff;
    border-radius: 8px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.showroom-product-item * { user-select: none;}

.showroom-product-item .thumb-area {
    width: 100%;
    height: 156px;
    border-radius: 8px;
    background: #f2f2f7;
    overflow: hidden;
    position: relative;
}

.showroom-product-item:hover .thumb-area:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.1);
}

.showroom-product-item .thumb-area .brand-logo {
    width: auto;
    height: 14px;
    position: absolute;
    top: 12px;
    right: 8px;
}

.showroom-product-item .thumb-area .brand-logo ~ .img-layer {
    transform: translateY(8px);
}

.showroom-product-item .thumb-area .img-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showroom-product-item .thumb-area .img-layer img {
    width: auto;
    height: 100%;
    transform: scale(0.86);
}

.showroom-product-item .info-area {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 8px;
}

.showroom-product-item .info-area .product-name {
    width: 100%;
    height: auto;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showroom-product-item .info-area .product-size {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-top: 8px;
}

.showroom-product-item .info-area .product-price {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 8px;
}

.showroom-product-item .info-area .product-price .origin-price {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #5b6068;
    text-decoration: line-through;
}

.showroom-product-item .info-area .product-price .discount-price {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 4px;
}

.showroom-product-item .info-area .product-price .price {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    float: none;
}

.showroom-product-item .info-area .product-price .discount-rate {
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    color: #fe6a2b;
}


.showroom-story-brands {
    width: 100%;
    height: auto;
    position: relative;
}

.showroom-story-brands h3 {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.showroom-story-brands h3 em { font-weight: 700;}


.showroom-story-footer {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0 60px;
    margin-top: 80px;
    background: #F9F9FA;
}

.showroom-story-footer .pagination-nav {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 360px;
    padding: 0 6px;
}

.showroom-story-footer .pagination-nav :is(.prev-side, .next-side) {
    flex: 0 0 calc((100% - 360px) / 2);
    min-width: 0;
}

.showroom-story-footer .pagination-nav .prev-side { text-align: left; }
.showroom-story-footer .pagination-nav .prev-side a { align-items: flex-start; }

.showroom-story-footer .pagination-nav .next-side { text-align: right; }
.showroom-story-footer .pagination-nav .next-side a { align-items: flex-end; }

.showroom-story-footer .pagination-nav a {
    display: inline-flex;
    max-width: 100%;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.showroom-story-footer .pagination-nav a * { user-select: none; }

.showroom-story-footer .pagination-nav a span {
    display: flex;
    align-items: center;
    position: relative;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    transition: all 0.2s;
}

.showroom-story-footer .pagination-nav .prev-side a span:before {
    content: '\e916';
    font-family: 'LineIcons';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    font-weight: 400;
    color: #2a3138;
}

.showroom-story-footer .pagination-nav .next-side a span:after {
    content: '\e917';
    font-family: 'LineIcons';
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    font-weight: 400;
    color: #2a3138;
}

.showroom-story-footer .pagination-nav a .title {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #5b6068;
}

.showroom-story-footer .pagination-nav .prev-side a:hover span { transform: translateX(-6px) translateZ(0); }
.showroom-story-footer .pagination-nav .next-side a:hover span { transform: translateX(6px) translateZ(0); }
.showroom-story-footer .pagination-nav a:hover .title { text-decoration: underline; }

.showroom-story-footer .btn-wrap {
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showroom-story-footer .btn-wrap .btn-item {
    background: #000;
}


.showroom-brand {
    position: relative;
}

:root:has(.showroom-brand) {
    scroll-behavior: smooth;
}

.showroom-brand .guardrail.w-960 {
    width: 960px;
    height: auto;
    position: relative;
    margin: 0 auto;
}

.showroom-brand-hero-section {
    width: 100%;
    height: 380px;
    position: relative;
    overflow: hidden;
    background-color: #5B6068;
    user-select: none;
    z-index: 1;
}

.showroom-brand-hero-section * { user-select: none; }



.showroom-brand-hero-section .bg-layer {
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    background: rgba(0,0,0,0.2);
    mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.showroom-brand-hero-section .bg-layer .hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showroom-brand-hero-section .cover-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    padding: 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.showroom-brand-hero-section .cover-layer:before {
    content: 'BRAND';
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    margin-bottom: 24px;
}

.showroom-brand-hero-section .bi-img {
    display: block;
    width: auto;
    height: 64px;
}

.showroom-brand-hero-section .summary {
    font-size: 14px;
    line-height: 20px;
    margin-top: 24px;
}

.showroom-brand-benefit-section {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    padding: 32px 16px;
    user-select: none;
    background: #F2F2F7;
}

.showroom-brand-benefit-section h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.showroom-brand-benefit-section h2:before {
    content: "BENEFIT";
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
}

.showroom-brand-benefit-section .coupon-notice {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 16px;
}

.showroom-brand-benefit-section .coupon-notice p {
    font-size: 12px;
    font-weight: 500;
}

.brand-benefit-coupon {
    width: auto;
    min-width: 264px;
    height: 156px;
    padding: 16px 48px 16px 32px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 116'%3E%3Cpath d='M33,82.9c0-3.5-2-6.7-5.2-8.3-6.1-3.1-10.3-9.4-10.3-16.7s4.2-13.6,10.3-16.7c3.2-1.6,5.2-4.8,5.2-8.3V0H15.7v28.5C6,35.1.2,46,.2,58s5.8,22.9,15.5,29.5v28.5h17.3v-33.1h0Z' fill='%23EA5507'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);
    background-size: auto 100%, calc(100% - 24px) 100%;
    background-repeat: no-repeat;
    background-position: 100% 50%, 0% 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    color: #000;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.brand-benefit-coupon:hover {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}

.brand-benefit-coupon[data-brand="mc"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 116'%3E%3Cpath d='M33,82.9c0-3.5-2-6.7-5.2-8.3-6.1-3.1-10.3-9.4-10.3-16.7s4.2-13.6,10.3-16.7c3.2-1.6,5.2-4.8,5.2-8.3V0H15.7v28.5C6,35.1.2,46,.2,58s5.8,22.9,15.5,29.5v28.5h17.3v-33.1h0Z' fill='%23003972'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);}

.brand-benefit-coupon[data-brand="ct"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 116'%3E%3Cpath d='M33,82.9c0-3.5-2-6.7-5.2-8.3-6.1-3.1-10.3-9.4-10.3-16.7s4.2-13.6,10.3-16.7c3.2-1.6,5.2-4.8,5.2-8.3V0H15.7v28.5C6,35.1.2,46,.2,58s5.8,22.9,15.5,29.5v28.5h17.3v-33.1h0Z' fill='%23FF8C27'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);}

.brand-benefit-coupon[data-brand="pi"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 116'%3E%3Cpath d='M33,82.9c0-3.5-2-6.7-5.2-8.3-6.1-3.1-10.3-9.4-10.3-16.7s4.2-13.6,10.3-16.7c3.2-1.6,5.2-4.8,5.2-8.3V0H15.7v28.5C6,35.1.2,46,.2,58s5.8,22.9,15.5,29.5v28.5h17.3v-33.1h0Z' fill='%23E8101E'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);}

.brand-benefit-coupon[data-brand="bs"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 116'%3E%3Cpath d='M33,82.9c0-3.5-2-6.7-5.2-8.3-6.1-3.1-10.3-9.4-10.3-16.7s4.2-13.6,10.3-16.7c3.2-1.6,5.2-4.8,5.2-8.3V0H15.7v28.5C6,35.1.2,46,.2,58s5.8,22.9,15.5,29.5v28.5h17.3v-33.1h0Z' fill='%23231815'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);}

.brand-benefit-coupon[data-brand="gy"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 116'%3E%3Cpath d='M33,82.9c0-3.5-2-6.7-5.2-8.3-6.1-3.1-10.3-9.4-10.3-16.7s4.2-13.6,10.3-16.7c3.2-1.6,5.2-4.8,5.2-8.3V0H15.7v28.5C6,35.1.2,46,.2,58s5.8,22.9,15.5,29.5v28.5h17.3v-33.1h0Z' fill='%23004A91'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);}

.brand-benefit-coupon[data-brand="lf"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 116'%3E%3Cpath d='M33,82.9c0-3.5-2-6.7-5.2-8.3-6.1-3.1-10.3-9.4-10.3-16.7s4.2-13.6,10.3-16.7c3.2-1.6,5.2-4.8,5.2-8.3V0H15.7v28.5C6,35.1.2,46,.2,58s5.8,22.9,15.5,29.5v28.5h17.3v-33.1h0Z' fill='%234B2885'/%3E%3C/svg%3E"), linear-gradient(#fff, #fff);}


.brand-benefit-coupon * { user-select: none; }

.brand-benefit-coupon .brand-logo {
    width: auto;
    height: 18px;
    margin-left: -20px;
    margin-right: auto;
    margin-top: -4px;
}

.brand-benefit-coupon .coupon-accent {
    width: auto;
    height: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #000;
}

.brand-benefit-coupon .coupon-accent .coupon-rate {
    font-size: 24px;
    font-weight: 400;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.brand-benefit-coupon .coupon-accent .coupon-rate em {
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
}

.brand-benefit-coupon .download-label {
    width: auto;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 0 28px;
}

.brand-benefit-coupon.status-used {
    pointer-events: none;
    filter: none;
}

.brand-benefit-coupon.status-used .download-label {
    font-size: 0;
    background: #C0C6CE;
}
.brand-benefit-coupon.status-used .download-label:after {
    content: '사용 완료';
    font-size: 11px;
}

.showroom-brand-best-seller-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 60px 0;
}

.showroom-brand-best-seller-section h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #000;
}

.brand-best-seller-swiper {
    width: 100%;
    height: auto;
    margin-top: 40px;
    counter-reset: bestseller-ranking;
}

.brand-best-seller-swiper .swiper-slide {
    width: auto;
}

.brand-best-seller-swiper .swiper-slide .tire-list-item:after {
    counter-increment: bestseller-ranking;
    content: counter(bestseller-ranking);
    font-size: 20px;
    font-weight: 500;
    width: 32px;
    height: 32px;
    line-height: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: 4px;
    left: 4px;
}

.brand-best-seller-swiper .swiper-slide:not(.swiper-slide-active,.swiper-slide-prev,.swiper-slide-next ) .tire-list-item {
    opacity: 0;
    pointer-events: none;
}

.brand-best-seller-swiper .tire-list-item {
    width: 224px;
    text-align: center;
    transition: all 0.3s;
}

.brand-best-seller-swiper .tire-list-item * { user-select: none;}

.brand-best-seller-swiper .tire-list-item .thumb-area {
    background: transparent;
    height: 224px;
}

.brand-best-seller-swiper .tire-list-item .thumb-area .img-layer img { height: 100%; }
.brand-best-seller-swiper .tire-list-item .info-area { margin-top: 16px;}
.brand-best-seller-swiper .tire-list-item .info-area .badge-wrap { justify-content: center;}
.brand-best-seller-swiper .tire-list-item .info-area .product-name { justify-content: center; padding: 0; }
.brand-best-seller-swiper .tire-list-item .info-area .product-name .name-txt { font-size: 18px;}
.brand-best-seller-swiper .tire-list-item .info-area .rating-wrap { justify-content: center;}
.brand-best-seller-swiper .tire-list-item .info-area .rating-wrap .rating { text-align: left; }

.showroom-brand-lineup-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 60px 0;
    color: #000;
}

.showroom-brand-lineup-section h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #000;
}

.showroom-brand-lineup-section .brand-lineup {
    width: 100%;
    height: auto;
    position: relative;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

.showroom-brand-lineup-section .lineup-summary {
    width: 100%;
}

.showroom-brand-lineup-section .lineup-summary h3 {
    font-weight: 900;
    font-size: 40px;
    line-height: 40px;
    color: #000;
}

.showroom-brand-lineup-section .lineup-summary :where(hgroup, .title-wrap) {
    width: 100%;
    height: auto;
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.showroom-brand-lineup-section .lineup-summary :where(hgroup, .title-wrap) h3 {
    font-size: 20px;
    line-height: 28px;
    flex: 1 0 auto;
}

.showroom-brand-lineup-section .lineup-summary .summary-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 8px;
}

.showroom-brand-lineup-section .lineup-summary p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 16px;
}

.showroom-brand-lineup-section .lineup-summary .tags {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.showroom-brand-lineup-section .lineup-summary .tags > span {
    flex: none;
    width: auto;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fe6a2b;
    border-radius: 100px;
    padding: 0 16px;
    color: #f26a2b;
    font-weight: 700;
    font-size: 12px;
}

.showroom-brand-lineup-section .lineup-products {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.lineup-product-list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px 20px;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
}

.showroom-brand-lineup-section .lineup-features {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.showroom-brand-lineup-section .lineup-features .swiper-container:not(.swiper-tabs) {
    width: 100%;
    height: 312px;
    background: linear-gradient(#A0A6AF, #434549);
}

.showroom-brand-lineup-section .lineup-features .swiper-tabs {
    width: 100%;
    height: auto;
    background: transparent;
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.showroom-brand-lineup-section .lineup-features .swiper-tabs .swiper-wrapper {
    width: 100%;
    transform: translateX(0) !important;
    justify-content: center;
}

.showroom-brand-lineup-section .lineup-features .swiper-tabs .swiper-slide {
    width: auto;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent;
    color: #d9dbdc;
    pointer-events: all;
    cursor: pointer;
}

.showroom-brand-lineup-section .lineup-features .swiper-tabs .swiper-slide.swiper-slide-thumb-active {
    border-bottom: 2px solid #fe6a2b;
    font-weight: 700;
    color: #fff;
}

.showroom-brand-lineup-section .lineup-features .swiper-pagination {
    position: relative;
    bottom: auto;
}

.showroom-brand-lineup-section .lineup-features .swiper-pagination .swiper-pagination-bullet { background: #d9dbdc; }
.showroom-brand-lineup-section .lineup-features .swiper-pagination .swiper-pagination-bullet-active { background: #2a3138; }


.showroom-brand-lineup-section .lineup-features img.swiper-slide {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.showroom-brand-review-section {
    width: 100%;
    height: auto;
    position: relative;
    padding: 60px 0;
}

.showroom-brand-review-section hgroup {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.showroom-brand-review-section h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #000;
}

.showroom-brand-review-section .more-review-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.brand-review-list {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0;
}

.brand-review-list .brand-review-item {
    width: auto;
    height: auto;
    position: relative;
    border: 1px solid #d9dbdc;
    border-radius: 8px;
    overflow: hidden;
}

.brand-review-list .brand-review-item:hover {
    border: 1px solid #c0c6ce;
}

.brand-review-list .brand-review-item * { user-select: none; }

.brand-review-list .best-review-card {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    background: #F9F9FA;
    padding: 16px;
}


.brand-review-list .best-review-card .header-area {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}

.brand-review-list .best-review-card .header-area .review-product {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.brand-review-list .best-review-card .header-area .review-product .thumb-holder {
    flex: none;
    width: 72px;
    height: 56px;
    position: relative;
}

.brand-review-list .best-review-card .header-area .review-product .thumb-holder img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.9);
}

.brand-review-list .best-review-card .header-area .review-product .info {
    flex: 1 1 auto;
    min-width: 0;
}

.brand-review-list .best-review-card .header-area .review-product .info .brand-logo {
    width: auto;
    height: 20px;
}

.brand-review-list .best-review-card .header-area .review-product .info .product-name {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 4px;
}

.brand-review-list .best-review-card .header-area .review-photo {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
}

.brand-review-list .best-review-card .header-area .review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-review-list .best-review-card .middle-area {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    margin-top: 24px;
}

.brand-review-list .best-review-card .middle-area .writer {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    gap: 4px;
}

.brand-review-list .best-review-card .middle-area .writer .name {
    flex: none;
    font-weight: 500;
    line-height: 16px;
}

.brand-review-list .best-review-card .middle-area .writer .car {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5B6068;
    line-height: 16px;
    padding-left: 4px;
    margin-left: 4px;
    position: relative;
    border-left: 1px solid #d9dbdc;
}

.brand-review-list .best-review-card .middle-area .rating-wrap {
    flex: none;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
}

.brand-review-list .best-review-card .middle-area .rating-wrap .rating {
    display: inline-block;
    width: 60px;
    height: 10px;
    background: url('../images/common/rating-off.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
    line-height: initial;
    font-size: 0;
}

.brand-review-list .best-review-card .middle-area .rating-wrap .rating span {
    display: inline-block;
    height: 10px;
    background: url('../images/common/rating-on.svg') no-repeat;
    background-position: 0 50%;
    background-size: 60px auto;
    overflow: hidden;
}

.brand-review-list .best-review-card .middle-area .rating-wrap .rating-point {
    margin-left: 4px;
    font-weight: 500;
    line-height: 16px;
}

.brand-review-list .best-review-card .cont-area {
    margin-top: 12px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.brand-review-list .best-review-card .cont-area p {
    min-height: 40px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.brand-review-list .review-block {
    position: absolute;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    background-color: rgba(249,249,250,0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 8px;
    z-index: 1;
}

.brand-review-list .best-review-card.status-block ~ .review-block { display: flex;}


.brand-review-swiper-button-next,
.brand-review-swiper-button-prev {
    width: 60px;
    height: 60px;
    background-color: rgba(42,49,56,0.65);
    top: 50%;
    transform: translateX(0) translateY(-50%) translateZ(0);
    transition: all 0.2s ease-out, background-color 0.1s;
    margin-top: 0;
}

.brand-review-swiper-button-next { right: 0; transform: translateX(100%) translateY(-50%) translateZ(0); }
.brand-review-swiper-button-prev { left: 0; transform: translateX(-100%) translateY(-50%) translateZ(0); }

.brand-review-swiper-button-next:hover,
.brand-review-swiper-button-prev:hover { background-color: rgba(42,49,56,0.85); }

.brand-review-swiper-button-next.swiper-button-disabled { transform: translateX(100%) translateY(-50%) translateZ(0) !important; }
.brand-review-swiper-button-prev.swiper-button-disabled { transform: translateX(-100%) translateY(-50%) translateZ(0) !important; }

.brand-review-list:hover .brand-review-swiper-button-next,
.brand-review-list:hover .brand-review-swiper-button-prev { transform: translateX(0) translateY(-50%) translateZ(0); }

.brand-review-swiper-button-next:after,
.brand-review-swiper-button-prev:after {
    font-family: 'LineIcons';
    display: inline-block;
    font-weight: 100;
    font-size: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    transform: translateX(0) translateZ(0);
    transition: all 0.2s;
}

.brand-review-swiper-button-next:after { content: '\e917';}
.brand-review-swiper-button-prev:after { content: '\e916';}

.brand-review-swiper-button-next:hover:after { transform: translateX(4px) translateZ(0);}
.brand-review-swiper-button-prev:hover:after { transform: translateX(-4px) translateZ(0);}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(매장)-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=매장검색---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.modal-item[data-ref="choice-shop"] .modal-header {
    z-index: 103;
}
.modal-item[data-ref="choice-shop"] .tab-item.no-sticky {
    position: sticky;
    top: 0;
    z-index: 102;
}

:is(.store-filter) .filter-popup {
    margin-top: 12px;
    position: absolute;
    left: auto;
    right: 0;
    z-index: 101;
}

:is(.store-filter) .filter-popup:after {
    left: -40px;
}

:is(.store-filter) .filter-popup .sheet {
    width: 420px;
    transform: translateX(-100%) translateY(0) translateZ(0);
    border: 1px solid #d9dbdc;
}

:is(.store-filter.open) .filter-popup {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0) translateZ(0) scale(1);
}

.list-guide-bar :is(.store-filter) .filter-popup {
    margin-top: 0;
    left: auto;
    right: 4px;
    top: 0;
    transform: translateX(-20px) translateY(0) translateZ(0) scale(1);
}

.list-guide-bar :is(.store-filter) .filter-popup:after {
    left: -16px;
    transform: translateX(12px) translateY(6px) rotate(-90deg);
}

.list-guide-bar :is(.store-filter) .filter-popup .sheet {
    width: 420px;
    transform: translateX(16px) translateY(-48px) translateZ(0);
    border: 1px solid #d9dbdc;
    background: linear-gradient(90deg, #fff 12px, rgba(255, 255, 255, 0.9) 36px);
}

.list-guide-bar :is(.store-filter.open) .filter-popup {
    pointer-events: all;
    opacity: 1;
    transform: translateX(0) translateY(0) translateZ(0) scale(1);
}

.store-filter-section .store-filter {
    margin-right: 0;
    margin-left: auto;
    position: relative;
}

.list-guide-bar .store-filter {
    display: inline-block;
    position: absolute;
    right: 20px;
    bottom: 0;
}

.mylocation-wrap {
    padding: 16px 20px 0;
    background-color: #fff;
}
.store-filter-section + .mylocation-wrap {
    padding: 12px 20px 0;
}

.mylocation-panel {
    background: #f2f2f7;
    margin: 0;
    padding: 12px 24px;
}


.mylocation-wrap .subinfo .explan-copy { padding: 0; }
.mylocation-wrap .location-button { background-color: transparent; }

.store-sort-wrap {
    margin-top: 16px;
    border-bottom: none;
    position: relative;
    align-items: center;
}

.store-sort-wrap:after {
    content: '';
    display: block;
    width: auto;
    height: 0;
    border-bottom: 1px solid #d9dbdc;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
}

.store-sort-wrap .store-filter {
    margin-right: 0;
    margin-left: auto;
    position: relative;
}

.store-sort-wrap .btn-sort::after { display: none; }
.store-sort-wrap .btn-sort {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
}

.sort-result-section .store-list {
    padding: 16px 20px 24px;
    background: #fff;
    min-height: 240px;
}

.list-alert-icon {
    width: 76px;
}

.sort-result-section:not(:has(.store-list .store-list-item)) .store-list {
    background: #f2f2f7;
}

.sort-result-section.search-map {
    background: #fff;
}

.sort-result-section.search-map:not(:has(.store-lst .store-list-item)) {
    background: #f2f2f7;
}

.map-legend-panel { gap: 6px 8px; flex-wrap: nowrap; }
.map-legend-panel .map-legend { gap: 4px; white-space: nowrap; }
.map-legend-panel .map-legend img { width: 14px; height: 20px; }

.store-search-area {
    padding: 12px 24px;
    margin-top: 0;
    background: #f2f2f7;
    border-radius: 8px;
}

.store-filter-section + .store-search-area { margin-top: 8px; }

.store-search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.store-search-form .input-area {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.store-search-form .input-area .input-group {
    margin: 0;
}

.store-search-form .region-search-section {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
}
.store-search-form .region-search-section:after { display: none;}

.store-search-form > p {
    align-self: flex-end;
    margin-right: 80px;
    margin-bottom: 4px;
    line-height: 16px;
}

.store-search-form .btn-search-store {
    flex: none;
    width: 112px;
}

.container-store-reserve .store-search-area { padding: 12px; margin-bottom: 10px; }
.container-store-reserve .store-search-form .btn-search-store { width: 80px; }

.modal-item .middler a { pointer-events: all; }

.store-list-item {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 8px 0 24px;
    border-bottom: 1px solid #d9dbdc;
    margin-top: 16px;
    display: block;
    user-select: none;
}

.store-list-item * { user-select: none; }

.store-list-item.disable .brand-indicator,
.store-list-item.disable .body,
.store-list-item.disable .footer {
    opacity: 0.4;
}

.store-list-item.disable .brand-indicator,
.store-list-item.disable .body,
.store-list-item.disable .body *,
.store-list-item.disable .footer,
.store-list-item.disable .footer * { pointer-events: none !important; }

.store-list-item.on-map {
    width: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    border-bottom: none;
    z-index: 1;
    padding: 16px 0 24px;
    margin-top: 0;
}
.store-list-item.on-map .header { padding: 0 8px 0 16px; }
.store-list-item.on-map .body { border-radius: 0; padding: 16px 8px 12px;}
.store-list-item.on-map .footer { padding: 0 8px; }

.store-list-item.on-map .info-area { align-items: flex-start; gap: 16px; }
.store-list-item.on-map .img-holder { width: 42px; height: 42px;}
.store-list-item.on-map .btn-pick-store { width: 86px; }

.store-list-item.on-map2 {
    width: 400px;
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    border-bottom: none;
    z-index: 1;
    padding: 16px 0 24px;
    margin-top: 0;
}
.store-list-item.on-map2 .header { padding: 0 8px 0 16px; }
.store-list-item.on-map2 .body { border-radius: 0; padding: 16px 8px 12px;}
.store-list-item.on-map2 .footer { padding: 0 8px; }
.store-list-item.on-map2 .info-area { align-items: flex-start; gap: 16px; }
.store-list-item.on-map2 .img-holder { width: 42px; height: 42px;}
.store-list-item.on-map2 .btn-pick-store { width: 86px; }
.store-list-item.on-map2 .footer { margin-top: 8px; }
.store-list-item.on-map2 .store-service-tag { font-size: 11px;}

.sort-result-section.search-map .store-lst { padding: 0px 8px 20px; }
.sort-result-section.search-map .store-lst .store-list-item { padding: 8px 0 24px; }
.sort-result-section.search-map .store-lst .store-list-item:last-of-type { border-bottom: none; }
.sort-result-section.search-map .store-lst .store-list-item .header { padding: 0 8px 0 16px; }
.sort-result-section.search-map .store-lst .store-list-item .body { border-radius: 0; padding: 16px 8px 12px;}
.sort-result-section.search-map .store-lst .store-list-item .footer { padding: 0 8px; margin-top: 8px; }

.sort-result-section.search-map .store-lst .store-list-item .info-area { align-items: flex-start; gap: 16px; }
.sort-result-section.search-map .store-lst .store-list-item .img-holder { width: 42px; height: 42px;}
.sort-result-section.search-map .store-lst .store-list-item .btn-pick-store { width: 86px; }

.store-search-wrap .lft-info-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.store-search-wrap .lft-info-wrap > :not(:where(.result-section-wrap, .handle-wrap)) { flex: none; width:100%; }

.store-search-wrap .lft-info-wrap .result-section-wrap {
    flex: 1 0 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.store-search-wrap .lft-info-wrap .result-section-wrap .list-guide-bar { flex: none; }
.store-search-wrap .lft-info-wrap .result-section-wrap .sort-result-section.search-map {
    flex: 1 0 0;
    min-height: 0;
    width: 100%;
}

.sort-result-section.search-map .store-lst:not(:has(.store-list-item)) { background: #f2f2f7; }
.sort-result-section.search-map .store-lst:not(:has(.store-list-item)) ~ #paging { display: none !important; }


.store-list-item .header {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.store-list-item .header .brand-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.store-list-item .header .brand-indicator img {
    display: none;
    width: auto;
    height: 20px;
}

.store-list-item .header .brand-indicator .ts { display: block; }
.store-list-item[data-store-type="amt"] .header .brand-indicator .ts { display: block; }
.store-list-item[data-store-type="amt"] .header .brand-indicator .tts { display: none; }
.store-list-item[data-store-type="tts"] .header .brand-indicator .ts { display: none; }
.store-list-item[data-store-type="tts"] .header .brand-indicator .tts { display: block; }

.store-list-item[data-store-grade="excellent"] .header .brand-indicator:after {
    content: '우수매장';
    width: auto;
    height: 22px;
    display: inline-flex;
    border-radius: 100px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding-left: 8px;
    padding-right: 26px;
    background-color: #000;
    background-image: url('../images/icon/badge_store_excellence_simple.svg');
    background-size: 12px auto;
    background-position: right 8px center;
    background-repeat: no-repeat;
}

.store-list-item .header .btn-myshop {
    background: transparent;
    margin-top: -10px;
    margin-bottom: -10px;
    margin-right: -10px;
}

.store-list-item .header .btn-myshop .line-icons { color: #d9dbdc; }
.store-list-item .header .btn-myshop.on .line-icons { color: #fe6a2b; }

.store-list-item .body {
    width: 100%;
    height: auto;
    margin-top: 8px;
    background: #f9f9fa;
    padding: 24px;
    border-radius: 8px;
}

.store-list-item .footer {
    width: 100%;
    height: auto;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.store-list-item.on-map .footer { margin-top: 8px; }

.store-list-item .footer:not(:has(.store-service-tag)) {
    align-items: center;
}

.store-list-item .info-area {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.store-list-item .img-holder {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #D9DBDC;
    background-image: url('../images/common/goods/@sample_store.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.store-list-item .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.store-list-item .txt-area {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.store-list-item .title-row {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
}

.store-list-item .title-row h4 {
    flex: none;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.store-list-item[data-store-type="amt"] .title-row h4:after {
    content: '';
    display: inline-block;
    width: 67px;
    height: 20px;
    line-height: 20px;
    background-image: url('../images/common/bi_allmy_t.svg');
    background-position: 0 50%;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
    position: relative;
    vertical-align: middle;
    top: -2px;
}

.store-list-item[data-store-type="tts"] .title-row h4:after {
    content: '';
    display: inline-block;
    width: 85px;
    height: 20px;
    line-height: 20px;
    background-image: url('../images/common/bi_partner_t.svg');
    background-position: 0 50%;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
    position: relative;
    vertical-align: middle;
    top: -2px;
}

.store-list-item .meta-row {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.store-list-item .meta-row .divider {
    width: 0;
    height: 14px;
    border: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #5b6068;
}

.store-list-item .rating-point {
    flex: none;
    width: auto;
    height: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.store-list-item .rating-point:before {
    content: '';
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url('../images/icon/star_on.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.store-list-item .open-times {
    flex: none;
    width: auto;
    height: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
}

.store-list-item .review-count {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.store-list-item .review-count:before {
    content: '\e929';
    font-family: 'LineIcons';
    --size: 16px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
}

.store-list-item .location-row {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.store-list-item .address-row {
    font-size: 0;
    padding-bottom: 2px;
}

.store-list-item .address-row span:not(.distance) {
    display: inline;
    font-size: 14px;
    line-height: 20px;
    color: #5b6068;
    vertical-align: middle;
}

.store-list-item .distance {
    flex: none;
    width: auto;
    height: 20px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #008BEC;
    vertical-align: middle;
    margin-right: 4px;
}

.store-list-item .distance.no-location-info {
    color: #a0a6af;
    font-size: 12px;
}

.store-list-item .distance.no-location-info:after { display: none; }
.store-list-item .distance:after { content: '거리'; }

.store-list-item .reviews {
    flex: none;
    width: auto;
    height: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 500;
}

.store-list-item .reviews:before {
    content: '\e929';
    font-family: 'LineIcons';
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    display: inline-block;
}

.store-list-item .btn-store-detail {
    border-color: #F2F2F7;
    color: #000;
}

.store-list-item .btn-store-detail .label-txt { font-size: 11px;}



.store-list-item .tag-area {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

.store-list-item .tag-wrap {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}

.store-list-item .tag-wrap:not(:has(.store-service-tag)) { display: none; }

.store-list-item.on-map .store-service-tag { font-size: 11px;}
.sort-result-section.search-map .store-service-tag { font-size: 11px;}

.store-service-tag {
    width: auto;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    background: rgba(46,208,255,0.16);
    color: #008BEC;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.store-service-tag:before {
    font-family: 'LineIcons';
    --size: 16px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.store-service-tag[data-store-icon="repair"]:before { content: '\e9cf';}
.store-service-tag[data-store-icon="ev-specialty"]:before { content: '\e9ce';}
.store-service-tag[data-store-icon="ev-charge"]:before { content: '\e9cd';}

.service-available-date {
    padding: 0;
    min-height: 24px;
    display: inline-flex;
    position: relative;
    align-items: center;
}

.service-available-date span {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.service-available-date span em { font-weight: 700;}

.service-available-date.today-service { color: #2a3138; }

.service-available-date.today-service:before {
    content: '';
    flex: none;
    display: block;
    width: 86px;
    height: 24px;
    background-image: url('../images/common/store_search/icon_today_service_bi.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

.service-available-date.t-baro-delivery { color: #2a3138; }

.service-available-date.t-baro-delivery:before {
    content: '';
    flex: none;
    display: block;
    width: 86px;
    height: 24px;
    background-image: url('../images/common/store_search/icon_t_baro_delivery_bi.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

.store-list-item .btn-pick-store {
    width: 112px;
    flex: none;
}

.store-list-item.recent-visit .btn-pick-store:before {
    content: '최근 방문';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 24px;
    background: #fe6a2b;
    color: #fff;
    white-space: nowrap;
    font-size: 12px;
    padding: 0 12px;
    border-radius: 100px;
    position: absolute;
    top: 4px;
    right: 0;
    left: auto;
    transform: translateX(4px) translateY(-100%);
    pointer-events: none;
}

.store-list-item.recent-visit .btn-pick-store:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid #fe6a2b;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    position: absolute;
    top: 3px;
    left: 50%;
}

.btn-item[data-count-badge]:after {
    content: attr(data-count-badge);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 16px;
    height: 16px;
    background: #fe6a2b;
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    padding: 0 4px;
    position: absolute;
    top: -2px;
    right: -3px;
    pointer-events: none;
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=매장상세---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.modal-item:has(.photo-view-modal) .dim {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0,0,0,0.7);
}
.modal-item:has(.photo-view-modal) .modal-pannel {
    background: transparent;
    pointer-events: none;
    border: none;
    box-shadow: none;
    width: 960px;
    /* width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vw; */
    overflow: visible;
}

.modal-item:has(.photo-view-modal) :is(.modal-body, .modal-scroller, .modal-scroller > .container) { height: 100%; max-height: calc(100vh - 80px) !important; overflow: visible; }

.photo-view-modal {
    height: 100%;
    max-height: calc(100vh - 80px);
    /* overflow: hidden; */
    position: relative;
}

.photo-view-modal .btn-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-100%);
    pointer-events: all;
    z-index: 10;
}

.photo-view-modal-swiper {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 80px);
    overflow: visible;
    pointer-events: none;
}

.photo-view-modal-swiper .swiper-wrapper {
    pointer-events: none;
    align-items: stretch;
}

.photo-view-modal-swiper .swiper-slide {
    max-height: calc(100vh - 80px);
    align-self: stretch;
    height: auto;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    filter: saturate(0.1) blur(8px);
    -webkit-filter: saturate(0.1) blur(8px);
}

.photo-view-modal-swiper .swiper-slide:not(.swiper-slide-active) { cursor: pointer;}

.photo-view-modal-swiper .swiper-slide-active { opacity: 1; filter: saturate(1) blur(0); -webkit-filter: saturate(1) blur(0);}

.photo-view-modal-swiper .swiper-zoom-container { pointer-events: none; }

.photo-view-modal-swiper .swiper-slide img { pointer-events: all; user-select: none; }

.photo-view-modal-swiper .swiper-pagination {
    bottom: -28px;
}

.photo-view-modal-swiper .swiper-pagination .swiper-pagination-bullet { background: rgba(255,255,255,0.3); pointer-events: all; }
.photo-view-modal-swiper .swiper-pagination .swiper-pagination-bullet-active { background: rgba(255,255,255,1);}

:root:has(.store a[href^="#"]) {
    scroll-behavior: smooth;
}

.modal-item:has(.store-detail-module) .modal-pannel .modal-header .btn-popup-close .line-icons.close:before { content: '\e904';}
.modal-item:has(.store-detail-module) .modal-scroller { scroll-behavior: smooth;}

.store section h3 {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
}

.store-map-layer {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: sticky;
    top: 0;
    background: #f9f9fa;
}

.store-map-layer:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../images/common/store_detail_map_ctrl_wheel.png');
    background-size: 402px auto;;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 101;
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s;
}

.store-map-layer.hint:after {
    opacity: 1;
    transition: all 0.2s;
}

.store-content-layer {
    width: 100%;
    height: auto;
    position: relative;
    background: #fff;
    border-top: 1px solid #f2f2f7;
    z-index: 4;
}

.store-content-layer section:after { display: none; }

.store-content-layer .dp-flex:has(.left-area):has(.right-area) {
    gap: 120px;
    padding-bottom: 100px;
}

.store-content-layer .left-area {
    flex: none;
    align-self: flex-start;
    width: 400px;
    height: auto;
    position: relative;
}

.store-content-layer .right-area {
    flex: 1 0 0;
    min-width: 0;
    padding-top: 88px;
}

.store-basic-section header {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 88px;
}

.store-basic-section header .brand-indicator {
    width: 100%;
    height: 28px;
    position: absolute;
    left: 0;
    top: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.store-basic-section header .brand-indicator .bi-img {
    width: auto;
    height: 24px;
    display: none;
}

.store-basic-section[data-store-grade="excellent"] header .brand-indicator:after {
    content: '우수매장';
    width: auto;
    height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding-left: 16px;
    padding-right: 34px;
    background-color: #000;
    background-image: url('../images/icon/badge_store_excellence_simple.svg');
    background-size: 12px auto;
    background-position: right 16px center;
    background-repeat: no-repeat;
}

.store-basic-section header hgroup {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.store-basic-section[data-store-type="ts"] header .brand-indicator .bi-img.ts { display: block; }
.store-basic-section[data-store-type="amt"] header .brand-indicator .bi-img.ts { display: block; }
.store-basic-section[data-store-type="tts"] header .brand-indicator .bi-img.tts { display: block; }

.store-basic-section header h2 {
    display: inline-block;
    font-size: 24px;
    line-height: 1.2;
    color: #000;
}

.store-basic-section[data-store-type="amt"] header h2:after {
    content: '';
    display: inline-block;
    width: 80px;
    height: 24px;
    line-height: 24px;
    background-image: url('../images/common/bi_allmy_t.svg');
    background-position: 0 50%;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    vertical-align: middle;
    margin-left: 8px;
    position: relative;
    top: -1px;
}

.store-basic-section[data-store-type="tts"] header h2:after {
    content: '';
    display: inline-block;
    width: 102px;
    height: 24px;
    line-height: 24px;
    background-image: url('../images/common/bi_partner_t.svg');
    background-position: 0 50%;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    vertical-align: middle;
    margin-left: 8px;
    position: relative;
    top: -2px;
}

.store-basic-section .contact {
    width: 100%;
    margin-top: 32px;
}

.store-basic-section .contact address {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    font-style: normal;
}

.store-basic-section .contact address p {
    font-size: 14px;
    color: #5b6068;
}

.store-basic-section .contact address .btn-item .label-txt { font-size: 11px; }

.store-basic-section .contact .phone-number {
    color: #fe6a2b;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 4px;
}

.store-basic-section .rating-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 20px;
}

.store-basic-section .rating-area .rating {
    width: 80px;
    height: 16px;
    background-size: 80px auto;
}

.store-basic-section .rating-area .rating span {
    height: 16px;
    background-size: 80px auto;
}

.store-basic-section .rating-area .rating-point {
    font-size: 14px;
    line-height: 16px;
}

.store-basic-section .rating-area .review-count {
    font-size: 14px;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-left: 12px;
}

.store-basic-section .rating-area .review-count:before {
    content: '\e929';
    font-family: 'LineIcons';
    --size: 16px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
}


.store-introduction-section {
    width: 100%;
    height: auto;
    margin-top: 32px;
}

.store-introduction-section p {
    font-size: 14px;
    line-height: 28px;
}

.store-introduction-section .tag-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 32px;
}

.store-introduction-section .tag-wrap .store-service-tag { font-size: 14px; }

.store-business-hours-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.store-business-hours-section .overview {
    width: 100%;
    height: auto;
    position: relative;
}

.store-business-hours-section .overview .business-status {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.store-business-hours-section .overview .status-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #008BEC;
}

.store-business-hours-section .overview .status-label.off { color: #D03333; }
.store-business-hours-section .overview .status-label.off:before { color: #a0a6af; }

.store-business-hours-section .overview .status-label:before {
    content: '\e935';
    font-family: 'LineIcons';
    --size: 28px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
}

.store-business-hours-section .overview .time {
    font-size: 14px;
    line-height: 20px;
}

.store-business-hours-section .detail {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
    overflow: hidden;
    margin-top: 16px;
}

.store-business-hours-section .detail .row {
    flex: none;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    color: #000;
    list-style: none;
    overflow: hidden;
}

.store-business-hours-section .detail .row:first-of-type { border-radius: 16px 16px 0 0;}
.store-business-hours-section .detail .row:last-of-type { border-radius: 0 0 16px 16px;}

.store-business-hours-section .detail .row dt {
    flex: none;
    width: 140px;
    padding: 12px 16px;
    background: #f2f2f7;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-business-hours-section .detail .row dd {
    flex: 1 0 0;
    min-width: 0;
    padding: 12px 16px;
    background: #f9f9fa;
    font-size: 14px;
    white-space: wrap;
    text-align: left;
}

.store-business-hours-section .detail .row dd.off {
    color: #D03333;
    font-weight: 500;
}

.store-promotion-section {
    margin-top: 48px;
}

.store-promotion-section ul {
    margin-top: 16px;
}

.store-promotion-section:not(:has(ul li)) { display: none;}

.store-promotion-section ul:not(:has(li)):before {
    content: '진행 중인 이벤트가 없습니다.';
    display: block;
    text-align: center;
    font-size: 12px;
    color: #a0a6af;
    background: #f9f9fa;
    padding: 32px 0;
    border-radius: 16px;
}

.store-promotion-section ul:after { display: none; }

.store-promotion-section ul li {
    border-bottom: 1px dashed #d9dbdc;
}

.store-promotion-section a {
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 0;
    gap: 12px;
    position: relative;
}

.store-promotion-section a:hover p { text-decoration: underline; }

.store-promotion-section a:after {
    content: '\e917';
    font-family: 'LineIcons';
    --size: 32px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    margin-left: auto;
    margin-right: 0;
}

.store-promotion-section a .label {
    flex: none;
    width: 130px;
    color: #008BEC;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    line-height: 20px
}

.store-promotion-section a .label:before {
    content: '\e9c3';
    font-family: 'LineIcons';
    --size: 32px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
}

.store-promotion-section a p {
    font-size: 14px;
    line-height: 20px
}

.store-photo-section {
    margin-top: 48px;
}

.store-photo-swiper {
    width: 100%;
    margin-top: 24px;
}

.store-photo-swiper .swiper-wrapper {
    gap: 12px;
    flex-wrap: wrap;
}

.store-photo-swiper .swiper-slide {
    flex: 0 0 calc((100% - 24px) / 3);
    width: auto;
    height: auto;
    aspect-ratio: 3/2;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
}

.store-photo-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.store-specialized-services-section {
    margin-top: 48px;
}

.store-specialized-services-section ul {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}

.store-specialized-services-section ul:not(:has(li)):before {
    content: '특화 서비스를 설정하지 않았습니다.';
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: #a0a6af;
    background: #f9f9fa;
    padding: 32px 0;
    border-radius: 16px;
}

.store-specialized-services-section ul:after { display: none; }

.store-specialized-services-section ul li {
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.store-specialized-services-section ul li .line-icons { color: #5b6068;}

.store-specialized-services-section ul li .label {
    width: 100%;
    word-break: break-all;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
}


.store-serviceable-list-section {
    margin-top: 48px;
}

.store-serviceable-list-section .serviceable-list-wrap {
    margin-top: 24px;
    width: 100%;
    border-radius: 16px;
    padding: 24px;
    background: #f9f9fa;
    font-size: 0;
    line-height: 1;
}

.store-serviceable-list-section .serviceable-list-wrap:not(:has(span)):before {
    content: '정비항목을 설정하지 않았습니다.';
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: #a0a6af;
    background: #f9f9fa;
    padding: 8px 0;
    border-radius: 16px;
}

.store-serviceable-list-section .serviceable-list-wrap span {
    display: inline-block;
    font-size: 16px;
    line-height: 32px;
    color: #000;
}

.store-serviceable-list-section .serviceable-list-wrap span:not(:last-of-type):after {
    content: '/';
    margin-left: 4px;
    margin-right: 4px;
}

.store-service-cost-section {
    margin-top: 48px;
}

.store-service-cost-section ul {
    margin-top: 24px;
    color: #000;
}

.store-service-cost-section ul li {
    font-size: 16px;
    line-height: 24px;
}

.store-service-cost-section ul li:not(:first-of-type) { margin-top: 8px;}

.store-service-cost-section .store-service-cost-note {
    margin-top: 24px;
    color: #000;
    font-size: 16px;
    line-height: 32px;
}

.store-service-cost-section .store-service-cost-note:empty:before {
    content: '부가 비용 정보가 없습니다.';
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: #a0a6af;
    background: #f9f9fa;
    padding: 32px 0;
    border-radius: 16px;
}

.store-customer-section {
    scroll-margin: 50px;
}

.modal-item .store-customer-section {
    scroll-margin: 0;
}

.store-customer-section header {
    padding: 32px 20px 0;
}

.store-customer-section header .sort-wrap {
    padding: 0;
    margin-top: 8px;
}

.store-rating .category {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: 16px;
    margin-bottom: 16px;
}

.store-rating h4 {
    font-size: 14px;
    line-height: 20px;
}

.store-rating .star-rating {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    gap: 4px;
}

.store-rating .star-rating input {
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
}

.store-rating .star-rating .star {
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 24px;
    height: 24px;
    font-size: 0;
    background-image: url('../images/icon/icon_star_rating.png');
    background-size: cover;
    background-position: 0 50%;
    position: relative;
}

.store-rating .star-rating .star:hover:before,
.store-rating .star-rating:has(.star:hover) .star:has(~ .star:hover):before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.4);
    background-image: url('../images/icon/icon_star_rating.png');
    background-size: cover;
    background-position: 100% 50%;
    opacity: 0.3;
    pointer-events: none;
}


.store-rating .star-rating:has(input:checked[value="1"]) .star:is(:nth-of-type(1)) { background-position: 100% 50%;}
.store-rating .star-rating:has(input:checked[value="2"]) .star:is(:nth-of-type(1), :nth-of-type(2)) { background-position: 100% 50%;}
.store-rating .star-rating:has(input:checked[value="3"]) .star:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) { background-position: 100% 50%;}
.store-rating .star-rating:has(input:checked[value="4"]) .star:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) { background-position: 100% 50%;}
.store-rating .star-rating:has(input:checked[value="5"]) .star:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5)) { background-position: 100% 50%;}

#customerReview {
    scroll-margin: 40px;
}

.customer-card-list .customer-card {
    border-radius: 16px;
}

.customer-card-list .customer-card .review-delete-btn .label { font-size: 12px; }


.customer-card-list:not(:has(.item )):before {
    content: '등록된 리뷰가 없습니다.';
    display: block;
    text-align: center;
    font-size: 12px;
    color: #a0a6af;
    background: #f9f9fa;
    padding: 32px 0;
    border-radius: 16px;
}






/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(마이페이지)------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.color-icons {
    --size: 32px;
    --sheet-row: 0;
    --sheet-col: 0;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    background-image: url('../images/icon/color_icons_sheet.png');
    background-size: calc(var(--size) * 10) auto;
    background-repeat: no-repeat;
    background-position: calc((var(--sheet-col) - 1) * -1 * var(--size)) calc((var(--sheet-row) - 1) * -1 * var(--size));
}

.color-icons.size-24 { --size: 24px; }
.color-icons.size-40 { --size: 40px; }
.color-icons.size-48 { --size: 48px; }

.color-icons.coupon { --sheet-row: 1; --sheet-col: 1; }
.color-icons.gift-box { --sheet-row: 1; --sheet-col: 2; }
.color-icons.rocket { --sheet-row: 1; --sheet-col: 3; }
.color-icons.clipboard { --sheet-row: 1; --sheet-col: 4; }
.color-icons.receipt { --sheet-row: 1; --sheet-col: 5; }
.color-icons.folder { --sheet-row: 1; --sheet-col: 6; }
.color-icons.alarm { --sheet-row: 1; --sheet-col: 7; }
.color-icons.pencil { --sheet-row: 1; --sheet-col: 8; }
.color-icons.tstation-shop { --sheet-row: 1; --sheet-col: 9; }
.color-icons.care { --sheet-row: 1; --sheet-col: 10; }

.color-icons.search { --sheet-row: 2; --sheet-col: 1; }
.color-icons.cancel { --sheet-row: 2; --sheet-col: 2; }
.color-icons.clipboard-check { --sheet-row: 2; --sheet-col: 3; }
.color-icons.headset { --sheet-row: 2; --sheet-col: 4; }
.color-icons.user { --sheet-row: 2; --sheet-col: 5; }
.color-icons.tstation-pin { --sheet-row: 2; --sheet-col: 6; }
.color-icons.medal { --sheet-row: 2; --sheet-col: 7; }
.color-icons.comment { --sheet-row: 2; --sheet-col: 8; }
.color-icons.image { --sheet-row: 2; --sheet-col: 9; }
.color-icons.check { --sheet-row: 2; --sheet-col: 10; }

.color-icons.tire { --sheet-row: 3; --sheet-col: 1; }
.color-icons.oil { --sheet-row: 3; --sheet-col: 2; }
.color-icons.fuel { --sheet-row: 3; --sheet-col: 3; }
.color-icons.hand-money { --sheet-row: 3; --sheet-col: 4; }
.color-icons.hand-wrench { --sheet-row: 3; --sheet-col: 5; }
.color-icons.hand-key { --sheet-row: 3; --sheet-col: 6; }
.color-icons.hand-thumbs-up { --sheet-row: 3; --sheet-col: 7; }
.color-icons.hand-tstation-mobile { --sheet-row: 3; --sheet-col: 8; }
.color-icons.battery { --sheet-row: 3; --sheet-col: 9; }
.color-icons.wiper { --sheet-row: 3; --sheet-col: 10; }

.color-icons.filter { --sheet-row: 4; --sheet-col: 1; }
.color-icons.alignment { --sheet-row: 4; --sheet-col: 2; }
.color-icons.tire-replace { --sheet-row: 4; --sheet-col: 3; }


.aside-layout > .aside-area.my-allmyt-lnb { width: 200px; }

.my-allmyt-lnb .greeting-box {
    padding-bottom: 24px;
}

.my-allmyt-lnb .greeting-box .my-allmyt-link {
    display: block;
    width: 100%;
    position: relative;
    padding-right: 28px;
}

.my-allmyt-lnb .greeting-box .my-allmyt-link:after {
    content: '\e9be';
    font-family: 'LineIcons';
    display: inline-block;
    --size: 24px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    border-radius: 100px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(0) translateY(-50%) translateZ(0);
    transition: all 0.3s;
}

.my-allmyt-lnb .greeting-box .my-allmyt-link:hover:after {
    transform: translateX(4px) translateY(-50%) translateZ(0)
}

.my-allmyt-lnb .greeting-box .my-allmyt-link > p {
    font-size: 18px;
    line-height: 28px;
}

.my-allmyt-lnb .greeting-box .my-allmyt-link .user-name {
    text-decoration: underline;
    font-weight: 700;
    border-radius: 4px;
    padding: 0 2px;
    margin-left: -2px;
}

.my-allmyt-lnb .greeting-box .my-allmyt-link:hover .user-name {
    background: rgba(0,0,0,0.05);
}

.my-allmyt-lnb .greeting-box .my-regular-shop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 24px;
}

.my-allmyt-lnb .greeting-box .my-regular-shop h5 {
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
}

.my-allmyt-lnb .greeting-box .my-regular-shop .btn-item {
    border: none;
    line-height: 24px;
    background: transparent;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    color: #fe6a2b;
}

.my-allmyt-lnb .greeting-box .my-regular-shop .btn-item .label-txt {
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}


.my-allmyt-lnb .menu-container {
    width: 100%;
    height: auto;
    padding: 24px 0;
    padding-bottom: calc(48px + constant(safe-area-inset-bottom));
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
    user-select: none;
}

.my-allmyt-lnb * { user-select: none; }

.my-allmyt-lnb .menu-container .menu-group + .menu-group {
    margin-top: 16px;
}

.my-allmyt-lnb .menu-container .menu-group h4 {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    padding: 0 16px 8px;
    border-bottom: 1px solid #d9dbdc;
    color: #000;
}

.my-allmyt-lnb .menu-container .menu-group .btns-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 24px 0;
}

.my-allmyt-lnb .menu-container .menu-group .btn-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 4px 0;
    padding-left: 16px;
    background: transparent;
    border-radius: 8px;
    border: none;
    text-align: left;
    color: #000;
    position: relative;
}

.my-allmyt-lnb .menu-container .menu-group .btn-item .color-icons {
    flex: none;
    --size: 40px;
}

.my-allmyt-lnb .menu-container .menu-group .btn-item .label-txt {
    font-size: 16px;
    line-height: 24px;
}

.my-allmyt-lnb .menu-container .menu-group .btn-item.new .label-txt:after {
    content: 'NEW';
    display: inline-block;
    padding: 0 6px;
    line-height: 16px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    background: #fe6a2b;
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
    margin-top: 4px;
    position: absolute;
}

.my-allmyt {
    width: 100%;
    position: relative;
    padding: 36px 0 48px;
}

.my-allmyt hgroup {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.my-allmyt hgroup:has(> .btn-item) {
    justify-content: space-between;
}

.my-allmyt hgroup h4 {
    font-size: 20px;
    line-height: 24px;
}

.my-allmyt hgroup h4 em {
    font-weight: 700;
}

.my-allmyt .order-status .status-wrap {
    width: 100%;
    height: auto;
    background: #f9f9fa;
    border-radius: 16px;
    padding: 16px 72px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 16px;
    list-style: none;
    gap: 20px;
}

.my-allmyt .order-status .status-wrap .chev-right {
    flex: none;
    color: #c0c6ce;
}

.my-allmyt .order-status .status-wrap .btn-item {
    flex: 1 0 0;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-radius: 8px;
    pointer-events: none;
    color: #000;
    background: transparent;
}

.my-allmyt .order-status .status-wrap .btn-item.act {
    color: #fe6a2b;
    pointer-events: all;
}

.my-allmyt .order-status .status-wrap .btn-item.act .label-txt { font-weight: 500;}

.my-allmyt .order-status .status-wrap .btn-item .count {
    font-size: 20px;
    line-height: 26px;
}

.my-allmyt .order-status .status-wrap .btn-item .label-txt {
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}

.my-allmyt .car-management {
    width: 100%;
    margin-top: 120px;
}

.my-allmyt .car-management hgroup .btn-item.bg-light2 {
    background: #f2f2f7;
    width: 64px;
    height: 64px;
    line-height: 62px;
    border-radius: 100px;
}

.my-allmyt .my-car {
    width: 100%;
    height: auto;
    background: #f2f2f7;
    border-radius: 16px;
    padding: 24px 24px 24px 32px;
    margin-top: 20px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
}

.my-allmyt .my-car .car-info-area {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 128px;
}

.my-allmyt .my-car .car-info-area .txt-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.my-allmyt .my-car .car-info-area .car-number {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    pointer-events: all;
}

.my-allmyt .my-car .car-info-area .car-number h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
}

.my-allmyt .my-car .car-info-area .car-number .badge {
    color: #008BEC;
    border-color: #008BEC;
    border-radius: 100px;
    line-height: 22px;
    font-size: 14px;
    padding: 0 16px;
    background: #fff;
    cursor: default;
}

.my-allmyt .my-car .car-info-area .car-number .badge.not-verified {
    -webkit-tap-highlight-color: transparent;
    color: #5b6068;
    border-color: #5b6068;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.my-allmyt .my-car .car-info-area .car-number .badge.not-verified:hover {
    background: rgba(0,0,0,0.06);
}

.my-allmyt .my-car .car-info-area .car-number .badge.not-verified:after {
    content: '\e917';
    font-family: 'LineIcons';
    --size: 20px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    display: inline-block;
    vertical-align: middle;
    margin-right: -8px;
}

.my-allmyt .my-car .car-info-area .car-model {
    width: 200px;
    margin-top: 10px;
    line-height: 24px;
}

.my-allmyt .my-car .car-info-area .car-model .model {
    font-weight: 400;
}

.my-allmyt .my-car-plate {
    width: 100%;
    height: 136px;
    position: relative;
}

.my-allmyt .my-car-plate .img-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.my-allmyt .my-car-plate .img-wrap.act {
    animation: my-car-plate-anim 0.6s ease-in-out forwards;
}

@keyframes my-car-plate-anim {
    0% { transform: translateX(50%) translateY(-20px) translateZ(0); opacity: 0; }
    100% { transform: translateX(0) translateY(0) translateZ(0); opacity: 1; }
}

.my-allmyt .my-car-plate .img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}


.my-allmyt .my-garage {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
    position: relative;
    left: auto;
}

.my-allmyt .my-garage .my-car-list-area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.my-allmyt .my-garage .slot-btn {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    width: 56px;
    height: 56px;
    position: relative;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
}

.my-allmyt .my-garage .slot-btn.my-car-btn:hover:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(42,49,56,0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.my-allmyt .my-garage .slot-btn .thumb-holder {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #D9DBDC;
    border-radius: 50%;
    background-color: #fff;
    background-image: url('../images/common/mycar_dummy.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
}

.my-allmyt .my-garage .slot-btn.act { pointer-events: none; }

.my-allmyt .my-garage .slot-btn.act .thumb-holder:after {
    content: '\e912';
    display: inline-block;
    font-family: 'LineIcons';
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #00B3C5;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(1px) translateY(-1px);
    z-index: 1;
}

.my-allmyt .my-garage .slot-btn.add-car-btn {
    background-image: linear-gradient(#D0D3DE, #fff);
}

.my-allmyt .my-garage .slot-btn.add-car-btn:hover {
    background-image: linear-gradient(#D0D3DE, #D0D3DE);
}

.my-allmyt .my-garage .slot-btn.add-car-btn:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
    background-image: url('../images/common/mycar_dummy.png');
    mix-blend-mode: multiply;
}

.my-allmyt .my-garage .slot-btn.add-car-btn:after {
    content: '\e900';
    display: inline-block;
    font-family: 'LineIcons';
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
}






.my-allmyt .my-car .empty-msg {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 40px 16px 0;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.my-allmyt .my-car .empty-msg .dummy-car-holder {
    width: 100%;
    height: 100px;
    background-image:url('../images/common/mycar_number_dummy.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: luminosity;
}

.my-allmyt .my-car .service-area {
    flex: none;
    width: 296px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: center;
    gap: 8px;
    z-index: 1;
}

.my-allmyt .my-car .service-area .btn-item {
    flex: none;
    width: 144px;
    height: 136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
    border-radius: 16px;
    transition: all 0.2s;
}

.my-allmyt .my-car .service-area .btn-item:hover { border-color: #fe6a2b; }

.my-allmyt .my-car .service-area .btn-item:hover:before { display: none; }

.my-allmyt .my-car .service-area .btn-item .label-txt {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;;
}



.my-allmyt .my-car-check {
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 8px 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.my-allmyt .my-car-check * { user-select: none; }

.my-allmyt .my-car-check::-webkit-scrollbar { display: none; }

.my-allmyt .my-car-check.disabled .btn-item {
    pointer-events: none;
    background: rgba(255,255,255,0.7)
}

.my-allmyt .my-car-check.disabled .btn-item .color-icons {
    filter: saturate(0);
    -webkit-filter: saturate(0);
    opacity: 0.4;
}

.my-allmyt .my-car-check.disabled .btn-item .label-txt { color: #d9dbdc !important; }
.my-allmyt .my-car-check.disabled .btn-item .d-day { color: #d9dbdc !important; }

.my-allmyt .my-car-check .btn-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 16px;
    border-color: #d9dbdc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    user-select: none;
    transition: all 0.2s;
}

.my-allmyt .my-car-check.disabled .btn-item { box-shadow: none; border-color: #f2f2f7; }

.my-allmyt .my-car-check .btn-item:hover { border-color: #fe6a2b; }

.my-allmyt .my-car-check .btn-item:hover:before { display: none; }

.my-allmyt .my-car-check .btn-item .txt-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.my-allmyt .my-car-check .btn-item .label-txt {
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap;
    color: #000;
    user-select: none;
}

.my-allmyt .my-car-check .btn-item .d-day {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #00B3C5;
    white-space: nowrap;
    user-select: none;
}

.my-allmyt .my-car-check .btn-item .d-day.caution { color: #D03333; }



.my-allmyt .my-car-tire {
    margin-top: 88px;
}

.my-allmyt .my-car-tire .install-tire-wrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    margin-top: 40px;
}

.my-allmyt .my-car-tire .install-tire {
    flex: 0 0 calc((100% - 8px) / 2);
    min-width: 0;
    width: auto;
    height: auto;
    padding: 20px;
    padding-right: 24px;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    align-items: center;
    background: #f9f9fa;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.my-allmyt .my-car-tire .install-tire .thumb-area {
    flex: none;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-allmyt .my-car-tire .install-tire .thumb-area .thumb-holder {
    width: 120px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.my-allmyt .my-car-tire .install-tire .thumb-area .thumb-holder .tire-img {
    width: 100%;
    height: auto;
}

.my-allmyt .my-car-tire .install-tire .thumb-area .thumb-holder .ci-img {
    width: auto;
    height: 16px;
}

.my-allmyt .my-car-tire .install-tire .info-area {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.my-allmyt .my-car-tire .install-tire .info-area .date {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
}

.my-allmyt .my-car-tire .install-tire .info-area .tire-bi {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.my-allmyt .my-car-tire .install-tire .info-area .size {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
}

.my-allmyt .my-car-tire .install-tire:has(+ .install-tire) .size:after,
.my-allmyt .my-car-tire .install-tire + .install-tire .size:after {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    color: #fff;
    background: #fe6a2b;
    border-radius: 4px;
    padding: 0 8px;
}

.my-allmyt .my-car-tire .install-tire:has(+ .install-tire) .size:after { content: '전륜'; }
.my-allmyt .my-car-tire .install-tire + .install-tire .size:after { content: '후륜'; }

.my-allmyt .my-car-tire .install-tire .btn-my-warranty {
    width: 64px;
    height: 64px;
    line-height: 62px;
    border-radius: 100px;
    margin-right: 0;
    margin-left: auto;
}





/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[task]UX개선(휠얼라인먼트 패키지)----------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.order-package-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    padding-right: 80px;
    gap: 12px;
}

.order-package-item .thumb-area {
    -webkit-tap-highlight-color: transparent;
    flex: none;
    width: 116px;
    height: 116px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.order-package-item .thumb-area .img-layer {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.order-package-item .thumb-area .img-layer img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.order-package-item .info-area {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.order-package-item .info-area .package-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.order-package-item .info-area .package-info .name {
    line-height: 24px;
    font-size: 18px;
}

.order-package-item .info-area .package-info .badge {
    background: #2ED0FF;
    line-height: 20px;
    border-radius: 4px;
}

.order-package-item .info-area .package-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.order-package-item .info-area .package-option .select-item {
    width: 100%;
    position: relative;
}

.order-package-item .info-area .package-option .select-item:after {
    content: '\e915';
    font-family: 'LineIcons';
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 20251024 start */
.input-box.wheelalignment-package-select:has(option.txt-blue:checked) {
    color: #008bec;
}
.input-box.wheelalignment-package-select:is(:focus, :focus-within) option:not(.txt-blue) {
    color: #2a3138;
}
/* 20251024 end */



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=패밀리쿠폰 가이드--------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
:root:has(.family-coupon-guide) {
    scroll-behavior: smooth;
}

#wrap:has(.family-coupon-guide) {
    overflow: visible;
}

.family-coupon-guide {
    width: 750px;
    height: auto;
    margin: 0 auto;
    color: #000;
    user-select: none;
    padding-top: 80px;
    padding-bottom: 80px;
}

.family-coupon-guide .hero-section {
    width: 100%;
    height: auto;
}

.family-coupon-guide .scroll-nav {
    width: 100%;
    height: auto;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.family-coupon-guide .scroll-nav a {
    display: block;
    flex: 1 0 0;
    min-width: 0;
    padding: 20px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    line-height: 24px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: #000;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.family-coupon-guide .scroll-nav a:hover {
    background: #1a1a1a;
}

.family-coupon-guide .scroll-nav a:after {
    content: '\e9be';
    font-family: 'LineIcons';
    --size: 32px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    transform: rotate(90deg);
}

.family-coupon-guide .guide-section {
    width: 100%;
    height: auto;
    scroll-margin-top: 180px;
}

.family-coupon-guide .guide-section:after { display: none; }

.family-coupon-guide #familyApprovalSection { margin-top: 80px; }
.family-coupon-guide #howToUseSection { margin-top: 120px; }
.family-coupon-guide #giftCouponSection { margin-top: 120px; }
.family-coupon-guide #amtBenefitSection { margin-top: 120px; }
.family-coupon-guide #faqSection { margin-top: 160px; }

.family-coupon-guide .section-title {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    color: #000;
}

.family-coupon-guide .section-title .numbering {
    font-size: 40px;
    font-weight: 800;
    line-height: 48px;
}

.family-coupon-guide .section-title .sub-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 48px;
}

.family-coupon-guide .section-title h3 {
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
}

.family-coupon-guide .section-title .deco {
    width: 160px;
}

.family-coupon-guide .section-summary {
    width: auto;
    margin-left: 48px;
    margin-right: 48px;
    margin-top: 32px;
    padding: 32px 48px;
    background: #f2f2f7;
    border-radius: 48px;
    text-align: center;
    font-size: 24px;
    line-height: 36px;
    color: #000;
}

.family-coupon-guide .section-summary em {
    font-weight: 700;
    color: #0080FF;
}

.family-coupon-guide .section-action {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 64px;
}

.family-coupon-guide .section-action .btn-item {
    line-height: 80px;
    height: 80px;
    border-radius: 100px;
    padding: 0 60px;
}

.family-coupon-guide .section-action .btn-item .label-txt {
    font-size: 28px;
}

.family-coupon-guide .section-action .btn-item .line-icons {
    margin-left: 12px;
}

.family-coupon-guide .section-detail {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-top: 72px;
}

.family-coupon-guide .swiper-container .swiper-slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    --img-size: 302px;
    width: calc(var(--img-size) + 176px);
}

.family-coupon-guide.family90 .swiper-container {
    padding-top: 48px;
    padding-left: 32px;
    padding-right: 32px;
}
.family-coupon-guide.family90 .swiper-container .swiper-slide {
    --img-size: 636px;
    width: auto;
}

.family-coupon-guide .swiper-container .swiper-slide:not(:last-of-type):after {
    content: '\e917';
    font-family: 'LineIcons';
    --size: 48px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    position: absolute;
    top: 240px;
    right: 0;
    transform: translateX(50%) translateY(-50%);
    color: #000;
}

.family-coupon-guide.family90 .swiper-container .swiper-slide:after {
    display: none !important;
}

.family-coupon-guide .swiper-container .swiper-slide img {
    display: block;
    --img-size: inherit;
    width: var(--img-size);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.family-coupon-guide .swiper-container .swiper-slide p {
    text-align: center;
    font-size: 28px;
    line-height: 40px;
    white-space: nowrap;
    color: #000;
    opacity: 0;
    transform: translateY(-40px) translateZ(0);
    transition: all 0.4s 0.2s ease;
}

.family-coupon-guide .swiper-container .swiper-slide.swiper-slide-active img {
    filter: drop-shadow(0 8px 8px rgba(0,0,0,0.12));
    -webkit-filter: drop-shadow(0 8px 8px rgba(0,0,0,0.12));
}

.family-coupon-guide .swiper-container .swiper-slide.swiper-slide-active p {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.family-coupon-guide .swiper-container.family-coupon-amt-benefit-swiper:after { display: none; }
.family-coupon-guide .swiper-container.family-coupon-amt-benefit-swiper .swiper-slide {
    --img-size: 100%;
    width: auto;
}
.family-coupon-guide .swiper-container.family-coupon-amt-benefit-swiper .swiper-slide:after { display: none; }
.family-coupon-guide .swiper-container.family-coupon-amt-benefit-swiper .swiper-slide.swiper-slide-active img {
    filter: none;
    -webkit-filter: none;
}

.family-coupon-guide .img-grid-container {
    width: 100%;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 0;
}

.family-coupon-guide .img-grid-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    --img-size: 252px;
    position: relative;
}

.family-coupon-guide .img-grid-item:nth-of-type(odd):not(:last-of-type):after {
    content: '\e905';
    font-family: 'LineIcons';
    --size: 32px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    position: absolute;
    top: 200px;
    right: 0;
    transform: translateX(50%) translateY(-50%);
    color: #000;
}

.family-coupon-guide .img-grid-item img {
    display: block;
    --img-size: inherit;
    width: var(--img-size);
    position: relative;
    z-index: 1;
}

.family-coupon-guide .img-grid-item p {
    text-align: center;
    font-size: 28px;
    line-height: 40px;
    white-space: nowrap;
    color: #000;
    letter-spacing: -1px;
}

.family-coupon-guide .accordion-container {
    margin-top: 48px;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.family-coupon-guide .accordion-item {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-bottom: 1px solid #d9dbdc;
}

.family-coupon-guide .accordion-btn {
    background: transparent;
    width: 100%;
    padding: 32px 72px 32px 32px;
    text-align: left;
}

.family-coupon-guide .accordion-btn:after {
    content: '\e915';
    font-family: 'LineIcons';
    --size: 48px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    position: absolute;
    top: 50%;
    right: 24px;
    border-radius: 100px;
    transform: translateX(0) translateY(-50%) rotate(0);
    color: #000;
    transition: all 0.2s ease;
}

.family-coupon-guide .accordion-btn.act:after {
    transform: translateX(0) translateY(-50%) rotate(180deg);
}

.family-coupon-guide .accordion-btn:hover {
    background: rgba(0,0,0,0.03);
}

.family-coupon-guide .accordion-btn p {
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    color: #000;
    letter-spacing: -0.5px;
}

.family-coupon-guide .accordion-btn p:before {
    content: 'Q. ';
    font-weight: 700;
}

.family-coupon-guide .accordion-btn.act ~ .accordion-cont {
    height: auto;
    height: calc-size(auto, size);
    padding: 16px 24px 32px;
}

.family-coupon-guide .accordion-cont {
    display: block;
    padding: 0 24px;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.family-coupon-guide .accordion-cont p {
    width: 100%;
    padding: 24px 24px 32px;
    background: #f2f2f7;
    border-radius: 24px;
    font-size: 24px;
    line-height: 40px;
    color: #000;
}

.family-coupon-guide .accordion-cont p:before {
    content: 'A. ';
    font-weight: 700;
}

.family-coupon-guide .caution-msg {
    margin-top: 64px;
    color: #fe6a2b;
    font-size: 24px;
    line-height: 32px;
    vertical-align: middle;
    letter-spacing: -1px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.family-coupon-guide .caution-msg:before {
    content: '\e953';
    font-family: 'LineIcons';
    --size: 32px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    font-size: var(--size);
    vertical-align: middle;
}

.modal-item:has(.webtoon-modal) .modal-pannel,
.modal-item:has(.webtoon-modal) .modal-pannel .modal-header { background: transparent; box-shadow: none; border: none; }
.modal-item:has(.webtoon-modal) .modal-pannel .modal-header .btn-popup-close { color: #fff; margin-top: 8px; right: 0; }
.modal-item:has(.webtoon-modal) .modal-pannel .modal-header .btn-popup-close .line-icons:before {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 32px;
}
.modal-item:has(.webtoon-modal) .modal-pannel .modal-header .btn-popup-close .line-icons:after {
    content: '닫기';
    position: absolute;
    top: 50%;
    left: -4px;
    transform: translateX(-100%) translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
}
body .modal-item:has(.webtoon-modal) .modal-pannel .modal-header + .modal-body .modal-scroller {
    margin: 0 auto;
    border-radius: 4px;
    background: #fff;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[GEO]이벤트 페이지------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.event-notice {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    margin-top: 80px;
    padding: 64px 40px;
    border-top: 20px solid #F2F3F8;
    font-size: 20px;
    text-align: left;
}

.event-notice h3 {
    font-size: 36px;
    font-weight: 700;
    color: #2a3138;
    padding-bottom: 20px;
    border-bottom: 2px solid #d9dbdc;
    margin-bottom: 48px;
}

.event-notice .editor-contents-container {
    font-size: 20px;
    line-height: 150%;
    color: #5b6068;
}

.event-notice ul {
    list-style-type: disc;
}

.event-notice ol {
    list-style-type: decimal;
}

.event-notice :where(ul, ol) {
    padding: 16px;
    padding-left: 48px;
    border-radius: 16px;
    background: #f9f9fa;
    margin-top: 16px;
}

.event-notice :where(ul, ol) li {
    font-size: 20px;
    color: #5b6068;
    line-height: 150%;
    list-style-position: outside;
}

.event-notice :where(ul, ol) li :where(span, p, strong, em, a) {
    font-size: inherit;
    line-height: inherit;
}

.event-notice ul li {
    list-style: none;
    position: relative;
}

.event-notice ul li::before {
    content: '•';
    position: absolute;
    left: -20px;
    color: inherit;
}

.event-notice :where(ul, ol) li + li {
    margin-top: 24px;
}

.event-notice strong:has(+ ul, + ol) {
    display: block;
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 500;
    color: #2a3138;
    line-height: 150%;
}

.event-notice a {
    color: inherit;
    text-decoration: underline;
}


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=[GEO]상품상세----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
:is(.shopping-tire-detail, .shopping-auto-service-detail) .product-detail-info-section .product-noti + .product-noti {
    margin-top: 20px;
}

:has(.product-faq-section) .item-related-section {
    margin-top: 48px;
}

.product-feature-container :where(ul, ol):not(.list) li { padding-left: 10px !important; }
.product-feature-container :where(ul, ol):not(.list) li::before {
    content: '·';
    position: absolute;
    left: 0;
}

.product-faq-section {
    width: 100%;
    /* max-width: 750px; */
    height: auto;
    margin: 0 auto;
    margin-top: 48px;
    border-top: 8px solid #ECEEEF;
    padding: 24px 0 0;
}

.product-faq-section::after {
    content: '* 실제 고객 문의 데이터 기반으로 작성되었습니다.';
    margin-top: 12px;
    font-weight: 400;
    color: #A0A6AF;
    background: linear-gradient(to right, #fe6a2b 2%, #A0A6AF 2%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-size: 12px;
}

.product-faq-section .section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.faq-item {
    appearance: none;
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    border-bottom: 1px solid #ECEEEF;
}

.faq-item * { user-select: none; }

.faq-item .question-area {
    width: 100%;
    height: auto;
    padding: 16px 32px 16px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #2a3138;
    cursor: pointer;
    user-select: none;
    list-style: none !important;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    border: none;
}

.faq-item .question-area::before {
    content: 'Q.';
    position: absolute;
    left: 4px;
}

.faq-item .question-area::after {
    content: '\e915';
    font-family: 'LineIcons';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.faq-item[aria-expanded="true"] .question-area::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-item .answer-area {
    width: 100%;
    height: 0;
    padding: 0;
    font-size: 14px;
    color: #5b6068;
    overflow: hidden;
    position: relative;
    interpolate-size: allow-keywords;
    transition: all 0.3s ease;
}

.faq-item[aria-expanded="true"] .answer-area {
    padding: 0 0 20px;
    height: auto;
}

.faq-item .answer-area p {
    margin: 0;
    padding: 16px;
    border-radius: 8px;
    background: #f9f9fa;
}
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=AI상담 트리거-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#header.dark-header .btn-ai .ai-util-icon {
    width: 24px;
    height: 24px;
    display: inline-flex; 
    justify-content: flex-end;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(1.333);
    pointer-events: auto;
}

#header.dark-header .btn-ai .ai-util-icon-inner {
    display: inline-flex; 
    justify-content: flex-end;
    pointer-events: auto;
}

/* :root:has(.ai-fab) .quick-menu-item {
    display: none !important;
} */

.ai-fab {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    width: 72px;
    height: 72px;
    position: fixed;
    bottom: 32px;
    left: calc(50% + 585px + 20px);
    border-radius: 999px;
    background: transparent;
    z-index: 1001;
    padding: 2px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.ai-fab .ai-fab-bg {
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background: conic-gradient(#81FFF0 0%, #FF1770 25%, #CE6BFF 30%, #6DFF60 50%, #CE6BFF 70%, #FF1770 75%, #81FFF0 100%);
    z-index: 0;
}

.ai-fab .ai-fab-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #000;
    overflow: hidden;
}

.ai-fab .ai-symbol {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50%;
    transform: translateX(-50%) translateY(-50%) scale(2.1);
    user-select: none;
}

.ai-fab .ai-typo {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    user-select: none;
}

.ai-fab .tbot-typo {
    width: 64px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50%;
    transform: translateX(60%) translateY(-50%);
    user-select: none;
}