@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Regular.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Medium.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Medium.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Bold.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Bold.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKRPreheat';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../../../../fonts/NotoSansKR/NotoSansKR-Black.woff2') format('woff2'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Black.woff') format('woff'),
        url('../../../../fonts/NotoSansKR/NotoSansKR-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Shokz Sans Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Medium.woff2') format('woff2'),
        url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'Shokz Sans Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Bold.woff2') format('woff2'),
        url('../../../../fonts/DisplaySans/Display/Shokz Sans Display-Bold.otf') format('opentype');
}

/* common */
.main-content * {
    font-family: 'NotoSansKRPreheat', 'NotoSansKR', 'Poppins', sans-serif;
}

.pc-hide {
    display: none;
}

.mb-hide {
    display: block;
}

.page-width {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    color: #3B3C44;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 16px;
}

.section-title br {
    display: none;
}

.section-desc {
    color: #404040;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 32px;
}



/* banner */
.banner-wrapper {
    position: relative;
    width: 100%;
    height: 620px;
    overflow: hidden;
    background: #3F404C;
}

.banner-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

.banner-wrapper .banner-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-wrapper .banner-content {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
}

.banner-wrapper .banner-open-date {
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1;
}

.banner-wrapper .banner-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 8px;
}

.banner-wrapper .banner-title span {
    display: inline-flex;
    background: linear-gradient(275deg, #D2D7E1 -47.43%, #FFF 65.13%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-wrapper .banner-period {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;

}

.banner-wrapper .banner-desc {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    margin: 32px 0;

}

.banner-wrapper .banner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    width: 246px;
    height: 48px;
    border-radius: 4px;
    color: #0A0A0A;
    background: #fff;

}

/* countdown */
.countdown-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    margin-top: -1px;
    background: #3F404C;
    color: #fff;
    box-sizing: border-box;
}

