body {
    padding: 0 !important; /*解決在windows上點擊dialog 會移動的問題*/
}

#alertModal {
    top: 50%;
    translate: 0% -35%;
    padding: 0 !important; /*解決在windows上點擊dialog 會移動的問題*/

    @media (max-width: 1220px) {
        top: 50%;
        translate: 0% -40%;
        
    }
}

.alert-modal {
    max-width: 795px !important;
    min-width: 728px !important;

    box-shadow: 0 0 16px 0 rgba(12, 14, 31, 0.08);

    @media (max-width: 1220px) {
        width: 100% !important;
        max-width: 558px !important;
        min-width: 358px !important;
        margin: 0 auto !important;
    }

    @media (max-width: 600px) {
        padding: 0 16px;
    }
}

.alert-modal .modal-header {
    display: flex;
    padding: 24px;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;

    border-bottom: #d9dbdc 1px solid;
}

.alert-modal .modal-content {
    border-radius: 12px;
    border: none;
}

.alert-modal .modal-title {
    color: #0c0e1f;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px; /* 120% */
    margin: 0;
}

.alert-modal-icon {
    width: 24px;
    height: 24px;
}

.alert-modal .modal-body {
    padding: 0;
}

.alert-modal .modal-footer {
    padding: 24px;
    gap: 8px;
    border-top: #d9dbdc 1px solid;
    width: 100%;

    @media (max-width:1220px) {
        padding: 16px 20px;
        gap: 12px;
    }
}

.alert-notice-list {
    width: 100%;
    height: 320px;

    padding: 24px 24px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: auto;

    @media (max-width: 1220px) {
        height: 435px;
        gap: 16px;
    }
}

.alert-notice-list::-webkit-scrollbar {
    background-color: inherit;
    width: 4px;
}

.alert-notice-list::-webkit-scrollbar-thumb {
    background-color: #D9DBDC;
    border-radius: 12px;
}

.alert-notice-page {
    height: 310px;
    display: flex;
    flex-direction: column;

    @media (max-width: 1220px) {
        width: 100%;
        height: 415px;
    }
}

.alert-notice-page-swiper {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static !important;

    @media (max-width: 1220px) {
        height: auto !important;
        
    }
}

.alert-notice-page-swiper .swiper-slide {
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 8px;

    color: #0C0E1F;

    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */

    padding: 24px 32px 24px 24px;

    @media (max-width:1220px) {
        padding: 16px;
    }
}

.alert-notice-page-swiper .alert-content p,
.alert-notice-page-swiper .alert-content span,
.alert-notice-page-swiper .alert-content strong { 
    margin: 0;
    color: #0C0E1F;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    word-break: break-all;
}

.alert-date {
    color: #494a57;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px; /* 150% */

    @media (max-width:1220px) {
        margin-bottom: -4px;
    }
}

.alert-title {
    color: #0c0e1f;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px; /* 122.222% */
    margin: 0;
}

.ad-with-notice-container {
    display: flex;
    gap: 24px;

    @media (max-width: 1220px) {
        flex-direction: column;
        gap: 16px;
    }
}

.ad-block {
    width: 240px;
    @media (max-width: 1220px) {
        width: 100%;
    }
}

.ad-swiper {
    width: 240px !important;
    height: 188px !important;
}

.ad-swiper .swiper-slide {
    height: 160px;
    border-radius: 12px;
}

.ad-swiper .swiper-slide img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
}


.ad-img-pc {
    display: block;

    @media (max-width: 1220px) {
        display: none;
    }
}

.ad-img-mob {
    display: none;

    @media (max-width: 1220px) {
        display: block;
    }
}

.ad-swiper-pagination {
    position: absolute;
    bottom: 0px !important;
    left: 50% !important;
    translate: -50% 0;
    width: auto !important;
    z-index: 5;
}

