/* WordPress 登入表單專用樣式 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/* 避免與 WordPress 樣式衝突，所有樣式都加上專用前綴 */
.cmm-login-wrapper {
    font-family: "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.5em !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cmm-login-wrapper * {
    box-sizing: border-box;
}

.cmm-login-wrapper .main_wrap {
    max-width: 1000px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 20px !important;
}

.cmm-login-wrapper .btn_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmm-login-wrapper .btn_wrap.flex .btn {
    flex: 1;
}

.cmm-login-wrapper .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 9px 10px 11px 10px;
    line-height: 1.3em;
    background: #C39F57;
    border: 1px solid #C39F57;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.cmm-login-wrapper .btn.grey_dk {
    background: #595959;
    border-color: #595959;
}

.cmm-login-wrapper .btn:hover {
    background: #f00;
    border-color: #f00;
    color: #fff;
}

div.cmm-login-wrapper .page_title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    color: #C39F57 !important;
    margin-bottom: 15px !important;
}

/* 超高優先級樣式 - 針對具體結構 */
div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_4 div.group.wrap div.item_wrap div.item.item_white div.page_title h1 {
    color: #C39F57 !important;
}

div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_4 div.group.wrap div.item_wrap div.item.item_white div.page_title h1 span {
    color: #C39F57 !important;
}

div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_4 div.group.wrap div.item_wrap a.item.item_bwn div.text h3 {
    color: #fff !important;
}

div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_4 div.group.wrap div.item_wrap a.item.item_bwn div.text p {
    color: #fff !important;
}

/* 為 member_join_5 (運彩會員資料補登) 加入同樣的樣式 */
div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_5 div.group.wrap div.item_wrap div.item.item_white div.page_title h1 {
    color: #C39F57 !important;
}

div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_5 div.group.wrap div.item_wrap div.item.item_white div.page_title h1 span {
    color: #C39F57 !important;
}

div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_5 div.group.wrap div.item_wrap a.item.item_bwn div.text h3 {
    color: #fff !important;
}

div.cmm-login-wrapper div.main_wrap.member_join.member_join_wide.member_join_5 div.group.wrap div.item_wrap a.item.item_bwn div.text p {
    color: #fff !important;
}

/* 新的自定義標籤樣式 - 不會被 WordPress 主題覆蓋 */
.cmm-login-wrapper .main-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 900;
    color: #C39F57 !important;
    margin: 0;
    line-height: 1.2em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.cmm-login-wrapper .main-title img {
    height: 44px;
    transform: translateY(2px);
    margin-right: 5px;
}

.cmm-login-wrapper .main-title span {
    color: #C39F57 !important;
    font-weight: 900;
    font-size: inherit;
}

