/**
 ***********
 * LU Networks Design System
 * last modify : 2023-04-20
 * 감독 : 권이준 실장
 * 기획 : 권이준 실장, 김영훈 대리
 * 감수 : 엄성주 부장
 * 작업 : 구민회 차장
 ***********
*/

@import '/assets/token.css?v=2308';
@import '/assets/colors.css?v=2308';
@import '/assets/typography.css?v=2308';
@import '/assets/icons.css?v=2308';
@import '/assets/reset.css?v=2308';
@import '/assets/foundation.css?v=2308';

/**********
* infiniteRing
**********/
@keyframes lndsAniRing {
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: rotate(270deg);
    }
}
.rotateInfinity {
    animation-name: lndsAniRing;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/**********
* light / dark mode
**********/
#lndsDarkSwitch {
    position: fixed;
    bottom: var(--lndsSpacing400);
    right: var(--lndsSpacing400);
    z-index: 999;
}

/**********
* skeleton loader
**********/
.lndsSkeleton .lndsSkeletonItem {
    position: relative !important;
    border: 0 !important;
    background-color: var(--lndsRefGray200) !important;
    background-image: url('') !important;
    overflow: hidden !important;
    content: '' !important;
}
.lndsSkeleton .lndsSkeletonItem:after {
    content: '' !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    animation: lndsSkeleton-loader 1.2s infinite;
}
@keyframes lndsSkeleton-loader {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translate(100%);
    }
}