.countdown-wrapper .countdown-container {
    width: 100%;
    padding: 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.countdown-wrapper .countdown-info {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.countdown-wrapper .countdown {
    display: flex;
    align-items: center;
    gap: 10px;
}

.countdown-wrapper .countdown-box,
.countdown-wrapper .countdown-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-wrapper .countdown-card {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    width: 58px;
    text-align: center;
}

.countdown-wrapper .countdown-symbol {
    width: 20px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
}


/* nav bar */

.nav-wrapper {
    background: #D2D2DA;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 10000;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-wrapper.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.nav-wrapper .nav-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    height: 56px;
    padding: 0 200px;
}

.nav-wrapper .nav-item {
    position: relative;
    flex: 1;
    font-size: 18px;
    font-weight: 300;
    color: #0A0A0A;
    height: 100%;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-wrapper .nav-item.active {
    font-size: 20px;
    font-weight: 500;
}

.nav-wrapper .nav-item::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #0A0A0A;
    content: " ";
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}



.nav-wrapper .nav-item.active::after {
    transform: scaleX(1);
}


/* notify */
.notify-wrapper {
    background-color: #EFEFEF;
}

.notify-wrapper .notify-container {
    padding: 96px 0;
}

.notify-wrapper .notify-content {
    display: flex;
    height: 440px;
    border-radius: 12px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.10);

}

.notify-wrapper .notify-left {
    position: relative;
    z-index: 2;
    width: 714px;
    padding: 32px 24px 24px;
    box-sizing: border-box;
    background: linear-gradient(76deg, #B6B6B6 -28.32%, #FFF 79.55%);
    backdrop-filter: blur(25px);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.notify-wrapper .notify-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.notify-wrapper .notify-text1 {
    font-size: 24px;
    color: #0A0A0A;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 16px;
}

.notify-wrapper .notify-text1 span {
    color: #C36A1C;
    font-size: 32px;
}

.notify-wrapper .notify-text2 {
    color: #404040;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 16px;
}

.notify-wrapper .notify-text2 span {
    color: #6A3608;
}

.notify-wrapper .notify-btn {
    width: 210px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background-color: #000;
    border-radius: 4px;
    margin: 0 auto;
}

.notify-wrapper .notify-btn.disabled {
    background-color: #A3A3A3;
}


.notify-wrapper .notify-gift {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
}

.notify-wrapper .notify-gift img {
    height: 112px;
}


.notify-wrapper .notify-gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.notify-wrapper .notify-gift-btn {
    margin-top: 16px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    background: linear-gradient(99deg, #8B99A6 -27.94%, #3C4255 77.09%), linear-gradient(88deg, #68777F 3.64%, #636796 104.98%);

}

.notify-wrapper .notify-gift-btn br {
    display: none;
}

.notify-wrapper .notify-right {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow: hidden;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.notify-wrapper .notify-right img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* subscription */
.subscription-container {
    margin-top: 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #404040;
}

.subscription-container.center {
    justify-content: center;
}

.subscription-container .subscription-content {
    display: flex;
    align-items: center;
}

.subscription-container .check-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #D4D4D4;
    background: #fff;
    box-sizing: border-box;
    margin-right: 6px;
    cursor: pointer;
}

.subscription-container .check-wrap.active {
    border: 1px solid #FF7A3D;
    background: #FF7A3D;
}

.subscription-container .check-wrap img {
    width: 10px;
}

.subscription-container .text {
    margin-right: 6px;
}

.subscription-container .more-wrap {
    margin-right: 24px;
    cursor: pointer;
    text-decoration-line: underline;
}

.subscription-container .notice-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #404040;
}


/* event */
.section-2 {
    margin-top: 64px;
}

.event-content {
    display: flex;
    gap: 24px;
    height: 288px;
}


.event-content .event-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.event-content .event-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 382px;
    height: 132px;
    padding: 0 24px;
    box-sizing: border-box;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.event-content .event-item:first-child {
    background-image: url(https://static.shokz.co.kr/resource/2026/05/20/card-1_6a0d5b46812b5.webp);
}

.event-content .event-item:last-child {
    background-image: url(https://static.shokz.co.kr/resource/2026/05/20/card-2_6a0d5b4662790.webp);
}

.event-content .event-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 32px;
    border-radius: 44px;
    color: #0A0A0A;
    font-weight: 400;
    font-size: 16px;
    background: linear-gradient(180deg, #F5F5F5 0%, #CDCEDC 103.12%);
    margin-bottom: 12px;
}

.event-content .event-text {
    color: #0A0A0A;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 6px;
}

.event-content .event-desc {
    color: #404040;
    font-size: 14px;
    line-height: 1.4;
}

.event-content .event-desc br {
    display: none;
}

.event-content .event-right {
    position: relative;
    flex: 1;
    border-radius: 12px;
    padding: 54px 32px 24px;
    box-sizing: border-box;
}

.event-content .event-bg-wrap {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
}

.event-content .event-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.event-content .event-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.event-content .event-tag-text {
    position: absolute;
    top: 7px;
    left: 0;
    width: 130px;
    text-align: center;
    color: #2C3157;
    font-size: 18px;
    line-height: 1.4;
}

.event-content .event-survey {
    position: relative;
    z-index: 1;
    width: 460px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    word-break: keep-all;
}

.event-content .event-survey-intro {
    color: #0A0A0A;
    font-size: 16px;
    line-height: 1.4;
}

.event-content .event-survey-intro span {
    color: #323F7C;
    font-size: 20px;
    font-weight: 500;
}

.event-content .event-survey-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.event-content .event-survey-question {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    background: linear-gradient(91deg, #000851 -1.19%, #506097 103.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.event-content .event-survey-options {
    display: flex;
    gap: 16px;
}

.event-content .event-survey-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.event-content .event-survey-option.disabled {
    cursor: not-allowed;
}

.event-content .event-survey-option input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.event-content .event-survey-radio {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url(https://static.shokz.co.kr/resource/2026/06/22/select_default_6a38d34c013e0.svg) center / contain no-repeat;
}

.event-content .event-survey-option input:checked + .event-survey-radio {
    background-image: url(https://static.shokz.co.kr/resource/2026/06/22/select_active_6a38d36ea146c.svg);
}

.event-content .event-survey-option-text {
    color: #404040;
    font-size: 14px;
    line-height: 1.3;
}

.event-content .event-survey-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

.event-content .event-survey-submit.disabled,
.event-content .event-survey-submit:disabled {
    background: #A3A3A3;
    cursor: not-allowed;
}

.event-content .event-survey-agree {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.event-content .event-survey-agree-check {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
}

.event-content .event-survey-agree-check input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.event-content .event-survey-checkbox {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    background: #fff;
}

.event-content .event-survey-agree-check input:checked + .event-survey-checkbox {
    border-color: #FF7A3D;
    background: #FF7A3D url(https://static.shokz.co.kr/resource/2026/04/09/check_69d722e585b4e.svg) center / 10px no-repeat;
}

.event-content .event-survey-agree-text {
    flex: 1;
    min-width: 0;
    color: #404040;
    font-size: 14px;
    line-height: 1.3;
}

.event-content .event-survey-more {
    white-space: nowrap;
    text-decoration-line: underline;
}

.event-content .event-survey-more .bubble-content {
    white-space: normal;
}

.event-content .event-survey-more .bubble-list {
    margin: 0;
    padding-left: 18px;
    list-style-type: decimal;
    color: #0A0A0A;
    font-size: 14px;
    line-height: 1.4;
}

.event-content .event-survey-more .bubble-list li {
    list-style-type: decimal;
}

.event-content .event-survey-more .bubble-list li + li {
    margin-top: 4px;
}

.event-content .event-survey-more .bubble-list a {
    color: #0A0A0A;
    text-decoration: underline;
}

.event-content .event-survey-options-wrap,
.event-content .event-survey-submit-wrap {
    display: block;
    cursor: default;
}

.event-content .benefit3-bubble {
    max-width: 300px;
    left: -5px;
    transform: none;
    pointer-events: none;
}

.event-content .benefit3-bubble-login{
    max-width: 300px;
    left: 20px;
    transform: none;
    pointer-events: none;
}

.event-content .benefit3-bubble-login::after{
    left: 15%;
}

.event-content .benefit3-bubble::after {
    left: 30px;
    transform: none;
}

.event-content .benefit3-bubble-check {
    left: -10px;
}

.event-content .benefit3-bubble-check::after {
    left: 10px;
}

.event-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    color: #404040;
    font-size: 18px;
    line-height: 1.4;
}


/* product-tab */

.product-tab {
    background: #fff;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 10000;
    overflow: hidden;
}

.product-tab.is-sticky {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.product-tab-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
    height: 80px;
}

.product-tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 99px;
    box-sizing: border-box;
    color: #000;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-tab-item.active {
    color: #fff;
    background: #000;
    font-weight: 500;
}

/* product card */
.product-wrapper {
    position: relative;
    padding: 96px 0 64px;

}


.product-wrapper .product-card {
    display: flex;
    height: 472px;
    border-radius: 12px;
    box-shadow: 0 4px 16px 0 rgba(17, 17, 26, 0.10), 0 8px 32px 0 rgba(17, 17, 26, 0.05);
    margin-top: 40px;
    overflow: hidden;
}

.product-wrapper .product-card.reverse{
    flex-direction: row-reverse;
}

.product-wrapper .product-card-left {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.product-wrapper .product-card-bg-wrap {
    position: absolute;
    inset: 0;
    display: block;
}

.product-wrapper .product-card-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.product-wrapper .product-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.product-wrapper .product-tag-text {
    position: absolute;
    top: 12px;
    left: 28px;
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
}

.product-wrapper .product-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 130px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
}



.progress-title {
    color: #404040;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: center;
}


.progress-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.progress-bar {
    width: 283px;
    height: 6px;
    background-color: #D1D5DB;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(99deg, #CACDD0 -27.94%, #444E6C 77.09%);
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.progress-fill.two {
    background: linear-gradient(90deg, #72617C 1.33%, #9F83BD 93.58%), linear-gradient(90deg, #92BBF8 0%, #6059B2 50.37%);
}

.progress-text {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #000;
    gap: 8px;
    line-height: 1.4;
}

.progress-text span {
    font-size: 24px;
    font-weight: 700;
    color: #FF7A3D;
}



.product-wrapper .product-card-right {
    width: 414px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(104deg, #E8E8E8 0%, #FFF 29.11%, #E8E8E8 102.76%);
}

.product-wrapper .product-card-right.two {
    background: linear-gradient(186deg, #E5E6FA -10.59%, #FBFBFE 27.98%, #DCDFF1 125.56%);
}

.product-wrapper .product-img {
    width: 197px;
    height: 123px;
}


.product-wrapper .product-small-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 83px;
    height: 32px;
    border-radius: 26px;
    border: 1px solid #FFF;
    background: linear-gradient(180deg, #F5F5F5 0%, #D5D8DB 103.12%);
    color: #404040;
    font-size: 14px;
    margin-bottom: 6px;
}

.product-wrapper .product-small-btn.two {
    background: linear-gradient(180deg, #F2F3FF 0%, #CFD1E0 110.94%);
}

.product-wrapper .product-title {
    color: #000;
    font-family: 'Shokz Sans Display', 'NotoSansKRPreheat', 'NotoSansKR', 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 18px;
}

.product-wrapper .product-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 188px;
    height: 44px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 4px;
    color: #fff;
    background-color: #000;
    margin-bottom: 42px;
}

.product-wrapper .product-desc {
    text-align: center;
    font-size: 16px;
    color: #404040;
    line-height: 1.4;
}

.product-wrapper .product-img-wrap {

    display: flex;
    gap: 24px;
}

.product-wrapper .product-img-item {
    flex: 1;
    display: flex;
    gap: 24px;
}

.product-wrapper .product-img-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}


.product-wrapper .product-img-wrap.last {
    margin-top: 24px;
}

.product-wrapper .product-img-wrap.first {
    margin-top: 64px;
}

.product-wrapper .product-card.mt-96 {
    margin-top: 96px;
}

.product-wrapper .bg {
    position: absolute;
    left: 0;
    bottom: 64px;
    width: 100%;
    height: 600px;
    background-image: url(https://static.shokz.co.kr/resource/2026/05/21/bg_6a0eb99f41f90.webp);
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(55px);
}

.product-wrapper.reverse {
    flex-direction: row-reverse;
}

.product-wrapper .product-card.gift .product-btn {
    margin-bottom: 0;
}

.product-wrapper .product-text-1 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #404040;
    text-align: center;

}

.product-wrapper .product-text-2 {
    font-size: 18px;
    color: #0a0a0a;
    line-height: 1.4;
    text-align: center;
    margin: 16px 0;
}

/* disscount */
.disscount-wrapper {
    margin-top: 96px;
}

.disscount-wrapper .disscount-title {
    margin-bottom: 48px;
}

.disscount-wrapper .disscount-content {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 24px 16px;
    border-radius: 12px;
    background: linear-gradient(94deg, #FFF -56.6%, #F0F0F0 109.49%);
}

.disscount-wrapper .disscount-left-img {
    width: 343px;
    height: 215px;
}

.disscount-wrapper .disscount-box {
    display: flex;
    align-items: center;
    gap: 54px;
}

.disscount-wrapper .disscount-item {
    position: relative;
    width: 327px;
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.disscount-wrapper .disscount-item::before {
    position: absolute;
    top: 50%;
    left: 36px;
    transform: translateY(-50%);
    width: 1px;
    height: 118px;
    background-color: #9DA1B1;
    content: " ";
    z-index: 1;
}

.disscount-wrapper .disscount-item::after {
    position: absolute;
    top: 50%;
    right: 36px;
    transform: translateY(-50%);
    width: 1px;
    height: 118px;
    background-color: #9DA1B1;
    content: " ";
    z-index: 1;
}


.disscount-wrapper .disscount-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    object-fit: cover;
}

.disscount-wrapper .disscount-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.disscount-wrapper .disscount-point-img {
    width: 72px;
    height: 53px;
    margin-bottom: 2px;
}

.disscount-wrapper .disscount-text {
    color: #0A0A0A;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.disscount-wrapper .disscount-point {
    display: inline-flex;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    background: linear-gradient(96deg, #70331C 33.67%, #FFB688 131.31%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.disscount-wrapper .disscount-btn {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    color: #fff;
    background-color: #0A0A0A;
}

.disscount-wrapper .disscount-btn.grey {
    background-color: #a3a3a3;
}

.disscount-wrapper .disscount-con {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* privacy */
.privacy-wrapper {
    padding: 80px 16px;
    background: #fff;
}

.privacy-title {
    color: #3B3C44;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 44px;
}

.privacy-content {
    color: #737373;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.privacy-group {
    margin-bottom: 28px;
}

.privacy-group:last-child {
    margin-bottom: 0;
}

.privacy-subtitle {
    color: #404040;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

.privacy-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.privacy-list li {
    position: relative;
    padding-left: 13px;
}

.privacy-list li::before {
    position: absolute;
    top: 10px;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #737373;
    content: " ";
}

.privacy-list strong {
    color: #0a0a0a;
    font-weight: 400;
}

/* point dialog */
body.point-dialog-open {
    overflow: hidden;
}

.point-dialog-overlay,
.prize-dialog-overlay,
.coupon-dialog-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.7);
    z-index: 30000;
}

.point-dialog-overlay.is-active,
.prize-dialog-overlay.is-active,
.coupon-dialog-overlay.is-active {
    display: flex;
}

.point-dialog {
    position: relative;
    width: min(716px, 100%);
    height: 440px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(70deg, #FDFDFD -38.31%, #F1F1F1 70.91%), linear-gradient(70deg, #DCCABF -38.31%, #F8EEE4 70.91%);
}

.point-dialog::before {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(59deg, rgba(220, 202, 191, 0.22) 38.31%, rgba(248, 238, 228, 0.22) 70.91%); */
    content: " ";
}

.point-dialog-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.point-dialog-close::before,
.point-dialog-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: #9A9A9A;
    content: " ";
}

.point-dialog-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.point-dialog-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.point-dialog-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.point-dialog-title {
    color: #3B3C44;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
}

.point-dialog-btn {
    width: 209px;
    height: 48px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}

.prize-dialog {
    position: relative;
    width: min(716px, 100%);
    height: 440px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(59deg, #FDFDFD 38.31%, #F1F1F1 70.91%);
}

.prize-dialog::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(59deg, rgba(220, 202, 191, 0.22) 38.31%, rgba(248, 238, 228, 0.22) 70.91%);
    content: " ";
}

.prize-dialog-top,
.prize-dialog-product,
.prize-dialog-main,
.prize-dialog-desc {
    position: relative;
    z-index: 1;
}

.prize-dialog-top {
    padding-top: 17px;
    color: #404040;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}

.prize-dialog-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
}

.prize-dialog-img {
    width: 217px;
    height: 126px;
    object-fit: contain;
}

.prize-dialog-product-name {
    margin-top: 0;
    color: #0A0A0A;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

.prize-dialog-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.prize-dialog-title {
    color: #3B3C44;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
}

.prize-dialog-btn {
    width: 125px;
    height: 36px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}

.prize-dialog-desc {
    margin-top: 32px;
    color: #737373;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.prize-dialog-desc br {
    display: none;
}

.prize-dialog-product {
    margin-top: 50px;
}

.coupon-dialog {
    position: relative;
    width: min(716px, 100%);
    height: 440px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(95deg, #D9DAE5 -34.93%, rgba(202, 203, 220, 0.30) 37.46%), linear-gradient(70deg, #FDFDFD -38.31%, #F1F1F1 70.91%);


}

.coupon-dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 575px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: translate(-50%, -50%);
}

.coupon-dialog-title {
    width: 100%;
    color: #3B3C44;
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    word-break: keep-all;
}

.coupon-dialog-btn {
    width: 155px;
    height: 48px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}




@media screen and (max-width: 999px) {

    .banner-wrapper {
        height: 554px;
    }

    .banner-wrapper .banner-bg {
        height: 100%;
    }

    .banner-wrapper .banner-content {
        bottom: 48px;
        transform: translate(-50%, 0);
    }

    .banner-wrapper .banner-open-date {
        text-align: center;
    }


    .banner-wrapper .banner-title {
        text-align: center;
    }

    .banner-wrapper .banner-period {
        text-align: center;
    }

    .banner-wrapper .banner-desc {
        text-align: center;
    }

    .banner-wrapper .banner-btn {
        margin: 0 auto
    }



}


@media screen and (max-width: 768px) {

    /* common */
    .pc-hide {
        display: block;
    }

    .mb-hide {
        display: none;
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .section-title br {
        display: block;
    }

    .section-desc {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .page-width {
        padding: 0 16px;
    }

    /* banner */
    .banner-wrapper .banner-open-date {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .banner-wrapper .banner-title {
        font-size: 32px;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .banner-wrapper .banner-period {
        font-size: 14px;
    }

    .banner-wrapper .banner-desc {
        font-size: 16px;
        margin: 16px 0;
    }

    .banner-wrapper .banner-btn {
        width: 148px;
    }

    /* countdown */
    .countdown-wrapper {
        height: 48px;
    }

    .countdown-wrapper .countdown-container {
        padding: 0 28px;
    }

    .countdown-wrapper .countdown-info {
        font-size: 16px;
    }

    .countdown-wrapper .countdown {
        gap: 6px;
    }

    .countdown-wrapper .countdown-card {
        font-size: 16px;
        width: 30px;
    }

    .countdown-wrapper .countdown-symbol {
        font-size: 12px;
        width: 10px;
    }


    /* nav */
    .nav-wrapper .nav-content {
        padding: 0 16px;
    }

    .nav-wrapper .nav-item {
        font-size: 16px;
    }

    .nav-wrapper .nav-item.active {
        font-size: 18px;
    }

    .nav-wrapper .pc-text {
        display: none;
    }

    .nav-wrapper .mb-text {
        display: block;
    }

    /* notify */
    .notify-wrapper .notify-container {
        padding: 48px 16px;
    }

    .notify-wrapper .notify-content {
        flex-direction: column;
        height: auto;
        box-shadow: none;
    }

    .notify-wrapper .notify-left {
        padding: 0;
        width: 100%;
        background: none;
        backdrop-filter: none;
    }

    .notify-wrapper .notify-info {
        height: 246px;
        justify-content: center;
        border-radius: 12px;
        background: linear-gradient(59deg, #D0D0D0 16.03%, #FFF 83.79%);
        box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.06), 0 0 7.007px 0 rgba(0, 0, 0, 0.05), 0 0 1.793px 0 rgba(0, 0, 0, 0.03);
    }

    .notify-wrapper .notify-text1 {
        font-size: 20px;
    }

    .notify-wrapper .notify-text1 span {
        font-size: 28px;
    }

    .notify-wrapper .notify-text2 {
        font-size: 18px;
    }

    .notify-wrapper .notify-right {
        display: none;
    }

    .notify-wrapper .notify-gift {
        padding: 0;
        justify-content: center;
        gap: 15px;
        height: 170px;
        border-radius: 12px;
        background: linear-gradient(59deg, #D0D0D0 16.03%, #FFF 83.79%);
        box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.06), 0 0 7.007px 0 rgba(0, 0, 0, 0.05), 0 0 1.793px 0 rgba(0, 0, 0, 0.03);
    }

    .notify-wrapper .notify-gift-btn {
        font-size: 14px;
        font-weight: 400;
    }

    .notify-wrapper .notify-gift-btn br {
        display: block;
    }

    .notify-wrapper .notify-gift img {
        height: 82px;
    }

    /* subscription */
    .subscription-container {
        flex-direction: column;
    }

    .subscription-container .subscription-content {
        margin-bottom: 5px;
    }

    .subscription-container .more-wrap {
        margin-right: 0;
    }

    /* event */
    .event-content {
        flex-direction: column;
        height: auto;
    }

    .event-content .event-left {
        flex-direction: row;
        gap: 10px;
    }

    .event-content .event-item {
        width: 100%;
        height: 126px;
        padding: 16px 0 0 16px;
        justify-content: flex-start;
    }

    .event-content .event-item:first-child {
        background-image: url(https://static.shokz.co.kr/resource/2026/05/20/card-1-m_6a0d73931b9f9.webp);
    }

    .event-content .event-item:last-child {
        background-image: url(https://static.shokz.co.kr/resource/2026/05/20/card-2-m_6a0d7392e8aa3.webp);
    }

    .event-content .event-btn {
        width: 74px;
        height: 24px;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .event-content .event-text {
        font-size: 16px;
        margin-bottom: 8px;

    }

    .event-content .event-desc {
        font-size: 12px;
    }

    .event-content .event-desc br {
        display: block;
    }

    .event-content .event-tag img {
        height: 37px;
    }

    .event-content .event-tag-text {
        top: 6px;
        width: 105px;
        font-size: 14px;
    }

    .event-content .event-right {
        flex: none;
        width: 100%;
        height: auto;
        padding: 41px 44px 16px 16px;
    }

    .event-content .event-bg {
        object-position: center;
    }

    .event-content .event-survey {
        width: 100%;
        max-width: none;
        gap: 12px;
    }

    .event-content .event-survey-intro {
        font-size: 12px;
    }

    .event-content .event-survey-intro span {
        font-size: 14px;
    }

    .event-content .event-survey-form {
        gap: 8px;
    }

    .event-content .event-survey-question {
        font-size: 14px;
    }

    .event-content .event-survey-submit {
        min-width: 100px;
        height: 30px;
    }

    .event-content .event-survey-agree-text {
        font-size: 10px;
    }

    .event-content .event-survey-more .bubble-content {
        left: 0;
        transform: none;
    }

    .event-content .event-survey-more .bubble-content::after {
        left: 16px;
        transform: none;
    }

    .event-footer {
        margin-top: 16px;
        font-size: 14px;
        gap: 2px;
    }

    /* product-tab */
    .product-tab-content {
        height: 60px;
        gap: 24px;
    }

    .product-tab-item {
        width: 160px;
        height: 38px;
        font-size: 16px;
    }

    /* product */
    .product-wrapper {
        padding: 60px 0 40px;
    }

    .product-wrapper .product-card {
        height: auto;
        flex-direction: column;
        margin-top: 50px;
    }

   

    .product-wrapper .product-card-left {
        flex: 0 0 396px;
        height: 396px;
    }

    .product-wrapper .product-tag img {
        height: 48px;
    }

    .product-wrapper .product-tag-text {
        top: 9px;
        left: 16px;
        font-size: 16px;
    }

    .product-wrapper .product-footer {
        left: 16px;
        right: 16px;
        bottom: 12px;
        width: auto;
        height: 102px;

    }

    .product-img-item.reverse{
        flex-direction: row-reverse;
    }

     .product-wrapper .product-card.reverse{
        flex-direction: column;
    }




    .progress-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .progress-text {
        margin-top: 5px;
    }

    .product-wrapper .product-card-right {
        width: 100%;
        background: linear-gradient(146deg, #E8E8E8 19.48%, #FFF 36.89%, #E8E8E8 80.95%);
    }

    .product-wrapper .product-img.openDots {
        width: 154px;
        height: 120px;
    }

    .product-wrapper .product-btn {
        margin-bottom: 24px;
    }

    .product-wrapper .product-desc {
        font-size: 14px;
    }

    .product-wrapper .product-card-right {
        height: 394px;
    }

    .product-wrapper .product-img-wrap {
        flex-direction: column;
        gap: 16px;
    }

    .product-wrapper .product-img-wrap.last {
        flex-direction: column-reverse;
        margin-top: 16px;
    }

    .product-wrapper .product-img-group {
        gap: 16px;
    }

    .product-wrapper .product-img-item {
        gap: 16px;
    }

    .product-wrapper .bg {
        background-image: url(https://static.shokz.co.kr/resource/2026/05/21/bg-m_6a0ee058dd961.webp);
        height: 796px;
        bottom: 0;
    }

    .product-wrapper .product-img-wrap.first {
        margin-top: 48px;
    }

    .product-wrapper .product-card.mt-96 {
        margin-top: 64px;
    }

    .product-wrapper .product-text-1 {
        font-size: 20px;
        margin-top: -10px;
    }

    .product-wrapper .product-text-2 {
        font-size: 16px;
        margin: 12px 0;
    }




    /* disscount */
    .disscount-wrapper {
        margin-top: 40px;
    }

    .disscount-wrapper .disscount-content {
        flex-direction: column-reverse;
        gap: 32px;
    }

    .disscount-wrapper .disscount-box {
        flex-direction: column;
        gap: 32px;
    }

    .disscount-wrapper .disscount-item {
        width: 290px;
        height: 114px;
    }

    .disscount-wrapper .disscount-left-img {
        width: 243px;
        height: 152px;
    }

    .disscount-wrapper .disscount-info {
        flex-direction: row;
        justify-content: space-between;
    }

    .disscount-wrapper .disscount-con {
        align-items: flex-end;
        width: 140px;
    }

    .disscount-wrapper .disscount-point {
        font-size: 18px;
    }

    .disscount-wrapper .disscount-btn {
        width: 72px;
        height: 32px;
        font-size: 14px;
        font-weight: 400;
    }

    .disscount-wrapper .disscount-item::before {
        height: 91px;
        left: 30px;

    }

    .disscount-wrapper .disscount-item::after {
        height: 91px;
        right: 30px;
    }

    .disscount-wrapper .disscount-title {
        margin-bottom: 32px;
    }

    /* privacy */
    .privacy-wrapper {
        padding: 80px 0px 32px;
    }

    .privacy-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .privacy-content {
        font-size: 16px;
    }

    .privacy-group {
        margin-bottom: 16px;
    }

    .privacy-subtitle {
        font-size: 16px;
    }

    .privacy-list li {
        padding-left: 11px;
        text-align: justify;
    }

    /* point dialog */
    .point-dialog-overlay,
    .coupon-dialog-overlay {
        padding: 16px;
    }

    .point-dialog {
        height: 400px;
    }

    .point-dialog-close {
        width: 56px;
        height: 56px;
    }

    .point-dialog-close::before,
    .point-dialog-close::after {
        width: 20px;
        height: 2px;
    }

    .point-dialog-content {
        gap: 24px;
    }

    .point-dialog-title {
        font-size: 20px;
    }

    .point-dialog-btn {
        font-size: 16px;
    }

    .prize-dialog-overlay {
        padding: 16px;
    }

    .prize-dialog {
        height: 400px;
    }

    .prize-dialog-top {
        font-size: 14px;
    }

    .prize-dialog-product {
        margin-top: 30px;
    }

    .prize-dialog-img {
        /* width: 170px;
        height: 99px; */
    }

    .prize-dialog-main {
        gap: 16px;
    }

    .prize-dialog-title {
        font-size: 22px;
    }

    .prize-dialog-desc {
        font-size: 14px;
        margin-top: 24px;
    }

    .prize-dialog-desc br {
        display: block;
    }

    .coupon-dialog {
        width: min(343px, 100%);
        height: 393px;
        background: linear-gradient(95deg, #D9DAE5 -34.93%, rgba(202, 203, 220, 0.30) 37.46%), linear-gradient(70deg, #FDFDFD -38.31%, #F1F1F1 70.91%);
    }

    .coupon-dialog-content {
        width: 305px;
        gap: 24px;
    }

    .coupon-dialog-title {
        font-size: 20px;
        line-height: 1.4;
    }

    .coupon-dialog-message {
        width: 263px;
    }

    .coupon-dialog-btn {
        width: 135px;
        font-size: 16px;
    }



}



@media screen and (max-width: 370px) {
    .notify-wrapper .notify-gift {
        gap: 10px;
    }

    .section-2 .section-desc {
        margin: 0 -6px 32px
    }

    .event-content .event-item {
        padding: 12px 0 0 12px;
    }
}




















/* 气泡 */

/* --- 基础容器 --- */
.bubble-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* 遮罩层：默认隐藏 */
.bubble-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1998;
}

/* 气泡内容主体：默认形态 (PC气泡) */
.bubble-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 262px;
    /* 匹配你代码中的宽度 */
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 6px;
    color: #737373;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: none;
    /* 默认隐藏 */
}

.bubble-content.w250 {
    width: 256px;
    text-align: center;
}

.as-modal .bubble-content {
    padding: 24px 18px;
    max-width: 485px;
}

.bubble-text {
    color: #0A0A0A;
    font-size: 14px;
    line-height: 1.3;
}

.bubble-text br {
    display: none;
}

.bubble-desc {
    color: #737373;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.bubble-desc a {
    color: #737373;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration-line: underline;
}

.pos-bottom .bubble-content.footer {
    top: calc(100% + (-5px));
}

.pos-bottom .bubble-content.max-width {
    max-width: 413px;
}


/* 列表样式适配 */
.bubble-content .dot {
    position: relative;
    text-align: justify;
    word-break: break-all;
    font-size: 14px;
    /* 稍微调小一点适配屏幕 */
    color: #737373;
    line-height: 1.4;
    padding-left: 15px;
    list-style: none;
}

.bubble-content .dot::before {
    position: absolute;
    width: 5px;
    height: 5px;
    left: 0;
    top: 8px;
    border-radius: 50%;
    background: #737373;
    content: " ";
}

/* 尖角逻辑 */
.bubble-content::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
}

/* 关闭按钮：PC默认不显示 */
.close-btn {
    display: none;
}

/* --- PC端 专属逻辑 (隔离 hover) --- */
@media (min-width: 769px) {

    /* 仅在宽屏下允许悬浮触发 */
    .bubble-wrapper.hover-trigger:not(.bubble-hide):hover .bubble-content {
        display: block;
    }
}

/* --- 通用激活逻辑 (用于点击) --- */
.bubble-wrapper.is-active .bubble-content {
    display: block;
}

/* 方向控制 */
.pos-top .bubble-content {
    bottom: calc(100% + 10px);
}

.pos-top .bubble-content::after {
    top: 100%;
    border-color: #fff transparent transparent transparent;
}

.pos-bottom .bubble-content {
    top: calc(100% + 10px);
}

.pos-bottom .bubble-content::after {
    bottom: 100%;
    border-color: transparent transparent #fff transparent;
}

/* --- 移动端核心：强制变弹窗 --- */
@media (max-width: 768px) {

    body.bubble-modal-open .nav-wrapper,
    body.bubble-modal-open .product-tab {
        z-index: 1;
    }

    body.bubble-modal-open .notify-wrapper {
        position: relative;
        z-index: 20000;
    }

    /* 强制重置定位 */
    .bubble-wrapper.as-modal.is-active .bubble-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;

        display: block !important;
        width: 90% !important;
        max-width: 340px !important;

        /* 针对长列表的处理 */
        max-height: 75vh !important;
        overflow-y: auto !important;

        z-index: 20001 !important;
        padding: 40px 18px 24px !important;
        /* 顶部留出位置给关闭按钮 */
    }

    /* 显示遮罩 */
    .bubble-wrapper.as-modal.is-active .bubble-overlay {
        display: block !important;
        z-index: 20000 !important;
    }

    /* 隐藏小尖角 */
    .bubble-wrapper.as-modal.is-active .bubble-content::after {
        display: none !important;
    }

    /* 弹出关闭按钮 */
    .bubble-wrapper.as-modal.is-active .close-btn {
        display: block !important;
        position: absolute !important;
        top: 10px;
        right: 15px;
        font-size: 28px;
        color: #999;
        cursor: pointer;
        line-height: 1;
    }

    .bubble-text {
        font-size: 12px;
    }

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

    .bubble-text br {
        display: block;
    }

    .mo-left {
        transform: translateX(-10%);
    }

    .bubble-content.mo-left::after {
        left: 10%;
    }

    .bubble-text.font14 {
        font-size: 14px;
    }

    .bubble-desc {
        font-size: 12px;
        margin-top: 5px;
    }

    .bubble-content.m-r {
        left: 0;
        transform: translateX(-74%);
    }

    .bubble-content.m-r::after {
        left: 86%;
    }


}