.cmm-login-wrapper .title-text {
    font-size: 20px;
    font-weight: 900;
    color: #fff !important;
    margin-bottom: 10px;
    line-height: 1.3em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.cmm-login-wrapper .item_bwn .title-text {
    color: #fff !important;
}

.cmm-login-wrapper .item_white .main-title {
    color: #C39F57 !important;
}

.cmm-login-wrapper .item_white .main-title span {
    color: #C39F57 !important;
}

/* Member Join 特定樣式 */
div.cmm-login-wrapper .member_join .page_title {
    flex-direction: column !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

div.cmm-login-wrapper .member_join .page_title .main-title {
    font-weight: bold !important;
    margin: 0 !important;
    color: #C39F57 !important;
}

.cmm-login-wrapper .member_join .group {
    max-width: 600px;
}

.cmm-login-wrapper .wrap {
    width: 100%;
    min-height: 500px;
}

.cmm-login-wrapper .member_join .item_wrap {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cmm-login-wrapper .member_join_wide .item_wrap {
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
}

.cmm-login-wrapper .member_join .item_wrap a.item:hover {
    transform: scale(1.05);
}

.cmm-login-wrapper .member_join .item_wrap .item {
    width: 47%;
    max-width: 300px;
    padding: 30px 15px;
    margin: 0 1.5%;
    border-radius: 25px;
    overflow: hidden;
    text-align: center;
    background: #fff;
    border: 1px solid #C39F57;
    text-decoration: none;
    color: inherit;
}

/* Member Join Wide 覆寫基本設定 */
.cmm-login-wrapper .member_join_wide .item_wrap .item {
    margin: 0 1.5%;
}

div.cmm-login-wrapper .member_join .item_wrap .item.item_bwn {
    background: linear-gradient(to bottom, #bf9f62, #a2864e) !important;
    color: #fff !important;
}

.cmm-login-wrapper .member_join .item_wrap .item.item_bwn .hand {
    width: 100px;
}

.cmm-login-wrapper .member_join .item_wrap .item.item_bwn .logo {
    width: 120px;
}

div.cmm-login-wrapper .member_join .item_wrap .item.item_white .text .title-text {
    color: #C39F57 !important;
}

.cmm-login-wrapper .member_join .item_wrap .item .pic {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    min-height: 130px;
}

.cmm-login-wrapper .member_join .item_wrap .item .pic img {
    margin: 0 5px;
}

.cmm-login-wrapper .member_join .item_wrap .item .text h3, 
.cmm-login-wrapper .member_join .item_wrap .item .text p {
    line-height: 1.3em;
    margin: 0;
}

.cmm-login-wrapper .member_join .item_wrap .item .text h3 {
    margin-bottom: 10px;
}

.cmm-login-wrapper .member_join .item_wrap .item .text p {
    font-size: 16px;
}

.cmm-login-wrapper .member_join .btn_wrap {
    margin-bottom: 30px;
}

/* Member Join Wide 樣式 */
.cmm-login-wrapper .member_join_wide .page_title h1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmm-login-wrapper .member_join_wide .page_title h1 img {
    height: 44px;
    transform: translateY(2px);
    margin-right: 5px;
}

.cmm-login-wrapper .member_join_wide .form .box {
    max-width: 640px;
    margin: 0 auto;
}

.cmm-login-wrapper .member_join_wide .form .form_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cmm-login-wrapper .member_join_wide .form .form_item.justify_center {
    justify-content: center;
    gap: 10px;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass p {
    position: relative;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass input {
    padding-right: 50px;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass a {
    opacity: 0.5;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass a.active {
    opacity: 1;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass a img {
    width: 20px;
}

.cmm-login-wrapper .member_join_wide .form .form_item > span {
    width: 110px;
    text-align: right;
    line-height: 1.2em;
}

.cmm-login-wrapper .member_join_wide .form .form_item > span i {
    font-style: normal;
    color: #f00;
}

.cmm-login-wrapper .member_join_wide .form .form_item > span .en {
    width: 100%;
    font-size: 14px;
    letter-spacing: 0;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass {
    flex-wrap: wrap !important;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass > span {
    width: 110px !important;
    flex-shrink: 0 !important;
}

.cmm-login-wrapper .member_join_wide .form .form_item.pass p {
    width: calc(100% - 130px) !important;
    margin: 0 !important;
}

.cmm-login-wrapper .password-hint {
    width: 100% !important;
    flex-basis: 100% !important;
    order: 10 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: right !important;
    margin-top: 5px !important;
}

.cmm-login-wrapper .member_join_wide .form .form_item p {
    width: calc(100% - 130px);
    margin: 0;
}

.cmm-login-wrapper .member_join_wide .form .form_item input[type=text], 
.cmm-login-wrapper .member_join_wide .form .form_item input[type=password] {
    width: 100%;
    height: 40px;
    padding: 0 5px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #999;
    font-size: 16px;
}

.cmm-login-wrapper .member_join_wide .form .form_item input[type=text]::-webkit-input-placeholder,
.cmm-login-wrapper .member_join_wide .form .form_item input[type=password]::-webkit-input-placeholder {
    font-size: 15px;
}

.cmm-login-wrapper .member_join_wide .form .fn_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cmm-login-wrapper .member_join_wide .form .fn_btn a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 20px;
    font-size: 16px;
    text-decoration: none;
    color: inherit;
}

.cmm-login-wrapper .member_join_wide .form .fn_btn a:last-child {
    margin-right: 0;
}

.cmm-login-wrapper .member_join_wide .form .fn_btn a img {
    height: 20px;
    margin-right: 5px;
}

.cmm-login-wrapper .member_join_wide .form .btn {
    border-radius: 10px;
}

.cmm-login-wrapper .member_join_wide .group {
    max-width: 1200px;
}

.cmm-login-wrapper .member_join_wide .item.item_bwn {
    width: 30% !important;
    max-width: 300px !important;
    min-width: 260px !important;
    flex: 0 0 auto !important;
}

/* 手機版強制覆蓋 - 更高優先級 */
@media screen and (max-width: 580px) {
    body .cmm-login-wrapper .member_join_wide .item.item_bwn {
        width: 90% !important;
        max-width: none !important;
        min-width: auto !important;
        flex: none !important;
    }

    .cmm-login-wrapper .password-hint {
        width: 100% !important;
        flex-basis: 100% !important;
        order: 10 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
        margin-top: 5px !important;
    }
}

.cmm-login-wrapper .member_join_wide .item.item_white {
    width: 60% !important;
    max-width: 800px !important;
    border-color: #fff !important;
    min-height: 400px !important;
    padding: 40px 30px !important;
    flex: 1 1 auto !important;
}

.cmm-login-wrapper .member_join_wide .page_title {
    margin-bottom: 30px;
}

.cmm-login-wrapper .member_join_wide .form .box {
    max-width: 500px;
}

.cmm-login-wrapper .member_join_wide .btn_wrap {
    padding-top: 25px;
    margin-bottom: 0;
}

.cmm-login-wrapper .member_join_wide .btn_wrap .btn {
    font-size: 16px;
}

.cmm-login-wrapper .member_join_wide .btn_wrap .btn_1 {
    min-width: 260px;
    margin-right: 15px;
}

/* 響應式設計 */
@media screen and (max-width: 950px) {
    .cmm-login-wrapper .member_join_wide .item_wrap {
        justify-content: space-between;
    }
    .cmm-login-wrapper .member_join_wide .item_wrap .item {
        margin: 0;
    }
    .cmm-login-wrapper .member_join_wide .item.item_bwn {
        min-width: 260px;
    }
    .cmm-login-wrapper .member_join_wide .item.item_white {
        width: calc(100% - 280px);
    }
}

@media screen and (max-width: 800px) {
    .cmm-login-wrapper .member_join_wide .btn_wrap .btn_1 {
        min-width: 220px;
    }
}

@media screen and (max-width: 700px) {
    .cmm-login-wrapper .member_join_wide .item_wrap {
        flex-direction: column;
        max-width: 500px;
        margin: 0 auto;
    }
    .cmm-login-wrapper .member_join_wide .item {
        width: 100% !important;
        margin: 0;
    }
    .cmm-login-wrapper .member_join_wide .item.item_white {
        order: 1;
        margin: 0 auto 25px auto;
    }
    .cmm-login-wrapper .member_join_wide .item.item_bwn {
        order: 2;
        width: auto !important;
        max-width: 350px;
        min-width: 300px;
        margin: 0 auto 25px auto;
    }
}

@media screen and (max-width: 580px) {
    .cmm-login-wrapper .member_join .item_wrap {
        flex-direction: column;
    }
    .cmm-login-wrapper .member_join .item_wrap .item {
        width: 100%;
        max-width: none;
        margin: 0;
        margin-bottom: 20px;
    }

    .cmm-login-wrapper .member_join_wide .item.item_bwn {
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
        margin: 20px auto 25px auto !important;
        flex: none !important;
    }

    .cmm-login-wrapper .member_join .item_wrap .item:last-child {
        margin-bottom: 0;
    }
    .cmm-login-wrapper .member_join_wide .form .form_item {
        align-items: flex-start;
        flex-direction: column;
    }
    .cmm-login-wrapper .member_join_wide .form .form_item > span, 
    .cmm-login-wrapper .member_join_wide .form .form_item p {
        width: 100% !important;
    }
    
    /* 確保輸入框在手機版中正常顯示 */
    .cmm-login-wrapper .member_join_wide .form .form_item input[type=text],
    .cmm-login-wrapper .member_join_wide .form .form_item input[type=password] {
        width: 100% !important;
        min-width: 250px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 修正手機版密碼顯示切換圖示位置 */
    .cmm-login-wrapper .member_join_wide .form .form_item.pass p {
        position: relative !important;
        display: inline-block !important;
        width: auto !important;
        min-width: 250px !important;
    }

    .cmm-login-wrapper .member_join_wide .form .form_item.pass input {
        padding-right: 50px !important;
        width: 100% !important;
    }
    
    .cmm-login-wrapper .member_join_wide .form .form_item.pass a {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }


    
    /* 針對特定ID的輸入框 */
    .cmm-login-wrapper #cmm_user_password,
    .cmm-login-wrapper #cmm_user_login {
        width: 100% !important;
        min-width: 250px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cmm-login-wrapper #cmm_sports_id
    {
        width: 100% !important;
        min-width: 195px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cmm-login-wrapper .member_join_wide .form .form_item > span {
        margin-bottom: 10px;
        text-align: left;
    }
    .cmm-login-wrapper .member_join_wide .form .form_item > span br {
        display: none;
    }
    .cmm-login-wrapper .member_join_wide .form .form_item > span .en {
        display: inline-block;
        margin-left: 5px;
    }
}

@media screen and (max-width: 420px) {
    .cmm-login-wrapper .member_join_wide .btn_wrap {
        flex-direction: column;
    }
    .cmm-login-wrapper .member_join_wide .btn_wrap .btn {
        width: 100%;
        margin: 0;
        margin-bottom: 15px;
    }
    .cmm-login-wrapper .member_join_wide .btn_wrap .btn:last-child {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 400px) {
    .cmm-login-wrapper .main-title {
        flex-direction: column;
        font-size: 40px;
    }
    .cmm-login-wrapper .main-title img {
        margin-bottom: 5px;
        margin-right: 0;
    }
}

@media screen and (max-width: 375px) {
    .cmm-login-wrapper .main-title {
        font-size: 32px;
    }
    .cmm-login-wrapper .title-text {
        font-size: 24px;
    }
}

/* Body lock 樣式 - WordPress 環境適配 */
body.lock,
html.lock {
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* 確保模態框容器有足夠的層級 */
.cmm-login-wrapper .overlay_wrap {
    z-index: 999999 !important;
}

/* WordPress 主題可能的干擾樣式覆蓋 */
body.lock,
body.lock * {
    box-sizing: border-box !important;
}

.overlay_wrap.trans {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    display: block !important;
}

/* Member Join 5 專用樣式 */
.cmm-login-wrapper .member_join_wide .form .form_item.flex {
    justify-content: flex-start !important;
}

.cmm-login-wrapper .member_join_wide .form .form_item.flex > span {
    min-width: 170px !important;
    width: 170px !important;
    text-align: left !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.cmm-login-wrapper .member_join_wide .form .form_item.flex p {
    width: calc(100% - 190px) !important;
    margin-right: 10px !important;
    flex-grow: 1 !important;
}

.cmm-login-wrapper .member_join_wide .form .bg_box {
    max-width: none;
    padding: 20px;
    margin-bottom: 20px;
    background: #f5f5f5;
    border-radius: 25px;
}

.cmm-login-wrapper .member_join_wide .form .bg_box .btn_wrap {
    margin-bottom: 0;
}

.cmm-login-wrapper .text.tl {
    text-align: left;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.5em;
}

.cmm-login-wrapper .text.tl p {
    margin-bottom: 8px;
    color: #666;
}

.cmm-login-wrapper .btn_wrap.flex_column {
    flex-direction: column;
}

.cmm-login-wrapper .btn_wrap.flex_column .btn {
    width: 100%;
    max-width: 280px;
    margin: 0;
    margin-bottom: 15px;
}

.cmm-login-wrapper .btn_wrap.flex_column .btn:last-child {
    margin-bottom: 0;
}

.cmm-login-wrapper .btn.grey {
    background: #9A9A9A;
    border-color: #9A9A9A;
}

.cmm-login-wrapper .btn_wrap.send_btn_wrap .btn {
    width: 250px;
    height: 50px;
}

/* 彈窗樣式 - 基於原始設計，WordPress 環境適配 */
.overlay_wrap {
    opacity: 0;
    visibility: hidden;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    overflow-y: auto !important;
    transform: scale(0) !important;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.overlay_wrap.trans {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.overlay_wrap.trans .overlay_content {
    opacity: 1;
}

.overlay_wrap.in_close > .overlay_close_btn {
    display: none;
}

.overlay_bg {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    opacity: 0.9 !important;
    cursor: pointer !important;
}

.overlay_content {
    opacity: 0;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    height: 100vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s !important;
    pointer-events: none !important;
    cursor: default !important;
}

.overlay_flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 20px 0;
    box-sizing: border-box;
}

.overlay_box {
    display: none;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    background: #fff !important;
    border-radius: 25px !important;
    padding: 40px !important;
    margin: 20px !important;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
    max-width: 1200px;
}

.overlay_box.trans {
    display: block !important;
}

.overlay_box.hide {
    display: none !important;
}

.overlay_close_btn {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 30;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    box-sizing: border-box;
    background: #C39F57;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.overlay_close_btn:hover {
    background-color: #a2864e;
    transform: scale(1.1);
}

.overlay_box .page_title {
    margin-bottom: 30px;
}

div.cmm-login-wrapper .overlay_box .page_title h2 {
    font-size: 24px !important;
    color: #C39F57 !important;
    text-align: center !important;
    margin: 0 !important;
}

.number_list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 30px;
}

.number_list .item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 15px;
    width: 100%;
}

.number_list .item:last-child {
    margin-bottom: 0;
}

.number_list .item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #C39F57;
    color: #fff;
    font-style: normal;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.number_list .in_box {
    flex: 1;
}

.number_list .in_box h3 {
    margin-bottom: 15px;
}

.number_list .in_box .bwn {
    color: #C39F57;
    font-weight: bold;
}

.number_list .in_box p {
    margin-bottom: 15px;
    line-height: 1.5em;
}

.number_list .in_box img {
    max-width: 100%;
    border-radius: 10px;
}

.slider_wrap {
    text-align: center;
}

.slider_wrap .slider {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.slider_wrap .slider .item {
    flex: 1;
    max-width: 200px;
    margin: 0 10px;
}

.slider_wrap .slider .item img {
    width: 100%;
    border-radius: 10px;
}

/* Slider 樣式 - 基於原始設計 */
.overlay_box .slider_wrap {
    position: relative;
    text-align: center;
}

.overlay_box .slider_wrap .slider {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    position: relative;
}

.overlay_box .slider_wrap .slider .item {
    flex: 1;
    max-width: 100%;
    margin: 0;
    text-align: center;
}

.overlay_box .slider_wrap .slider .item img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80vh;
    border-radius: 10px;
    margin: 0 auto;
}

.slider_btn_wrap {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
}

.slider_btn {
		position: absolute;
		top: 0;
		transform: translateY(-50%);
		width: 35px;
		height: 35px;
		background: #fff;
		border-radius: 50%;
		outline: none;
		cursor: pointer;
}
.slider_btn span {
		display: block;
		width: 100%;
		height: 100%;
		background: url("../images/carbon_next-filled.svg");
		background-size: 100% 100%;
}
.slider_btn.prev {
		left: 0;
		transform: translateX(-50%);
}
.slider_btn.prev span {
		transform: rotate(-180deg);
}
.slider_btn.next {
		right: 0;
		transform: translateX(50%);
}

/* 基本樣式適用於所有圖片，但不設定display */
.overlay_box .slider_wrap .slider .item img.pc-version {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 80vh;
    border-radius: 10px;
    margin: 0 auto;
    display: block !important;
}

.overlay_box .slider_wrap .slider .item img.mobile-version {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 80vh;
    border-radius: 10px;
    margin: 0 auto;
    display: none !important;
}

.overlay_box .group .page_title h2 {
    font-size: 32px !important;
    color: #C39F57 !important;
    text-align: center !important;
    margin: 0 !important;
    margin-bottom: 30px !important;
}


/* 重新覆寫 tiny-slider 的樣式 - 原始設計風格 */
.cmm-login-wrapper .overlay_box .tns-outer {
    position: relative;
}



@media screen and (max-width: 600px) {
    .overlay_box {
        padding: 20px;
        margin: 5px;
        max-width: 98vw;
        max-height: 95vh;
    }
    
    
    .number_list .item {
        flex-direction: column;
        text-align: center;
    }
    
    .number_list .item i {
        margin: 0 auto 10px auto;
    }

    .overlay_box .group .page_title h2 {
        font-size: 20px !important;
        color: #C39F57 !important;
    }
    
    .overlay_box .slider_wrap .slider .item img.pc-version {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: 80vh;
        border-radius: 10px;
        margin: 0 auto;
        display: none !important;
    }

    .overlay_box .slider_wrap .slider .item img.mobile-version {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: 80vh;
        border-radius: 10px;
        margin: 0 auto;
        display: block !important;
    }

}