/**********
* Accordion
**********/
.lndsAccordion {
    position: relative !important;
}
.lndsAccordion hr {
    width: calc(100% - (var(--lndsPageHorizonSpacing) * 2));
    margin: 0 auto;
}
.lndsAccordion > .lndsAccordionHeader {
    position: relative;
    display: grid !important;
    grid-template-columns: var(--lndsSpacing800) auto var(--lndsSpacing700);
    column-gap: 0;
    row-gap: 0;
    align-items: center;
    height: 46px;
    padding: 0 var(--lndsPageHorizonSpacing);
    background-color: var(--lndsConBgPrimary);
}
.lndsAccordion > .lndsAccordionHeader[data-exception='true'] {
    grid-template-columns: var(--lndsSpacing800) auto 30% var(--lndsSpacing700);
}
.lndsAccordion.standard > .lndsAccordionHeader {
    grid-template-columns: var(--lndsSpacing900) auto var(--lndsSpacing800);
    height: 54px;
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderIcon {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: left;
    height: 100%;
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderArrow {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: right;
    height: 100%;
    color: var(--lndsConTxtQuaternary);
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderArrow > lnds-icon {
    margin-right: calc(0% - var(--lndsSpacing50));
    transition: 0.3s ease;
}
.lndsAccordion[data-expand='true'] > .lndsAccordionHeader .lndsHeaderArrow > lnds-icon,
.lndsAccordion[data-state='expended'] > .lndsAccordionHeader .lndsHeaderArrow > lnds-icon {
    rotate: 180deg;
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderContent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 1;
}
.lndsAccordion.standard > .lndsAccordionHeader > .lndsHeaderContent {
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderContent > * {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 2;
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderContent > .titleMain {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderContent > .titleSub {
    font-family: var(--lndsSysBodyMediumFontFamily);
    font-size: var(--lndsSysBodyMediumFontSize);
    font-weight: var(--lndsSysBodyMediumFontWeight);
    line-height: var(--lndsSysBodyMediumLineHeight);
    letter-spacing: var(--lndsSysBodyMediumLetterSpacing);
    color: var(--lndsSysContentTertiary);
}
.lndsAccordion > .lndsAccordionHeader > .lndsHeaderContent > .titleCategory {
    height: 100%;
    margin-right: var(--lndsSpacing200);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--lndsSysContentQuaternary);
}
.lndsAccordion > .lndsAccordionHeader > .exception {
    display: flex;
    align-items: center;
    justify-content: left;
}
.lndsAccordion > .lndsAccordionHeader > .exception.toRight {
    justify-content: right;
}
.lndsAccordion > .lndsAccordionContent {
    display: none;
    padding: var(--lndsSpacing400);
    background-color: var(--lndsConBgSecondary);
    font-family: var(--lndsSysBodyMediumFontFamily);
    font-size: var(--lndsSysBodyMediumFontSize);
    font-weight: var(--lndsSysBodyMediumFontWeight);
    line-height: var(--lndsSysBodyMediumLineHeight);
    letter-spacing: var(--lndsSysBodyMediumLetterSpacing);
}
.lndsAccordion.standard > .lndsAccordionContent {
    padding: var(--lndsSpacing400) 0 0 var(--lndsSpacing600);
}
.lndsAccordion[data-expand='true'] > .lndsAccordionContent,
.lndsAccordion[data-state='expended'] > .lndsAccordionContent {
    display: block;
}

.lndsAccordion[data-readed='read'] > .dividerArea {
    background-color: var(--lndsSysStateTertiary) !important;
}
.lndsAccordion[data-readed='read'] > .lndsAccordionHeader {
    background-color: var(--lndsSysStateTertiary) !important;
    color: var(--lndsSysContentDisabled) !important;
}
.lndsAccordion[data-readed='read'] > .lndsAccordionHeader > * {
    color: var(--lndsSysContentDisabled) !important;
}
.lndsAccordion[data-readed='read'] > .lndsAccordionContent {
    background-color: var(--lndsSysStateTertiary) !important;
    color: var(--lndsSysContentDisabled) !important;
}
.lndsAccordion[data-readed='read'] > .lndsAccordionContent > * {
    color: var(--lndsSysContentDisabled) !important;
}

/**********
* Avatar
**********/
.lndsAvatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lndsAvatar > .lndsAvatarBG {
    width: 100%;
    height: 100%;
    z-index: 1;
}
.lndsAvatar > .lndsAvatarTxt {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 2;
}
lnds-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
lnds-avatar > div[slot='text'] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
lnds-avatar > .lndsAvatarTxtOrg {
    background: var(--lndsSysBackgroundInverseTertiary);
    font-size: 0.3em;
    font-weight: var(--lndsFontWeightBold);
    transition: 0.3s;
}
lnds-avatar > .lndsAvatarTxtOrg:hover {
    opacity: 0;
}

/**********
* Badge
**********/
.lndsBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lndsBadge.noti:not(.dot) {
    height: var(--lndsSpacing450);
    border-radius: var(--lndsBorderRadius8);
    background: var(--lndsSysSemanticSecondaryDefault);
    font-family: var(--lndsSysLabelSmallSemiboldFontFamily);
    font-size: var(--lndsSysLabelSmallSemiboldFontSize);
    font-weight: var(--lndsSysLabelSmallSemiboldFontWeight);
    line-height: var(--lndsSysLabelSmallSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelSmallSemiboldLetterSpacing);
    color: var(--lndsSysContentInversePrimary);
}
.lndsBadge.noti.new {
    width: 17px;
    margin-right: -8px;
}
.lndsBadge.noti.digitsMax {
    width: 31px;
    margin-right: -15px;
}
.lndsBadge.noti.digitsDouble {
    width: 23px;
    margin-right: -11px;
}
.lndsBadge.noti.digitsSingle {
    width: 18px;
    margin-right: -9px;
}
.lndsBadge.dot {
    width: 12px;
    height: 12px;
}
.lndsBadge.dot > .dotItem {
    width: var(--lndsSpacing100);
    height: var(--lndsSpacing100);
    border-radius: var(--lndsBorderRadius8);
    background: var(--lndsSysSemanticSecondaryDefault);
}
.lndsBadge.dot:not([data-position='tr']):not([data-position='br']) {
    vertical-align: super;
}
.lndsBadge.dot[data-position='up'] {
    vertical-align: super;
}
.lndsBadge.dot[data-position='tr'] {
    position: absolute;
    top: -4px;
    right: -4px;
}
.lndsBadge.dot[data-position='br'] {
    position: absolute;
    bottom: -4px;
    right: -4px;
}
.lndsBadge[data-position='tr'] {
    position: absolute;
    top: -4px;
    right: 0;
}
.lndsBadge[data-position='br'] {
    position: absolute;
    bottom: -4px;
    right: 0;
}
.lndsBadge.rank {
    height: var(--lndsSpacing700);
    padding: var(--lndsSpacing200);
    border-radius: var(--lndsBorderRadius2);
    background: var(--lndsConBgSecondaryInverse);
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimaryInverse);
}
.lndsBadge.label {
    height: var(--lndsSpacing600);
    padding: 0 var(--lndsSpacing200);
    border-radius: var(--lndsBorderRadius8);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
}
.lndsBadge.label:not(.outline):not(.color):not(.solid) {
    background: var(--lndsConBgTertiary);
    color: var(--lndsSysContentTertiary);
}
.lndsBadge.label.outline:not(.color) {
    border: var(--lndsBorderWidth1) solid var(--lndsSysBorderSecondary);
    background: transparent;
    color: var(--lndsConTxtQuaternary);
}
.lndsBadge.label.solid:not(.color) {
    background: var(--lndsConSemanticNeutral);
    color: var(--lndsSysContentInversePrimary);
}
.lndsBadge.label.color.primary:not(.solid) {
    background: var(--lndsSysSemanticPrimaryLight);
    color: var(--lndsSysSemanticPrimaryDark);
}
.lndsBadge.label.color.primary.solid {
    background: var(--lndsSysSemanticPrimaryDark);
    color: var(--lndsSysSemanticPrimaryLight);
}
.lndsBadge.label.color.secondary:not(.solid) {
    background: var(--lndsSysSemanticSecondaryLight);
    color: var(--lndsSysSemanticSecondaryDark);
}
.lndsBadge.label.color.secondary.solid {
    background: var(--lndsSysSemanticSecondaryDark);
    color: var(--lndsSysSemanticSecondaryLight);
}
.lndsBadge.label.color.informative:not(.solid) {
    background: var(--lndsSysSemanticInformativeLight);
    color: var(--lndsSysSemanticInformativeDark);
}
.lndsBadge.label.color.informative.solid {
    background: var(--lndsSysSemanticInformativeDark);
    color: var(--lndsSysSemanticInformativeLight);
}
.lndsBadge.label.color.positive:not(.solid) {
    background: var(--lndsSysSemanticPositiveLight);
    color: var(--lndsSysSemanticPositiveDark);
}
.lndsBadge.label.color.positive.solid {
    background: var(--lndsSysSemanticPositiveDark);
    color: var(--lndsSysSemanticPositiveLight);
}
.lndsBadge.label.color.notice:not(.solid) {
    background: var(--lndsSysSemanticNoticeLight);
    color: var(--lndsSysSemanticNoticeDark);
}
.lndsBadge.label.color.notice.solid {
    background: var(--lndsSysSemanticNoticeDark);
    color: var(--lndsSysSemanticNoticeLight);
}
.lndsBadge.label.color.negative:not(.solid) {
    background: var(--lndsSysSemanticNegativeLight);
    color: var(--lndsSysSemanticNegativeDark);
}
.lndsBadge.label.color.negative.solid {
    background: var(--lndsSysSemanticNegativeDark);
    color: var(--lndsSysSemanticNegativeLight);
}
.lndsBadge.label.color.overlay:not(.solid) {
    background: var(--lndsSysOverlayTertiary);
    color: var(--lndsSysContentTertiary);
}
.lndsBadge.label.color.overlay.solid {
    background: var(--lndsSysOverlayInverseTertiary);
    color: var(--lndsSysContentTertiary);
}

/**********
* Banner
**********/
lnds-banner > div[slot='title'],
lnds-banner[size='small'] > div[slot='title'] {
    font-family: var(--lndsSysLabelLargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelLargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelLargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelLargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
lnds-banner > div[slot='subtitle'],
lnds-banner[size='small'] > div[slot='subtitle'] {
    font-family: var(--lndsSysBodySmallFontFamily);
    font-size: var(--lndsSysBodySmallFontSize);
    font-weight: var(--lndsSysBodySmallFontWeight);
    line-height: var(--lndsSysBodySmallLineHeight);
    letter-spacing: var(--lndsSysBodySmallLetterSpacing);
    color: var(--lndsConTxtTertiary);
}
lnds-banner > div[slot='button'],
lnds-banner[size='small'] > div[slot='button'] {
    padding-top: var(--lndsSpacing100);
}
lnds-banner > div[slot='content'],
lnds-banner[size='small'] > div[slot='content'] {
    font-family: var(--lndsSysBodySmallFontFamily);
    font-size: var(--lndsSysBodySmallFontSize);
    font-weight: var(--lndsSysBodySmallFontWeight);
    line-height: var(--lndsSysBodySmallLineHeight);
    letter-spacing: var(--lndsSysBodySmallLetterSpacing);
    color: var(--lndsConTxtSecondary);
}
lnds-banner[size='medium'] > div[slot='title'] {
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
lnds-banner[size='medium'] > div[slot='subtitle'] {
    font-family: var(--lndsBodyMediumFontFamily);
    font-size: var(--lndsBodyMediumFontSize);
    font-weight: var(--lndsBodyMediumFontWeight);
    line-height: var(--lndsBodyMediumLineHeight);
    letter-spacing: var(--lndsBodyMediumLetterSpacing);
    color: var(--lndsConTxtTertiary);
}
lnds-banner[size='medium'] > div[slot='button'] {
    padding-top: var(--lndsSpacing100);
}
lnds-banner[size='medium'] > div[slot='content'] {
    font-family: var(--lndsSysBodySmallFontFamily);
    font-size: var(--lndsSysBodySmallFontSize);
    font-weight: var(--lndsSysBodySmallFontWeight);
    line-height: var(--lndsSysBodySmallLineHeight);
    letter-spacing: var(--lndsSysBodySmallLetterSpacing);
    color: var(--lndsConTxtSecondary);
}
lnds-banner[size='large'] > div[slot='title'] {
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
lnds-banner[size='large'] > div[slot='subtitle'] {
    font-family: var(--lndsBodyMediumFontFamily);
    font-size: var(--lndsBodyMediumFontSize);
    font-weight: var(--lndsBodyMediumFontWeight);
    line-height: var(--lndsBodyMediumLineHeight);
    letter-spacing: var(--lndsBodyMediumLetterSpacing);
    color: var(--lndsConTxtTertiary);
}
lnds-banner[size='large'] > div[slot='button'] {
    padding-top: var(--lndsSpacing100);
}
lnds-banner[size='large'] > div[slot='content'] {
    font-family: var(--lndsSysBodySmallFontFamily);
    font-size: var(--lndsSysBodySmallFontSize);
    font-weight: var(--lndsSysBodySmallFontWeight);
    line-height: var(--lndsSysBodySmallLineHeight);
    letter-spacing: var(--lndsSysBodySmallLetterSpacing);
    color: var(--lndsConTxtSecondary);
}

lnds-banner [slot='title'],
lnds-banner [slot='subtitle'],
lnds-banner[content='basic'] [slot='title'],
lnds-banner[content='basic'] [slot='subtitle'] {
    display: block;
}
lnds-banner [slot='content'],
lnds-banner [slot='button'],
lnds-banner[content='basic'] [slot='content'],
lnds-banner[content='basic'] [slot='button'] {
    display: none;
}

lnds-banner[content='simple'] [slot='title'],
lnds-banner[content='simple'] [slot='content'],
lnds-banner[content='simple'] [slot='button'] {
    display: none;
}
lnds-banner[content='simple'] [slot='subtitle'] {
    display: block;
}

lnds-banner[content='content'] [slot='title'],
lnds-banner[content='content'] [slot='subtitle'],
lnds-banner[content='content'] [slot='content'] {
    display: block;
}
lnds-banner[content='content'] [slot='button'] {
    display: none;
}

lnds-banner[content='button'] [slot='title'],
lnds-banner[content='button'] [slot='subtitle'],
lnds-banner[content='button'] [slot='button'] {
    display: block;
}
lnds-banner[content='button'] [slot='content'] {
    display: none;
}

/**********
* button
**********/
button,
input[type='submit'],
input[type='reset'],
.lndsBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s;
}
.lndsBtn:disabled,
.lndsBtn.disabled {
    cursor: not-allowed;
}
.lndsBtn:not(.outline):not(.color) {
    border: var(--lndsBorderWidth0);
    background-color: transparent;
}
.lndsBtn:not(.outline):not(.color):active,
.lndsBtn.active:not(.outline):not(.color) {
    background: var(--lndsSysStateSecondary);
}
.lndsBtn:not(.outline):not(.color):disabled,
.lndsBtn:not(.outline):not(.color):not(.disabled) {
    background: transparent;
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.outline {
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    background-color: var(--lndsConBgPrimary);
    color: #76768e !important;
}
.lndsBtn.outline:active:not(:disabled),
.lndsBtn.outline.active:not(.disabled) {
    background: var(--lndsSysStateSecondary);
}
.lndsBtn.outline:disabled,
.lndsBtn.outline.disabled {
    background-color: var(--lndsConBgPrimary);
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.round,
.lndsBtn.round > input[type='checkbox'],
input[type='checkbox'].round {
    border-radius: var(--lndsBorderRadius8) !important;
}
.lndsBtn.tiny {
    height: 18px;
    padding: 0 var(--lndsSpacing200);
    border-radius: var(--lndsBorderRadius3);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsBtn.xsmall {
    height: 27px;
    padding: 0 var(--lndsSpacing200);
    border-radius: var(--lndsBorderRadius3);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsBtn.small {
    height: var(--lndsHeightS);
    padding: 0 var(--lndsSpacing300);
    border-radius: var(--lndsBorderRadius4);
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
button,
.lndsBtn,
.lndsBtn.medium {
    height: var(--lndsHeightM);
    padding: 0 var(--lndsSpacing350);
    border-radius: var(--lndsBorderRadius4);
    font-family: var(--lndsSysLabelLargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelLargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelLargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelLargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsBtn.large {
    height: var(--lndsHeightL);
    padding: 0 var(--lndsSpacing400);
    border-radius: var(--lndsBorderRadius4);
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsBtn.progress:not(.color) > div {
    border-color: var(--lndsConSemanticPrimary) transparent transparent transparent;
}
.lndsBtn.progress.color > div {
    border-color: var(--lndsConBgPrimary) transparent transparent transparent;
}
.lndsBtn.color.primary {
    border: var(--lndsBorderWidth0);
    background-color: var(--lndsConSemanticPrimary);
    /* color: var(--lndsConTxtPrimary); */
    color: var(--lndsRefGray900);
}
.lndsBtn.color.primary:active:not(:disabled),
.lndsBtn.color.primary.active:not(.disabled) {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticPrimary) !important;
}
.lndsBtn.color.primary:disabled,
.lndsBtn.color.primary.disabled {
    /* background: linear-gradient(
      to top,
      var(--lndsSysContentInverseSecondary),
      var(--lndsSysContentInverseSecondary)
    ),
    var(--lndsConSemanticPrimary) !important;
  color: var(--lndsSysContentDisabled); */
    background: #f5f6fa !important;
    color: rgba(25, 25, 35, 0.38) !important;
}
.lndsBtn.color.secondary {
    border: var(--lndsBorderWidth0);
    background-color: var(--lndsConSemanticSecondary);
    color: var(--lndsSysSemanticSecondaryLight);
}
.lndsBtn.color.secondary:active:not(:disabled):not(.disabled) {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticSecondary) !important;
}
.lndsBtn.color.secondary:disabled,
.lndsBtn.color.secondary.disabled {
    background: linear-gradient(to top, var(--lndsSysContentInverseSecondary), var(--lndsSysContentInverseSecondary)), var(--lndsConSemanticSecondary) !important;
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.color.informative {
    border: var(--lndsBorderWidth0);
    background-color: var(--lndsConSemanticInformative);
    color: var(--lndsSysSemanticInformativeLight);
}
.lndsBtn.color.informative:active:not(:disabled):not(.disabled) {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticInformative) !important;
}
.lndsBtn.color.informative:disabled,
.lndsBtn.color.informative.disabled {
    background: linear-gradient(to top, var(--lndsSysContentInverseSecondary), var(--lndsSysContentInverseSecondary)),
        var(--lndsConSemanticInformative) !important;
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.color.positive {
    border: var(--lndsBorderWidth0);
    background-color: var(--lndsConSemanticPositive);
    color: var(--lndsSysSemanticPositiveLight);
}
.lndsBtn.color.positive:active:not(:disabled):not(.disabled) {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticPositive) !important;
}
.lndsBtn.color.positive:disabled,
.lndsBtn.color.positive.disabled {
    background: linear-gradient(to top, var(--lndsSysContentInverseSecondary), var(--lndsSysContentInverseSecondary)), var(--lndsConSemanticPositive) !important;
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.color.notice {
    border: var(--lndsBorderWidth0);
    background-color: var(--lndsConSemanticNotice);
    color: var(--lndsSysSemanticNoticeLight);
}
.lndsBtn.color.notice:active:not(:disabled):not(.disabled) {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticNotice) !important;
}
.lndsBtn.color.notice:disabled,
.lndsBtn.color.notice.disabled {
    background: linear-gradient(to top, var(--lndsSysContentInverseSecondary), var(--lndsSysContentInverseSecondary)), var(--lndsConSemanticNotice) !important;
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.color.negative {
    border: var(--lndsBorderWidth0);
    background-color: var(--lndsConSemanticNegative);
    color: var(--lndsSysSemanticNegativeLight);
}
.lndsBtn.color.negative:active:not(:disabled):not(.disabled) {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticNegative) !important;
}
.lndsBtn.color.negative:disabled,
.lndsBtn.color.negative.disabled {
    background: linear-gradient(to top, var(--lndsSysContentInverseSecondary), var(--lndsSysContentInverseSecondary)), var(--lndsConSemanticNegative) !important;
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.color.neutral {
    border: var(--lndsBorderWidth0);
    background-color: var(--lndsConSemanticNeutral);
    color: var(--lndsSysSemanticNeutralLight);
}
.lndsBtn.color.neutral:active:not(:disabled):not(.disabled) {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticNeutral) !important;
}
.lndsBtn.color.neutral:disabled,
.lndsBtn.color.neutral.disabled {
    background: linear-gradient(to top, var(--lndsSysContentInverseSecondary), var(--lndsSysContentInverseSecondary)), var(--lndsConSemanticNeutral) !important;
    color: var(--lndsSysContentDisabled);
}
.lndsBtn.outline.lineonly {
    background: transparent;
    color: inherit;
}
.lndsBtn.outline.color.neutral {
    border: var(--lndsBorderWidth1) solid var(--lndsSysBorderFocus);
}
.lndsBtn.blank {
    padding: 0 !important;
}
.lndsBtn.ghost {
    border: none;
}
.lndsBtn .progressHideItem {
    display: none;
}
.lndsBtn.sns[data-sns='naver']:not(.outline) {
    background-color: #03c75a !important;
    color: #fff !important;
}
.lndsBtn.sns[data-sns='naver'].outline lnds-icon {
    color: #03c75a;
}
.lndsBtn.sns[data-sns='kakao']:not(.outline) {
    background-color: #fee102 !important;
    color: #000 !important;
}
.lndsBtn.sns[data-sns='facebook']:not(.outline) {
    background-color: #1877fe !important;
    color: #fff !important;
}
.lndsBtn.sns[data-sns='facebook'].outline lnds-icon {
    color: #1877fe !important;
}
.lndsBtn.sns[data-sns='apple']:not(.outline) {
    background-color: #000 !important;
    color: #fff !important;
}
.lndsBtn.sns[data-sns='apple'].outline lnds-icon {
    color: #000;
}

/**********
* Card
**********/
.lndsCard {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: var(--lndsConBgPrimary);
    overflow: hidden;
    box-shadow: var(--lndsElevation30X) var(--lndsElevation30Y) var(--lndsElevation10Blur) var(--lndsElevation30Spread) var(--lndsElevation30Color),
        var(--lndsElevation31X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation31Spread) var(--lndsElevation31Color);
}
.lndsCard.small.square {
    border-radius: var(--lndsBorderRadius5);
}
.lndsCard.small:not(.square) {
    border-radius: var(--lndsBorderRadius5);
}
.lndsCard,
.lndsCard.medium {
    border-radius: var(--lndsBorderRadius6);
}
.lndsCard.large {
    border-radius: var(--lndsBorderRadius7);
    box-shadow: var(--lndsElevation50X) var(--lndsElevation50Y) var(--lndsElevation10Blur) var(--lndsElevation50Spread) var(--lndsElevation50Color),
        var(--lndsElevation51X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation51Spread) var(--lndsElevation51Color);
}
.lndsCard.small.square {
    width: 140px !important;
}
.lndsCard.small:not(.square) {
    width: 162px !important;
}
.lndsCard.medium {
    width: 300px !important;
}
.lndsCard.large {
    width: 336px !important;
}
.lndsCard:not(.image).small.square .lndsCardImage {
    height: 140px !important;
}
.lndsCard:not(.image).small .lndsCardImage {
    height: 122px;
}
.lndsCard:not(.image).medium .lndsCardImage {
    height: 148px;
}
.lndsCard:not(.image).large .lndsCardImage {
    height: 166px;
}
.lndsCard.image.small.square .lndsCardImage {
    height: 202px !important;
}
.lndsCard.image.small:not(.square) .lndsCardImage {
    height: 180px !important;
}
.lndsCard.image.medium .lndsCardImage {
    height: 226px !important;
}
.lndsCard.image.large .lndsCardImage {
    height: 268px !important;
}
.lndsCard .lndsCardInfo {
    position: relative;
    margin: 0;
    padding: var(--lndsSpacing400) var(--lndsSpacing400) var(--lndsSpacing300) var(--lndsSpacing400);
}
.lndsCard.small.square .lndsCardInfo {
    padding: var(--lndsSpacing300) var(--lndsSpacing300) var(--lndsSpacing300) var(--lndsSpacing300);
}
.lndsCard.small:not(.square) .lndsCardInfo {
    padding: var(--lndsSpacing200) var(--lndsSpacing200) var(--lndsSpacing300) var(--lndsSpacing200);
}
.lndsCard.medium .lndsCardInfo {
    padding: var(--lndsSpacing300) var(--lndsSpacing400) var(--lndsSpacing500) var(--lndsSpacing400);
}
.lndsCard.large .lndsCardInfo {
    padding: var(--lndsSpacing500) var(--lndsSpacing600) var(--lndsSpacing600) var(--lndsSpacing600);
}
.lndsCard.large.square .lndsCardInfo .title {
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
}
.lndsCard.small:not(.square) .lndsCardInfo .title {
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
}
.lndsCard.medium .lndsCardInfo .title {
    font-family: var(--lndsSysTitleSmallBoldFontFamily);
    font-size: var(--lndsSysTitleSmallBoldFontSize);
    font-weight: var(--lndsSysTitleSmallBoldFontWeight);
    line-height: var(--lndsSysTitleSmallBoldLineHeight);
    letter-spacing: var(--lndsSysTitleSmallBoldLetterSpacing);
}
.lndsCard.large .lndsCardInfo .title {
    font-family: var(--lndsSysTitleLargeBoldFontFamily);
    font-size: var(--lndsSysTitleLargeBoldFontSize);
    font-weight: var(--lndsSysTitleLargeBoldFontWeight);
    line-height: var(--lndsSysTitleLargeBoldLineHeight);
    letter-spacing: var(--lndsSysTitleLargeBoldLetterSpacing);
}
.lndsCard.small.square .lndsCardInfo .subtitle {
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
}
.lndsCard.small:not(.square) .lndsCardInfo .subtitle {
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
}
.lndsCard.medium .lndsCardInfo .subtitle {
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
}
.lndsCard.large .lndsCardInfo .subtitle {
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
}
.lndsCard .lndsCardInfo .title {
    display: block;
    color: var(--lndsConTxtPrimary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 1;
}
.lndsCard .lndsCardInfo .subtitle {
    display: block;
    color: var(--lndsConTxtTertiary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 1;
}
.lndsCard.small:not(.square) .lndsCardInfo .title,
.lndsCard.small:not(.square) .lndsCardInfo .subtitle {
    text-align: center !important;
}
.lndsCard.image .lndsCardInfo {
    display: none;
}
.lndsCard.image .lndsCardContent {
    display: none;
}
.lndsCard .lndsCardImage {
    width: 100%;
    overflow: hidden;
}
.lndsCard .lndsCardImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lndsCard.outline {
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    box-shadow: none;
}
.lndsCard.outline.angle {
    border-radius: var(--lndsBorderRadius0);
}
.lndsCard .lndsCardContent {
    width: 100%;
    margin: 0px;
    padding: var(--lndsSpacing400);
}
.lndsCard .lndsCardContent p {
    padding-bottom: var(--lndsSpacing200);
}

/**********
* Carousel
**********/
.lndsCarousel {
    background: var(--lndsConBgPrimary);
}
.lndsCarousel .lndsCarouselHead {
    padding-top: var(--lndsSpacing200);
}
.lndsCarousel .lndsCarouselHead .lndsList hr {
    display: none;
}
.lndsCarousel .lndsCarouselBody {
    display: flex;
    column-gap: var(--lndsSpacing300);
    width: 100%;
    overflow-x: auto;
    padding: 0 var(--lndsSpacing400) var(--lndsSpacing600) var(--lndsSpacing400);
}
.lndsCarousel.w144 .lndsCarouselBody .lndsProductItem {
    width: 144px;
}
.lndsCarousel.w100 .lndsCarouselBody .lndsProductItem {
    width: 100px;
}
.lndsCarousel.w80 .lndsCarouselBody {
    column-gap: var(--lndsSpacing200);
    padding: 0 0 var(--lndsSpacing600) var(--lndsSpacing300);
}
.lndsCarousel.w80 .lndsCarouselBody .lndsProductList {
    width: 320px;
    padding-right: 0;
    padding-left: 0;
}
.lndsCarousel.w80 .lndsCarouselBody .lndsProductList .lndsProductItem {
    padding-right: 0;
    padding-left: 0;
}

/**********
* checkbox
**********/
.lndsCheckbox {
    display: inline-flex;
    flex-flow: row;
    justify-items: left;
    column-gap: var(--lndsSpacing200);
    user-select: none;
    -webkit-user-select: none;
    height: var(--lndsSpacing600);
    background: transparent;
    line-height: var(--lndsSpacing600);
    cursor: pointer;
    overflow: hidden;
}
.lndsCheckbox > input[type='checkbox'] {
    margin: var(--lndsSpacing50);
}
.lndsCheckbox.round > input[type='checkbox'],
input[type='checkbox'].round {
    border-radius: var(--lndsBorderRadius8) !important;
    overflow: hidden;
}
.lndsCheckbox.disabled {
    color: var(--lndsConUIBorder);
}
input[type='checkbox'] {
    width: var(--lndsSpacing500);
    height: var(--lndsSpacing500);
    margin: 2px;
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    border-radius: var(--lndsBorderRadius1);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    overflow: hidden;
}
input[type='checkbox']:checked {
    border-color: var(--lndsSysSemanticPrimaryDark);
    background-color: var(--lndsSysSemanticPrimaryDark);
    background-image: var(--lndsIconCheckedWhite);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
input[type='checkbox']:indeterminate {
    border-color: var(--lndsConSemanticPrimary);
    background-color: var(--lndsConSemanticPrimary);
    background-image: var(--lndsIconMaximizeWhite);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
input[type='checkbox']:disabled {
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    background-color: transparent !important;
}
input[type='checkbox']:checked:disabled {
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    background-color: var(--lndsConUIBorder) !important;
}
input[type='checkbox']:focus:not(:checked):not(:disabled) {
    outline: none;
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    border-radius: var(--lndsBorderRadius1);
}
input[type='checkbox']:focus:checked:not(:disabled) {
    outline: none;
    border: var(--lndsBorderWidth1) solid var(--lndsConSemanticPrimary);
    border-radius: var(--lndsBorderRadius1);
}

/**********
* chip
**********/
.lndsChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    height: 32px;
    padding: 0 var(--lndsSpacing300);
    border-width: var(--lndsBorderWidth1);
    border-style: solid;
    border-radius: var(--lndsBorderRadius8);
    border-color: var(--lndsConBgTertiary);
    background-color: var(--lndsConBgTertiary);
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
    overflow: hidden;
    cursor: pointer;
}
.lndsChip:focus:not(:disabled):not(.assistiveChip) {
    border-color: var(--lndsConBorderFocus);
    background-color: var(--lndsConBgPrimary);
    font-weight: var(--lndsFontWeightSemibold);
}
.lndsChip:active:not(:disabled):not(.assistiveChip) {
    border-color: var(--lndsConBgPrimaryInverse);
    background-color: var(--lndsConBgPrimaryInverse);
    font-weight: var(--lndsFontWeightSemibold);
    color: var(--lndsConTxtPrimaryInverse);
}
.lndsChip:active:not(:disabled):not(.assistiveChip) > .tailicon {
    color: var(--lndsConTxtPrimaryInverse);
}
.lndsChip:disabled {
    border-color: var(--lndsConBgTertiary);
    background-color: var(--lndsConBgTertiary);
    font-weight: var(--lndsFontWeightRegular);
    color: var(--lndsSysContentDisabled);
    cursor: not-allowed;
}
.lndsChip:disabled > .tailicon,
.lndsChip:disabled > .headIcon {
    color: var(--lndsSysContentDisabled);
}
.lndsChip.small {
    height: 28px;
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
}
.lndsChip.elevation {
    border-width: 0;
    background-color: var(--lndsConBgPrimary);
    border-color: var(--lndsConBgPrimary);
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
}
.lndsChip.elevation:disabled {
    border-width: 0;
    border-color: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConBgPrimary) !important;
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConBgPrimary) !important;
}
.lndsChip > .tailicon {
    color: var(--lndsConTxtTertiary);
}
.lndsChip.trailingIcon {
    column-gap: var(--lndsSpacing100);
    padding: 0 var(--lndsSpacing150) 0 var(--lndsSpacing300);
}
.lndsChip.trailingIcon.small {
    column-gap: var(--lndsSpacing50);
    padding: 0 var(--lndsSpacing100) 0 var(--lndsSpacing200);
}
.lndsChip.avatar,
.lndsChip.icon {
    column-gap: var(--lndsSpacing200);
    padding: 0 var(--lndsSpacing300) 0 var(--lndsSpacing200);
}
.lndsChip.avatar.small,
.lndsChip.icon.small {
    column-gap: var(--lndsSpacing150);
    padding: 0 var(--lndsSpacing250) 0 var(--lndsSpacing150);
}
.lndsChip.fish {
    column-gap: var(--lndsSpacing100);
    padding: 0 var(--lndsSpacing150) 0 var(--lndsSpacing200);
}
.lndsChip.fish > .headIcon {
    padding-right: var(--lndsSpacing100);
}
.lndsChip.fish.small {
    column-gap: var(--lndsSpacing100);
    padding: 0 var(--lndsSpacing100) 0 var(--lndsSpacing150);
}
.lndsChip.fish.small > .headIcon {
    padding-right: var(--lndsSpacing50);
}
.lndsChip:not(.avatar):not(.icon):not(.fish):not(.trailingIcon) > .headIcon {
    display: none;
}
.lndsChip:not(.avatar):not(.icon):not(.fish):not(.trailingIcon) > .tailicon {
    display: none;
}

/**********
* counter
**********/
lnds-counter {
    display: inline-block;
    height: 40px;
    border-width: var(--lndsBorderWidth1);
    border-style: solid;
    border-color: var(--lndsConUIBorder);
    border-radius: var(--lndsBorderRadius3);
}
lnds-counter[size='small'] {
    height: 34px;
}
#lndsCounter {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: 100%;
}
#lndsCounter > button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lndsConTxtPrimary);
    cursor: pointer;
}
#lndsCounter > button:disabled {
    color: var(--lndsSysContentDisabled);
}
#lndsCounter > input {
    height: 100%;
    margin: 0;
    border-top: 0 !important;
    border-right: var(--lndsBorderWidth1) solid var(--lndsConUIBorder) !important;
    border-bottom: 0 !important;
    border-left: var(--lndsBorderWidth1) solid var(--lndsConUIBorder) !important;
    border-radius: 0 !important;
    background-color: var(--lndsConBgPrimary);
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
    text-align: center;
    color: var(--lndsConTxtPrimary);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}
#lndsCounter.small > input {
    font-family: var(--lndsSysLabelLargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelLargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelLargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelLargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeSemiboldLetterSpacing);
}

/**********
* dialog
**********/
.lndsDialog {
    min-width: 280px;
    margin: 0 auto;
    background: var(--lndsConBgPrimary);
}
.lndsDialog.alert {
    max-width: 450px;
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: var(--lndsSpacing600) var(--lndsSpacing600) var(--lndsSpacing400) var(--lndsSpacing600);
    border-radius: var(--lndsBorderRadius7);
    box-shadow: var(--lndsElevation20X) var(--lndsElevation20Y) var(--lndsElevation20Blur) var(--lndsElevation20Spread) var(--lndsElevation20Color),
        var(--lndsElevation21X) var(--lndsElevation21Y) var(--lndsElevation21Blur) var(--lndsElevation21Spread) var(--lndsElevation21Color);
}
.lndsDialog.alert .message {
    min-height: 60px;
    padding-bottom: var(--lndsSpacing200);
    font-family: var(--lndsSysBodyLargeFontFamily);
    font-size: var(--lndsSysBodyLargeFontSize);
    font-weight: var(--lndsSysBodyLargeFontWeight);
    line-height: var(--lndsSysBodyLargeLineHeight);
    letter-spacing: var(--lndsSysBodyLargeLetterSpacing);
    color: var(--lndsConTxtSecondary);
    word-break: keep-all;
}
.lndsDialog.alert .message > .title {
    padding-bottom: var(--lndsSpacing500);
    font-family: var(--lndsSysLabelXlargeBoldFontFamily);
    font-size: var(--lndsSysLabelXlargeBoldFontSize);
    font-weight: var(--lndsSysLabelXlargeBoldFontWeight);
    line-height: var(--lndsSysLabelXlargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeBoldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsDialog.alert .btns {
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    column-gap: var(--lndsSpacing200);
    padding: var(--lndsSpacing200);
}
.lndsDialog.alert .btns > * {
    min-width: 80px;
}
.lndsDialog.info {
    max-width: 768px;
    padding: var(--lndsSpacing600) var(--lndsSpacing600) var(--lndsSpacing400) var(--lndsSpacing600);
    border-top-left-radius: var(--lndsBorderRadius7);
    border-top-right-radius: var(--lndsBorderRadius7);
    box-shadow: var(--lndsElevation20X) var(--lndsElevation20Y) var(--lndsElevation20Blur) var(--lndsElevation20Spread) var(--lndsElevation20Color),
        var(--lndsElevation21X) var(--lndsElevation21Y) var(--lndsElevation21Blur) var(--lndsElevation21Spread) var(--lndsElevation21Color);
}
.lndsDialog.info .message {
    padding-bottom: var(--lndsSpacing400) 0;
    font-family: var(--lndsSysBodyLargeFontFamily);
    font-size: var(--lndsSysBodyLargeFontSize);
    font-weight: var(--lndsSysBodyLargeFontWeight);
    line-height: var(--lndsSysBodyLargeLineHeight);
    letter-spacing: var(--lndsSysBodyLargeLetterSpacing);
    color: var(--lndsConTxtSecondary);
    word-break: keep-all;
}
.lndsDialog.info > .message > .icon {
    padding: var(--lndsSpacing200) 0;
    color: var(--lndsConTxtSecondary);
}
.lndsDialog.info > .message > .title {
    padding: var(--lndsSpacing200) 0;
    font-family: var(--lndsSysTitleLargeBoldFontFamily);
    font-size: var(--lndsSysTitleLargeBoldFontSize);
    font-weight: var(--lndsSysTitleLargeBoldFontWeight);
    line-height: var(--lndsSysTitleLargeBoldLineHeight);
    letter-spacing: var(--lndsSysTitleLargeBoldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsDialog.info .btns {
    padding: var(--lndsSpacing200) 0;
}
.lndsDialog.info .btns > * {
    width: 100%;
}
.lndsDialog.info.fullbtns > .btns > * {
    margin-top: var(--lndsSpacing100);
}
.lndsDialog.info.fullbtns > .btns > *:nth-child(1) {
    margin-top: 0;
}

/**********
* divider
**********/
hr,
.lndsDivider,
.lndsDivider.pt0x0 {
    width: 100%;
    height: var(--lndsSpacing10) !important;
    border-width: 0;
    background: var(--lndsSysBorderSecondary);
}
hr:not(.m400),
.lndsDivider:not(.m400),
.lndsDivider.pt0x0:not(.m400) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.lndsDivider.pt16x16 {
    width: calc(100% - var(--lndsSpacing800));
    margin-right: var(--lndsSpacing400);
    margin-left: var(--lndsSpacing400);
}
.lndsDivider.pt16 {
    width: calc(100% - var(--lndsSpacing400));
    margin-left: var(--lndsSpacing400);
}
.lndsDivider.pt32 {
    width: calc(100% - var(--lndsSpacing800));
    margin-left: var(--lndsSpacing800);
}
.lndsDivider.pt36 {
    width: calc(100% - var(--lndsSpacing900));
    margin-left: var(--lndsSpacing900);
}
.lndsDivider.pt52 {
    width: calc(100% - var(--lndsSpacing1200));
    margin-left: var(--lndsSpacing1200);
}
.lndsDivider.pt72 {
    width: calc(100% - var(--lndsSpacing1800));
    margin-left: var(--lndsSpacing1800);
}
.lndsDivider.pt84 {
    width: calc(100% - 84px);
    margin-left: 84px;
}
.lndsDivider.pt116 {
    width: calc(100% - 116px);
    margin-left: 116px;
}
.lndsDividerSpacing4 {
    width: 100%;
    height: var(--lndsSpacing200);
    background-color: var(--lndsSysBackgroundSecondary);
}
.lndsDividerSpacing8 {
    width: 100%;
    height: var(--lndsSpacing200);
    background-color: var(--lndsSysBackgroundSecondary);
}
.lndsDividerSpacing12 {
    width: 100%;
    height: var(--lndsSpacing300);
    background-color: var(--lndsSysBackgroundSecondary);
}
.lndsDivider.m400 {
    margin-top: var(--lndsSpacing400) !important;
    margin-bottom: var(--lndsSpacing400) !important;
}

/**********
* FAB
**********/
.lndsFAB {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lndsBorderRadius8);
    background-color: var(--lndsConBgPrimary);
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
    color: var(--lndsConTxtPrimary);
    text-transform: uppercase;
}
.lndsFAB:not(.extended) {
    min-width: 56px;
    height: 56px;
}
.lndsFAB:not(.extended).small {
    column-gap: var(--lndsSpacing150);
    min-width: 40px;
    height: 40px;
    padding: 0 var(--lndsSpacing200);
}
.lndsFAB.primary {
    background-color: var(--lndsConSemanticPrimary);
}
.lndsFAB.secondary {
    background-color: var(--lndsConSemanticSecondary);
    color: var(--lndsConTxtPrimaryInverse);
}
.lndsFAB:not(.primary):not(.secondary):not(:disabled):active {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConBgPrimary) !important;
}
.lndsFAB.primary:not(:disabled):active,
.lndsFAB.primary.active {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticPrimary) !important;
}
.lndsFAB.secondary:not(:disabled):active {
    background: linear-gradient(to top, var(--lndsSysStateSecondary), var(--lndsSysStateSecondary)), var(--lndsConSemanticSecondary) !important;
}
.lndsFAB:disabled {
    background-color: var(--lndsConBgTertiary);
    color: var(--lndsSysContentDisabled);
    cursor: not-allowed;
}
.lndsFAB:disabled > * {
    color: var(--lndsSysContentDisabled) !important;
}
.lndsFAB.extended {
    column-gap: var(--lndsSpacing200);
    height: 48px;
    padding: 0 var(--lndsSpacing300);
    font-family: var(--lndsSysLabelLargeBoldFontFamily);
    font-size: var(--lndsSysLabelLargeBoldFontSize);
    font-weight: var(--lndsSysLabelLargeBoldFontWeight);
    line-height: var(--lndsSysLabelLargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeBoldLetterSpacing);
}
.lndsFAB.extended.small {
    column-gap: var(--lndsSpacing200);
    height: 40px;
    padding: 0 var(--lndsSpacing300);
}
.lndsFAB.extended > lnds-icon:nth-child(2) {
    color: var(--lndsConTxtTertiary);
}
.lndsFAB.extended.secondary > lnds-icon:nth-child(2) {
    color: var(--lndsConTxtTertiaryInverse);
}

/**********
* icon
**********/

/**********
* mark
**********/
.lndsMark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--lndsConUIBorder);
    border-radius: 50vh;
    font-size: var(--lndsFontsize3);
    color: var(--lndsConTxtPrimary);
}
.lndsMark.notice {
    border-color: var(--lndsConSemanticNotice);
    color: var(--lndsConSemanticNotice);
}
.lndsMark.negative {
    border-color: var(--lndsConSemanticNegative);
    color: var(--lndsConSemanticNegative);
}
.lndsMark.positive {
    border-color: var(--lndsConSemanticPositive);
    color: var(--lndsConSemanticPositive);
}
.lndsMark.informative {
    border-color: var(--lndsConSemanticInformative);
    color: var(--lndsConSemanticInformative);
}
.lndsMark.neutral {
    border-color: var(--lndsConSemanticNeutral);
    color: var(--lndsConSemanticNeutral);
}
.lndsMark.primary {
    border-color: var(--lndsConSemanticPrimary);
    color: var(--lndsConSemanticPrimary);
}
.lndsMark.secondary {
    border-color: var(--lndsConSemanticSecondary);
    color: var(--lndsConSemanticSecondary);
}

/**********
* image
**********/
.lndsImageArea {
    background-image: url('/publish/image/component/Image_blank.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.lndsImageArea.round {
    border-radius: var(--lndsBorderRadius5) !important;
}
.lndsImageArea.angle {
    border-radius: 0 !important;
}
.lndsImageArea.ratio1x1 {
    aspect-ratio: 1;
}
.lndsImageArea.ratio2x1 {
    aspect-ratio: 2/1;
}
.lndsImageArea.ratio4x3 {
    aspect-ratio: 4/3;
}
.lndsImageArea.ratio16x9 {
    aspect-ratio: 16/9;
}
.lndsImageArea.ratioLive {
    aspect-ratio: 1/1.5;
}
.lndsImageArea.ratio1x1d56 {
    aspect-ratio: 1/1.56;
}
.lndsImageArea.mini {
    min-width: 24px !important;
    height: 24px;
    border-radius: var(--lndsBorderRadius2);
}
.lndsImageArea.tiny {
    min-width: 32px !important;
    height: 32px;
    border-radius: var(--lndsBorderRadius2);
}
.lndsImageArea.small {
    min-width: 40px !important;
    height: 40px;
    border-radius: var(--lndsBorderRadius4);
}
.lndsImageArea.medium {
    min-width: 48px !important;
    height: 48px;
    border-radius: var(--lndsBorderRadius4);
}
.lndsImageArea.large {
    min-width: 56px !important;
    height: 56px;
    border-radius: var(--lndsBorderRadius5);
}
.lndsImageArea.big {
    min-width: 70px !important;
    height: 70px;
    border-radius: var(--lndsBorderRadius5);
}
.lndsImageArea.huge {
    min-width: 80px !important;
    height: 80px;
    border-radius: var(--lndsBorderRadius5);
}
.lndsImageArea.massive {
    min-width: 96px !important;
    height: 96px;
    border-radius: var(--lndsBorderRadius5);
}

/**********
* list
**********/
.lndsList {
}
.lndsList .listItem {
    display: grid;
    grid-template-columns: auto 32px;
    grid-template-areas: 'middleArea endArea' 'divider divider';
    column-gap: 0;
    row-gap: 0;
    padding: 0 var(--lndsSpacing400);
}
.lndsList .listItem hr {
    grid-area: divider;
}
.lndsList .listItem .listContent {
    grid-area: middleArea;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: var(--lndsSpacing350) 0;
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 1;
}
.lndsList .listItem .listContent > * {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 1;
}
.lndsList .listItem[data-state='off'] {
    background-color: var(--lndsSysStateTertiary);
}
.lndsList .listItem[data-state='off'] .listContent {
    color: var(--lndsSysContentDisabled);
}
.lndsList .listItem .listTail {
    grid-area: endArea;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 24px;
    color: var(--lndsSysContentQuaternary);
    cursor: pointer;
}
.lndsList .listItem[data-state='off'] .listTail {
    color: var(--lndsSysContentDisabled);
}
.lndsList[data-content='bold'] .listItem .listContent {
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
}
.lndsList[data-visual='icon'] .listItem {
    grid-template-columns: 36px auto 32px;
    grid-template-areas: 'startArea middleArea endArea' 'divider divider divider';
}
.lndsList[data-visual='avatar-medium'] .listItem {
    grid-template-columns: 44px auto 32px;
    grid-template-areas: 'startArea middleArea endArea' 'divider divider divider';
}
.lndsList[data-visual='avatar-large'] .listItem {
    grid-template-columns: 52px auto 32px;
    grid-template-areas: 'startArea middleArea endArea' 'divider divider divider';
}
.lndsList[data-visual='ratio1x1'] .listItem {
    grid-template-columns: 60px auto 32px;
    grid-template-areas: 'startArea middleArea endArea' 'divider divider divider';
}
.lndsList[data-visual='ratio4x3'] .listItem {
    grid-template-columns: 76px auto 32px;
    grid-template-areas: 'startArea middleArea endArea' 'divider divider divider';
}
.lndsList[data-visual='ratio16x9'] .listItem {
    grid-template-columns: 112px auto 32px;
    grid-template-areas: 'startArea middleArea endArea' 'divider divider divider';
}
.lndsList .listItem[data-tail-icon='false'] {
    grid-template-columns: 100%;
    grid-template-areas: 'middleArea' 'divider';
}
.lndsList .listItem[data-visual='icon'][data-tail-icon='false'],
.lndsList .listItem[data-visual='avatar-medium'][data-tail-icon='false'],
.lndsList .listItem[data-visual='avatar-large'][data-tail-icon='false'],
.lndsList .listItem[data-visual='ratio1x1'][data-tail-icon='false'],
.lndsList .listItem[data-visual='ratio4x3'][data-tail-icon='false'],
.lndsList .listItem[data-visual='ratio16x9'][data-tail-icon='false'] {
    grid-template-areas: 'startArea middleArea' 'divider divider';
}
.lndsList .listItem .listIcon {
    grid-area: startArea;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: var(--lndsSpacing200) 0;
    font-size: 24px;
    color: var(--lndsSysContentQuaternary);
}
.lndsList.standard .listItem .listContent {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--lndsSpacing50);
    padding: var(--lndsSpacing300) 0;
}
.lndsList.standard .listItem .listContent .overline {
    height: 14px;
    font-family: var(--lndsSysLabelXsmallSemiboldFontFamily);
    font-size: var(--lndsSysLabelXsmallSemiboldFontSize);
    font-weight: var(--lndsSysLabelXsmallSemiboldFontWeight);
    line-height: var(--lndsSysLabelXsmallSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXsmallSemiboldLetterSpacing);
    text-decoration: none !important;
    color: var(--lndsConTxtTertiary);
}
.lndsList.standard .listItem .listContent .title {
    width: 99%;
    height: 20px;
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsList.standard .listItem .listContent .label {
    width: 99%;
    height: 20px;
    font-family: var(--lndsSysBodyMediumFontFamily);
    font-size: var(--lndsSysBodyMediumFontSize);
    font-weight: var(--lndsSysBodyMediumFontWeight);
    line-height: var(--lndsSysBodyMediumLineHeight);
    letter-spacing: var(--lndsSysBodyMediumLetterSpacing);
    color: var(--lndsConTxtTertiary);
}
.lndsList[data-content='bold'] .listItem .listContent .title {
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
}
.lndsList[data-content='bold'] .listItem .listContent .label {
    font-family: var(--lndsSysBodyMediumFontFamily);
    font-size: var(--lndsSysBodyMediumFontSize);
    font-weight: var(--lndsSysBodyMediumFontWeight);
    line-height: var(--lndsSysBodyMediumLineHeight);
    letter-spacing: var(--lndsSysBodyMediumLetterSpacing);
}
.lndsList[data-content-tailling='true'] .listItem {
    grid-template-columns: calc(68% - 8px) auto 32px;
    grid-template-areas: 'middleArea contentTail endArea' 'divider divider divider';
}
.lndsList[data-content-tailling='true'] .listItem .contentTail {
    grid-area: contentTail;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    column-gap: 4px;
    margin-left: 8px;
}
.lndsList[data-content-tailling='true'] .listItem .contentTail .title {
    height: 20px;
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
    overflow: hidden;
}
.lndsList[data-content-tailling='true'] .listItem .contentTail .label {
    height: 20px;
    font-family: var(--lndsSysBodyMediumFontFamily);
    font-size: var(--lndsSysBodyMediumFontSize);
    font-weight: var(--lndsSysBodyMediumFontWeight);
    line-height: var(--lndsSysBodyMediumLineHeight);
    letter-spacing: var(--lndsSysBodyMediumLetterSpacing);
    color: var(--lndsConTxtTertiary);
    overflow: hidden;
}
.lndsList[data-visual='icon'][data-content-tailling='true'] .listItem {
    grid-template-columns: 36px calc(57% - 8px) auto 32px;
    grid-template-areas: 'startArea middleArea contentTail endArea' 'divider divider divider divider';
}
.lndsList[data-visual='avatar-large'][data-content-tailling='true'] .listItem {
    grid-template-columns: 52px calc(53% - 8px) auto 32px;
    grid-template-areas: 'startArea middleArea contentTail endArea' 'divider divider divider divider';
}
.lndsList[data-visual='ratio1x1'][data-content-tailling='true'] .listItem {
    grid-template-columns: 60px calc(50% - 8px) auto 32px;
    grid-template-areas: 'startArea middleArea contentTail endArea' 'divider divider divider divider';
}
.lndsList[data-visual='ratio4x3'][data-content-tailling='true'] .listItem {
    grid-template-columns: 76px calc(46% - 8px) auto 32px;
    grid-template-areas: 'startArea middleArea contentTail endArea' 'divider divider divider divider';
}
.lndsList[data-visual='ratio16x9'][data-content-tailling='true'] .listItem {
    grid-template-columns: 112px calc(35% - 8px) auto 32px;
    grid-template-areas: 'startArea middleArea contentTail endArea' 'divider divider divider divider';
}

/**********
* menu
**********/
.lndsMenu {
    border-radius: var(--lndsBorderRadius6);
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
    overflow: hidden;
}
.lndsMenu.innerItem {
    box-shadow: none;
}
.lndsMenu .lndsMenuItem {
    display: grid;
    grid-template-columns: auto var(--lndsSpacing500);
    column-gap: 0;
    align-items: center;
    height: var(--lndsSpacing1000);
    padding: 0 var(--lndsSpacing300);
    background-color: var(--lndsConBgPrimary);
    color: var(--lndsConTxtPrimary);
    cursor: pointer;
}
.lndsMenu .lndsMenuItem .label {
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
}
.lndsMenu .lndsMenuItem .icon {
    font-size: var(--lndsSpacing500);
}
.lndsMenu.large {
    border-radius: var(--lndsBorderRadius5);
}
.lndsMenu.large .lndsMenuItem {
    grid-template-columns: auto var(--lndsSpacing600);
    height: var(--lndsSpacing1200);
    padding: 0 var(--lndsSpacing400);
}
.lndsMenu.large .lndsMenuItem .label {
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
}
.lndsMenu.large .lndsMenuItem .icon {
    font-size: var(--lndsSpacing600);
}

/**********
* navigationbar
**********/
.lndsNavigationBar {
    position: fixed;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 20%);
    width: 100vw;
    height: 53px;
    background-color: var(--lndsConBgPrimary);
    overflow: hidden;
}
.lndsNavigationBar > .lndsDivider {
    grid-column: 1/6;
}
.lndsNavigationBar.item2 {
    grid-template-columns: repeat(2, 50%);
}
.lndsNavigationBar.item2 > .lndsDivider {
    grid-column: 1/3;
}
.lndsNavigationBar.item3 {
    grid-template-columns: repeat(3, 33.3%);
}
.lndsNavigationBar.item3 > .lndsDivider {
    grid-column: 1/4;
}
.lndsNavigationBar.item4 {
    grid-template-columns: repeat(4, 25%);
}
.lndsNavigationBar.item4 > .lndsDivider {
    grid-column: 1/5;
}
.lndsNavigationBar .lndsNavigationItem {
    display: flex;
    flex-flow: column;
    gap: var(--lndsSpacing50);
    padding: 5px 0;
}
.lndsNavigationBar .lndsNavigationItem .itemAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--lndsSpacing700);
    color: var(--lndsConTxtPrimary);
}
.lndsNavigationBar .lndsNavigationItem .itemAvatar lnds-avatar {
    border: var(--lndsBorderWidth1) solid var(--lndsConTxtSecondary);
    border-radius: var(--lndsBorderRadius8);
}
.lndsNavigationBar .lndsNavigationItem .itemLabel {
    height: var(--lndsSpacing300);
    font-size: 0.625rem;
    text-align: center;
    color: var(--lndsConTxtTertiary);
}
.lndsNavigationBar .lndsNavigationItem.active .itemAvatar {
    color: var(--lndsSysSemanticPrimaryDefault);
}
.lndsNavigationBar .lndsNavigationItem.active .itemAvatar lnds-avatar {
    border-color: var(--lndsSysSemanticPrimaryDefault);
}
.lndsNavigationBar .lndsNavigationItem.active .itemLabel {
    color: var(--lndsConTxtPrimary);
}

/**********
* page control
**********/
.lndsPageControl {
    display: grid;
    grid-template-columns: 30px 30px auto 30px 30px;
    grid-template-areas: 'arrowStart arrowLeft pageNumbers arrowRight arrowEnd';
    column-gap: var(--lndsSpacing100);
    align-items: center;
    margin: 0 16px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--lndsBorderRadius1);
    background-color: var(--lndsConBgPrimary);
}
.lndsPageControl .arrowStart,
.lndsPageControl .arrowLeft,
.lndsPageControl .arrowRight,
.lndsPageControl .arrowEnd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    color: var(--lndsConTxtQuaternary);
}
.lndsPageControl .arrowStart {
    grid-area: arrowStart;
}
.lndsPageControl .arrowLeft {
    grid-area: arrowLeft;
}
.lndsPageControl .arrowRight {
    grid-area: arrowRight;
}
.lndsPageControl .arrowEnd {
    grid-area: arrowEnd;
}
.lndsPageControl .pageNumbers {
    grid-area: pageNumbers;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lndsPageControl .pageNumbers .lndsBtn {
    width: auto;
    min-width: 40px;
    margin: var(--lndsSpacing50);
}
.lndsPageControl .pageNumbers > * {
    color: var(--lndsConTxtQuaternary);
}
.lndsPageControl .pageNumbers .on {
    color: var(--lndsConTxtSecondary) !important;
}
.lndsPageControl.lndsPageNumber {
    display: inline-flex;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--lndsBorderRadius8);
    background-color: var(--lndsConBgTertiaryInverse);
    color: var(--lndsConTxtPrimaryInverse);
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
}
.lndsPageControl.lndsPageDot {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    border: 0;
}
.lndsPageControl.lndsPageDot div {
    width: 6px;
    height: 6px;
    border-radius: var(--lndsBorderRadius8);
    background-color: var(--lndsSysContentDisabled);
}
.lndsPageControl.lndsPageDot .on {
    background-color: var(--lndsConTxtSecondary);
}
.lndsPageControl.lndsPageDot .start,
.lndsPageControl.lndsPageDot .end {
    width: 2px;
    height: 2px;
}
.lndsPageControl.lndsPageDot .prev,
.lndsPageControl.lndsPageDot .next {
    width: 4px;
    height: 4px;
}

/**********
* product card
**********/
.lndsProductCard {
    padding: var(--lndsSpacing400) var(--lndsSpacing400) 0 var(--lndsSpacing400);
}
.lndsProductCard hr {
    margin-top: var(--lndsSpacing400);
}
.lndsProductCard .productPic {
    position: relative;
    width: 100%;
}
.lndsProductCard .productPic .lndsImageArea {
    max-height: 271px;
    margin: 0 auto;
}
.lndsProductCard .productPic .productBadge {
    position: absolute;
    bottom: var(--lndsSpacing200);
    right: var(--lndsSpacing200);
    background: var(--lndsSysBackgroundInverseTertiary) !important;
    color: var(--lndsSysContentInversePrimary) !important;
}
.lndsProductCard .productInfo {
    position: relative;
    margin-top: var(--lndsSpacing200);
}
.lndsProductCard .productInfo .productName {
    margin-bottom: var(--lndsSpacing200);
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
}
.lndsProductCard .productInfo .productPrice {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1px 0;
}
.lndsProductCard .productInfo .productPrice .setPrice {
    height: 100%;
    margin-right: var(--lndsSpacing100);
    color: var(--lndsConTxtPrimary);
}
.lndsProductCard .productInfo .productPrice .setPrice .priceNumber {
    font-family: var(--lndsSysTitleSmallBoldFontFamily);
    font-size: var(--lndsSysTitleSmallBoldFontSize);
    font-weight: var(--lndsSysTitleSmallBoldFontWeight);
    line-height: var(--lndsSysTitleSmallBoldLineHeight);
    letter-spacing: var(--lndsSysTitleSmallBoldLetterSpacing);
}
.lndsProductCard .productInfo .productPrice .setPrice .priceCurrency {
    font-family: var(--lndsSysLabelXlargeBoldFontFamily);
    font-size: var(--lndsSysLabelXlargeBoldFontSize);
    font-weight: var(--lndsSysLabelXlargeBoldFontWeight);
    line-height: var(--lndsSysLabelXlargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeBoldLetterSpacing);
}
.lndsProductCard .productInfo .productPrice .setDiscount {
    height: 100%;
    margin-right: var(--lndsSpacing50);
    font-family: var(--lndsSysLabelLargeBoldFontFamily);
    font-size: var(--lndsSysLabelLargeBoldFontSize);
    font-weight: var(--lndsSysLabelLargeBoldFontWeight);
    line-height: var(--lndsSysLabelLargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeBoldLetterSpacing);
    color: var(--lndsConSemanticSecondary);
}
.lndsProductCard .productInfo .productPrice .setOrgPrice {
    height: 100%;
    margin-right: var(--lndsSpacing50);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    color: var(--lndsConTxtQuaternary);
    text-decoration: line-through;
}
.lndsProductCard .productInfo .productPrice .productCondition {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--lndsConTxtTertiary);
}
.lndsProductCard .productInfo .productPrice .productRating {
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
}
.lndsProductCard .productInfo .productPrice .productRating strong {
    font-family: var(--lndsSysLabelSmallBoldFontFamily);
    font-size: var(--lndsSysLabelSmallBoldFontSize);
    font-weight: var(--lndsSysLabelSmallBoldFontWeight);
    line-height: var(--lndsSysLabelSmallBoldLineHeight);
    letter-spacing: var(--lndsSysLabelSmallBoldLetterSpacing);
}
.lndsProductCard .productInfo .productPrice .productRating .star {
    margin-right: 2px;
    font-size: 12px;
    color: var(--lndsSysSemanticNoticeMiddle);
}
.lndsProductCard .productInfo .productPrice .productComment {
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
}
.lndsProductCard .productInfo .productTag {
    margin-top: var(--lndsSpacing300);
}
.lndsProductCard .productInfo .productTag .tagItems {
    display: flex;
    flex-wrap: wrap;
}
.lndsProductCard .productInfo .productTag .tagItems .tagItem {
    margin-left: -10px;
    padding: 0 10px;
    background: var(--lndsIconDotOverlay);
    background-position: center right;
    background-repeat: no-repeat;
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
    color: var(--lndsConTxtTertiary);
    white-space: nowrap;
}
.lndsProductCard .productInfo .productTag .tagItems .advantage {
    background: var(--lndsIconBarOverlay);
    background-position: center right;
    background-repeat: no-repeat;
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsProductCard .productInfo .productTag .tagItems .point {
    color: var(--lndsConSemanticSecondary);
}
.lndsProductCard .productInfo .productTag .tagItems .tagItem:last-child {
    background: none;
}
.lndsProductCard .productInfo .productTag .addBtns {
    float: right;
}
.lndsProductCard.small {
    width: 288px;
    padding: 0;
}
.lndsProductCard.small .productInfo .productName {
    font-family: var(--lndsSysBodyLargeFontFamily);
    font-size: var(--lndsSysBodyLargeFontSize);
    font-weight: var(--lndsSysBodyLargeFontWeight);
    line-height: var(--lndsSysBodyLargeLineHeight);
    letter-spacing: var(--lndsSysBodyLargeLetterSpacing);
}

/**********
* product list
**********/
.lndsProductList {
    display: flex;
    column-gap: var(--lndsSpacing200);
    row-gap: var(--lndsSpacing200);
    flex-wrap: wrap;
    padding: var(--lndsSpacing200);
    background-color: var(--lndsConBgPrimary);
}
.lndsProductList .lndsProductItem {
    width: calc(50% - var(--lndsSpacing100));
}
.lndsProductItem {
    position: relative;
    overflow: hidden;
}
.lndsProductItem .productPic {
    position: relative;
    width: 100%;
}
.lndsProductItem .productPic .lndsImageArea {
    max-height: 271px;
    margin: 0 auto;
}
.lndsProductItem .productPic .productAir {
    position: absolute;
    bottom: var(--lndsSpacing200);
    left: var(--lndsSpacing200);
    background-color: var(--lndsSysBackgroundInverseTertiary) !important;
}
.lndsProductItem .productPic .productAction {
    position: absolute;
    bottom: var(--lndsSpacing200);
    right: var(--lndsSpacing200);
    color: var(--lndsSysBackgroundInverseTertiary);
}
.lndsProductItem .productPic .productAction .productBtn {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: var(--lndsRefWhite);
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
    font-size: 20px;
}
.lndsProductItem .productInfo {
    margin-top: var(--lndsSpacing300);
}
.lndsProductItem .productInfo .productTopBadge {
    margin-bottom: var(--lndsSpacing100);
}
.lndsProductItem .productInfo .productName {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
}
.lndsProductItem .productInfo .productPrice {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--lndsSpacing50);
    row-gap: 0;
    margin-top: var(--lndsSpacing100);
}
.lndsProductItem .productInfo .productPrice .setPrice {
    width: 100%;
    color: var(--lndsConTxtPrimary);
}
.lndsProductItem .productInfo .productPrice .setPrice .priceNumber {
    font-family: var(--lndsSysTitleSmallBoldFontFamily);
    font-size: var(--lndsSysTitleSmallBoldFontSize);
    font-weight: var(--lndsSysTitleSmallBoldFontWeight);
    line-height: var(--lndsSysTitleSmallBoldLineHeight);
    letter-spacing: var(--lndsSysTitleSmallBoldLetterSpacing);
}
.lndsProductItem .productInfo .productPrice .setPrice .priceCurrency {
    font-family: var(--lndsSysLabelXlargeBoldFontFamily);
    font-size: var(--lndsSysLabelXlargeBoldFontSize);
    font-weight: var(--lndsSysLabelXlargeBoldFontWeight);
    line-height: var(--lndsSysLabelXlargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeBoldLetterSpacing);
}
.lndsProductItem .productInfo .productPrice .setDiscount {
    height: 100%;
    margin-right: var(--lndsSpacing50);
    font-family: var(--lndsSysLabelLargeBoldFontFamily);
    font-size: var(--lndsSysLabelLargeBoldFontSize);
    font-weight: var(--lndsSysLabelLargeBoldFontWeight);
    line-height: var(--lndsSysLabelLargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeBoldLetterSpacing);
    color: var(--lndsConSemanticSecondary);
}
.lndsProductItem .productInfo .productPrice .setOrgPrice {
    height: 100%;
    margin-right: var(--lndsSpacing50);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    color: var(--lndsConTxtQuaternary);
    text-decoration: line-through;
}
.lndsProductItem .productInfo .productRating {
    display: flex;
    align-items: center;
    margin-top: var(--lndsSpacing200);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    color: var(--lndsConTxtTertiary);
}
.lndsProductItem .productInfo .productRating strong {
    font-family: var(--lndsSysLabelSmallBoldFontFamily);
    font-size: var(--lndsSysLabelSmallBoldFontSize);
    font-weight: var(--lndsSysLabelSmallBoldFontWeight);
    line-height: var(--lndsSysLabelSmallBoldLineHeight);
    letter-spacing: var(--lndsSysLabelSmallBoldLetterSpacing);
}
.lndsProductItem .productInfo .productRating .star {
    margin-right: 3px;
    font-size: 12px;
    color: var(--lndsSysSemanticNoticeMiddle);
}
.lndsProductItem .productInfo .productTag {
    margin-top: var(--lndsSpacing200);
}
.lndsProductItem .productInfo .productTag .tagItems {
    display: flex;
    flex-wrap: wrap;
}
.lndsProductItem .productInfo .productTag .tagItems .tagItem {
    margin-left: -10px;
    padding: 0 10px;
    background: var(--lndsIconDotOverlay);
    background-position: center right;
    background-repeat: no-repeat;
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
    color: var(--lndsConTxtTertiary);
    white-space: nowrap;
}
.lndsProductItem .productInfo .productTag .tagItems .advantage {
    background: var(--lndsIconBarOverlay);
    background-position: center right;
    background-repeat: no-repeat;
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsProductItem .productInfo .productTag .tagItems .point {
    color: var(--lndsConSemanticSecondary);
}
.lndsProductItem .productInfo .productTag .tagItems .tagItem:last-child {
    background: none;
}
.lndsProductList.horizontal {
    display: block;
    padding: 0;
}
.lndsProductList.horizontal .lndsProductItem.horizontal {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: var(--lndsSpacing400);
}
.lndsProductItem.horizontal .productPic {
    width: 43%;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.lndsProductItem.horizontal .productInfo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 57%;
    margin-top: 0;
    padding: 0 var(--lndsSpacing100) 0 var(--lndsSpacing300);
}
.lndsProductItem.horizontal .productInfo .productName {
    width: 99%;
}
.lndsProductItem.horizontal .productInfo .productPrice {
    row-gap: var(--lndsSpacing100);
}
.lndsProductItem.horizontal .productInfo .productPrice .setDiscount {
    font-family: var(--lndsSysLabelSmallSemiboldFontFamily);
    font-size: var(--lndsSysLabelSmallSemiboldFontSize);
    font-weight: var(--lndsSysLabelSmallSemiboldFontWeight);
    line-height: var(--lndsSysLabelSmallSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelSmallSemiboldLetterSpacing);
}
.lndsProductItem.horizontal .productInfo .productPrice .setOrgPrice {
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    text-decoration: line-through;
}
.lndsProductList.horizontal.small {
    width: 353px;
}
.lndsProductItem.horizontal.small {
    padding: var(--lndsSpacing200) var(--lndsSpacing400);
}
.lndsProductItem.horizontal.small .productPic {
    width: 80px;
}
.lndsProductItem.horizontal.small .productInfo {
    width: calc(100% - 80px);
}
.lndsProductItem.horizontal.small .productInfo .productName {
    -webkit-line-clamp: 1;
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
}
.lndsProductItem.horizontal.small .productInfo .productPrice {
    margin-top: var(--lndsSpacing50);
}
.lndsProductItem.horizontal.small .productInfo .productPrice .setPrice {
    width: auto;
    margin-right: var(--lndsSpacing100);
}
.lndsProductItem.horizontal.small .productInfo .productPrice .setPrice .priceNumber {
    font-family: var(--lndsSysLabelXlargeBoldFontFamily);
    font-size: var(--lndsSysLabelXlargeBoldFontSize);
    font-weight: var(--lndsSysLabelXlargeBoldFontWeight);
    line-height: var(--lndsSysLabelXlargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeBoldLetterSpacing);
}
.lndsProductItem.horizontal.small .productInfo .productPrice .setPrice .priceCurrency {
    font-family: var(--lndsSysLabelLargeBoldFontFamily);
    font-size: var(--lndsSysLabelLargeBoldFontSize);
    font-weight: var(--lndsSysLabelLargeBoldFontWeight);
    line-height: var(--lndsSysLabelLargeBoldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeBoldLetterSpacing);
}
.lndsProductItem.horizontal.small .productInfo .productTag {
    margin-top: var(--lndsSpacing150);
}

/**********
* progress
* js 에서 모두 처리
**********/

/**********
* radio
**********/
.lndsRadio {
    display: inline-flex;
    flex-flow: row;
    justify-items: left;
    align-items: center;
    column-gap: var(--lndsSpacing200);
    user-select: none;
    -webkit-user-select: none;
    height: var(--lndsSpacing600);
    background: transparent;
    line-height: var(--lndsSpacing600);
    cursor: pointer;
    overflow: hidden;
}
.lndsRadio > input[type='radio'] {
    margin: var(--lndsSpacing10);
}
.lndsRadio.disabled {
    color: var(--lndsConUIBorder);
}
input[type='radio'] {
    position: relative;
    display: inline-block;
    width: var(--lndsSpacing500);
    height: var(--lndsSpacing500);
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    border-radius: var(--lndsBorderRadius8) !important;
    background: var(--lndsConBgPrimary);
    vertical-align: middle;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
input[type='radio']:checked {
    /* border: var(--lndsBorderWidth1) solid var(--lndsConSemanticPrimary); */
    border: var(--lndsBorderWidth1) solid var(--lndsSysSemanticPrimaryDark);
    background: var(--lndsConBgPrimary);
}
input[type='radio']:checked:before {
    position: absolute;
    top: var(--lndsSpacing100);
    left: var(--lndsSpacing100);
    display: inline-block;
    width: var(--lndsSpacing250);
    height: var(--lndsSpacing250);
    border-radius: var(--lndsBorderRadius8);
    /* background: var(--lndsConSemanticPrimary); */
    background: var(--lndsSysSemanticPrimaryDark);
    vertical-align: middle;
    content: '';
}
input[type='radio']:disabled {
    border: var(--lndsBorderWidth1) solid var(--lndsSysContentDisabled) !important;
}
input[type='radio']:disabled:before {
    background: var(--lndsSysContentDisabled) !important;
}

/**********
* search bar
**********/
.lndsSearchBar {
    position: relative;
    display: grid;
    grid-template-columns: var(--lndsSpacing400) auto var(--lndsSpacing400);
    grid-template-areas: 'searchHeader searchBody searchTail';
    padding-top: var(--lndsSpacing200);
    padding-bottom: var(--lndsSpacing200);
}
.lndsSearchBar .lndsSearchBarHeader {
    grid-area: searchHeader;
}
.lndsSearchBar .lndsInputGroup {
    grid-area: searchBody;
}
.lndsSearchBar .lndsSearchBarTail {
    grid-area: searchTail;
}
.lndsSearchBar .lndsSearchBarHeader,
.lndsSearchBar .lndsSearchBarTail {
    position: relative;
    display: flex;
    align-items: center;
    visibility: hidden;
    width: var(--lndsSpacing1200);
    height: var(--lndsSpacing1200);
}
.lndsSearchBar .lndsSearchBarHeader .lndsSearchBarHeaderItem {
    position: absolute;
    left: var(--lndsSpacing100);
    display: flex;
    justify-content: left;
    width: var(--lndsSpacing1000);
}
.lndsSearchBar .lndsSearchBarTail .lndsSearchBarTailItem {
    position: absolute;
    right: var(--lndsSpacing350);
    display: flex;
    justify-content: right;
    width: var(--lndsSpacing1000);
}

/**********
* sheet - bottom
**********/
.lndsSheetBottom {
    position: relative;
    display: grid;
    grid-template-rows: 16px 4px 48px auto 64px;
    width: 100%;
    max-width: 768px;
    height: 0%;
    border-top-left-radius: var(--lndsBorderRadius6);
    border-top-right-radius: var(--lndsBorderRadius6);
    box-shadow: var(--lndsElevation20X) var(--lndsElevation20Y) var(--lndsElevation20Blur) var(--lndsElevation20Spread) var(--lndsElevation20Color),
        var(--lndsElevation21X) var(--lndsElevation21Y) var(--lndsElevation21Blur) var(--lndsElevation21Spread) var(--lndsElevation21Color);
    background-color: var(--lndsSysBackgroundPrimary);
    transition: 0.25s;
}
.lndsSheetBottom .HandleBar {
    grid-area: handlebar;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}
.lndsSheetBottom .HandleBar div {
    width: 40px;
    height: 4px;
    border-radius: var(--lndsBorderRadius8);
    background-color: var(--lndsSysOverlayPrimary);
}
.lndsSheetBottom .HandleBar .lndsDividerSpacing4 {
    background-color: var(--lndsRefWhite);
}
.lndsSheetBottom .titleArea {
    grid-area: title;
    display: grid;
    grid-template-columns: 72px auto 72px;
    column-gap: 10px;
    grid-template-areas: 'leftArea centerArea rightArea';
    height: 48px;
}
.lndsSheetBottom .titleArea .actionRight {
    grid-area: rightArea;
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
}
.lndsSheetBottom .titleArea .actionRight .actionItems {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
}
.lndsSheetBottom .titleArea .actionRight .actionClose button {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--lndsBorderRadius8);
    background-color: var(--lndsSysOverlayTertiary);
    font-size: 24px;
    color: var(--lndsSysContentSecondary);
}
.lndsSheetBottom .titleArea .titleItem {
    grid-area: centerArea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
    color: var(--lndsSysContentPrimary);
}
.lndsSheetBottom .bodyArea {
    grid-area: body;
    padding: var(--lndsSpacing200) var(--lndsSpacing400);
    color: var(--lndsSysContentPrimary);
    overflow-y: auto;
}
.lndsSheetBottom .buttonArea {
    grid-area: bottom;
    padding: var(--lndsSpacing200) var(--lndsSpacing400) !important;
}
.lndsSheetBottom .buttonArea button {
    width: 100%;
}
.lndsSheetBottom[data-header='false'][data-buttonbar='none'] {
    grid-template-areas: 'handlebar' 'divider' 'body' 'body' 'body';
}

/**********
* slider
**********/
.lndsRange {
    position: relative;
    display: block;
    min-width: 150px;
    min-height: 28px;
    margin: 12px 16px;
}
.lndsRange .rangeTrack {
    position: relative;
    top: 12px;
    width: calc(100% - 28px);
    height: 4px;
    margin: 0 14px;
    border-radius: 50vh;
    background: var(--lndsSysOverlayPrimary);
    outline: none;
}
.lndsRange .rangeTrack .rangeSelected {
    position: absolute;
    left: 0%;
    right: 0%;
    height: 100%;
    border-radius: 50vh;
    background-color: var(--lndsConBorderFocus);
    outline: none;
}
.lndsRange .rangeTrack .rangeVal {
    display: none;
}
.lndsRange[data-side='icon'] {
    display: grid;
    grid-template-columns: 20px auto 20px;
    column-gap: 2px;
    grid-template-areas: 'rangeLeft rangeSlider rangeRight';
    min-width: 150px;
}
.lndsRange[data-side='icon'] .side {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    color: var(--lndsConTxtQuaternary);
}
.lndsRange[data-side='icon'] input[type='range'] {
    grid-area: rangeSlider;
    top: 12px;
}
.lndsRange[data-side='icon'] .rangeTrack {
    grid-area: rangeSlider;
    top: 12px;
}
.lndsRange[data-side='icon'] .sideL {
    grid-area: rangeLeft;
    justify-content: left;
}
.lndsRange[data-side='icon'] .sideR {
    grid-area: rangeRight;
    justify-content: right;
}
.lndsRange[data-side='value'] {
    display: grid;
    grid-template-columns: 28px auto 28px;
    column-gap: 0px;
    grid-template-areas: 'rangeLeft rangeSlider rangeRight';
    min-width: 180px;
}
.lndsRange[data-side='value'] .side {
    display: flex;
    align-items: center;
    height: 28px;
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
.lndsRange[data-side='value'] input[type='range'] {
    grid-area: rangeSlider;
    top: 12px;
}
.lndsRange[data-side='value'] .rangeTrack {
    grid-area: rangeSlider;
    top: 12px;
}
.lndsRange[data-side='value'] .sideL {
    grid-area: rangeLeft;
    justify-content: left;
}
.lndsRange[data-side='value'] .sideR {
    grid-area: rangeRight;
    justify-content: right;
}
.lndsRange[data-side='valuelow'] {
    display: grid;
    grid-template-columns: 40% 20% 40%;
    column-gap: 0px;
    row-gap: 28px;
    grid-template-areas: 'rangeSlider rangeSlider rangeSlider' 'rangeLeft none rangeRight';
    min-width: 130px;
}
.lndsRange[data-side='valuelow'] .side {
    display: flex;
    align-items: center;
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
    color: var(--lndsConTxtTertiary);
}
.lndsRange[data-side='valuelow'] input[type='range'] {
    grid-area: rangeSlider;
    top: 12px;
}
.lndsRange[data-side='valuelow'] .rangeTrack {
    grid-area: rangeSlider;
    top: 12px;
}
.lndsRange[data-side='valuelow'] .sideL {
    grid-area: rangeLeft;
    justify-content: left;
}
.lndsRange[data-side='valuelow'] .sideR {
    grid-area: rangeRight;
    justify-content: right;
}
.lndsRange[disabled='disabled'] .rangeTrack {
    background: var(--lndsSysOverlayTertiary);
}
.lndsRange[disabled='disabled'] .rangeTrack .rangeSelected {
    background: transparent;
}
.lndsRange[data-label='on'] .rangeVal {
    position: absolute;
    top: -70px;
    left: 50%;
    width: 50px;
    padding: 12px 4px;
    border-radius: 50vh;
    background-color: var(--lndsConTxtPrimary);
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
    text-align: center;
    color: var(--lndsConTxtPrimaryInverse);
    transform: translateX(-50%);
}
.lndsRange[data-label='on'] .rangeVal::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: calc(50% - 2px);
    width: 3px;
    height: 14px;
    background: var(--lndsConTxtPrimary);
}
.lndsRange[data-label='on'] input[type='range']:active::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    border-width: 2px;
}
.lndsRange[data-label='on'] input[type='range']:active::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-width: 2px;
}
input[type='range'] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    pointer-events: none;
    position: absolute;
    top: 12px;
    z-index: 1;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: transparent;
    outline: none;
    transition: opacity 0.2s;
    -webkit-transition: 0.2s;
}
input[type='range']::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    z-index: 3;
    width: 28px;
    height: 28px;
    border: 2px solid var(--lndsSysBorderFocus);
    border-radius: 50vh;
    background: var(--lndsRefWhite);
    pointer-events: auto;
    cursor: pointer;
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
}
input[type='range']::-moz-range-thumb {
    width: 28px;
    height: 28px;
    z-index: 3;
    border: 2px solid var(--lndsSysBorderFocus);
    border-radius: 50vh;
    background: var(--lndsRefWhite);
    pointer-events: auto;
    cursor: pointer;
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
}
input[type='range']:active::-webkit-slider-thumb {
    width: 40px;
    height: 40px;
    border-width: 1px;
}
input[type='range']:active::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-width: 1px;
}
input[type='range']:disabled::-webkit-slider-thumb {
    width: 27px;
    height: 27px;
    border: 0;
    background: var(--lndsSysBorderTertiary);
    cursor: not-allowed;
}
input[type='range']:disabled::-moz-range-thumb {
    width: 27px;
    height: 27px;
    border: 0;
    background: var(--lndsSysBorderTertiary);
    cursor: not-allowed;
}
input[type='range']:disabled:active::-webkit-slider-thumb {
    width: 27px;
    height: 27px;
    border: 0;
}
input[type='range']:disabled:active::-moz-range-thumb {
    width: 27px;
    height: 27px;
    border: 0;
}