.ad-swiper-pagination .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    flex-shrink: 0;
    margin: 0 6px !important;
    border-radius: 3px !important;
    background: #aeafb4 !important;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ad-swiper-pagination .swiper-pagination-bullet-active {
    width: 12px !important;
    background: #0093c1 !important;
}

.notice-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    max-height: 190px;

    @media (max-width: 1220px) {
        gap: 12px;
        max-height: 114px;
    }
}

.notice-block::-webkit-scrollbar {
    background-color: inherit;
    width: 4px;
}

.notice-block::-webkit-scrollbar-thumb {
    background-color: #D9DBDC;
    border-radius: 12px;
}

.none-notice-block {
    width: 100%;
    max-width: 483px;
    height: 160px;
    border-radius: 12px;
    opacity: 0.5;
    background: #eef0f0;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 1220px) {
        height: 115px;
        max-width: none;
    }
}

.none-notice-text {
    color: #494a57;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px; /* 122.222% */
    letter-spacing: 38px;
    word-break: break-all;
}

.none-notice-text-en {
    letter-spacing: 0px;
} 
.notice-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notice-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

.notice-text {
    width: 385px;
    color: #494a57;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    white-space: nowrap;

    overflow: hidden;
    display: inline-block;
    -webkit-line-clamp: 1; /* 限制顯示的行數為 1 行 */
    -webkit-box-orient: vertical; /* 垂直方向排列 */
    text-overflow: ellipsis;

    @media (max-width: 1220px) {
        width: 100%;
    }
}

.show-more {
    min-width: 70px;
    color: #0093c1 !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
}

#tip-according-heading {
    border-radius: 12px;
    background: #f4fbff;
    display: flex;
    padding: 16px;
    gap: 8px;
    outline: none;
    border: none;
}

.tip-detail {
    overflow: hidden;
    display: -webkit-box; /* 使用 flexbox 模擬多行文本 */
    -webkit-line-clamp: 1; /* 限制顯示的行數為 1 行 */
    -webkit-box-orient: vertical; /* 垂直方向排列 */
    text-overflow: ellipsis; /* 超出部分顯示省略號 */

    text-align: start;

    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #0c0e1f;

    max-height: 22px; /* 初始高度，對應 1 行 */
    transition: max-height 0.5s ease; /* 添加高度過渡效果 */
}

.tip-detail-show {
    -webkit-line-clamp: 2; /* 限制顯示的行數為 2 行 */
    max-height: 44px; /* 顯示 2 行的高度 */

    @media (max-width: 1220px) {
        -webkit-line-clamp:none; /* 手機版不限制行數 */
        max-height: 100%; /* 手機版不限制高度 */
    }
}

.tip-detail-show-en {
    -webkit-line-clamp: 3; /* 限制顯示的行數為 3 行 */
    max-height: 66px; /* 顯示 3 行的高度 */

    @media (max-width: 1220px) {
        -webkit-line-clamp:none; /* 手機版不限制行數 */
        max-height: 100%; /* 手機版不限制高度 */
    }
}

.info-icon {
    width: 20px;
    height: 20px;
}

.chevron-icon {
    width: 12px;
    height: 12px;

    transition: transform 0.5s ease; /* 添加平滑過渡效果 */
    margin-top: 5px;
}

.chevron-icon.rotate {
    transform: rotate(180deg);
}

.modal-btn {
    padding: 8px 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; /* 150% */
    border-radius:  12px;
    margin: 0 !important;
    outline: none !important;
    min-width: 68px;
    min-height: 40px;

    @media (max-width:1220px) {
        padding: 8px 12px;
        min-width: 64px;
    }
}

.modal-outline-btn {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 147, 193);
    border: 1.5px solid rgb(0, 147, 193);
    outline: none !important;
}

.alert-notice-page-swiper-scrollbar > .swiper-scrollbar-drag{
    background:#D9DBDC !important;
    border-radius: 12px;
}

.alert-notice-page-swiper-scrollbar.swiper-scrollbar {
    background: inherit !important;
}