/**********
* snackbar
**********/
.lndsSnackbar {
    display: grid;
    grid-template-columns: var(--lndsSpacing500) auto;
    column-gap: var(--lndsSpacing200);
    grid-template-areas: 'areaIcon areaLabel';
    align-items: center;
    width: calc(100% - 32px);
    min-width: 100px;
    max-width: 540px;
    margin: var(--lndsSpacing10) auto;
    padding: var(--lndsSpacing350) var(--lndsSpacing400);
    border: 0;
    border-radius: var(--lndsBorderRadius5);
    background-color: var(--lndsConBgPrimaryInverse);
    box-shadow: var(--lndsElevation20X) var(--lndsElevation20Y) var(--lndsElevation20Blur) var(--lndsElevation20Spread) var(--lndsElevation20Color),
        var(--lndsElevation21X) var(--lndsElevation21Y) var(--lndsElevation21Blur) var(--lndsElevation21Spread) var(--lndsElevation21Color);
}
.lndsSnackbar .lndsLabelArea {
    grid-area: areaLabel;
    display: flex;
    flex-direction: column;
    row-gap: var(--lndsSpacing100);
    color: var(--lndsConTxtPrimaryInverse);
}
.lndsSnackbar .lndsLabelArea .title,
.lndsSnackbar .lndsLabelArea .label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--lndsConTxtPrimaryInverse);
    overflow: hidden;
}
.lndsSnackbar .lndsLabelArea .title {
    font-family: var(--lndsSysLabelLargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelLargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelLargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelLargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeSemiboldLetterSpacing);
}
.lndsSnackbar .lndsLabelArea .label {
    font-family: var(--lndsSysBodySmallFontFamily);
    font-size: var(--lndsSysBodySmallFontSize);
    font-weight: var(--lndsSysBodySmallFontWeight);
    line-height: var(--lndsSysBodySmallLineHeight);
    letter-spacing: var(--lndsSysBodySmallLetterSpacing);
}
.lndsSnackbar .lndsIconArea {
    grid-area: areaIcon;
    font-size: var(--lndsSpacing500);
    color: var(--lndsConTxtPrimaryInverse);
}
.lndsSnackbar.positive,
.lndsSnackbar.error {
    z-index: 9999 !important;
}
.lndsSnackbar.positive .lndsIconArea {
    color: var(--lndsConSemanticPositive);
}
.lndsSnackbar.error .lndsIconArea {
    color: var(--lndsConSemanticNegative);
}
.lndsSnackbar.action {
    grid-template-columns: var(--lndsSpacing500) auto var(--lndsSpacing500);
    grid-template-areas: 'areaIcon areaLabel areaTail';
}
.lndsSnackbar .lndsActionArea {
    grid-area: areaTail;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
}
.lndsSnackbar .lndsActionArea lnds-icon {
    font-size: var(--lndsSpacing500);
    color: var(--lndsConTxtPrimaryInverse);
}
.lndsSnackbar.action.button {
    grid-template-columns: var(--lndsSpacing500) auto var(--lndsSpacing1600);
}
.lndsSnackbar.text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lndsSysLabelLargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelLargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelLargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelLargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeSemiboldLetterSpacing);
    text-align: center;
    color: var(--lndsConTxtPrimaryInverse);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.lndsSnackbar.action.double {
    align-items: flex-start;
}
.lndsSnackbar.action.double .lndsActionArea {
    display: flex;
    row-gap: var(--lndsSpacing250);
    align-items: flex-end;
    justify-content: right;
    flex-direction: column;
    white-space: nowrap;
}
.lndsSnackbar.centeralign {
    display: flex;
    width: auto;
}

/**********
* switch
**********/
.lndsSwitch {
    position: relative;
    display: inline-block;
    border-radius: var(--lndsBorderRadius8);
    cursor: pointer;
}
.lndsSwitch .lndsSwitchBody {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 3px 10px;
    border-radius: var(--lndsBorderRadius8);
    text-align: right;
    overflow: hidden;
}
.lndsSwitch .lndsSwitchBar {
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: var(--lndsBorderRadius8);
    background: var(--lndsRefWhite);
    transition: 0.5s ease;
}
.lndsSwitch .lndsSwitchLabel {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**********
* tab
**********/
.lndsTab {
    position: relative;
    overflow: hidden;
}
.lndsTab .lndsTabGroup {
    display: flex;
    align-items: center;
    height: 48px;
    background-color: var(--lndsConBgPrimary);
}
.lndsTab .lndsTabGroup .lndsTabItem {
    min-width: 0;
    max-width: 99.9%;
    padding: 0 16px 2px;
    font-family: var(--lndsSysLabelLargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelLargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelLargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelLargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeSemiboldLetterSpacing);
    text-align: center;
    color: var(--lndsSysContentTertiary);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 1;
    cursor: pointer;
}
.lndsTab .lndsTabGroup .lndsTabItem.active {
    color: var(--lndsConTxtPrimary);
}
.lndsTab[data-type='sub'] .lndsTabGroup {
    column-gap: 4px;
    padding: 0 16px;
}
.lndsTab[data-type='sub'] .lndsTabGroup .lndsTabItem {
    padding: 8px;
    border-radius: 50vh;
}
.lndsTab[data-type='sub'] .lndsTabGroup .lndsTabItem.active {
    color: var(--lndsSysContentInversePrimary);
    z-index: 3;
    /* transition-delay: .3s; */
}
.lndsTab:not([data-type='sub']):not([data-type='avatar']):not([data-type='avatar-small']) .lndsTabGroup .lndsTabActiveDivider {
    position: absolute;
    top: 46px;
    width: 0px;
    height: 2px;
    background-color: var(--lndsConSemanticPrimary);
}
.lndsTab[data-type='sub'] .lndsTabGroup .lndsTabActiveDivider {
    position: absolute;
    top: 7px;
    width: 0px;
    height: 35px;
    border-radius: 50vh;
    background-color: var(--lndsSysBackgroundInversePrimary);
    z-index: 2;
}
.lndsTab[data-type='avatar'] .lndsTabGroup {
    align-items: flex-start;
    column-gap: 8px;
    height: 88px;
}
.lndsTab[data-type='avatar'] .lndsTabGroup .lndsTabItem {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    padding: 8px 8px 0 8px;
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
}
.lndsTab[data-type='avatar'] .lndsTabGroup .lndsTabItem.active {
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
}
.lndsTab[data-type='avatar'] .lndsTabGroup .lndsTabActiveDivider {
    display: none;
}
.lndsTab[data-type='avatar-small'] .lndsTabGroup {
    align-items: flex-start;
    column-gap: 0px;
    height: 88px;
}
.lndsTab[data-type='avatar-small'] .lndsTabGroup .lndsTabItem {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    padding: 12px 2px 4px 2px;
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
}
.lndsTab[data-type='avatar'] .lndsTabGroup .lndsTabItem lnds-avatar,
.lndsTab[data-type='avatar-small'] .lndsTabGroup .lndsTabItem lnds-avatar {
    display: block;
    margin: 0 auto;
}
.lndsTab[data-type='avatar-small'] .lndsTabGroup .lndsTabItem.active {
    font-family: var(--lndsSysLabelMediumBoldFontFamily);
    font-size: var(--lndsSysLabelMediumBoldFontSize);
    font-weight: var(--lndsSysLabelMediumBoldFontWeight);
    line-height: var(--lndsSysLabelMediumBoldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumBoldLetterSpacing);
}
.lndsTab[data-type='avatar-small'] .lndsTabGroup .lndsTabActiveDivider {
    display: none;
}
.lndsTab[data-scroll='use'] {
    overflow-x: scroll;
}
.lndsTab[data-scroll='use']::-webkit-scrollbar {
    display: none;
}
.lndsTab[data-scroll='use'] .lndsTabGroup {
    position: absolute;
    top: 0;
    left: 0;
    column-gap: 0px;
}

/**********
* textfield
**********/
input[data-usetype='pass'] {
    -webkit-text-security: square;
}
input[data-security='true'] {
    -webkit-text-security: square !important;
}
input[data-security='false'] {
    -webkit-text-security: none !important;
}
input[data-security-type='disc'] {
    -webkit-text-security: disc !important;
}
input[data-security-type='circle'] {
    -webkit-text-security: circle !important;
}
input[data-security-type='square'] {
    -webkit-text-security: square !important;
}
input[type='date'],
input[type='datetime'],
input[type='month'],
input[type='week'],
input[type='time'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
.lndsInputItem {
    display: flex;
    column-gap: var(--lndsSpacing250);
    align-items: center;
    overflow: hidden;
    height: 48px;
    padding: 0 var(--lndsSpacing300) 0 var(--lndsSpacing400);
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    border-radius: var(--lndsBorderRadius4);
    background: var(--lndsConBgPrimary);
    font-family: var(--lndsSysBodyLargeFontFamily);
    font-size: var(--lndsSysBodyLargeFontSize);
    font-weight: var(--lndsSysBodyLargeFontWeight);
    line-height: var(--lndsSysBodyLargeLineHeight);
    letter-spacing: var(--lndsSysBodyLargeLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
input[type='date'].small,
input[type='datetime'].small,
input[type='month'].small,
input[type='week'].small,
input[type='time'].small,
input[type='email'].small,
input[type='number'].small,
input[type='password'].small,
input[type='search'].small,
input[type='tel'].small,
input[type='text'].small,
input[type='url'].small {
    height: var(--lndsHeightS);
    padding: 0 var(--lndsSpacing700) 0 var(--lndsSpacing300);
    border-radius: var(--lndsBorderRadius4);
    background: var(--lndsConBgPrimary);
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
input[type='date'].medium,
input[type='datetime'].medium,
input[type='month'].medium,
input[type='week'].medium,
input[type='time'].medium,
input[type='email'].medium,
input[type='number'].medium,
input[type='password'].medium,
input[type='search'].medium,
input[type='tel'].medium,
input[type='text'].medium,
input[type='url'].medium {
    height: var(--lndsHeightM);
    padding: 0 var(--lndsSpacing700) 0 var(--lndsSpacing350);
    border-radius: var(--lndsBorderRadius4);
    background: var(--lndsConBgPrimary);
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
input[type='date']::placeholder,
input[type='datetime']::placeholder,
input[type='month']::placeholder,
input[type='week']::placeholder,
input[type='time']::placeholder,
input[type='email']::placeholder,
input[type='number']::placeholder,
input[type='password']::placeholder,
input[type='search']::placeholder,
input[type='tel']::placeholder,
input[type='text']::placeholder,
input[type='url']::placeholder,
.lndsInputItem::placeholder {
    color: var(--lndsConTxtQuaternary);
}
input[type='date']:focus,
input[type='datetime']:focus,
input[type='month']:focus,
input[type='week']:focus,
input[type='time']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
.lndsInputItem:focus {
    border-color: var(--lndsSysBorderFocus);
}
input[type='date']:disabled,
input[type='datetime']:disabled,
input[type='month']:disabled,
input[type='week']:disabled,
input[type='time']:disabled,
input[type='email']:disabled,
input[type='number']:disabled,
input[type='password']:disabled,
input[type='search']:disabled,
input[type='tel']:disabled,
input[type='text']:disabled,
input[type='url']:disabled,
.lndsInputItem:disabled {
    border-color: var(--lndsSysBorderTertiary);
    color: var(--lndsSysContentDisabled);
}
input[type='date']:disabled::placeholder,
input[type='datetime']:disabled::placeholder,
input[type='month']:disabled::placeholder,
input[type='week']:disabled::placeholder,
input[type='time']:disabled::placeholder,
input[type='email']:disabled::placeholder,
input[type='number']:disabled::placeholder,
input[type='password']:disabled::placeholder,
input[type='search']:disabled::placeholder,
input[type='tel']:disabled::placeholder,
input[type='text']:disabled::placeholder,
input[type='url']:disabled::placeholder,
.lndsInputItem:disabled::placeholder {
    color: var(--lndsSysContentDisabled);
}
.lndsInputGroup.fill input[type='date'],
.lndsInputGroup.fill input[type='datetime'],
.lndsInputGroup.fill input[type='month'],
.lndsInputGroup.fill input[type='week'],
.lndsInputGroup.fill input[type='time'],
.lndsInputGroup.fill input[type='email'],
.lndsInputGroup.fill input[type='number'],
.lndsInputGroup.fill input[type='password'],
.lndsInputGroup.fill input[type='search'],
.lndsInputGroup.fill input[type='tel'],
.lndsInputGroup.fill input[type='text'],
.lndsInputGroup.fill input[type='url'],
.lndsInputGroup input[type='date']:read-only,
.lndsInputGroup input[type='datetime']:read-only,
.lndsInputGroup input[type='month']:read-only,
.lndsInputGroup input[type='week']:read-only,
.lndsInputGroup input[type='time']:read-only,
.lndsInputGroup input[type='email']:read-only,
.lndsInputGroup input[type='number']:read-only,
.lndsInputGroup input[type='password']:read-only,
.lndsInputGroup input[type='search']:read-only,
.lndsInputGroup input[type='tel']:read-only,
.lndsInputGroup input[type='text']:read-only,
.lndsInputGroup input[type='url']:read-only,
.lndsInputGroup.fill .lndsInputItem,
.lndsInputGroup .lndsInputItem:read-only {
    border-width: 0;
    background-color: var(--lndsSysOverlayTertiary);
}
.lndsInputGroup.standard input[type='date'],
.lndsInputGroup.standard input[type='datetime'],
.lndsInputGroup.standard input[type='month'],
.lndsInputGroup.standard input[type='week'],
.lndsInputGroup.standard input[type='time'],
.lndsInputGroup.standard input[type='email'],
.lndsInputGroup.standard input[type='number'],
.lndsInputGroup.standard input[type='password'],
.lndsInputGroup.standard input[type='search'],
.lndsInputGroup.standard input[type='tel'],
.lndsInputGroup.standard input[type='text'],
.lndsInputGroup.standard input[type='url'],
.lndsInputGroup.standard .lndsInputItem {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
}
.lndsInputGroup.error input[type='date'],
.lndsInputGroup.error input[type='datetime'],
.lndsInputGroup.error input[type='month'],
.lndsInputGroup.error input[type='week'],
.lndsInputGroup.error input[type='time'],
.lndsInputGroup.error input[type='email'],
.lndsInputGroup.error input[type='number'],
.lndsInputGroup.error input[type='password'],
.lndsInputGroup.error input[type='search'],
.lndsInputGroup.error input[type='tel'],
.lndsInputGroup.error input[type='text'],
.lndsInputGroup.error input[type='url'],
.lndsInputGroup.error .lndsInputItem {
    border-color: var(--lndsConSemanticNotice);
}
.lndsInputGroup.positive input[type='date'],
.lndsInputGroup.positive input[type='datetime'],
.lndsInputGroup.positive input[type='month'],
.lndsInputGroup.positive input[type='week'],
.lndsInputGroup.positive input[type='time'],
.lndsInputGroup.positive input[type='email'],
.lndsInputGroup.positive input[type='number'],
.lndsInputGroup.positive input[type='password'],
.lndsInputGroup.positive input[type='search'],
.lndsInputGroup.positive input[type='tel'],
.lndsInputGroup.positive input[type='text'],
.lndsInputGroup.positive input[type='url'],
.lndsInputGroup.positive .lndsInputItem {
    border-color: var(--lndsConSemanticPositive);
}
.lndsInputGroup.negative input[type='date'],
.lndsInputGroup.negative input[type='datetime'],
.lndsInputGroup.negative input[type='month'],
.lndsInputGroup.negative input[type='week'],
.lndsInputGroup.negative input[type='time'],
.lndsInputGroup.negative input[type='email'],
.lndsInputGroup.negative input[type='number'],
.lndsInputGroup.negative input[type='password'],
.lndsInputGroup.negative input[type='search'],
.lndsInputGroup.negative input[type='tel'],
.lndsInputGroup.negative input[type='text'],
.lndsInputGroup.negative input[type='url'],
.lndsInputGroup.negative .lndsInputItem {
    border-color: var(--lndsConSemanticNegative);
}
.lndsInputGroup {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    row-gap: var(--lndsSpacing100);
}
.lndsInputGroup .lndsLabelText {
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
    color: var(--lndsConTxtSecondary);
}
.lndsInputBaseIcon,
.lndsInputIcons,
.lndsInputIconsException,
.lndsInputFrontIcon,
.lndsInputFrontIconEnd {
    color: var(--lndsSysContentDisabled);
}
.lndsInputGroup .lndsHelpText {
    display: none;
    padding: 0 0 0 var(--lndsSpacing400);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
}
.lndsInputGroup.error .lndsHelpText,
.lndsInputGroup.positive .lndsHelpText,
.lndsInputGroup.negative .lndsHelpText {
    display: block;
}
.lndsInputGroup.disabled .lndsLabelText,
.lndsInputGroup.disabled .lndsHelpText {
    color: var(--lndsConTxtQuaternary);
}
.lndsInputGroup.informative .lndsLabelText,
.lndsInputGroup.informative .lndsHelpText {
    color: var(--lndsConSemanticInformative) !important;
}
.lndsInputGroup.positive .lndsLabelText,
.lndsInputGroup.positive .lndsHelpText {
    color: var(--lndsConSemanticPositive) !important;
}
.lndsInputGroup.error .lndsLabelText,
.lndsInputGroup.error .lndsHelpText {
    color: var(--lndsConSemanticNotice) !important;
}
.lndsInputGroup.negative .lndsLabelText,
.lndsInputGroup.negative .lndsHelpText {
    color: var(--lndsConSemanticNegative) !important;
}
.lndsInputGroup.large input[type='date'],
.lndsInputGroup.large input[type='datetime'],
.lndsInputGroup.large input[type='month'],
.lndsInputGroup.large input[type='week'],
.lndsInputGroup.large input[type='time'],
.lndsInputGroup.large > input[type='email'],
.lndsInputGroup.large input[type='number'],
.lndsInputGroup.large input[type='password'],
.lndsInputGroup.large input[type='search'],
.lndsInputGroup.large > input[type='tel'],
.lndsInputGroup.large input[type='text'],
.lndsInputGroup.large input[type='url'],
.lndsInputGroup.large > .lndsInputItem {
    height: 56px;
    font-family: var(--lndsSysTitleLargeRegularFontFamily);
    font-size: var(--lndsSysTitleLargeRegularFontSize);
    font-weight: var(--lndsSysTitleLargeRegularFontWeight);
    line-height: var(--lndsSysTitleLargeRegularLineHeight);
    letter-spacing: var(--lndsSysTitleLargeRegularLetterSpacing);
}
.lndsInputGroup.round input[type='date'],
.lndsInputGroup.round input[type='datetime'],
.lndsInputGroup.round input[type='month'],
.lndsInputGroup.round input[type='week'],
.lndsInputGroup.round input[type='time'],
.lndsInputGroup.round input[type='email'],
.lndsInputGroup.round input[type='number'],
.lndsInputGroup.round input[type='password'],
.lndsInputGroup.round input[type='search'],
.lndsInputGroup.round input[type='tel'],
.lndsInputGroup.round input[type='text'],
.lndsInputGroup.round input[type='url'],
.lndsInputGroup.round .lndsInputItem {
    border-radius: var(--lndsBorderRadius8);
    overflow: hidden;
}
.lndsInputGroup .lndsInputArea {
    position: relative;
    width: 100%;
}
.lndsInputGroup .lndsInputArea input {
    width: 100%;
}
.lndsInputGroup .lndsInputArea .lndsInputFrontIcon {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: var(--lndsSpacing400);
}
.lndsInputGroup .lndsInputArea .lndsInputFrontIconEnd {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: var(--lndsSpacing400);
}
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon {
    position: absolute;
    bottom: 1px;
    right: 1px;
    z-index: 3;
    display: flex;
    align-items: center;
    height: calc(100% - 2px);
    padding-right: var(--lndsSpacing300);
    border-top-right-radius: var(--lndsBorderRadius4);
    border-bottom-right-radius: var(--lndsBorderRadius4);
}
.lndsInputGroup.fill .lndsInputArea .lndsInputBaseIcon {
    background-color: transparent;
}
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon .lndsInputIcons {
    display: none;
    cursor: pointer;
}
.lndsInputGroup .lndsInputBtnChecked,
.lndsInputGroup .lndsInputBtnError {
    display: none;
}
.lndsInputGroup.positive .lndsInputBtnChecked {
    display: block !important;
}
.lndsInputGroup.positive .lndsInputBtnError {
    display: none !important;
}
.lndsInputGroup.error .lndsInputBtnChecked {
    display: none !important;
}
.lndsInputGroup.error .lndsInputBtnError {
    display: block !important;
}
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon .addTail,
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon .tailfixed {
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    color: var(--lndsConTxtTertiary);
}
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon .addTail.disabled,
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon .tailfixed.disabled {
    color: var(--lndsSysContentDisabled);
}
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon .lndsInputAreaLength {
    padding-left: var(--lndsSpacing200);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
    color: var(--lndsConSemanticNeutral);
}
.lndsInputGroup .lndsInputArea .lndsInputBaseIcon .lndsInputAreaLength strong {
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
    color: var(--lndsConSemanticPrimary);
}
.lndsInputGroup[data-resize='fit'] .ghostInputArea .ghostInput {
    width: calc(100% - 86px);
}
.lndsInputGroup[data-resize='fit'] .ghostInputArea .ghostBtn {
    width: 80px;
}
input[type='color'] {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0;
    border: 0;
}
select,
select.large {
    display: inline-flex;
    column-gap: var(--lndsSpacing250);
    align-items: center;
    min-width: 60px;
    height: var(--lndsHeightL);
    padding: 0 var(--lndsSpacing800) 0 var(--lndsSpacing400);
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder);
    border-radius: var(--lndsBorderRadius4);
    background-color: var(--lndsConBgPrimary);
    background: var(--lndsIconAngleDownGray);
    background-repeat: no-repeat;
    background-position: right var(--lndsSpacing100) center;
    background-size: var(--lndsSpacing600);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--lndsSysBodyLargeFontFamily);
    font-size: var(--lndsSysBodyLargeFontSize);
    font-weight: var(--lndsSysBodyLargeFontWeight);
    line-height: var(--lndsSysBodyLargeLineHeight);
    letter-spacing: var(--lndsSysBodyLargeLetterSpacing);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 1;
    cursor: pointer;
}
select:focus {
    background: var(--lndsIconAngleUpGray);
    background-repeat: no-repeat;
    background-position: right var(--lndsSpacing100) center;
    background-size: var(--lndsSpacing600);
}
select::-ms-expand {
    display: none;
}
select[disabled] {
    border: var(--lndsBorderWidth1) solid var(--lndsConUIBorder) !important;
    background-color: var(--lndsSysStateTertiary) !important;
    color: var(--lndsSysContentDisabled) !important;
    cursor: not-allowed !important;
}
select.small {
    height: var(--lndsHeightS);
    padding: 0 var(--lndsSpacing700) 0 var(--lndsSpacing300);
    border-radius: var(--lndsBorderRadius4);
    background-color: var(--lndsConBgPrimary);
    font-family: var(--lndsSysLabelMediumRegularFontFamily);
    font-size: var(--lndsSysLabelMediumRegularFontSize);
    font-weight: var(--lndsSysLabelMediumRegularFontWeight);
    line-height: var(--lndsSysLabelMediumRegularLineHeight);
    letter-spacing: var(--lndsSysLabelMediumRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
select.medium {
    height: var(--lndsHeightM);
    padding: 0 var(--lndsSpacing700) 0 var(--lndsSpacing350);
    border-radius: var(--lndsBorderRadius4);
    background-color: var(--lndsConBgPrimary);
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
textarea {
    width: auto;
    min-width: 115px;
    max-width: 100%;
    height: auto;
    min-height: 70px;
    max-height: 100%;
    padding: var(--lndsSpacing350);
    border-width: var(--lndsBorderWidth1) !important;
    border-style: solid;
    border-color: var(--lndsConUIBorder);
    border-radius: var(--lndsBorderRadius4);
    background-color: var(--lndsConBgPrimary);
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    color: var(--lndsConTxtPrimary);
}
textarea.fill {
    border-width: 0;
    background-color: var(--lndsSysOverlayTertiary);
    color: var(--lndsConTxtPrimary);
}
textarea.freeze {
    resize: none;
}
textarea:disabled {
    border-color: var(--lndsSysBorderTertiary);
    color: var(--lndsSysContentDisabled);
    resize: none;
}

/**********
* tooltip
**********/
.lndsTooltip {
    position: fixed;
    z-index: 899;
}
.lndsTooltipArea {
    position: relative;
    justify-content: center;
    justify-items: center;
    padding: 0;
}
.lndsTooltipBox {
    display: flex;
    align-items: center;
    column-gap: var(--lndsSpacing100);
    max-width: 90vw;
    min-height: 40px;
    padding: var(--lndsSpacing400);
    border-radius: var(--lndsBorderRadius4);
    background-color: var(--lndsConBgSecondaryInverse);
    font-family: var(--lndsSysLabelLargeRegularFontFamily);
    font-size: var(--lndsSysLabelLargeRegularFontSize);
    font-weight: var(--lndsSysLabelLargeRegularFontWeight);
    line-height: var(--lndsSysLabelLargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelLargeRegularLetterSpacing);
    color: var(--lndsConBgPrimary);
}
.lndsTooltipBox.small {
    min-height: 24px;
    padding: var(--lndsSpacing250) var(--lndsSpacing300);
    font-family: var(--lndsSysLabelSmallRegularFontFamily);
    font-size: var(--lndsSysLabelSmallRegularFontSize);
    font-weight: var(--lndsSysLabelSmallRegularFontWeight);
    line-height: var(--lndsSysLabelSmallRegularLineHeight);
    letter-spacing: var(--lndsSysLabelSmallRegularLetterSpacing);
}
.lndsTooltipBox > .lndsTooltipClose {
    cursor: pointer;
}
.lndsTooltipArrow {
    display: flex;
    justify-content: center;
    height: 7px;
    padding: 0 var(--lndsSpacing400);
    overflow: hidden;
}
.lndsTooltipArrow > .arrowbox {
    position: relative;
    width: 10px;
    height: 10px;
}
.lndsTooltipArrow > .arrowbox > .arrowitem {
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    background-color: var(--lndsConBgSecondaryInverse);
}

/**********
* top app bar
**********/
.lndsTopAppBar {
    display: grid;
    grid-template-columns: var(--lndsSpacing1200) auto var(--lndsSpacing1200);
    grid-template-areas: 'barLeft none barRight' 'barCenter barCenter barCenter';
    background-color: var(--lndsConBgPrimaryChrom);
}
.lndsTopAppBar .lndsTopAppBarLeft,
.lndsTopAppBar .lndsTopAppBarContent,
.lndsTopAppBar .lndsTopAppBarRight {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--lndsSpacing1200);
}
.lndsTopAppBar .lndsTopAppBarLeft {
    grid-area: barLeft;
    justify-content: left;
}
.lndsTopAppBar .lndsTopAppBarContent {
    grid-area: barCenter;
    padding: 0 var(--lndsSpacing600) 0 var(--lndsSpacing400);
    font-family: var(--lndsSysHeadlineMediumBoldFontFamily);
    font-size: var(--lndsSysHeadlineMediumBoldFontSize);
    font-weight: var(--lndsSysHeadlineMediumBoldFontWeight);
    line-height: var(--lndsSysHeadlineMediumBoldLineHeight);
    letter-spacing: var(--lndsSysHeadlineMediumBoldLetterSpacing);
}
.lndsTopAppBar.center .lndsTopAppBarContent {
    display: flex;
    flex-direction: column;
}
.lndsTopAppBar.center .lndsTopAppBarContent .subContent {
    display: block;
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    color: var(--lndsConTxtTertiary);
}
.lndsTopAppBar .lndsTopAppBarRight {
    grid-area: barRight;
    justify-content: right;
    font-family: var(--lndsSysLabelXlargeRegularFontFamily);
    font-size: var(--lndsSysLabelXlargeRegularFontSize);
    font-weight: var(--lndsSysLabelXlargeRegularFontWeight);
    line-height: var(--lndsSysLabelXlargeRegularLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeRegularLetterSpacing);
}
.lndsTopAppBar .lndsTopAppBarLeftItem,
.lndsTopAppBar .lndsTopAppBarRightItem {
    position: absolute;
    display: flex;
}
.lndsTopAppBar .lndsTopAppBarLeftItem {
    left: var(--lndsSpacing150);
}
.lndsTopAppBar .lndsTopAppBarRightItem {
    right: var(--lndsSpacing350);
    column-gap: var(--lndsSpacing250);
}
.lndsTopAppBar.label .lndsTopAppBarRightItem {
    right: var(--lndsSpacing400);
    display: block;
    white-space: nowrap;
}
.lndsTopAppBar.medium,
.lndsTopAppBar.small:not(.left) {
    grid-template-areas: 'barCenter barCenter barRight';
}
.lndsTopAppBar.medium .lndsTopAppBarContent,
.lndsTopAppBar.medium .lndsTopAppBarRight {
    align-items: end;
    height: var(--lndsSpacing1400);
}
.lndsTopAppBar.medium .lndsTopAppBarContent {
    padding: var(--lndsSpacing400) 0 var(--lndsSpacing200) var(--lndsSpacing500);
    font-family: var(--lndsSysHeadlineSmallBoldFontFamily);
    font-size: var(--lndsSysHeadlineSmallBoldFontSize);
    font-weight: var(--lndsSysHeadlineSmallBoldFontWeight);
    line-height: var(--lndsSysHeadlineSmallBoldLineHeight);
    letter-spacing: var(--lndsSysHeadlineSmallBoldLetterSpacing);
}
.lndsTopAppBar.medium .lndsTopAppBarLeft,
.lndsTopAppBar.small:not(.left) .lndsTopAppBarLeft {
    display: none;
}
.lndsTopAppBar.small .lndsTopAppBarContent {
    padding: 0 0 0 var(--lndsSpacing500);
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
}
.lndsTopAppBar.small.left .lndsTopAppBarContent {
    padding: 0;
}
.lndsTopAppBar.left {
    grid-template-areas: 'barLeft barCenter barRight';
}
.lndsTopAppBar.lndsTopAppBarLeft {
    display: block;
}
.lndsTopAppBar.center .lndsTopAppBarContent {
    justify-content: center;
}

/**********
* toggle button
**********/
.lndsToggleButton {
    display: inline-flex;
    column-gap: var(--lndsSpacing50);
    align-items: center;
    justify-content: left;
    width: calc(100% - 16px);
    min-width: 100px;
    height: 40px;
    padding: var(--lndsSpacing50);
    border-radius: var(--lndsBorderRadius3);
    background-color: var(--lndsSysOverlayTertiary);
    overflow: hidden;
}
.lndsToggleButton.small {
    height: 30px;
}
.lndsToggleButton.small label {
    font-family: var(--lndsSysLabelMediumSemiboldFontFamily);
    font-size: var(--lndsSysLabelMediumSemiboldFontSize);
    font-weight: var(--lndsSysLabelMediumSemiboldFontWeight);
    line-height: var(--lndsSysLabelMediumSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelMediumSemiboldLetterSpacing);
}
.lndsToggleButton.large {
    height: 48px;
}
.lndsToggleButton.large label {
    font-family: var(--lndsSysLabelXlargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelXlargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelXlargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelXlargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelXlargeSemiboldLetterSpacing);
}
.lndsToggleButton label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - var(--lndsSpacing100));
    border-radius: var(--lndsBorderRadius2);
    background-color: transparent;
    font-family: var(--lndsSysLabelLargeSemiboldFontFamily);
    font-size: var(--lndsSysLabelLargeSemiboldFontSize);
    font-weight: var(--lndsSysLabelLargeSemiboldFontWeight);
    line-height: var(--lndsSysLabelLargeSemiboldLineHeight);
    letter-spacing: var(--lndsSysLabelLargeSemiboldLetterSpacing);
    color: var(--lndsSysContentQuaternary);
    white-space: nowrap;
    cursor: pointer;
}
.lndsToggleButton label:not([data-disabled='true'])::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -3px;
    width: 1px;
    height: 10px;
    margin-top: -5px;
    background-color: var(--lndsSysContentDisabled);
    opacity: 0.3;
}
.lndsToggleButton label:nth-last-child(1):before {
    width: 0;
}
.lndsToggleButton[data-parts='half'] label {
    width: calc(50% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='third'] label {
    width: calc(33.3% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='quarter'] label {
    width: calc(25% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='fifth'] label {
    width: calc(20% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='sixth'] label {
    width: calc(16.6% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='seventh'] label {
    width: calc(14.2% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='eight'] label {
    width: calc(12.5% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='ninth'] label {
    width: calc(11.1% - var(--lndsSpacing50));
}
.lndsToggleButton[data-parts='ten'] label {
    width: calc(10% - var(--lndsSpacing50));
}
.lndsToggleButton label[data-checked='checked'] {
    background-color: var(--lndsSysBackgroundPrimary);
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
    color: var(--lndsSysContentPrimary);
}
.lndsToggleButton label:not([data-checked='checked']):not([data-disabled='true']):hover {
    background-color: var(--lndsSysOverlaySecondary);
}
.lndsToggleButton label[data-disabled='true'] {
    color: var(--lndsSysContentDisabled);
    opacity: 0.7;
    cursor: not-allowed;
}
.lndsToggleButton label input {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--lndsSpacing10);
    height: var(--lndsSpacing10);
    opacity: 0;
}
.lndsToggleButton.icon {
    display: inline-flex;
    width: auto;
}
.lndsToggleButton.icon label {
    width: 36px;
    height: 36px;
}
.lndsToggleButton.icon label lnds-icon {
    font-size: 18px;
}
.lndsToggleButton.icon.small label {
    width: 26px;
    height: 26px;
}
.lndsToggleButton.icon.small label lnds-icon {
    font-size: 14px;
}
.lndsToggleButton.icon.large label {
    width: 44px;
    height: 44px;
}
.lndsToggleButton.icon.large label lnds-icon {
    font-size: 24px;
}
.lndsToggleButton.eachitem {
    display: inline-flex;
    width: auto;
}
.lndsToggleButton.eachitem label {
    padding: 0 var(--lndsSpacing200);
}

/**********
* toast message
**********/
.lndsToastPop {
    position: fixed;
    z-index: 900;
}
.lndsToastPop.top:not(.transPop) {
    top: 5vh;
    left: 0;
    width: 100%;
    min-width: 100vw;
}
.lndsToastPop.top.transPop {
    top: 5vh;
    left: 0;
    width: 100%;
    min-width: 320px;
    max-width: 768px;
}
.lndsToastPop.bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: 100vw;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.lndsToastPop.center {
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100vw;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
}
.lndsDatePickerHeader {
    display: grid;
    grid-template-columns: 50px auto 50px;
    grid-template-areas: 'today title close';
    align-items: center;
}
.lndsDatePickerToday {
    grid-area: today;
}
.datepickerTitle {
    grid-area: title;
    width: 100%;
    font-family: var(--lndsSysTitleSmallBoldFontFamily);
    font-size: var(--lndsSysTitleSmallBoldFontSize);
    font-weight: var(--lndsSysTitleSmallBoldFontWeight);
    line-height: var(--lndsSysTitleSmallBoldLineHeight);
    letter-spacing: var(--lndsSysTitleSmallBoldLetterSpacing);
    text-align: center;
    text-decoration: none !important;
}
.closeDatePicker {
    grid-area: close;
    display: flex;
    align-items: center;
    justify-content: right;
    cursor: pointer;
}
.lndsPopHeader {
    display: none;
    margin-bottom: var(--lndsSpacing400);
    padding: var(--lndsSpacing300) var(--lndsSpacing400);
}
.lndsPopHeader .btnClose {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: var(--lndsBorderRadius8);
    background-color: var(--lndsConBgTertiary);
    color: var(--lndsSysContentQuaternary);
    box-shadow: var(--lndsElevation10X) var(--lndsElevation10Y) var(--lndsElevation10Blur) var(--lndsElevation10Spread) var(--lndsElevation10Color),
        var(--lndsElevation11X) var(--lndsElevation11Y) var(--lndsElevation11Blur) var(--lndsElevation11Spread) var(--lndsElevation11Color);
    cursor: pointer;
}
.lndsPopHeader[data-usebg='true'] .btnClose {
    background-color: transparent;
    color: var(--lndsSysContentPrimary);
    box-shadow: none;
}
.lndsPopHeader .btnClose > * {
    display: block;
}
.lndsPopHeader .headerContent {
    display: flex;
    align-items: center;
    column-gap: var(--lndsSpacing200);
    font-family: var(--lndsSysTitleMediumBoldFontFamily);
    font-size: var(--lndsSysTitleMediumBoldFontSize);
    font-weight: var(--lndsSysTitleMediumBoldFontWeight);
    line-height: var(--lndsSysTitleMediumBoldLineHeight);
    letter-spacing: var(--lndsSysTitleMediumBoldLetterSpacing);
}
#close_picker {
    grid-area: close;
    margin-left: auto;
    cursor: pointer;
}
.lndsPopItem {
    overflow: hidden;
    border-radius: var(--lndsBorderRadius4);
    background-color: var(--lndsConBgPrimary);
}
.lndsPopContent {
    height: auto;
    min-height: 50px;
    max-height: 75vh;
    overflow-y: auto;
    padding: 0 var(--lndsSpacing400) var(--lndsSpacing400);
}

.datepickerItem {
    width: 80vw;
    min-width: 280px;
    max-width: 700px;
    padding: var(--lndsSpacing400) 0 0 0;
    /*
	border-radius: var(--lndsBorderRadius4);
	background-color: var(--lndsConBgPrimary);
	box-shadow: var(--lndsElevation20X) var(--lndsElevation20Y) var(--lndsElevation20Blur) var(--lndsElevation20Spread) var(--lndsElevation20Color), var(--lndsElevation21X) var(--lndsElevation21Y) var(--lndsElevation21Blur) var(--lndsElevation21Spread) var(--lndsElevation21Color);
	*/
}
.btns.ea2 {
    display: grid;
    grid-template-columns: calc(32% - var(--lndsSpacing100)) calc(68% - var(--lndsSpacing100));
    column-gap: var(--lndsSpacing200);
    width: 100%;
}
.btns.ea2 > * {
    margin-top: 0 !important;
}
.btns.ea3 {
    display: grid;
    grid-template-columns: calc(calc(100% - var(--lndsSpacing400)) / 3) calc(calc(100% - var(--lndsSpacing400)) / 3) calc(
            calc(100% - var(--lndsSpacing400)) / 3
        );
    column-gap: var(--lndsSpacing200);
    width: 100%;
}
/*
@keyframes lndsEffectVibration { from { transform: rotate(1deg); } to { transform: rotate(-1deg); } }
@keyframes lndsEffectT2B { from { opacity: 0; transform: translate(0,-30px); } to { opacity: 1; transform: translate(0,0); } }
@keyframes lndsEffectB2T { from { opacity: 0; transform: translate(0,30px); } to { opacity: 1; transform: translate(0,0); } }
.lndsToastEffectVibration { animation: lndsEffectVibration .1s infinite; }
.lndsToastEffectT2B { animation: lndsEffectT2B .3s; }
.lndsToastEffectB2T { animation: lndsEffectB2T .3s; }
.lndsToastItem { min-width: 288px; padding: var(--lndsSpacing100) 0; border-radius: var(--lndsBorderRadius2); }
.lndsToastItem .lndsCardSection { margin-bottom: var(--lndsSpacing200); padding-bottom: var(--lndsSpacing200); border-bottom: var(--lndsBorderWidth1) solid rgba(255, 255, 255, 0.5); color: var(--lndsRefWhite); }
.lndsToastNegative { background: var(--lndsConSemanticNegative); }
.lndsToastNegative .lndsCardSection,.lndsToastNegative .lndsCardContent { color: var(--lndsRefWhite); }
.lndsToastNotice { background: var(--lndsConSemanticNotice); }
.lndsToastNotice .lndsCardSection,.lndsToastNotice .lndsCardContent { color: var(--lndsRefWhite); }
.lndsToastPositive { background: var(--lndsConSemanticPositive); }
.lndsToastPositive .lndsCardSection,.lndsToastPositive .lndsCardContent { color: var(--lndsRefWhite); }
.lndsToastInformative { background: var(--lndsConSemanticInformative); }
.lndsToastInformative .lndsCardSection,.lndsToastInformative .lndsCardContent { color: var(--lndsRefWhite); }
.lndsToastNeutral { background: var(--lndsConSemanticNeutral); }
.lndsToastNeutral .lndsCardSection,.lndsToastNeutral .lndsCardContent { color: var(--lndsRefWhite); }
*/