/* Minification failed. Returning unminified contents. (3577,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3578,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3579,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3580,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3581,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3582,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3583,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3584,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3585,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3586,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3587,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3588,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3589,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3590,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3591,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3592,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3593,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3594,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3595,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3596,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3597,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3598,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3599,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3600,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3601,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3602,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3603,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3604,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3605,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3606,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3607,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3608,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3609,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3610,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3611,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3612,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3613,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3614,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3615,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3616,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3623,22): run-time error CSS1039: Token not allowed after unary operator: '-black-1' (3696,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-10' (3738,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-3' (3748,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3749,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-11' (3758,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-12' (3775,28): run-time error CSS1039: Token not allowed after unary operator: '-pink-3' (3797,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (3802,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-13' (3806,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-13' (3807,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-13' (3831,22): run-time error CSS1039: Token not allowed after unary operator: '-linear-gradient-2' (3835,22): run-time error CSS1039: Token not allowed after unary operator: '-linear-gradient-2' (3868,23): run-time error CSS1039: Token not allowed after unary operator: '-text-shadow' (3892,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3905,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-3' (3906,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-3' (3921,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3926,64): run-time error CSS1030: Expected identifier, found '[' (3926,69): run-time error CSS1031: Expected selector, found '=' (3926,69): run-time error CSS1025: Expected comma or open brace, found '=' (3941,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3942,22): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow' (3986,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-15' (4016,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (4026,16): run-time error CSS1039: Token not allowed after unary operator: '-black' (4030,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-3' (4034,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-8' (4038,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-8' (4042,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-4' (4100,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-2' (4106,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (4117,17): run-time error CSS1039: Token not allowed after unary operator: '-purple' (4127,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-1' (4167,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-4' (4181,17): run-time error CSS1039: Token not allowed after unary operator: '-purple' (4185,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4207,34): run-time error CSS1030: Expected identifier, found '[' (4207,39): run-time error CSS1031: Expected selector, found '=' (4207,39): run-time error CSS1025: Expected comma or open brace, found '=' (4212,34): run-time error CSS1030: Expected identifier, found '[' (4212,43): run-time error CSS1031: Expected selector, found '=' (4212,43): run-time error CSS1025: Expected comma or open brace, found '=' (4217,34): run-time error CSS1030: Expected identifier, found '[' (4217,39): run-time error CSS1031: Expected selector, found '=' (4217,39): run-time error CSS1025: Expected comma or open brace, found '=' (4222,34): run-time error CSS1030: Expected identifier, found '[' (4222,39): run-time error CSS1031: Expected selector, found '=' (4222,39): run-time error CSS1025: Expected comma or open brace, found '=' (4227,34): run-time error CSS1030: Expected identifier, found '[' (4227,39): run-time error CSS1031: Expected selector, found '=' (4227,39): run-time error CSS1025: Expected comma or open brace, found '=' (4241,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4251,16): run-time error CSS1030: Expected identifier, found '#account-info' (4251,29): run-time error CSS1031: Expected selector, found ')' (4251,29): run-time error CSS1025: Expected comma or open brace, found ')' (4264,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4271,17): run-time error CSS1039: Token not allowed after unary operator: '-green' (4285,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-3' (4305,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-5' (4328,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4350,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4402,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4452,17): run-time error CSS1039: Token not allowed after unary operator: '-pink' (4494,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-6' (4509,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-7' (4539,13): run-time error CSS1039: Token not allowed after unary operator: '-purple-7' (4563,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4576,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-8' (4710,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4731,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-9' (4746,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4824,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4877,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4929,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4973,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4984,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-6' (4990,17): run-time error CSS1039: Token not allowed after unary operator: '-gray' (5009,49): run-time error CSS1030: Expected identifier, found '.' (5009,56): run-time error CSS1031: Expected selector, found ')' (5009,56): run-time error CSS1025: Expected comma or open brace, found ')' (5027,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (5045,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5105,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-13' (5115,54): run-time error CSS1030: Expected identifier, found '.' (5115,55): run-time error CSS1030: Expected identifier, found 'mobile' (5115,61): run-time error CSS1031: Expected selector, found ')' (5115,61): run-time error CSS1025: Expected comma or open brace, found ')' (5120,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-1' (5121,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5131,31): run-time error CSS1030: Expected identifier, found '.' (5131,39): run-time error CSS1031: Expected selector, found ')' (5131,39): run-time error CSS1025: Expected comma or open brace, found ')' (5136,31): run-time error CSS1030: Expected identifier, found '.' (5136,39): run-time error CSS1031: Expected selector, found ')' (5136,39): run-time error CSS1025: Expected comma or open brace, found ')' (5142,31): run-time error CSS1030: Expected identifier, found '.' (5142,39): run-time error CSS1031: Expected selector, found ')' (5142,39): run-time error CSS1025: Expected comma or open brace, found ')' (5147,31): run-time error CSS1030: Expected identifier, found '.' (5147,39): run-time error CSS1031: Expected selector, found ')' (5147,39): run-time error CSS1025: Expected comma or open brace, found ')' (5153,31): run-time error CSS1030: Expected identifier, found '.' (5153,39): run-time error CSS1031: Expected selector, found ')' (5153,39): run-time error CSS1025: Expected comma or open brace, found ')' (5158,31): run-time error CSS1030: Expected identifier, found '.' (5158,39): run-time error CSS1031: Expected selector, found ')' (5158,39): run-time error CSS1025: Expected comma or open brace, found ')' (5167,31): run-time error CSS1030: Expected identifier, found '#checkcode-input-group' (5167,53): run-time error CSS1031: Expected selector, found ')' (5167,53): run-time error CSS1025: Expected comma or open brace, found ')' (5186,36): run-time error CSS1030: Expected identifier, found '.' (5186,46): run-time error CSS1031: Expected selector, found ')' (5186,46): run-time error CSS1025: Expected comma or open brace, found ')' (5190,36): run-time error CSS1030: Expected identifier, found '.' (5190,46): run-time error CSS1031: Expected selector, found ')' (5190,46): run-time error CSS1025: Expected comma or open brace, found ')' (5196,36): run-time error CSS1030: Expected identifier, found '.' (5196,46): run-time error CSS1031: Expected selector, found ')' (5196,46): run-time error CSS1025: Expected comma or open brace, found ')' (5202,32): run-time error CSS1030: Expected identifier, found '#btn-submit' (5202,43): run-time error CSS1031: Expected selector, found ')' (5202,43): run-time error CSS1025: Expected comma or open brace, found ')' (5228,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-14' (5248,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5304,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5396,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-6' (5406,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-o' (5437,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-17' (5441,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-16' (5442,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5483,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-3' (5484,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-3' (5500,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5508,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5548,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5560,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (5565,14): run-time error CSS1030: Expected identifier, found '#member-center' (5565,28): run-time error CSS1031: Expected selector, found ')' (5565,28): run-time error CSS1025: Expected comma or open brace, found ')' (5582,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-6' (5598,17): run-time error CSS1039: Token not allowed after unary operator: '-pink-2' (5634,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5658,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5659,23): run-time error CSS1039: Token not allowed after unary operator: '-text-shadow-1' (5727,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5733,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-4' (5758,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-o' (5778,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-16' (5782,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5788,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-17' (5805,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-o' (5815,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5831,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-18' (5848,17): run-time error CSS1039: Token not allowed after unary operator: '-pink' (5849,22): run-time error CSS1039: Token not allowed after unary operator: '-pink-o' (5873,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-13' (5924,56): run-time error CSS1030: Expected identifier, found '[' (5924,61): run-time error CSS1031: Expected selector, found '=' (5924,61): run-time error CSS1025: Expected comma or open brace, found '=' (5928,56): run-time error CSS1030: Expected identifier, found '[' (5928,61): run-time error CSS1031: Expected selector, found '=' (5928,61): run-time error CSS1025: Expected comma or open brace, found '=' (5942,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (6003,80): run-time error CSS1030: Expected identifier, found '.' (6003,88): run-time error CSS1031: Expected selector, found ')' (6003,88): run-time error CSS1025: Expected comma or open brace, found ')' (6029,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-5' (6118,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (6123,28): run-time error CSS1039: Token not allowed after unary operator: '-pink-3' (6131,17): run-time error CSS1039: Token not allowed after unary operator: '-pink-4' (6139,1): run-time error CSS1019: Unexpected token, found '}' (6142,63): run-time error CSS1030: Expected identifier, found '.' (6142,73): run-time error CSS1031: Expected selector, found ')' (6142,73): run-time error CSS1025: Expected comma or open brace, found ')' (6154,85): run-time error CSS1030: Expected identifier, found '[' (6154,94): run-time error CSS1031: Expected selector, found '=' (6154,94): run-time error CSS1025: Expected comma or open brace, found '=' (6179,38): run-time error CSS1030: Expected identifier, found '.' (6179,50): run-time error CSS1031: Expected selector, found ')' (6179,50): run-time error CSS1025: Expected comma or open brace, found ')' (6228,58): run-time error CSS1046: Expect comma, found '224' (6228,66): run-time error CSS1046: Expect comma, found '/' (6739,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (6740,8): run-time error CSS1035: Expected colon, found '{' (6742,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6743,8): run-time error CSS1035: Expected colon, found '{' */ .d-flex { display: flex; } .align-items-center { align-items: center; } .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; } .justify-content-center { justify-content: center; } .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .mb-3 { margin-bottom: 3px; } .mb-10 { margin-bottom: 10px; } /* "登入後Account-nav頁面共同設定" */ .panel { width: 100%; color: #5f5f5f; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Account/images/panel_background.jpg') repeat; border: 0; } .account-balance { cursor: pointer; } .account-balance:hover { text-decoration: underline; } /* title顏色 */ #title { height: 48px; font-weight: bold; font-size: 21px; font-family: 'Microsoft JhengHei'; text-transform: uppercase; border: none; } #title > div { margin-top: -1px; text-align: center; text-transform: uppercase; } /* #region 最新公告 */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background-color: #000; visibility: hidden; opacity: 0; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .modal-overlay.modal-show { visibility: visible; opacity: .6; } .modal-announcement { position: fixed; top: 7%; left: 50%; margin-left: -499px; width: 1000px; z-index: 10000; visibility: hidden; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .modal-announcement.modal-show { visibility: visible; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .modal-announcement > .ma-title { min-height: 38px; padding: 7px 0; color: #fff; text-align: center; word-break: break-all; background-color: #333; border-bottom: 2px solid #ccc; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .modal-announcement > .ma-title > span { display: inline-block; vertical-align: top; max-width: 670px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: bold; } .modal-announcement > .ma-title > i { float: right; margin: 2px 20px 0 0; font-size: 22px; cursor: pointer; } .modal-announcement > .ma-body > section { height: 560px; display: inline-block; vertical-align: top; } .modal-announcement .ma-sidebar { width: 27%; background-color: #fff; border-right: 1px solid #d6d6d6; overflow-y: auto; overflow-x: hidden; } .modal-announcement .ma-sidebar ul { width: 100%; } .modal-announcement .ma-sidebar li { width: 100%; height: 50px; padding: 0 12px; color: #000; line-height: 49px; border-bottom: 1px solid #ccc; cursor: pointer; } .modal-announcement .ma-sidebar li span { display: inline-block; width: 80%; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-announcement .ma-sidebar li:hover, .modal-announcement .ma-sidebar li.active { color: #fff; background-color: #333; } .modal-announcement .ma-sidebar i.fa-comment-dots { vertical-align: middle; margin-right: 10px; } .modal-announcement .ma-sidebar i.fa-chevron-right { float: right; margin-top: 19px; } .modal-announcement .ma-content { width: 73%; background-color: #fff; overflow: auto; } .modal-announcement .ma-content p { margin: 0; } .modal-announcement .ma-content img { max-width: 100%; height: auto; vertical-align: top; } .modal-announcement .ma-content ul { display: block; margin: 1em 0; padding-left: 40px; list-style: disc; } .modal-announcement .ma-content ol { display: block; margin: 1em 0; padding-left: 40px; list-style: decimal; } .modal-announcement > .ma-footer { min-height: 38px; padding: 7px 10px; background-color: #333; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .modal-announcement > .ma-footer > span { display: inline-block; vertical-align: top; max-width: 670px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 16px; } .modal-announcement > .ma-footer > .ma-noshow { float: right; margin-top: 5px; } .modal-announcement > .ma-footer > .ma-noshow span { margin: 0 5px; color: #fff; font-size: 16px; } /* 卷轴样式 */ .modal-announcement > .ma-body > section::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 3px; } .modal-announcement > .ma-body > section::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353; } .modal-announcement > .ma-body > section::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #ededed; } /* 只有单笔讯息时要更换样式 */ .modal-announcement.single-content { width: 730px; margin-left: -365px; } .modal-announcement.single-content p { margin: 0; } .modal-announcement.single-content .ma-sidebar { display: none; } .modal-announcement.single-content .ma-content { width: 100%; } .modal-announcement.single-content .ma-footer > span { max-width: 500px; } /* #endregion 最新公告 */ /* #region 頁籤公告 */ .tab-announcement-modal.modal .modal-dialog{ width:40vw; max-width:560px; } /* --- Modal 標題 --- */ .tab-announcement-modal.modal .modal-title { display: flex; justify-content: center; align-items: center; padding: 15px 25px; flex-shrink: 0; /* 防止標題被壓縮 */ background-color: #333; } .tab-announcement-modal.modal .modal-title h4 { margin: 0; font-size: 18px; font-weight: 600; color: #ffffff; } .tab-announcement-modal.modal .close-btn { position: absolute; right: 25px; font-size: 24px; color:#fff; cursor: pointer; transition: color 0.3s ease; } .tab-announcement-modal.modal .close-btn:hover { color: #ccc; /* 滑鼠懸停時變亮 */ } /* --- 列表畫面 --- */ #announcement-list-view { display: flex; flex-direction: column; } /* 頁籤 */ .tabs-container { position: relative; width: 100%; padding: 0 40px; /* 留出空間給左右箭頭 */ box-sizing: border-box; border-bottom: solid 1px #ccc; /* 底部邊框 */ } /* 修改：讓 tabs-wrap 隱藏原生捲軸 */ .tab-announcement-modal.modal .tabs-wrap { overflow: hidden; /* 關鍵：隱藏原生捲軸 */ scroll-behavior: smooth; /* 讓滾動更平滑 */ } .tab-announcement-modal.modal .tabs { display: flex; flex-wrap: nowrap; /* 關鍵：讓 flex item 不換行 */ width: max-content; /* 讓容器寬度由內容撐開 */ } .tabs-container .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; line-height: 28px; text-align: center; background-color: #fff; } .tabs-container .arrow.left { left: 5px; } .tabs-container .arrow.right { right: 5px; } .tabs-container .arrow:hover { background-color: #ccc; } .tab-announcement-modal.modal .tabs div { padding: 10px 20px 5px; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: #666; /* 頁籤文字顏色 */ border-bottom: solid 2px transparent; /* 頁籤底部的邊框 */ } .tab-announcement-modal.modal .tabs div:hover { color: #333; border-color: #333; } .tab-announcement-modal.modal .tabs div.active { color: #333; /* 頁籤文字顏色 */ border-bottom: solid 2px #333; /* 頁籤底部的邊框 */ } .tab-announcement-modal.modal .tabs div span { white-space: nowrap; /* 強制文字不換行 */ margin-top: 5px; } .tab-announcement-modal.modal .tabs div i { display: block; width: 25px; height: 25px; background-position: center; background-size: contain; background-repeat: no-repeat; } /* 公告列表 */ .announcement-list-wrap { /* 如果列表過長，可以產生滾動條 */ max-height: 500px; overflow-y: auto; padding: 16px 16px 24px 16px; } .announcement-list { list-style: none; padding: 0; margin: 0; width:100%; } .announcement-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-left: 3px solid transparent; /* 左側的指示條 */ cursor: pointer; line-height:30px; transition: all 0.3s ease; } .announcement-list li:nth-child(even) { border-radius: 8px; background-color: rgba(0, 0, 0, 0.08); /* 偶數行背景色 */ } .announcement-list li:hover { border-radius: 8px; background-color: rgba(0, 0, 0, 0.2); } .announcement-list li span.title { position: relative; } .icon-pin { position: absolute; transform: rotate(-45deg); top: 9px; left: -9px; color: #8a8a8a; } .announcement-list li span i.icon-category { display: inline-block; width: 25px; height: 25px; margin-right: 10px; margin-left:8px; background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 50%; vertical-align: middle; } .announcement-list li span.time { font-size: 14px; color: #666; /* 日期顏色稍暗 */ flex-shrink: 0; /* 防止日期換行 */ padding-left: 20px; } /* 美化滾動條 (適用於 Webkit 核心瀏覽器如 Chrome, Edge, Safari) */ .announcement-list-wrap::-webkit-scrollbar { width: 6px; } .announcement-list-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .announcement-list-wrap::-webkit-scrollbar-thumb { background: #666; border-radius: 3px; } .announcement-list-wrap::-webkit-scrollbar-thumb:hover { background: #333; } /* 自訂分頁樣式 */ .pagination-area { display: flex; -webkit-justify-content: center; justify-content: center; } .custom-pagination { display: inline-block; padding-left: 0; margin-top: 20px; border-radius: 4px; } .custom-pagination > li { display: inline; /* 水平排列 */ } .custom-pagination > li > a { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #333; /* 連結顏色 */ text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .custom-pagination > li:first-child > a { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .custom-pagination > li:last-child > a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* 滑鼠懸停效果 */ .custom-pagination > li > a:hover { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd; } /* 當前頁面的樣式 */ .custom-pagination > li.active > a, .custom-pagination > li.active > a:hover { z-index: 3; color: #fff; cursor: default; background-color: #686868; /* 當前頁面背景色 */ border-color: #686868; } /* 禁用狀態的樣式 */ .custom-pagination > li.disabled > a, .custom-pagination > li.disabled > a:hover { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; } /* 底部 */ .tab-announcement-modal.modal .footer { padding: 0 15px 15px; display: flex; align-items: center; justify-content: flex-end; font-size: 14px; } .tab-announcement-modal.modal .footer input[type="checkbox"] { margin-right: 8px; width: auto; height: auto; } /* --- 詳情畫面 --- */ #announcement-detail-view { padding: 20px 15px; } .title-container { position: relative; padding-left: 50px; /* 為圖示留出空間 */ padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ccc; } .title-container .icon-category { display: block; position: absolute; left: 0; top: 0; width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; } #announcement-detail-view h5 { font-size: 18px; color: #000; margin: 0px; } #announcement-detail-view small { color: #666; font-size:14px; } #announcement-detail-view .content { min-height: 150px; /* 確保內容區域有一定高度 */ } #announcement-detail-view .content img { display: block; max-width: 100%; margin: 0 auto; } .tab-announcement-modal.modal .btn-area { text-align: center; margin-top: 20px; } .tab-announcement-modal.modal .btn-area button { padding: 5px; cursor: pointer; width: 100%; font-size: 16px; transition: all 0.3s ease; color: #fff; border-radius: 40px; border: none; background: linear-gradient(0deg, #7b7878 3.34%, #bebcbc 95.91%); } .tab-announcement-modal.modal .btn-area button:hover { color: #000; background: #ccc; } /* #endregion 頁籤公告 */ /* #region VPN說明彈窗 */ .modal-VpnRemind { border-radius: 10px; overflow: hidden; } .modal-VpnRemind .modal-body ol { list-style-type: decimal; } .modal-VpnRemind .modal-footer .ma-noshow label{ display: flex; align-items: center; justify-content: center; margin-bottom:10px; } .modal-VpnRemind .modal-footer .ma-noshow input { width: 24px; height: 24px; padding: 0; margin: 0 4px 0 0; } /* #endregion VPN說明彈窗 */ /* #region 線上取款 */ #account-panel, #withdrawal-panel { color: #5f5f5f; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/WithdrawApplication/images/panel_background.jpg') repeat; } /* 线上取款页面 */ #account-heading, #withdrawal-heading { margin: 1px 1px; font-family: PMingLiU; font-size: 15px; font-weight: bold; text-align: left; } /* #endregion 線上取款 */ .panel-body { text-align: center; } .panel-body > form { width: 700px; margin: 0 auto; } .panel-body .control-div { position: relative; } .panel-body .control-div input { width: 100%; padding: 3px 5px; line-height: 25px; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Account/images/input_center.png') repeat-y; border: 0; } .panel-body .control-div input:focus { outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 249, 149, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 249, 149, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 249, 149, 0.6); } .panel-body .control-div .mobileCaptcha { position: absolute; right: 0; top: 1px; z-index: 1; padding: 3px 10px !important; font-size: 14px !important; } /* #region tooltip */ .tooltip { position: absolute; left: 93%; top: -2px; z-index: 1; display: inline-block; } .tooltipshowarrow_int { position: absolute; top: 5px; right: -1px; z-index: 1000; display: block; border: 8px solid; border-color: transparent #fff; border-left-width: 0; -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); } .tooltipshowarrow_out { position: absolute; top: 5px; right: 0; z-index: 999; display: block; border: 8px solid; border-left-width: 0; border-color: transparent #bbb; -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); } .tooltipshow { position: absolute; z-index: 999 !important; width: 250px; padding: 5px; background-color: #fff; border: 1px solid; border-color: #bbb #bbb #a8a8a8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.2); } /* #endregion tooltip */ /* #region inputu樣式 */ .form-control::-webkit-input-placeholder { /* WebKit browsers */ color: #878787; } .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #878787; } .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #878787; } .form-control:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #878787; } .input-block { position: relative; display: inline-block; width: 304px; } .help-block { color: #8a6d3b; } .input-block-top { position: absolute; top: -2px; left: 0; display: inline-block; width: 100%; height: 4px; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Account/images/input-top-btm.png') no-repeat 0 0; } .input-block-btm { position: absolute; bottom: -8px; left: 0; display: inline-block; height: 10px; width: 100%; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Account/images/input-top-btm.png') no-repeat 0 -4px; } /* #endregion inputu樣式 */ /* #region 按鈕樣式 */ .btn-submit { position: relative; width: 119px; height: 45px; color: #454545; font-size: 15px; font-family: PMingLiU; font-weight: bold; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Shared/images/sent_bn.png') no-repeat 0 0; border: 0; } .btn-submit:hover { color: #454545; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Shared/images/sent_bn.png') no-repeat 0 -46px; } .btn-submit[disabled]:hover { color: #999; background-position-y: 0; } /* #endregion 按鈕樣式 */ /* #region 表格樣式 */ .table { color: #000; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { line-height: 2em; } table tfoot { text-align: center; background: #eee; } /* #endregion 表格樣式 */ /* #region 使用directive: PopupDialog 弹窗的共同样式 */ #popup-dialog { display: none; padding: 0; } #popup-dialog img { width: 100%; height: auto !important; } #popup-dialog .dialog-footer { height: 30px; padding: 0 3px; font-size: 12px; font-weight: bold; line-height: 30px; border-top: 1px solid #000; } /* #endregion 使用directive: PopupDialog 弹窗的共同样式 */ /* #region 最新消息 */ ul#newsBags > li { white-space: pre-line; word-break: break-all; word-wrap: break-word; } /* #endregion 最新消息 */ /* #region 弹窗共用樣式 */ .modal.in { display: block; overflow-y: auto; } .modal.in input { width: 150px; height: 38px; margin: 0 10px; padding: 0 8px; line-height: 38px; border: 1px solid #ccc; border-radius: 3px; } .modal.in h4 { display: inline-block; } .modal.in .search-time button { position: relative; width: 120px; height: 38px; line-height: 38px; border-radius: 3px; background: #bf8a44; color: #fff; border: 0px; } .modal.in .search-time button:hover { background: #cfaf6f; } /* Table */ .modal.in table { width: 100%; margin: 20px 0; border-collapse: separate; background: #fff; border-spacing: 0; border-radius: 5px; overflow: hidden; border: 1px solid #ccc; } .modal.in table tr td { border-bottom: 1px solid #ccc; } .modal.in table tr:last-child td { border-bottom: none; } .modal.in table tr:nth-child(2n) { background: rgba(0, 0, 0, 0.1); } .modal.in table th { background: #bf8a44; color: #fff; } .modal.in table th, .modal.in table td { text-align: center; border-right: 1px solid #ccc; padding: 8px 10px; } .modal.in table th:last-child, .modal.in table td:last-child { border-right: none; } /* Color */ .modal.in .normal { color: #009c49; } .modal.in .disable { color: #c20000; } .modal.in .freeze { color: #a1a1a1; } /* Button */ .modal.in .modal-footer button { display: inline-block; width: 119px; font-size: 15px; font-weight: bolder; line-height: 35.5px; border: none; background-image: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Shared/images/sent_bn.png'); cursor: pointer; } .modal.in .modal-footer button:hover { background-position: bottom; } /* Pager */ .modal.in #pager { text-align: center; } .modal.in #pager li { display: inline-block; color: #333; background: #ddd; padding: 5px 10px; } .modal.in #pager li:hover { background: #666; color: #fff; } /* #endregion 弹窗共用樣式 */ /*#region 推薦好友Mgm */ #invite-box { position: relative; width: 1000px; left: 50%; margin-left: -500px; margin-top: 30px; padding: 30px 50px; background: #f8f8f8; border: 1px solid #ddd; } #invite-box .invite-list ul, #invite-box .invite-dividend ul, #invite-box .invite-code .invite-txt { display: block; border: 1px solid #ddd; background: #fff; border-radius: 3px; padding: 20px; margin: 20px auto; } #invite-box .invite-list ul li, #invite-box .invite-dividend ul li { width: calc(50% - 20px); display: inline-block; text-align: center; } #invite-box .invite-list ul li { width: calc(33% - 1px); text-align: center; } #invite-box .invite-list ul li + li, #invite-box .invite-dividend ul li + li { border-left: 1px solid #ddd; } #invite-box .invite-list li p:first-child { font-size: 36px; color: #ff9100; font-weight: bold; } #invite-box .invite-code { position: relative; } #invite-box .invite-code .invite-txt { width: 700px; display: inline-block; } #invite-box .invite-code .copy-btn { position: absolute; right: 0; bottom: 22px; width: 170px; display: inline-block; } #invite-box .invite-code .copy-btn li:first-child { margin-bottom: 10px; } #invite-box b { font-size: 18px; margin-left: 10px; color: #ff9100 } #invite-box h3 { color: #0588fe; } #invite-box .tip { position: relative; cursor: pointer; } #invite-box .tip .tiptxt { display: none; position: absolute; width: 300px; margin-left: 60px; top: -70px; background: rgba(0,0,0,.2); padding: 5px; border-radius: 3px; } #invite-box .tip:hover .tiptxt { display: block; } /* Icon-btn */ #invite-box .icon-btn i, #invite-box .icon-btn span, #invite-box .icon-btn:before { -webkit-transition: all .6s; -moz-transition: all .6s; transition: all .6s; } #invite-box .icon-btn { position: relative; width: 170px; height: 38px; background: #0588fe; text-align: center; line-height: 38px; overflow: hidden; -moz-border-radius: 3px; border-radius: 3px; } #invite-box .icon-btn:before { content: ''; position: absolute; width: 5px; height: 5px; top: 50%; margin-left: 83px; border-radius: 60px; background: #ff9100; opacity: 0; display: block; } #invite-box .icon-btn:hover:before { width: 170px; height: 170px; top: -170%; margin-left: 0; opacity: 1; } #invite-box .icon-btn a { position: absolute; color: #fff; line-height: 38px; text-decoration: none; width: 100%; height: 100%; display: block; z-index: 2; } #invite-box .icon-btn i { position: absolute; font-size: 20px; top: 8px; margin-left: 10px; opacity: 0; } #invite-box .icon-btn:hover i { opacity: 1; margin-left: 0; } #invite-box .icon-btn span { margin-left: 0; } #invite-box .icon-btn:hover span { margin-left: 22px; } #invite-box .rec-btn { cursor: pointer; } #invite-box .rec-btn:hover { text-decoration: underline; } /*#endregion 推薦好友Mgm */ /* 弹窗樣式 */ .modal.in { display: block; overflow-y: auto; } .modal-body.s-modal { padding: 30px 100px; } .modal.in input { width: 150px; height: 38px; margin: 0 10px; padding: 0 8px; line-height: 38px; border: 1px solid #ccc; border-radius: 3px; } .modal.in h4 { display: inline-block; } .modal.in .search-time button { position: relative; width: 120px; height: 38px; line-height: 38px; border-radius: 3px; background: #bf8a44; color: #fff; border: 0px; } .modal.in .search-time button:hover { background: #cfaf6f; } #captcha-popup section { display: none; } #captcha-popup section.on { display: block; } #captcha-popup .modal-dialog { width: 370px; margin-top: 20vh; text-align: center; } #captcha-popup .modal-body.s-modal { padding: 30px; font-size: 15px; } #captcha-popup .modal-body.s-modal a { color: #0080e3; cursor: pointer; } #captcha-popup .modal-body.s-modal .captcha { width: 100%; margin: 0; } #captcha-popup .modal-body.s-modal button { margin: 10px 0; width: 100%; line-height: 30px; border-radius: 3px; background: #eee; } #captcha-popup .modal-body.s-modal button:hover { background: #cecece; } /* Table */ .modal.in table { width: 100%; margin: 20px 0; border-collapse: separate; background: #fff; border-spacing: 0; border-radius: 5px; overflow: hidden; border: 1px solid #ccc; } .modal.in table.average { table-layout: fixed; } .modal.in table tr td { border-bottom: 1px solid #ccc; } .modal.in table tr:last-child td { border-bottom: none; } .modal.in table tr:nth-child(2n) { background: rgba(0, 0, 0, 0.1); } .modal.in table th { background: #bf8a44; color: #fff; } .modal.in table th, .modal.in table td { text-align: center; border-right: 1px solid #ccc; padding: 8px 10px; } .modal.in table th:last-child, .modal.in table td:last-child { border-right: none; } .modal.in table .money { text-align: right; padding-right: 30px; } /* Color */ .modal.in .normal { color: #009c49; } .modal.in .disable { color: #c20000; } .modal.in .freeze { color: #a1a1a1; } /* Button */ .modal.in .header-button { position: absolute; right: 96px; top: 25px; } .modal.in .header-button button { display: inline-block; min-width: 120px; font-size: 15px; margin: 5px; padding: 0 10px; font-weight: bolder; line-height: 30px; border: none; border-radius: 5px; background: -webkit-linear-gradient(#fdfdfd,#d4d4d4); background: -o-linear-gradient(#fdfdfd,#d4d4d4); background: -moz-linear-gradient(#fdfdfd,#d4d4d4); background: linear-gradient(#fdfdfd,#d4d4d4); cursor: pointer; } .modal.in .header-button button:hover { background: -webkit-linear-gradient(#dedede,#fdfdfd); background: -o-linear-gradient(#dedede,#fdfdfd); background: -moz-linear-gradient(#dedede,#fdfdfd); background: linear-gradient(#dedede,#fdfdfd); } /* Pager */ .modal.in #pager { text-align: center; display: block; } .modal.in #pager li { display: inline-block; color: #333; background: #ddd; padding: 5px 10px; } .modal.in #pager li:hover { background: #666; color: #fff; } /* #endregion 弹窗樣式 */ /* #region 会员等级樣式 */ #member-level { color: #000; background: #fff47e; border-radius: 30px; padding: 2px 10px 2px 10px; } #member-level.showHend { cursor: pointer; } #member-level:before { content: ''; position: relative; right: 2px; top: 2px; -webkit-mask: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Vip/images/VIP.svg'); mask: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Vip/images/VIP.svg'); display: inline-block; width: 14px; height: 14px; background: #000; -webkit-mask-size: cover; mask-size: cover; } #member-level.vip0 { color: #11928c; } #member-level.vip0:before { background: #11928c; } #member-level.vip1 { color: #4c1597; } #member-level.vip1:before { background: #4c1597; } #member-level.vip2 { color: #379b0a; } #member-level.vip2:before { background: #379b0a; } #member-level.vip3 { color: #956e11; } #member-level.vip3:before { background: #956e11; } #member-level.vip4 { color: #991862; } #member-level.vip4:before { background: #991862; } #member-level.vip5 { color: #715742; } #member-level.vip5:before { background: #715742; } #member-level.vip6 { color: #70416d; } #member-level.vip6:before { background: #70416d; } #member-level.vip7 { color: #40666d; } #member-level.vip7:before { background: #40666d; } #member-level.vip8 { color: #416e49; } #member-level.vip8:before { background: #416e49; } #member-level.vip9 { color: #bd903a; } #member-level.vip9:before { background: #bd903a; } #member-level.vip10 { color: #009688; } #member-level.vip10:before { background: #009688; } #member-level.vip11 { color: #8BC34A; } #member-level.vip11:before { background: #8BC34A; } #member-level.vip12 { color: #CDDC39; } #member-level.vip12:before { background: #CDDC39; } #member-level.vip13 { color: #AFB42B; } #member-level.vip13:before { background: #AFB42B; } #member-level.vip14 { color: #FBC02D; } #member-level.vip14:before { background: #FBC02D; } #member-level.vip15 { color: #FFA000; } #member-level.vip15:before { background: #FFA000; } /* #endregion 会员等级樣式 */ /* #region 提醒弹窗 */ #remind-popup { color: #303030; } #remind-popup .modal-body p, #remind-popup .modal-body h5 { font-size: 16px; margin: 0; text-align: left; font-weight: normal; } #remind-popup .modal-body p { margin: 10px 0 20px 0; } #remind-popup .modal-body h5 { font-size: 15px; margin: 10px 0; } #remind-popup .modal-body .icon-href { display: inline-block; width: 100%; height: 140px; background: rgba(255,255,255,.5); border-radius: 5px; text-align: center; } #remind-popup .modal-body > ul { border-radius: 20px; background-color: #f7f7f7; border-radius: 5px; padding-left: 0; padding: 10px 0; } #remind-popup .modal-body > ul li { border: 1px solid #555; border-radius: 30px; width: 80%; margin: 10px auto; padding-left: 13px; text-align: center; padding: 8px 0; } #remind-popup .modal-body > ul li a { text-decoration: none; } #remind-popup .modal-body > ul li i { margin-right: 10px; } /* #endregion 提醒弹窗 */ /* #region 跑馬燈弹窗 */ #marquee .marquee-subnav { position: relative; display: block; border: none; height: auto; min-width: initial; line-height: 20px; text-align: left; overflow: hidden; width: 600px; background-color: transparent; padding: 0; } #marquee .marquee-subnav:before { display: none; } #marquee .marquee-subnav > span { position: absolute; right: 25px; bottom: 20px; top: initial; left: initial; z-index: 1; display: inline-block; width: 20px; height: 20px; background-position: center top; cursor: pointer; } #marquee .marquee-subnav > span:hover i { color: #ccae36; } #marquee .marquee-subnav > span.prev { margin-left: 0; color: rgba(255, 255, 255, .4); right: 88px; } #marquee .marquee-subnav > span.next { margin-left: 0; color: rgba(255, 255, 255, .4); } #marquee .marquee-subnav ul li::before, #marquee .marquee-subnav ul li::after { display: none; } #marquee .marquee-subnav .main-cell li { display: block; width: 560px; height: 180px; margin: 20px; border-bottom: none; overflow-y: auto; text-align: left; line-height: 20px; padding-top: 0; } #marquee .marquee-subnav .main-cell li:hover { background: transparent; } #marquee .marquee-subnav .main-cell li div { padding: 10px; } #marquee .marquee-subnav .slide-pager { display: inline-block; margin: 10px 0 15px 25px; width: 70%; text-align: left; } #marquee .marquee-subnav .slide-pager li { display: inline-block; background-color: rgba(255, 255, 255, 0.4); width: 10px; height: 10px; color: transparent; text-indent: -999px; border-radius: 30px; border-bottom: none; min-width: initial; padding-top: 0; margin: 0 8px 0 0; } #marquee .marquee-subnav .slide-pager li.on { background-color: #ccae36; } /* #endregion 跑馬燈弹窗 */ .vaptcha-popup a.vp-btn-tip { display: none; } /* #region 註冊成功弹窗 */ #register-success-dialog .modal-dialog { width: 330px; } #register-success-dialog .modal-content { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } #register-success-dialog .modal-content .modal-body { text-align: center; } #register-success-dialog .modal-content .modal-body i { font-size: 54px; color: #70b603; } #register-success-dialog .modal-content .modal-body p { margin-bottom: 0; font-size: 24px; font-weight: bold; } #register-success-dialog .modal-content .modal-footer { margin-top: 0; text-align: center; border-top: 2px solid #d9d9d9; background: transparent; } #register-success-dialog .modal-content .modal-footer a { margin: 0 15px; padding: 5px 20px; text-decoration: none; } #register-success-dialog .modal-content .modal-footer a.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } #register-success-dialog .modal-content .modal-footer a.btn-primary:hover { color: #fff; background-color: #004b92; border-color: #004b92; } #register-success-dialog .modal-content .modal-footer a.btn-light { color: #333; background-color: #fff; border-color: #ccc; } #register-success-dialog .modal-content .modal-footer a.btn-light:hover { color: #333; background-color: #dedede; border-color: #ccc; } /* #endregion 註冊成功弹窗 */ /* #region 活動飄窗 */ #activity-float { position: fixed; bottom: 30px; right: 0; width: 120px; height: 120px; z-index: 999; } #activity-float .activity-float-list li { display: inline-block; vertical-align: top; width: 120px; height: 120px; } #activity-float .activity-float-list li img { width: 120px; height: 120px; } #activity-float .close { position: absolute; display: block; top: 0; right: 0; height: 26px; width: 26px; cursor: pointer; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Shared/images/close.png') no-repeat center center; } /* 點點切換紐 */ #activity-float .slide-pager { position: absolute; bottom: -20px; left: 0; width: 100%; text-align: center; } #activity-float .slide-pager li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; /* 若要数字编号可以把font-size: 0拿掉 */ font-size: 0; background-color: #d7d7d7; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; } #activity-float .slide-pager .on, #activity-float .slide-pager li:hover { background-color: #7f7f7f; } #activity-float.expanded { width: auto; height: auto; } #activity-float.expanded img { display: block; margin: 0 auto; cursor: pointer; } /* #endregion 活動飄窗 */ /* #region 站內信飄窗 */ div[site-mail-float] { position: fixed; bottom: 145px; right: 0; z-index: 9999; } div[site-mail-float] .msg-float { margin-right: -300px; width: 300px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #D3DDE0; font-size: 15px; opacity: 0; background-color: #333; border: 1px solid #afafaf; -moz-box-shadow: 0 0 7px #666; -webkit-box-shadow: 0 0 7px #666; box-shadow: 0 0 7px #666; padding: 0 8px; -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } div[site-mail-float] .msg-float.show { margin-right: 20px; opacity: .75; } div[site-mail-float] .msg-header { height: 35px; line-height: 35px; font-weight: bold; border-bottom: #666 solid 1px; } div[site-mail-float] .msg-header .msg-close { margin-right: 10px; float: right; } div[site-mail-float] .msg-body { height: 30px; line-height: 30px; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } div[site-mail-float] .msg-body p, h1 { margin: 0; } /* #endregion 站內信飄窗 */ clipboard { display: flex; align-items: center; } clipboard .copyBtn { display: inline-block; padding: 2px 3px; font-size: 12px; color: #01b1dc; background: #f2f2f2; border: 1px solid #01b1dc; vertical-align: top; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; -moz-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } clipboard .copyBtn.disabled { opacity: .5; filter: alpha(opacity=50); } clipboard .copyBtn i { margin: 0 3px 0 2px; } clipboard .copied { display: none; color: #f00; font-size: 12px; margin-left: 5px; } .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive { overflow: auto; } /* #region iframeModal */ .modal.iframeModal { cursor: default; } .modal.iframeModal .modal-dialog { position: fixed; top: 45%; left: 50%; width: 1000px; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .iframeModal .modal-content { background: none; } .iframeModal .modal-body { padding: 0; font-size: 0; height: 800px; background: rgba(0,0,0,.8) } .iframeModal #fullscreenContainer { position: relative; width: 100%; height: 100%; } .iframeModal #fullscreenContainer .toolbar { height: 50px; color: #fff; font-size: 14px; padding: 0 10px; display: flex; align-items: center; justify-content: flex-end; column-gap: 5px; z-index: 1000; background-color: #000; border-bottom: 1px solid #333; } .iframeModal #fullscreenContainer .toolbar button { color: #fff; font-size: 30px; background: none; border: none; } .iframeModal #fullscreenContainer iframe { position: absolute; top: 50px; /* 根據你的工具欄高度進行調整 */ left: 0; width: 100%; height: calc(100% - 50px); /* 減去工具欄的高度 */ border: none; /* 去除 iframe 預設的邊框 */ } .iframeModal #fullscreenContainer .loading-box { position: absolute; top: 50px; /* 根據你的工具欄高度進行調整 */ left: 0; width: 100%; height: calc(100% - 50px); /* 減去工具欄的高度 */ } .iframeModal #fullscreenContainer .loading-box .loader { position: fixed; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #FFF; display: inline-block; margin-top: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 48px; letter-spacing: 4px; box-sizing: border-box; } .iframeModal #fullscreenContainer .loading-box .loader::before { content: ''; position: absolute; right: 70px; bottom: 10px; height: 28px; width: 5.15px; background: currentColor; box-sizing: border-box; animation: animloader1 1s linear infinite alternate; } .iframeModal #fullscreenContainer .loading-box .loader::after { content: ''; width: 10px; height: 10px; position: absolute; left: 125px; top: 2px; border-radius: 50%; background: red; box-sizing: border-box; animation: animloader 1s linear infinite alternate; } @keyframes animloader { 0% { transform: translate(0px, 0px) scaleX(1); } 14% { transform: translate(-12px, -16px) scaleX(1.05); } 28% { transform: translate(-27px, -28px) scaleX(1.07); } 42% { transform: translate(-46px, -35px) scaleX(1.1); } 57% { transform: translate(-70px, -37px) scaleX(1.1); } 71% { transform: translate(-94px, -32px) scaleX(1.07); } 85% { transform: translate(-111px, -22px) scaleX(1.05); } 100% { transform: translate(-125px, -9px) scaleX(1); } } @keyframes animloader1 { 0% { box-shadow: 0 -6px, -122.9px -8px; } 25%, 75% { box-shadow: 0 0px, -122.9px -8px; } 100% { box-shadow: 0 0px, -122.9px -16px; } } /* #endregion iframeModal */ /* #region forget-password-modal / modal.social-guide-modal */ .modal.forget-password-modal { } .modal.forget-password-modal .closeBtn, .modal.social-guide-modal .close-btn, .modal.social-login-modal .close-btn, .modal.social-register-modal .close-btn { position: absolute; top: 10px; right: 20px; color: #000; font-size: 30px; } .modal.forget-password-modal form, .modal.social-guide-modal #social-login-wrap { display: flex; flex-direction: column; width: 400px; margin: 0 auto; } .modal.social-guide-modal .social-guide-wrap, .modal.social-guide-modal .btn-area { display: flex; flex-direction: column; justify-content: center; } .modal.social-guide-modal .btn-area button{ margin:10px auto; width:50%; } .modal.forget-password-modal form h4, .modal.social-guide-modal h4 { font-size: 30px; text-align: center; margin: 10px 0px 25px; } .modal.forget-password-modal form label { flex: 0 0 100px; font-size: 16px; text-align: center; } .modal.forget-password-modal form input { width: 190px; height: 38px; margin: 0; padding: 0 8px; line-height: 38px; border: 1px solid #ccc; border-radius: 3px; } .modal.forget-password-modal form .input-info { font-size: 14px; } .modal.forget-password-modal form .get-otp-btn { white-space: nowrap } .modal.forget-password-modal form .reset-password-btn { margin: 10px auto; } /* #endregion forget-password-modal */ /* modal.social-login-modal/ social-register-modal*/ #social-login-content { width: 395px; height: auto; padding: 20px; margin: 0 auto; background: #ffffff3b; } .modal.social-login-modal .modal-dialog, .modal.social-register-modal .modal-dialog { width: 30%; } .modal.social-login-modal .modal-content, .modal.social-register-modal .modal-content { background: #40509b; } .modal.social-login-modal .close-btn, .modal.social-register-modal .close-btn { color: #fff; } .modal.social-register-modal .modal-content{ width:435px; } #social-login-content #login-info h3 { margin: 0; color: #fff; font-family: 'Microsoft YaHei'; font-size: 36px } #social-login-content #login-info p { color: #fff; margin-top: .5em } #social-login-content form { position: relative; padding: 5px 20px } #social-login-content .mobileCaptcha { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); } #social-login-content form input { display: block; width: 100%; height: 35px; margin: 0; margin-bottom: 12px; padding-left: 50px; color: #292929; line-height: 35px; border: none; background-size: 100%; } #social-login-content form .mobile select { float: left; padding: 6px 0; margin-right: 10px; } #social-login-content form .mobile input { width: 67%; } #social-login-content form input[type=checkbox] { width: auto; height: auto; display: inline-block; } .modal.social-register-modal #social-login-content form input { padding-left: 10px; } #social-login-content form input#login_account { background-image: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Account/LoginToGame/user.png'); } .modal.social-register-modal #social-login-content form input#login_account { background-image: none; } #social-login-content form input#login_password { background-image: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Account/LoginToGame/pwd.png'); } #social-login-content form input::-webkit-input-placeholder { color: inherit } #social-login-content form input:-ms-input-placeholder { color: inherit } #social-login-content form input::-moz-placeholder { color: inherit } #social-login-content form input.placeholdersjs { color: inherit } #social-login-content form .login_password-wrap { position: relative } #social-login-content form .login_password-wrap .getcode-btn { position: absolute; top: 4px; right: 18px; line-height: 22px } #social-login-content .mobile-confirm-code-wrap{ position:relative; } #social-login-content .getcode-btn { position: absolute; top: 5px; right: 5px; } #social-login-content .form-group .sms-tip, #social-login-content .form-group .sms-tip a { color: #ff8484 !important; } #social-login-content .agreement { color: #fff !important; } #social-login-content form #check-code-wrapper { margin-right: 100px } #social-login-content form #check-code-wrapper input { width: 167px; height: 33px; padding-left: 10px; background-color: transparent; border: 1px solid #000 } #social-login-content form #check-code-wrapper #captcha { height: 31px; top: 1px; right: 1px } #social-login-content form #login-box, #social-login-content form #register-box { width: 85px; height: 35px; margin-right: 20px; color: #fff; line-height: 31px; vertical-align: baseline; background: #262626; border: none } #social-login-content form #login-box:hover, #social-login-content form #register-box:hover { background: #3b3b3b } #social-login-content form #forget { color: #dcdcdc; background-color: transparent; border: none } #social-login-content form #forget:hover { color: #fff } #agree { top: 98%; right: 42% } /* #region 轉點提示彈窗 */ #game-exchange-dialog { } #game-exchange-dialog .close-btn { position: absolute; top: 10px; right: 20px; font-size: 25px; } #game-exchange-dialog .modal-content .modal-footer { margin-top: 0; text-align: center; border-top: 2px solid #d9d9d9; background: transparent; } #game-exchange-dialog .modal-content .modal-footer a { margin: 0 15px; padding: 5px 20px; text-decoration: none; } #game-exchange-dialog .modal-content .modal-footer a.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } #game-exchange-dialog .modal-content .modal-footer a.btn-primary:hover { color: #fff; background-color: #004b92; border-color: #004b92; } /* #endregion 轉點提示彈窗 */ /* #region common-alert-modal */ .common-alert-modal .modal-dialog { border-radius: 15px; border: 1px solid #438BFF; background: linear-gradient(180deg, #3A3F44 0%, #1E2022 100%); width: 570px; margin-top: 10vh; } .common-alert-modal .modal-dialog .modal-content, .common-alert-modal .modal-dialog .modal-footer { background: none; } .common-alert-modal .modal-dialog .modal-content .alert-icon { color: #FFD233; font-size: 60px; text-align: center; } .common-alert-modal .modal-dialog .modal-content h4 { margin: 10px 0 0; display: block; text-align: center; color: #FFF; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; } .common-alert-modal .modal-dialog .modal-footer { display: flex; gap: 15px; justify-content: center; padding: 5px 0 25px; margin-top: 0; } .common-alert-modal .modal-dialog .modal-footer button { min-width: 155px; height: 38px; color: #FFF; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; background: none; border: 2px solid #60A2FF; border-radius: 20px; -moz-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .common-alert-modal .modal-dialog .modal-footer button.primary { border: none; background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%); box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset; } .common-alert-modal .modal-dialog .modal-footer button:hover { opacity: 0.6; } .common-alert-modal .modal-dialog .modal-footer .fast-going-wrap label { margin-top: 5px; display: block; color: #fff; } .common-alert-modal .modal-dialog .modal-footer input[type="checkbox"] { width: auto; height: auto; } .common-alert-modal.light .modal-dialog { border: 3px solid #3F6DEA; background: linear-gradient(180deg, #FFF 5.35%, #EBF6FF 100%); } .common-alert-modal.light .modal-dialog .modal-content h4 { color: #414141; font-weight: bold; } .common-alert-modal.light .modal-dialog .modal-footer button { color: #414141; border-radius: 20px; border: 2px solid #72B3FF } .common-alert-modal.light .modal-dialog .modal-footer button.primary { border: none; color: #fff; background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%); box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset; } /* #endregion common-alert-modal */ /* #region manual-transfer-modal 手動轉點彈窗 */ .modal.manual-transfer-modal { cursor: default; } /* #endregion manual-transfer-modal 手動轉點彈窗 */ /* Wallet Center */ /* info */ #wallet-center-wallet-info .wallet-center-refresh { color: #ffd800; border: 2px solid #ffd800; border-radius: 50%; padding: 3px; background-color: transparent; } #wallet-center-wallet-info .wallet-center-balance-title { font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: 14px; text-transform: uppercase; } #wallet-center-wallet-info .wallet-center-balance-number { font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: 14px; text-transform: capitalize; text-align: left; margin: 10px; } #wallet-center-wallet-info .wallet-center-button > button { display: inline-block; min-width: 120px; font-size: 15px; margin: 5px; padding: 0 10px; font-weight: bolder; line-height: 30px; border: none; border-radius: 5px; background: -webkit-linear-gradient(#fdfdfd,#d4d4d4); background: -o-linear-gradient(#fdfdfd,#d4d4d4); background: -moz-linear-gradient(#fdfdfd,#d4d4d4); background: linear-gradient(#fdfdfd,#d4d4d4); cursor: pointer; } #wallet-center-wallet-info .wallet-center-button > button:hover { background: -webkit-linear-gradient(#dedede,#fdfdfd); background: -o-linear-gradient(#dedede,#fdfdfd); background: -moz-linear-gradient(#dedede,#fdfdfd); background: linear-gradient(#dedede,#fdfdfd); } /* detail table */ #wallet-center-wallet-detail { overflow: hidden; border-radius: 5px; border: 1px solid #fff; } #wallet-center-wallet-detail table.average { width: 100%; background-color: transparent; } #wallet-center-wallet-detail table.average thead th { padding: 10px; text-align: center; border: 1px solid #000; font-weight: bold; color: #FFF; background-color: #bf8a44; width: 33.33%; } #wallet-center-wallet-detail table.average tbody td { padding: 10px; text-align: center; border: 1px solid #000; } #wallet-center-wallet-detail table.average tbody .money { text-align: right; } #wallet-center-wallet-detail table.average tbody .disable { color: #ff4d4d; } #wallet-center-wallet-detail table.average tbody .disable i { font-size: 1.2em; vertical-align: middle; } #wallet-center-wallet-detail table.average tbody tr td:first-child { font-weight: bold; } /* manual transfer modal*/ .manual-transfer-modal .modal-dialog { width: 573px; } .manual-transfer-modal .modal-content { width: 573px; } #manual-transfer-wallet-selection .text-title { color: #7F8081; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; padding: 10px; } #manual-transfer-wallet-selection .wallet-info { position: relative; width: 189px; height: 100px; border-radius: 8px; border: 1px solid #F4F7F9; background: #F4F7F9; padding: 10px; box-sizing: border-box; color: #fff; } .wallet-info .wallet-name { color: #000000; text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: 14px; /* 77.778% */ text-transform: capitalize; padding: 5px 10px; margin-top: 10px; } .wallet-info .wallet-balance { color: #000000; text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: 14px; /* 77.778% */ text-transform: capitalize; margin-top: 20px; } #manual-transfer-wallet-selection .wallet-switch { width: 41px; height: 43px; display: flex; justify-content: center; align-items: center; border: 1px solid #0077FF; border-radius: 6px; background: #CFDFFF; font-size: 20px; font-weight: 700; line-height: 20px; } .select-btn { font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; border-radius: 4px; border: 0.5px solid; background-color: transparent; color: #000000; cursor: pointer; } .select-btn-icon { position: absolute; top: 12px; left: 150px; color: #000000; font-size: 30px; } #manual-transfer-wallet-amount { margin-top: 20px; padding: 10px; } #manual-transfer-wallet-amount .text-title { color: #7F8081; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; padding: 10px; } #manual-transfer-wallet-amount input { width: 347px; } #manual-transfer-wallet-amount button { width: 94px; height: 51px; flex-shrink: 0; border-radius: 8px; border: 1px solid #0077FF; background: #CFDFFF; color: #000000; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; margin-left: 19px; } /* select wallet modal*/ .select-wallet-modal .modal-dialog { width: 506px; } .select-wallet-modal .modal-content { width: 506px; } .select-wallet-modal .wallet-list { display: grid; grid-template-columns: repeat(4, 1fr); /* 每行4列 */ gap: 10px; } .select-wallet-modal .wallet-item { width: 100px; height: 66px; flex-shrink: 0; border-radius: 8px; border: 1px solid #0077FF; color: #0077FF; } .select-wallet-modal .wallet-item i { color: #ffd800; } #activity-float.expanded img { width: 150px; height: auto; } /* #region CSS3 过渡效果的延迟 */ #nav.flip-animation > ul > li:hover .subnav { display: block\9; visibility: visible; } #nav.flip-animation > ul > li:hover .subnav li { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; white-space: nowrap; } #nav.flip-animation .subnav { display: none\9; position: absolute; top: 100%; left: 50%; height: 0; z-index: 2; visibility: hidden; -webkit-perspective: 320px; perspective: 320px; -webkit-transition: visibility linear 0.4s; -o-transition: visibility linear 0.4s; transition: visibility linear 0.4s; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } #nav.flip-animation .subnav li { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: opacity 0.4s, -webkit-transform 0.5s; transition: opacity 0.4s, -webkit-transform 0.5s; -o-transition: opacity 0.4s, transform 0.5s; transition: opacity 0.4s, transform 0.5s; transition: opacity 0.4s, transform 0.5s, -webkit-transform 0.5s; } #nav.flip-animation li:hover .subnav li:nth-child(1) { -webkit-transition-delay: 50ms; -o-transition-delay: 50ms; transition-delay: 50ms; } #nav.flip-animation li:hover .subnav li:nth-child(2) { -webkit-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; } #nav.flip-animation li:hover .subnav li:nth-child(3) { -webkit-transition-delay: 150ms; -o-transition-delay: 150ms; transition-delay: 150ms; } #nav.flip-animation li:hover .subnav li:nth-child(4) { -webkit-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } #nav.flip-animation li:hover .subnav li:nth-child(5) { -webkit-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms; } #nav.flip-animation li:hover .subnav li:nth-child(6) { -webkit-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } #nav.flip-animation li:hover .subnav li:nth-child(7) { -webkit-transition-delay: 350ms; -o-transition-delay: 350ms; transition-delay: 350ms; } #nav.flip-animation li:hover .subnav li:nth-child(8) { -webkit-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } #nav.flip-animation li:hover .subnav li:nth-child(9) { -webkit-transition-delay: 450ms; -o-transition-delay: 450ms; transition-delay: 450ms; } #nav.flip-animation li:hover .subnav li:nth-child(10) { -webkit-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } #nav.flip-animation li:hover .subnav li:nth-child(11) { -webkit-transition-delay: 550ms; -o-transition-delay: 550ms; transition-delay: 550ms; } #nav.flip-animation li:hover .subnav li:nth-child(12) { -webkit-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } #nav.flip-animation li:hover .subnav li:nth-child(13) { -webkit-transition-delay: 650ms; -o-transition-delay: 650ms; transition-delay: 650ms; } #nav.flip-animation li:hover .subnav li:nth-child(14) { -webkit-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } #nav.flip-animation li:hover .subnav li:nth-child(15) { -webkit-transition-delay: 750ms; -o-transition-delay: 750ms; transition-delay: 750ms; } #nav.flip-animation li:hover .subnav li:nth-child(16) { -webkit-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } #nav.flip-animation li:hover .subnav li:nth-child(17) { -webkit-transition-delay: 850ms; -o-transition-delay: 850ms; transition-delay: 850ms; } #nav.flip-animation li:hover .subnav li:nth-child(18) { -webkit-transition-delay: 900ms; -o-transition-delay: 900ms; transition-delay: 900ms; } #nav.flip-animation li:hover .subnav li:nth-child(19) { -webkit-transition-delay: 950ms; -o-transition-delay: 950ms; transition-delay: 950ms; } #nav.flip-animation li:hover .subnav li:nth-child(20) { -webkit-transition-delay: 1050ms; -o-transition-delay: 1050ms; transition-delay: 1050ms; } #nav.flip-animation li:hover .subnav li:nth-child(21) { -webkit-transition-delay: 1100ms; -o-transition-delay: 1100ms; transition-delay: 1100ms; } #nav.flip-animation li:hover .subnav li:nth-child(22) { -webkit-transition-delay: 1150ms; -o-transition-delay: 1150ms; transition-delay: 1150ms; } #nav.flip-animation li:hover .subnav li:nth-child(23) { -webkit-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; } #nav.flip-animation li:hover .subnav li:nth-child(24) { -webkit-transition-delay: 1250ms; -o-transition-delay: 1250ms; transition-delay: 1250ms; } #nav.flip-animation li:hover .subnav li:nth-child(25) { -webkit-transition-delay: 1300ms; -o-transition-delay: 1300ms; transition-delay: 1300ms; } #nav.flip-animation li:hover .subnav li:nth-child(26) { -webkit-transition-delay: 1350ms; -o-transition-delay: 1350ms; transition-delay: 1350ms; } /* #endregion CSS3 过渡效果的延迟 */ /* #region topnav */ #header .top-nav { position: absolute; top: 10px; right: 0; z-index: 3; } #header .top-nav > li { display: inline-block; vertical-align: top; color: #b9b9b9; line-height: 20px; } #header .top-nav > li + li:before { content: '|'; margin: 0 5px; color: #5a5a5a; font-size: 12px; } #header .top-nav > li a { color: #b9b9b9; font-size: 12px; text-decoration: none; } #header .top-nav > li a:hover { color: #fff; } #header .top-nav > li.hot a { position: relative; } #header .top-nav > li.hot a:after { content: ''; position: absolute; top: -9px; right: -17px; display: inline-block; width: 21px; height: 14px; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/hot.gif') no-repeat center center; } /* #region language */ #header .top-nav > li.language { position: relative; font-size: 12px; cursor: pointer; } #header .top-nav > li.language:hover ul[select-language] { display: block; } #header .top-nav > li.language > ul[select-language] { display: none; position: absolute; top: 100%; left: 15px; } #header .top-nav > li.language > ul[select-language] li { display: block; padding: 5px; color: #5a5a5a; text-align: center; background-color: #fff; border-bottom: 1px solid #ccc; cursor: pointer; white-space: nowrap; } #header .top-nav > li.language > ul[select-language] li:hover { color: #ff9936; } /* #endregion language */ /* #endregion topnav */ /* #region loginbar 顯示「登入帳號」區塊*/ .member-box { position: absolute; top: 40px; right: 0; width: 730px; text-align: right; } #account-box > form { position: relative; display: inline-block; margin-top: 18px; } #account-box > form input { vertical-align: top; width: 150px; padding: 4px 3px; margin-right: 5px; font-size: 13px; color: #b9b9b9; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; background: rgba(0, 0, 0, 0.5); } #account-box > form input#login-password { width: 190px; } #account-box > form ::-webkit-input-placeholder { color: #5a5a5a; } #account-box > form ::-moz-placeholder { color: #5a5a5a; } #account-box > form :-ms-input-placeholder { color: #5a5a5a; } #account-box > form .login-btn, #account-box > form .social-login-btn { min-width: 54px; padding: 0 4px; height: 25px; color: #fff; font-size: 13px; margin-right: 5px; line-height: 25px; background: #0e86ca; border: none; } #account-box > form .login-btn:hover { background: #00aeff; } #account-box > form .social-login-btn:hover { background: #00aeff; } #account-box > form .register-btn { width: 84px; height: 25px; color: #fff; font-size: 13px; background: #ff9000; border-style: none; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #account-box > form .register-btn:hover { background: #ffa939; } #account-box > form .getcode-btn { position: absolute; top: 2px; left: 271px; padding-top: 3px; min-width: 72px; max-width: 72px; color: #fff; font-size: 12px; border: none; background: rgb(71, 94, 122); } #account-box > form .getcode-btn > div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #check-code-wrapper { position: relative; display: inline-block; vertical-align: top; } #check-code-wrapper #captcha { position: absolute; top: 2px; right: 7px; width: auto; height: 21px; } #agree { position: absolute; top: 100%; right: 0; padding: 2px 5px; color: #fff; font-size: 13px; z-index: 99; background: #000; } #agree a { font-weight: bold; cursor: pointer; color: #f5f5f6; text-decoration: underline; } .forget-btn { margin-right: 3px; color: #b9b9b9; font-size: 12px; } /* #endregion loginbar 顯示「登入帳號」區塊*/ /* #region service 更多服務 */ .services { position: absolute; top: 210px; left: auto; right: 0; } .services a { display: block; height: 100%; } /* #endregion service 更多服務 */ /* #region mailbox 站内信 不同版请由此修改*/ #mailbox { position: relative; top: -1px; display: inline-block; width: 20px; height: 20px; vertical-align: top; text-decoration: none; background: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Shared/images/m_icon.png') no-repeat; background-size: cover; } #mailbox > span, #mailbox > span:hover { position: absolute; left: 80%; bottom: 60%; min-width: 16px; padding: 0 2px; height: 16px; color: #fff; font-size: 12px; text-align: center; line-height: 16px; border-radius: 5px; background: #01b2f1; -webkit-box-sizing: border-box; box-sizing: border-box; } /* #endregion mailbox 站内信 不同版请由此断修改*/ /* #region 彈跳視窗跑馬燈資訊內容 */ #marquee-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; display: none; } #marquee-wrapper.show { display: block; z-index: 1000; background-image: url('/CdnRedirect/Web.Portal/_Common/Content/Views/Shared/images/transparent-black.png'); } #marquee { width: 600px; max-height: 500px; margin: 30px auto 0 auto; background-color: rgba(0,0,0,.8); border: 2px solid #b4ac8c; border-radius: 5px; cursor: default; -webkit-transition: margin-top ease-in 300ms; -o-transition: margin-top ease-in 300ms; transition: margin-top ease-in 300ms; } #marquee > header { text-align: center; border-radius: 5px 5px 0 0; } #marquee > header > h2 { margin: 0; color: #ccae36; font-size: 21px; line-height: 60px; } ul#newsBags { margin: 0; padding: 10px 50px; max-height: 380px; overflow: auto; } ul#newsBags > li { color: #ffffff; font-size: 13px; line-height: 27px; list-style: disc; white-space: pre-line; border-bottom: 1px dashed #999; } #marquee > footer { text-align: center; line-height: 80px; background-size: 100% 8px; background-repeat: no-repeat; border-radius: 0 0 5px 5px; padding: 20px 0; } #marquee > footer > span { display: inline-block; width: 119px; color: #fff; font-size: 15px; font-weight: bolder; line-height: 45.5px; border: 1px solid #ffffff; border-radius: 5px; background: linear-gradient(to bottom, #caa200, #ab8900, #ffefb0); cursor: pointer; } #marquee > footer > span:hover { background-position: 0 -45.5px; } /* #endregion 彈跳視窗跑馬燈資訊內容 */ /* #region 弹跳出来的notice Dialog */ /*title 文字背景顏色此修改*/ .ui-widget-header { padding: 0 5px; line-height: 12px; } #ad-dialog { display: none; padding: 0; } #ad-dialog img { width: 100%; height: auto !important; } #ad-dialog .dialog-footer { height: 30px; padding: 0 3px; font-size: 12px; font-weight: bold; line-height: 25px; border-top: 1px solid #000; } .ui-dialog { position: fixed; z-index: 999; } .ui-dialog .ui-dialog-title { font-size: 13px; line-height: 15px; } .ui-dialog .ui-dialog-buttonpane { margin: 0; padding: 0; border: none; } button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only { font-size: 12px; } .ui-dialog .ui-dialog-buttonpane button { position: absolute; bottom: 0; right: 0; margin: 3px 6px; } /* #endregion 弹跳出来的dialog */ /* #region loginToGame 游戏平台登入口*/ #logingame-body { background-color: #40509b; } /* #endregion */ .deposit-alert-modal { cursor: default; } .deposit-alert-modal .modal-dialog { width: 380px; margin-top: 10vh; } .deposit-alert-modal .modal-dialog .modal-content { background: #fff; } .deposit-alert-modal .modal-dialog .alert-footer { display: flex; align-items: center; justify-content: flex-end; gap: 3px; } .deposit-alert-modal .modal-dialog .alert-footer img { height: 50px; } .deposit-alert-modal .modal-dialog .alert-action { display: flex; justify-content: center; } /*上面惟部分主程式內的原先設定*/ /*這裡開始才是該站台的套版設定*/ @font-face { font-family: "NotoSans"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/NotoSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "NotoSans"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/NotoSans-Bold.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { font-family: "Inter"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Inter-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Inter"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Inter"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Inter"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Inter-Bold.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { font-family: "ABeeZee"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/ABeeZee-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: "AG Book Rounded"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/AGBookRounded-Bold.otf") format("opentype"); font-weight: 800; font-style: normal; } @font-face { font-family: "Agdasima"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Agdasima-Bold.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { font-family: "Agdasima"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Agdasima-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Arimo"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Arimo-Bold.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { font-family: "Arimo"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Arimo-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Roboto"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Roboto-Bold.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "Roboto"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Roboto-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Roboto"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Roboto"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Kumbh Sans"; src: url("/CdnRedirect/Web.Portal/DG002-01.Portal/Content/fonts/KumbhSans.ttf") format("truetype"); font-weight: 100 900; font-style: normal; } :root { --black: #000000; --black-1: #1E1E1E; --gray: #E6E6E8; --gray-3: #8E8E8E; --gray-4: #9798A3; --gray-5: #FAFAFA; --white: #FFFFFF; --blue: #3B98DB; --purple: #9876DB; --purple-1: #746B86; --purple-2: #272144; --purple-3: #BEAADE; --purple-4: #24284F; --purple-5: #787DA3; --purple-6: #AEA0FE; --purple-7: #EAF0FA; --purple-8: #8E6EFF; --purple-9: #877AAC; --purple-10: #8A7CDB; --purple-11: #2F2943; --purple-12: #867AAA; --purple-13: #5A5665; --purple-14: #887AAB; --purple-15: #322C68; --purple-16: #C83EB1; --purple-17: #7C72A2; --purple-18: #9694A2; --purple-o: rgba(28, 23, 51, 0.60); --pink: #FB3EA7; --pink-1: #AC827A; --pink-2: #DC4D9D; --pink-3: #AA4A7C; --pink-4: #9C4473; --pink-o: rgba(200, 62, 177, 0.30); --green: #76CAAF; --box-shadow: 0 0 20px 5px #101010; --linear-gradient-2: linear-gradient(to bottom, #D54EAD 0%, #C84AA8 18%, #BC4AA9 45%, #B0439E 75%, #C26DB8 100%); --linear-gradient-3: linear-gradient(to bottom, #5F61AE 0%, #5456A2 18%, #494B93 45%, #3E417F 75%, #6470B2 100%); --text-shadow: -2px 0 0 #8A1C72, 2px 0 0 #8A1C72, 0 -2px 0 #8A1C72, 0 2px 0 #8A1C72, 0 4px 0 #8B1D74; --text-shadow-1: 0 4px 6px #000; } /* #region base */ body { font-family: "Inter","NotoSans", sans-serif; font-size: 14px; background: var(--black-1); line-height: 1.428571429; padding-left: 140px; /* 預留#nav的寬度 */ height: 100vh; overflow-x: hidden; } body.layout { min-width: 1000px; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } iframe { border: none; } a { text-decoration: none; } ul, ol { display: inline-block; margin: 0 auto; padding: 0; list-style: none; } [ng-click] { cursor: pointer; } .wrapper { position: relative; width: 1200px; margin: 0 auto; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ''; } .clearfix:after { clear: both; } #ng-app *::-webkit-scrollbar { width: 8px; } #ng-app *::-webkit-scrollbar-track { background: transparent; } #ng-app *::-webkit-scrollbar-thumb { background: rgba(217, 217, 217, 0.30); border-radius: 20px; } #ng-app *::-webkit-scrollbar-thumb:hover { background: #66667a; } body.promotion #unlobby-title, #member-center .wrapper.member-center .member-center-title, body.home .title { color: var(--purple-10); font-size: 30px; font-weight: 400; display: flex; align-items: center; gap: 5px; margin: 0; padding: 20px 0; width: 100%; justify-content: center; } body.home .title.title-1 { justify-content: left; } body.promotion #unlobby-title::before, body.promotion #unlobby-title::after, #member-center .wrapper.member-center .member-center-title::before, #member-center .wrapper.member-center .member-center-title::after, body.home .title::before, body.home .title::after { content: ''; display: block; height: 17px; aspect-ratio: 63 / 17; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/title-icon.png) no-repeat center / contain; } #content { position: relative; padding: 40px 0; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home-bg.jpg') no-repeat center center; background-size: cover; width: -webkit-fill-available; overflow-x: hidden; } body.promotion #loading { background: none; background-color: transparent !important; color: var(--purple-3); font-size: 20px; } /* base >>> input*/ #ng-app input:not([type="checkbox"]), #ng-app .form-group .control-div input, #ng-app .form-group select.form-control, #ng-app #checkcode-input-group input { border-radius: 100px; color: var(--white); background: var(--purple-11); min-height: 60px; padding: 0 20px; border: none; } #ng-app input::placeholder, #ng-app .form-group .control-div input::placeholder, #ng-app #checkcode-input-group input::placeholder { color: var(--purple-12); } #ng-app .custom-file-upload { display: flex; margin: 20px 0; padding: 0; width: 100%; gap: 10px; } #ng-app .custom-file-upload .file-upload-item { flex: 1; aspect-ratio: 1 / 1; } #ng-app .custom-file-upload label { border: 4px solid var(--pink-3); border-radius: 20px; overflow: unset; } #ng-app .custom-file-upload label img { border-radius: 16px; } #ng-app .custom-file-upload label b i { opacity: 0; } #ng-app .custom-file-upload label b i::before { width: 24px; height: 24px; display: block; content: ''; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/input/img.jpg') no-repeat center center; } #ng-app .custom-file-upload .remove-img { color:var(--white); } #ng-app .custom-file-upload .upload_zone span { margin: 0; color: var(--purple-13); } #ng-app .custom-file-upload .upload_zone span.upload { color: var(--purple-13); border-color: var(--purple-13); background: none; } /* base >>> VIP進度條 */ #member-center .wrapper.member-center .account-bar .vip-info .bar-box { margin-top: 12px; } #member-center .wrapper.member-center .account-bar .vip-info .progress { aspect-ratio: 436 / 36; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/bar-bg.png) no-repeat center / contain; height: 36px; position: relative; padding: 4px 5px 8px 20px; overflow: visible; } #member-center .wrapper.member-center .account-bar .vip-info .progress .progress-bar { border-radius: 0 50px 50px 0; text-align: center; height: 24px; } #member-center .wrapper.member-center .account-bar .vip-info .progress .progress-bar.progress-bar-danger { background: var(--linear-gradient-2); } #member-center .wrapper.member-center .account-bar .vip-info .progress .progress-bar.progress-bar-warning { background: var(--linear-gradient-2); } #member-center .wrapper.member-center .account-bar .vip-info .progress .level { height: 44px; aspect-ratio: 83 / 89; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/badge.png) no-repeat center / contain; position: absolute; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; padding-top: 3px; top: 32%; transform: translateY(-50%); left: 2px; font-weight: 800; } #member-center .wrapper.member-center .account-bar .vip-info .progress::after { content: ''; display: block; width: 40px; aspect-ratio: 83 / 116; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/bar-icon.png) no-repeat center / contain; position: absolute; top: -28%; right: -4%; } #member-center .wrapper.member-center .account-bar .vip-info .progress span:not(.level) { color: #FFF; text-shadow: var(--text-shadow); font-size: 18px; line-height: 1.2; font-weight: 700; position: absolute; left: 50%; transform: translateX(-50%); } #member-center .wrapper.member-center .account-bar .vip-info .bar-box p { display: flex; color: #FFF; text-shadow: 0 2px 6px #000; font-size: 15px; font-weight: 500; margin: 3px 0 0 35px; } /* #endregion base */ /* #region button */ #ng-app .modal-footer button, #ng-app .tab-announcement-modal button[ng-click="backToList()"], #ng-app #marquee footer span[ng-click="closeMarquee()"], #ng-app .promotionModuleModal .modal-dialog .modal-content .action-btn[ng-click="close()"] { color: var(--white); aspect-ratio: 334/123; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/purple.png') no-repeat center / contain; width: 120px; border: none; display: flex; align-items: center; justify-content: center; box-shadow: none; margin:auto; } #member-center .wrapper.member-center .main form button { color: var(--gray-3); border: 1px solid var(--gray-3); white-space: nowrap; border-radius: 50px; background: none; padding: 0 24px; box-shadow: none; font-family: 'Inter'; aspect-ratio: 392/145; height: 54px; font-size: 21px; width: unset; } #member-center .wrapper.member-center .main form button[type="submit"], #member-center .wrapper.member-center .main form button[ng-disabled="isProcessing"] { color: var(--white); border: none; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/pink-mid.png') no-repeat center / contain; } #member-center .wrapper.member-center .main form div:has(button[type="submit"]), #member-center .wrapper.member-center .main .form-group:has(button.btn-submit) div { display: flex; align-items: center; justify-content: center; gap: 20px; } /* #region button */ /* #region 彈跳視窗 */ #ng-app .modal-content, #ng-app .modal-announcement.single-content, #ng-app #marquee { border-radius: 30px; background-color: transparent; background: var(--white); box-shadow: var(--box-shadow); border:none; } #ng-app .modal-content { position: relative; } #ng-app .modal-header, #ng-app .modal-title, #ng-app .modal-body, #ng-app .modal-footer, #ng-app .modal-announcement.single-content .ma-title, #ng-app .modal-announcement.single-content .ma-body, #ng-app .modal-announcement.single-content .ma-footer { background: none; border: none; padding: 0; } #ng-app .modal-header, #ng-app .modal-announcement.single-content .ma-title, #ng-app .tab-announcement-modal .modal-title, #ng-app #marquee header h2{ padding: 20px 20px 0px 20px; } #ng-app .modal-body, #ng-app .modal-announcement.single-content .ma-body { padding: 20px; } #ng-app .modal-footer, #ng-app .modal-announcement.single-content .ma-footer { padding: 0px 20px 20px 20px; display:flex; align-items: center; justify-content: center; } #ng-app .modal-header, #ng-app .modal-header .modal-title, #ng-app .modal-announcement.single-content .ma-title, #ng-app .tab-announcement-modal .modal-title h4, #ng-app #marquee header h2 { color: var(--purple-15); text-align: center; font-size: 30px; font-weight: 500; font-family: 'Inter'; line-height: 1; } #ng-app .modal-dialog .modal-header button.close-btn, #ng-app .modal-announcement.single-content .ma-title i[ng-click="close()"], #ng-app .tab-announcement-modal .modal-title span[ng-click="close()"] { position: absolute; font-size: 0; width: 45px; aspect-ratio: 1 / 1; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/close.png') no-repeat center / contain; bottom: -60px; top: unset; left: 50%; transform: translateX(-50%); border: none !important; box-shadow: none !important; } /* 彈跳視窗 >>> 公告彈窗 */ #ng-app .modal-announcement.single-content .ma-footer { justify-content: space-between; } #ng-app .modal-announcement > .ma-footer > span, #ng-app .modal-announcement > .ma-footer > .ma-noshow span { color: var(--black); } /* 彈跳視窗 >>> 最新公告(頁簽) */ #ng-app .tab-announcement-modal .modal-dialog { min-width: 560px; } /* 彈跳視窗 >>> 最新消息(跑馬燈) */ #ng-app #marquee ul#newsBags > li { color:var(--black); } #ng-app #marquee .marquee-subnav .slide-pager li { background-color: var(--purple-3) } #ng-app #marquee .marquee-subnav .slide-pager li.on { background-color: var(--purple-8) } #ng-app #marquee .marquee-subnav > span { color: var(--purple-8); } #ng-app #marquee .marquee-subnav > span:hover i { color: var(--purple-4); } /* #endregion 彈跳視窗 */ /* #region header */ #header { width: 100%; height: 80px; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/bg.png) no-repeat center / cover; } #header .wrapper { height: 100%; display: flex; align-items: center; justify-content: space-between; width: -webkit-fill-available; padding: 0 0 0 20px; } #header #logo-bg { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/header-logo.png) no-repeat center / contain; height: 60%; aspect-ratio: 130 / 54; width: unset; top: unset; } #header #account-box > form, #header .member-box, #header #account-box, #header ul#account-nav, #header ul#account-nav li, #header ul#account-nav li #account-info { height: 100%; } #header .member-box { position: relative; top: unset; right: unset; width: auto; } #header #account-box > form, #header .member-box { display: flex; align-items: center; gap: 20px; margin: 0; } #header #account-box > form > *{ margin:0; position:relative; } #header #account-box > form input, #header #account-box > form .getcode-btn { background: var(--purple-2); min-height: 35px; border-radius: 50px; padding: 0 20px; border: none; margin: 0; color:var(--white); } #header #account-box > form input#login-password, #header #account-box > form input#check-code-input { padding: 0 80px 0 20px; } #header #account-box > form input::placeholder, #header #account-box > form .getcode-btn, #header ul#account-nav > li > a { color: var(--purple); } #header .forget-btn { position: absolute; display: block; right: 20px; top: 50%; transform: translateY(-50%); line-height: 1; color: var(--purple-1); } #header #account-box > form .getcode-btn { position: relative; top: unset; left: unset; max-width: unset; } #header #check-code-wrapper #captcha { height: 80%; top: 50%; right: 20px; transform: translateY(-50%); } #header .language-ul { padding-right: 50px; position:relative; } #header .language-ul .language { width: 58px; height: 58px !important; } #header .language-ul .language.zh-TW { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/zh-TW.png) no-repeat center center; } #header .language-ul .language ul[select-language] { display: none; position: absolute; bottom: 0; color: white; left: 0; white-space: nowrap; transform: translateX(-50%) translateY(100%); text-align: left; background: var(--purple-4); padding: 10px; flex-direction: column; gap: 5px; border-radius: 6px; } #header .language-ul .language:hover ul[select-language] { display:flex; z-index:1; } #header .language-ul .language ul[select-language] li { cursor: pointer; color: var(--purple); } #header .language-ul .language ul[select-language] li:hover { color: var(--white); } #header ul#account-nav, #header ul#account-nav > li { display: flex; align-items: center; gap: 40px; } #header ul#account-nav > li { border: none; gap: 5px; max-width: unset; } #header ul#account-nav > li::before { width: 25px; height: 25px; display: block; } #header ul#account-nav > li:has(a[href="/BetRecord"])::before { content: ''; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/bet-record.png) no-repeat center / contain; } #header ul#account-nav > li:has(a[ng-click="openDepositClick()"])::before { content: ''; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/deposit.png) no-repeat center / contain; } #header ul#account-nav > li:has(a[href="/Transaction"])::before { content: ''; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/transaction.png) no-repeat center / contain; } #header ul#account-nav > li:has(a[href="/MemberCenter"])::before { content: ''; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/vip.png) no-repeat center / contain; } #header ul#account-nav > li:has(a[href="/Mgm"])::before { content: ''; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/agent.png) no-repeat center / contain; } #header ul#account-nav > li > a { overflow: unset; text-overflow: unset; white-space: nowrap; padding: 0; cursor: pointer; } #header ul#account-nav > li > a:hover { color: var(--white); } #header ul#account-nav li .member-img { display: block; width: 58px; height: 58px; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/member.png) no-repeat center / contain; } #header li:has(#account-info) { padding:0 14px; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/info-bg.png) no-repeat left center / cover; } #header #account-info{ display: flex; align-items: center; gap: 12px; } #header #account-info span { font-size: 16px; color: var(--white); display:block; font-weight: 500; text-align: left; } #header #account-info span.balance { color: var(--green); font-size: 20px; font-weight: 700; } #header #account-info #callBackAllWallet { display: block; width: 25px; height: 25px; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/reload.png) no-repeat center / contain; } #header #account-info span#member-level { background: none; color: var(--purple-3) !important; display: flex !important; align-items: center; padding: 0 10px; line-height: 1; gap: 5px; } #header #account-info span#member-level::before { content: ''; width: 25px; height: 30px; mask: unset; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/vip-icon.png) no-repeat center 1px / contain; } #header #account-info .sign-out-btn, #header #account-box .register-btn, #header #account-box .login-btn, #header #account-box .social-login-btn { color: var(--purple-5); font-weight: 400; position: relative; min-width: 120px; height: unset; aspect-ratio: 169 / 72; display: flex; align-items: center; justify-content: center; font-size: 16px; background: none; margin: 0 -9px; } #header #account-info .sign-out-btn span, #header #account-box .register-btn span, #header #account-box .login-btn span, #header #account-box .social-login-btn span { z-index: 1; } #header #account-box .login-btn, #header #account-box .social-login-btn { color: var(--white); } #header #account-info .sign-out-btn::before, #header #account-box .register-btn::before, #header #account-box .login-btn::before, #header #account-box .social-login-btn::before { content: ''; display: block; position: absolute; width: 100%; aspect-ratio: 169/72; z-index: 0; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/register-btn.png) no-repeat center / contain; } #header #account-box .login-btn::before, #header #account-box .social-login-btn::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/header/login-btn.png) no-repeat center / contain; } #header #agree { color: var(--white); top: 0px; background: none; } /* #endregion header */ /* #region nav */ #nav { background: none; position: fixed; height: 100vh; width: 140px; left: 0; } #nav::before { content: ''; width: 147%; height: 100vh; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/bg.png) no-repeat top center / cover; display: block; z-index: -1; position: absolute; pointer-events:none; } #nav > ul { display: flex; flex-direction: column; gap: 12px; max-height: 100vh; overflow-y: auto; scrollbar-width: none; } #nav > ul > li { display: inline-block; vertical-align: top; width: 100%; margin: auto; gap: 5px; display: flex; flex-direction: column; } #nav > ul > li > a { position: relative; display: block; line-height: 50px; font-size: 13px; text-align: center; text-decoration: none; color: var(--white); line-height: 3; } #nav > ul > li > a::before { content: ''; display: block; width: 30%; aspect-ratio:1/1; margin: auto; } #nav > ul > li.home > a::before { width: 40%; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/logo.png) no-repeat center / contain; } #nav > ul > li.hot > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/hot.png) no-repeat center / contain; } #nav > ul > li.slot > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/slot.png) no-repeat center / contain; } #nav > ul > li.live > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/live.png) no-repeat center / contain; } #nav > ul > li.fish > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/fish.png) no-repeat center / contain; } #nav > ul > li.sport > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/sport.png) no-repeat center / contain; } #nav > ul > li.board > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/board.png) no-repeat center / contain; } #nav > ul > li.lottery > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/lottery.png) no-repeat center / contain; } #nav > ul > li.promotion > a::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/promotion.png) no-repeat center / contain; } #nav > ul > li.promotion > a { color: var(--pink); } #nav > ul > li:hover, #nav > ul li.active { color: white; } #nav > ul > li:hover > a::before { transform:scale(1.2) translateY(8%); } #nav > ul > li.home { aspect-ratio: 168 / 119; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/side-bar/logo-bg.png) no-repeat center / contain; } #nav > ul > li.home > a { font-size: 0; line-height: 0; display: flex; height: 100%; } /* #endregion nav */ /* #region footer */ #footer { width: -webkit-fill-available; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/footer/bg.png) no-repeat center / 100% 100%; height: unset; position: relative; } #footer .wrapper { padding: 30px 0 70px 0; } #footer .wrapper::before { content: ''; display: block; height: 1px; background: var(--purple-6); width: 80%; position: absolute; top: 0; left: 10%; } #footer .wrapper span { width: 100%; display: block; text-align: center; font-weight: 400; font-family: Roboto; line-height: 1; font-size: 16px; color: var(--purple-7); } #footer .wrapper .footer-img { width: 100%; aspect-ratio: 1449 / 141; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/footer/supplier.png) no-repeat center / contain; margin: 60px auto 0 auto; } #footer .wrapper .line-box { text-align: center; margin: 30px 0 40px 0; color: #DB4A9B; font-size: 22px; } #footer .wrapper .line-box::before { content: ''; display: block; width: 120px; aspect-ratio: 1 / 1; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/footer/qrcode.png) no-repeat center / contain; margin: 10px auto; } #footer #footer-nav { margin: 0 0 10px 0; display: flex; justify-content: center; color: var(--purple-7); font-family: Roboto; font-size: 16px; letter-spacing: 1.2px; } #footer #footer-nav li { line-height: 12px; border-left: 1px solid #727272; } #footer #footer-nav li:first-child { border-left-style: none; } #footer #footer-nav a { display: inline-block; padding: 0 15px; color: #bbb; text-align: center; text-decoration: none; } #footer #footer-nav a:hover { color: var(--white); } #footer #footer-suggest { margin: 10px auto; color: #B0BCD2; font-size: 14px; font-weight: 500; text-align: center; } #footer #footer-suggest .site-name { display: contents; color: var(--purple-8); } #gotop { position: absolute; top: -47px; right: 0; width: 42px; height: 17px; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/top_btn.png') no-repeat; cursor: pointer; } /* #endregion footer*/ /* #region banner*/ #banner { display: none; height: fit-content !important; position: relative; overflow: hidden; background-color: transparent !important; } #banner .wrapper { height: 254px; z-index: 2; } #banner #slide-banner::before, #banner #slide-banner::after { content: ''; position: absolute; top: 0; aspect-ratio: 184/550; height: 100%; z-index:1; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/banner-mosk.png') center top; } #banner #slide-banner::before{ transform:rotate(180deg); } #banner #slide-banner::after{ right:0; } #banner .tempWrap { overflow: visible !important; margin: auto; } #banner .slide a { width: fit-content !important; margin: auto; position: relative !important; } #banner .slide a img { width: 1000px; object-fit: cover; height: 100%; margin: auto; } #banner .slide-click a { z-index: 2; width: 50px; height: 50px; display: block; position: absolute; top: 50%; transform: translateY(-50%); background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/arrow.png') no-repeat center /contain; } #banner .slide-click a.prev { transform: translateY(-50%) rotate(180deg); } #banner .slide-click a.next { right: 0; } /* #endregion banner*/ /* #region news 跑馬燈 */ #news { position: relative; width: 1000px; max-width: 1000px !important; margin: 30px auto; aspect-ratio: 1752 / 78; padding: 0 98px 0 120px; display: flex; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/news-bg.png) no-repeat center / cover; } #news::before { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-58%); left: 0; width: 120px; aspect-ratio: 206/117; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/news.png') no-repeat center / contain; } #news .more { display: block; position: absolute; top: 50%; right: 0; transform: translateY(-39%); background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/pink-small-square.png) no-repeat center / contain; font-size: 14px; min-width: 95px; aspect-ratio: 176 / 91; display: flex; align-items: center; justify-content: center; padding-bottom: 1%; } #hot-news { white-space: nowrap; overflow: hidden; height: 36px; margin: auto; } #hot-news li { color: var(--white); font-size: 18px; text-decoration: none; line-height: 2; display: inline-block; margin-right: 10px; } #hot-news li:hover { text-decoration: underline; } /* #endregion 跑馬燈*/ /* #region home首頁 */ body.home #banner { display: block; } body.home #game-type-list { display: flex; color: var(--purple-9); font-size: 18px; font-weight: 400; justify-content: space-between; } body.home #game-type-list li { display: flex; align-items: center; gap: 10px; aspect-ratio: 277/145; min-width: 100px; } body.home #game-type-list li.active { color: var(--white); background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/purple-small-1.png') no-repeat center / contain; } body.home #game-type-list li::before { content: ''; display: block; width: 30px; height: 30px; } body.home #game-type-list li.active::before { transform: scale(1.8) translate(-17%, -13%); } body.home #game-type-list li.hot::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/hot.png') no-repeat center / contain; } body.home #game-type-list li.hot.active::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/hot-a.png') no-repeat center / contain; } body.home #game-type-list li.slot::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/slot.png') no-repeat center / contain; } body.home #game-type-list li.slot.active::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/slot-a.png') no-repeat center / contain; } body.home #game-type-list li.live::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/live.png') no-repeat center / contain; } body.home #game-type-list li.live.active::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/live-a.png') no-repeat center / contain; } body.home #game-type-list li.fish::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/fish.png') no-repeat center / contain; } body.home #game-type-list li.fish.active::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/fish-a.png') no-repeat center / contain; } body.home #game-type-list li.sport::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/sport.png') no-repeat center / contain; } body.home #game-type-list li.sport.active::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/sport-a.png') no-repeat center / contain; } body.home #game-type-list li.board::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/board.png') no-repeat center / contain; } body.home #game-type-list li.board.active::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/board-a.png') no-repeat center / contain; } body.home #game-type-list li.lottery::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/lottery.png') no-repeat center / contain; } body.home #game-type-list li.lottery.active::before { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/lottery-a.png') no-repeat center / contain; } body.home .game-type-content { color: var(--white); position: relative; min-height: 420px; margin: 20px 0; } body.home .game-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } body.home .game-list li { aspect-ratio: 497 / 650; position: relative; } body.home .game-list .type-picture { grid-row: span 2; grid-column: span 2; height: auto; } body.home .game-type-content.hot .game-list .type-picture { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/hot-game-bg.png') no-repeat top center / contain; } body.home .game-type-content.slot .game-list .type-picture { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/slot-game-bg.png') no-repeat top center / contain; } body.home .game-type-content.live .game-list .type-picture { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/live-game-bg.png') no-repeat top center / contain; } body.home .game-type-content.fish .game-list .type-picture { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/fish-game-bg.png') no-repeat top center / contain; } body.home .game-type-content.sport .game-list .type-picture { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/sport-game-bg.png') no-repeat top center / contain; } body.home .game-type-content.board .game-list .type-picture { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/board-game-bg.png') no-repeat top center / contain; } body.home .game-type-content.lottery .game-list .type-picture { background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/lottery-game-bg.png') no-repeat top center / contain; } body.home .game-list li.type-picture span { color: var(--white); font-size: 40px; font-weight: 400; letter-spacing: 12px; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); white-space: nowrap; } body.home .game-list li .game-img { position: absolute; width: 100%; height: 100%; object-fit: contain; left: 0; top: 0; } body.home .game-list li .game-logo { position: absolute; width: 50%; aspect-ratio: 250/98; object-fit: contain; right: 3%; top: 5%; } body.home .game-type-content.hot .game-list li:not(.type-picture)::before, body.home .game-type-content .game-list li.IsHot:not(.type-picture)::before { content: ''; position: absolute; width: 35%; aspect-ratio: 169 / 133; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/hot-game.png) no-repeat center / contain; top: 5%; } body.home .game-list li:not(.type-picture)::after { content: ''; position: absolute; width: 70%; aspect-ratio: 173 / 40; left: 50%; bottom: 8%; transform: translateX(-50%); background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/play.png) no-repeat center / contain; } body.home .game-list li .name { color: var(--white); font-size: 20px; font-weight: 600; line-height: normal; letter-spacing: 1.2px; left: 50%; position: absolute; bottom: 8%; white-space: nowrap; transform: translateX(-50%) translateY(-100%); } body.home .page-group { display: flex; justify-content: center; gap: 20px; margin: 20px 0 60px 0; } body.home .page-group a { display: block; flex: 1; aspect-ratio: 370/515; position: relative; } body.home .page-group a.one { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/function-1.png) no-repeat center / contain; } body.home .page-group a.two { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/function-2.png) no-repeat center / contain; } body.home .page-group a.three { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/function-3.png) no-repeat center / contain; } body.home .page-group a.four { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/function-4.png) no-repeat center / contain; } body.home .page-group a b { position: absolute; color: var(--white); font-size: 20px; font-weight: 500; top: 35%; left: 50%; transform: translateX(-50%); white-space: nowrap; letter-spacing: -2px; } body.home .page-group a b span { color: var(--purple-6); font-size: 26px; } body.home .page-group a .content { position: absolute; color: var(--gray); font-size: 14px; font-weight: 500; width: 80%; right: 10%; bottom: 50%; line-height: 1.2; text-align: justify; transform: translateY(100%); } /* #endregion home首頁*/ /* #region 註冊頁 */ body.register #nav, body.register #header, body.register #footer, body.register #activity-float, body.register aside, body.register form.mobile .control-label, body.register form:not(.mobile) .form-group:has(.mobile) .control-label { display: none !important; } body.register { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/register-bg.png) no-repeat top center / cover fixed; padding: 0; } body.register #articles { float: unset; } body.register .wrapper::before { content: "Hi!\A Join now for exclusive access"; white-space: pre-line; font-size: 36px; font-weight: 400; color:var(--white); } html[moment-lang="zh-TW"] body.register .wrapper::before { content: "嗨~\A 立即加入獲得獨家服務"; } body.register .wrapper, body.register #articles { width:400px; } body.register .wrapper { padding-top: 200px; } body.register .bookmark { margin: 30px 0 10px; color: var(--white); } body.register .bookmark div { width: auto; height: unset; aspect-ratio: 334 / 123; padding: 0 30px; display: flex; align-items: center; } body.register .bookmark div.active { border: none; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/purple.png) no-repeat center / contain; } body.register form { border: none; margin: auto; padding: 0; } body.register .form-group { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 20px; } body.register .form-group .control-div { width: 100%; padding: 0; display:flex; justify-content:space-between; } body.register .form-group .control-info { color: #EB9CCB; width: 100%; margin: 10px 0 0 0; text-align: center; } body.register .form-group .control-div.mobile select.form-control { min-width: 25%; } body.register .form-group .control-div input, body.register .form-group .control-div.mobile select.form-control { margin: 0; } body.register .form-group .control-div.mobile input { width: -webkit-fill-available; margin-left:10px; } body.register form:not(.mobile) .control-label { color: var(--purple-13); position: absolute; z-index: 1; text-align: left; padding: 0; left: 20px; font-size: 14px; pointer-events: none; } body.register form:not(.mobile) .form-group:not(:has(.mobile)) input { text-align: right; } body.register .mobileCaptcha { background: var(--purple-1); color: var(--white); min-height: 52px; border-radius: 50px; top: 4px; right: 4px; padding: 0 30px !important; display: flex; align-items: center; } body.register .form-group:has(.sms-tip), body.register .form-group:has(.agreement) { margin: -10px 0 10px 0; } body.register .form-group:has(.sms-tip) .control-div { justify-content: right; padding-right:30px; font-weight: 400 !important; } body.register .form-group:has(.sms-tip) .control-div, body.register .form-group:has(.agreement) label { color: var(--pink-1); } body.register .form-group:has(.sms-tip) a, body.register .form-group:has(.agreement) a { color: var(--blue); font-weight: 400 !important; } body.register .form-group:has(.sms-tip) a::before, body.register .form-group:has(.agreement) a::before { content: "《" } body.register .form-group:has(.sms-tip) a::after, body.register .form-group:has(.agreement) a::after { content: " 》" } body.register #checkcode-input-group { width: 100%; } body.register .form-group:has(#checkcode-input-group):not(:has(img.ng-hide)) .control-label { left: 145px !important; } body.register #checkcode-input-group .input-group-addon.checkcode { position: absolute; top: 4px; left: 0; right: unset; } body.register #checkcode-input-group .input-group-addon.checkcode img { width: auto; right: unset; height: 52px; top: unset; left: 20px; } body.register form .form-group:has(.agreement) .control-div { justify-content: center; } body.register form .form-group:has(.agreement) label{ display:flex; align-items:center; margin-left:20px; } body.register form .form-group:has(.agreement) input { height: auto; min-height: unset !important; margin-right: 5px; } body.register .control-div:has(#btn-submit) { display: flex; flex-direction: column; } body.register .control-div button { margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; height: auto; font-size: 20px; color: white; } body.register .control-div #btn-submit { aspect-ratio: 1080/359; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/pink-long.png) no-repeat center / contain; transform: scale(1.17) translateX(3px); padding-bottom: 35px; margin-bottom: -30px; } body.register .control-div #btn-reset { color: var(--purple-14); font-size: 16px; aspect-ratio: 905/145; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/purple-long.png) no-repeat center / contain; background: none; } /* #endregion 註冊頁 */ /* #region 遊戲大廳頁 */ body.lobby #content { padding:0; } body.lobby .wrapper, body.lobby .banner img { width: 100%; min-width: 1200px; } body.lobby .banner { position: relative; color: var(--white); container-type: inline-size; } body.lobby .banner .title { position: absolute; font-family: "Kumbh Sans"; font-weight: 700; letter-spacing: 3.2px; top: 16%; left: 7%; font-size: 2.9cqw; } body.lobby .banner .title span { font-size: 3.4cqw; letter-spacing: 4.8px; } body.lobby .banner .sub-title { font-family: "Roboto"; font-weight: 500; top: 32%; left: 7%; position: absolute; font-size: 1.1cqw; display: block; max-width: 33%; } body.lobby #lobby .game-list { padding: 30px 60px 140px 60px; gap: 15px; display: flex; flex-wrap: wrap; justify-content: center; } body.lobby #lobby .game-list li { position: relative; width: calc(100%/6 - 75px/6); margin: 0; height: unset; aspect-ratio: 994/1300; border: none; min-width: 220px; padding: 0; } body.lobby #lobby .game-list li { background:none; } body.lobby #lobby .game-list li .name { background: none; position: absolute; color: var(--white); font-size: 32px; font-weight: 600; line-height: normal; letter-spacing: 1.2px; bottom: 24%; white-space: nowrap; padding: 0; width: auto; height: auto; left: 50%; transform: translateX(-50%); } body.lobby #lobby .game-list li::before, body.lobby #lobby .game-list li span:not([game-box='more'])::after { content: none; } body.lobby #lobby .game-list li:not([game-box='more'])::after { content: ''; aspect-ratio: 341/79; display: block; position: absolute; width: 70%; height: unset; left: 50%; bottom: 8%; transform: translateX(-50%); background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/lobby/paly.png) no-repeat center / contain; } body.lobby #lobby .game-list li .game-img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: contain; } body.lobby #lobby .game-list li .supplier { position: absolute; width: 50%; aspect-ratio: 250 / 98; object-fit: contain; right: 3%; top: 5%; } body.lobby #lobby .game-list li div.maintaining { border-radius: 7%; } body.lobby #lobby .game-list li div.maintaining span { font-size: 40px; padding: 0; } body.lobby #lobby .game-list li div.maintaining span::after { left: 0; } body.lobby #lobby .game-list[list="hotNavInfoList"] li::before, body.lobby #lobby .game-list li.IsHot::before { z-index: 1; content: ''; position: absolute; width: 35%; height: unset; aspect-ratio: 169 / 133; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/home/hot-game.png) no-repeat center / contain; top: 5%; left:3%; } /* #endregion 遊戲大廳頁 */ /* #region 優惠活動 */ body.promotion #content { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/promotion/bg.png) no-repeat top left / cover; } body.promotion #un-lobby { display: flex; gap: 30px; flex-wrap: wrap; } body.promotion #un-lobby::before { content: ''; display: block; height: 1px; background: var(--purple-6); width: 80%; position: absolute; top: 68px; left: 10%; } body.promotion .promo-tab { width: 370px; border-radius: 40px; background: var(--purple-o); overflow: hidden; height: min-content; min-height: auto; } body.promotion .promo-tab, body.promotion .promo-tab ul { display: flex; flex-direction: column; gap: 15px; justify-content: flex-start; } body.promotion .promo-tab ul { width: 100%; margin:0; } body.promotion .promo-tab ul li, body.promotion .promo-tab .btn-promo-progress { background: none; float: unset; height: 80px; display: flex; align-items: center; justify-content: center; font-family: Roboto; font-size: 24px; font-weight: 400; width: 100%; color: var(--purple-17); } body.promotion .promo-tab ul li.tab { background: var(--purple-16); color: var(--white); } body.promotion .category-item { flex:1; } body.promotion .discount { aspect-ratio: 1014 / 604; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/promotion/item-bg.png) no-repeat center / contain; padding: 2% 2% 2.2% 2%; overflow-y: auto; margin:0; } body.promotion .discount li { width: 100%; height: 100%; border-radius: 47px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 !important; } body.promotion .discount .promotion-img { width: 100%; height: -webkit-fill-available; overflow: hidden; } body.promotion .discount .promotion-img img { width: 100%; height: 100%; object-fit: contain; } body.promotion .discount .promotion-module-action button, #ng-app .promotion-detail-modal .action-btn-wrap button { color: var(--gray-3); border: 1px solid var(--gray-3); white-space: nowrap; border-radius: 50px; background: none; padding: 0 24px; flex: 1; box-shadow: none; font-family: 'Inter'; } body.promotion .discount .promotion-module-action button[ng-click="itemClick(item)"], #ng-app .promotion-detail-modal .action-btn-wrap button.join-status-1{ order: 1; flex: unset; width: unset !important; aspect-ratio: 443 / 82; color: var(--white); background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/promotion/button-content.png) no-repeat center / contain; border: none; text-shadow: none; } /* 優惠活動 >>> 詳細彈窗 */ #ng-app .promotion-detail-modal .modal-content { padding: 2%; color: var(--white); aspect-ratio: 1373/1109; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/promotion/detail-modal-bg.png) no-repeat center / contain; } #ng-app .promotion-detail-modal .modal-body { height: 100%; display: flex; flex-direction: column; border-radius: 49px; } #ng-app .promotion-detail-modal .modal-body::before { content: ''; height: 100%; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 30%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0) 100%); position: absolute; opacity: 0.5; top: 0; left: 0; border-radius: inherit; pointer-events: none; } #ng-app .promotion-detail-modal .promotion-content { height: -webkit-fill-available; overflow: auto; } #ng-app .promotion-detail-modal .action-btn-wrap { text-align: center; margin-top: 10px; } #ng-app .promotion-detail-modal .action-btn-wrap button.close-btn { position: absolute; bottom: -11%; left: 50%; transform: translateX(-50%); color: var(--white); font-size: 24px; font-weight: 400; padding: 0 24px; aspect-ratio: 905 / 145; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/button/purple-long.png) no-repeat center / contain; width: 40%; height: unset; border: none; } #ng-app .promotionModuleModal .modal-dialog .modal-content .message-wrap { color: var(--black); } /* #endregion 優惠活動 */ /* #region 會員中心架構 */ #content:has(#member-center) { padding: 0; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/bg.png) no-repeat top left / cover; } #member-center .wrapper.member-center { width: 1200px; } #member-center .wrapper.member-center { padding: 0; } #member-center .wrapper.member-center::before { content: ''; display: block; height: 1px; background: var(--purple-6); width: 80%; position: absolute; top: 68px; left: 10%; } #member-center .wrapper.member-center .account-bar { margin: 0; padding: 20px 30px; aspect-ratio: 1377/221; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/top-bg.png) no-repeat center / contain; } #member-center .wrapper.member-center .account-bar .member-info { background: none; color: var(--pink-2); font-size: 30px; font-weight: 400; display: flex; flex-direction: column; align-items: center; width: auto; height: 100%; padding: 0; margin: 0 30px; } #member-center .wrapper.member-center .account-bar .member-info div i { margin: 0 0 0 0; width: 120px; aspect-ratio: 1 / 1; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/avatar.png) no-repeat center / contain; height: unset; } #member-center .wrapper.member-center .account-bar span { display: flex; justify-content: center; overflow: visible; } #member-center .wrapper.member-center .account-bar .wallet { background: none; padding: 0; height: 100%; display: flex; justify-content: space-between; } #member-center .wrapper.member-center .account-bar .vip-info { font-size: 16px; color: var(--white); font-weight: 400; } #member-center .wrapper.member-center .account-bar .vip-info .vip { font-size: 30px; justify-content: left; } #member-center .wrapper.member-center .account-bar .vip-info .account { font-size: 24px; justify-content: left; } #member-center .wrapper.member-center .account-bar .vip-info .account::before { content: ''; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/id.png) no-repeat center / contain; aspect-ratio:1/1; width:31px; display:block; margin-right:10px; } #member-center .wrapper.member-center .account-bar .balance { color: var(--white); text-shadow: var(--text-shadow-1); font-size: 48px; font-weight: 500; margin: auto 0 0 0; } #member-center .wrapper.member-center .account-bar .balance .num { display: flex; align-items: center; gap: 20px; justify-content: end; } #member-center .wrapper.member-center .account-bar .balance .num::before { content: ''; display: inline-block; height: 50px; aspect-ratio: 64/51; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/money.png) no-repeat center / contain; } #member-center .wrapper.member-center .account-bar .balance .login_time { font-size: 24px; } #member-center .wrapper.member-center .pages-ul { font-family: Roboto; font-size: 30px; font-weight: 400; display: flex; justify-content: space-between; align-items: center; } #member-center .wrapper.member-center .pages-ul li { position:relative; flex:1; aspect-ratio:505/359; } #member-center .wrapper.member-center .pages-ul li::before { content: ''; position: absolute; aspect-ratio: 505 / 359; width: 118%; display: block; top: 0; left: 50%; transform: translateX(-47%); } #member-center .wrapper.member-center .pages-ul li.deposit::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/deposit.png) no-repeat center top / contain; } #member-center .wrapper.member-center .pages-ul li.withdraw::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/withdraw.png) no-repeat center top / contain; } #member-center .wrapper.member-center .pages-ul li.vip::before { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/member-center/vip.png) no-repeat center top / contain; } #member-center .wrapper.member-center .pages-ul li a { display: flex; width: 100%; height: 100%; align-items: center; color: var(--white); padding: 61px 0 0 64px; position: relative; } #member-center .wrapper.member-center .pages-ul li a::after { color: var(--gray-4); font-size: 24px; position: absolute; bottom: 66px; } #member-center .wrapper.member-center .pages-ul li.deposit a::after { content: 'Online deposit'; } #member-center .wrapper.member-center .pages-ul li.withdraw a::after { content: 'Withdraw money'; } #member-center .wrapper.member-center .pages-ul li.vip a::after { content: 'VIP'; } #member-center .wrapper.member-center .side-bar { display: flex; flex-direction: column; gap: 15px; justify-content: flex-start; width: 370px; border-radius: 40px; background: var(--purple-o); overflow: hidden; height: min-content; min-height: auto; padding: 0; margin-right: 30px; } #member-center .wrapper.member-center .side-bar li { background: none; float: unset; height: 80px; display: flex; align-items: center; justify-content: center; width: 100%; padding:0; } #member-center .wrapper.member-center .side-bar li.active { background: var(--purple-16); } #member-center .wrapper.member-center .side-bar li.active a { color: var(--white); } #member-center .wrapper.member-center .side-bar li a { width:100%; height:100%; color: var(--purple-17); font-size: 24px; font-weight: 400; font-family: Roboto; display:flex; align-items:center; justify-content:center; padding:0; } #member-center .wrapper.member-center .side-bar li a:hover, #member-center .wrapper.member-center .side-bar li.active a { background:none; } #member-center .wrapper.member-center .main { flex: 1; background: var(--purple-o); border-radius: 40px; margin-top: 50px; } #member-center .wrapper.member-center .main .panel { box-shadow: none; } #member-center .wrapper.member-center .main .panel-heading { color: var(--white); font-family: Roboto; font-size: 28px; font-weight: 400; display: flex; gap: 5px; align-items: center; position: absolute; left: 0; padding: 0; top: -50px; line-height: 1; background:none; } #member-center .wrapper.member-center .main .panel-heading::after { color: var(--purple-18); font-size: 24px; text-transform: none; } #member-center .wrapper.member-center .main .panel-heading div::after { content: '/'; } #member-center .wrapper.member-center .main .panel-body { padding: 30px 0; } #member-center .wrapper.member-center .main .panel-body .alert { font-family: Roboto; font-size: 20px; font-weight: 400; color: var(--pink); background: var(--pink-o); border-color: transparent; margin: 20px 0; border-radius: 0; } #member-center .wrapper.member-center .main .panel-body .alert i, #member-center .wrapper.member-center .main .input-block .input-block-top, #member-center .wrapper.member-center .main .input-block .input-block-btm { display: none; } #member-center .wrapper.member-center .main form { width: 460px; padding: 50px 0; margin: auto; } #member-center .wrapper.member-center .main .form-group { margin:0 0 38px 0; } #member-center .wrapper.member-center .main .form-group:has(input) .control-label, #member-center .wrapper.member-center .main .form-group:has(select) .control-label { color: var(--purple-13); position: absolute; z-index: 1; text-align: left; padding: 0; left: 20px; pointer-events: none; float: unset; top: 50%; transform: translateY(-50%); z-index: 11; } #member-center .wrapper.member-center .main .form-group .control-div, #member-center .wrapper.member-center .main .form-group .input-block { width: -webkit-fill-available; max-width: unset; padding: 0; } #member-center .wrapper.member-center .main .form-group input, #member-center .wrapper.member-center .main .form-group select { text-align: right; width: 100%; } #member-center .wrapper.member-center .main .form-group:has(select) input { z-index: -1; } /* 會員中心 >>> 用戶安全 */ #member-center .main #security-list .panel-heading::after, #member-center .main #change-pwd .panel-heading::after { content: 'User safety'; } #member-center .main #security-list .main-list { padding: 0 10px; display: flex; flex-wrap: wrap; } #member-center .main #security-list .main-list li { border: none; margin: 0; width: 50%; height: unset; aspect-ratio: 869/1011; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/securityList/ChangePassword.png) no-repeat center top / contain; } #member-center .main #security-list .main-list li:has(a[href="/Account/ChangeMoneyPassword"]) { background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/securityList/ChangeMoneyPassword.png) no-repeat center top / contain; } #member-center .main #security-list .main-list li:has(a[href="/Account/SetWalleteAccount?Id=1"]), #member-center .main #security-list .main-list li:has(a[href="/Account/SetWalleteAccount?Id=2"]), #member-center .main #security-list .main-list li:has(a[href="/Account/SetWalleteAccount?Id=3"]), #member-center .main #security-list .main-list li:has(a[href="/Account/SetWalleteAccount?Id=4"]) { width: 100%; aspect-ratio: 1708/976; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/securityList/SetWalleteAccount.png) no-repeat center top / contain; margin: -9% 0 -1% 0; } #member-center .main #security-list .main-list li a { width: 100%; height: 100%; display: block; color: var(--white); font-family: Roboto; font-size: 28px; font-weight: 400; padding: 325px 100px 0 100px; text-align: center; } #member-center .main #security-list .main-list li a:hover { background: none; } #member-center .main #security-list .main-list li a[href="/Account/SetWalleteAccount?Id=1"], #member-center .main #security-list .main-list li a[href="/Account/SetWalleteAccount?Id=2"], #member-center .main #security-list .main-list li a[href="/Account/SetWalleteAccount?Id=3"], #member-center .main #security-list .main-list li a[href="/Account/SetWalleteAccount?Id=4"] { padding: 207px 92px 0 490px; text-align: center; } #member-center .main #security-list .main-list li a i { display: none; } /* #endregion 會員中心架構 */ /* #region 設定銀行帳戶 */ body.account #member-center .main #change-pwd .account-form { padding: 0 10px; gap: 20px; flex-wrap: wrap; } body.account #member-center .main #change-pwd .account-form .account-list { width: calc(50% - 10px); } body.account #member-center .main #change-pwd .account-form .account-list i.default, body.account #member-center .main #change-pwd .account-form .add-account i{ display: none; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail { position: relative; width: 100%; height: unset; aspect-ratio: 408/306; background:none; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail::before { content: ''; width: 112%; left: -6%; top: 2%; aspect-ratio: 408/306; position: absolute; display: block; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/securityList/card-bg.png) no-repeat center / contain; pointer-events:none; } body.account #member-center .main #change-pwd .account-form .account-list:has(i.default) .card-detail::before { width: 112%; left: -6%; top: 0%; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/securityList/card-bg-active.png) no-repeat center / contain; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail.notReviewed::before, body.account #member-center .main #change-pwd .account-form .account-list .card-detail.rejected::before { width: 108%; left: -4%; top: 2.5%; background: url(/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Shared/images/securityList/card-bg-disabled.png) no-repeat center / contain; } body.account #member-center .main #change-pwd .account-form .card-detail div { position: static; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail .bankTitle, body.account #member-center .main #change-pwd .account-form .account-list .card-detail .bankCity, body.account #member-center .main #change-pwd .account-form .account-list .card-detail .bankNumber, body.account #member-center .main #change-pwd .account-form .account-list .card-detail.approved .bankTitle, body.account #member-center .main #change-pwd .account-form .account-list .card-detail.approved .bankCity, body.account #member-center .main #change-pwd .account-form .account-list .card-detail.approved .bankNumber, body.account #member-center .main #change-pwd .panel-body[ng-if="setId == 4"] .account-form .account-list .card-detail .bankTitle { color: var(--gray-5); letter-spacing: 1.2px; text-transform: uppercase; position: absolute; bottom: 58%; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail .bankTitle { font-size: 24px; font-weight: 600; left: 3%; bottom: 29%; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail .bankCity { font-size: 16px; font-weight: 600; left: 3%; bottom: 20%; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail .bankNumber { font-size: 20px; font-weight: 400; left: 50%; transform: translateX(-50%); bottom: 43.5%; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail .lineChat { position: absolute; right: 3%; bottom: 65.5%; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail .audit-failed { left: 3%; bottom: 68%; position: absolute; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail .memo { position: absolute; right: calc(3% + 42px); bottom: 69%; font-size: 15px; text-align: right; } body.account #member-center .main #change-pwd .account-form .account-list .card-detail.approved .bankTitle, body.account #member-center .main #change-pwd .panel-body[ng-if="setId == 4"] .account-form .account-list .card-detail .bankTitle { left: 50%; transform: translateX(-50%); } body.account #member-center .main #change-pwd .account-form .account-list .card-detail.approved .bankCity, body.account #member-center .main #change-pwd .panel-body[ng-if="setId == 4"] .account-form .account-list .card-detail .bankCity { bottom: 49%; font-weight: 400; left: 50%; transform: translateX(-50%); } body.account #member-center .main #change-pwd .account-form .account-list .card-detail.approved .bankNumber, body.account #member-center .main #change-pwd .panel-body[ng-if="setId == 4"] .account-form .account-list .card-detail .bankNumber { letter-spacing: 1px; bottom: 36%; left: 50%; transform: translateX(-50%); } body.account #member-center .main #change-pwd .account-form .account-list .card-detail.approved .approveStatus, body.account #member-center .main #change-pwd .panel-body[ng-if="setId == 4"] .account-form .account-list .card-detail .approveStatus { position: absolute; bottom: 13%; left: 50%; transform: translateX(-50%); left: 50%; transform: translateX(-50%); } body.account #member-center .main #change-pwd .account-form .account-list .card-action { margin-top: -10px; /* color: var(--gray-5);*/ position: relative; } body.account #member-center .main #change-pwd .account-form .account-list .card-action div:hover { color:var(--white) !important; } body.account #member-center .main #change-pwd .account-form .add-account { margin-top: 120px; border: 4px solid var(--pink-3); border-radius: 20px; width: 100%; padding: 20px; min-height: unset; font-size: 24px; font-weight: 400; line-height: 1; color: var(--pink-4); } body.account #member-center .main #change-pwd .account-form .add-account span { padding: 0; font-size: 24px; font-weight: 400; } } /* 設定銀行帳戶 >>>設定電子錢包 */ #member-center .wrapper.member-center .main .account-form:has(.kyc-image) { display: flex; flex-direction: row; } #member-center .wrapper.member-center .main .account-form .kyc-image { position: relative; left: unset; top: unset; bottom: unset; } /* 設定銀行帳戶 >>> 設定便利超商 */ #member-center .main #change-pwd .panel-body[ng-if="setId == 4"] .form-group:has(div[ng-click="openStoreSearchUrl(newStoreType)"]) .control-label { transform: translateY(-115%); } /* #endregion 設定銀行帳戶 */ #lobby { min-height: 500px; } #lobby .game-list { display: block; padding: 15px 0; font-size: 0; } #lobby .game-list li { position: relative; display: inline-block; vertical-align: top; cursor: pointer; } #lobby .game-list li:has(.maintaining) { pointer-events: none; } #lobby .game-list li div.maintaining { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; display: flex; justify-content: center; align-items: center; background: hsl(0deg 0% 0% / 50%); color: #fff; cursor: default; } #lobby .game-list li div.maintaining span { position: relative; bottom: unset; left: unset; width: auto; height: auto; font-size: 48px; font-weight: bold; -webkit-background-clip: text; color: rgb(255, 255, 255); background-image: linear-gradient(180deg, #FFF 50%, #999 75%); -webkit-text-fill-color: transparent; } #lobby .game-list li div.maintaining span::before { content: attr(data-text); position: absolute; z-index: -1; background: linear-gradient(180deg, rgba(32, 110, 255, 1) 30%, #1555A4 50%); -webkit-background-clip: text; -webkit-text-stroke: 6px transparent; color: rgba(21,85,164,1); } #lobby .game-list li div.maintaining span::after { content: attr(data-text); position: absolute; left: 23px; z-index: -2; color: transparent; text-shadow: 2px 3px 4px rgb(224 224 224 / 75%); } [moment-lang="en-US"] #lobby .game-list li div.maintaining span, [moment-lang="ja-JP"] #lobby .game-list li div.maintaining span, [moment-lang="vi-VN"] #lobby .game-list li div.maintaining span { font-size: 24px; } #un-lobby { display: inline-block; width: 100%; margin: 0 auto; } /* 各頁設定 */ #un-lobby aside { float: left; width: 250px; margin-right: 20px; border: 1px solid #243964; background: #021622; } #un-lobby #sidebar { position: relative; display: block; padding: 20px 0; margin: 0 0 20px 0; } #un-lobby #sidebar li { } #un-lobby #sidebar li a { display: block; height: 45px; line-height: 45px; padding-left: 50px; color: #01b2f1; font-size: 16px; font-family: Arial, 'Microsoft YaHei'; text-decoration: none; } #un-lobby #sidebar li a:before { content: '<'; margin-right: 5px; } #un-lobby #sidebar li a:hover, #un-lobby #sidebar li.active a { color: #fff; } #articles { padding: 0; width: 730px; float: right; font-size: 14px; color: #82b8cb; } #articles h2 { margin: 10px 0 25px; color: #fff; font-size: 18px; font-weight: normal; } #articles h3 { font-size: 16px; text-align: left; } #articles p { margin: 1em 0; } #articles table { width: 100%; color: #fff; } #articles table tr, #articles table th, #articles table td { line-height: 2em; text-align: center; border: 1px solid #ababab; background-color: #242b39; } #articles table th { color: #fff; background-color: #888; } /*重點顏色*/ #articles .highlight { color: #ff0000; font-weight: bolder; } /* #region 合作夥伴tab 供其他页面使用*/ #articles ul.mtab-menual { margin: 0 0 20px 0; padding: 0; } #articles ul.mtab-menual li { display: inline-block; height: 25px; padding: 0 5px; color: #fff; font-size: 12px; line-height: 25px; text-align: center; background-color: #0e86ca; } #articles ul.mtab-menual li.mtab { background-color: #ff9936; } /* #endregion 合作夥伴tab 供其他页面使用*/ /* #region deposit线上存款页面使用 */ #articles ul.deposit { } #articles ul.deposit li { font-size: 12px; counter-increment: title; } #articles ul.deposit li .payTitle:before { content: counter(title,upper-alpha)"、"; } #articles ul.deposit li .payTitle.external-pay:before { content: ''; } #articles ul.deposit li .payTitle { color: #ff9600; font-size: 16px; } #articles ul.deposit li .payTitle span.icon { display: block; font-size: 0; } #articles ul.deposit li .payTitle span.icon img { vertical-align: top; } #articles ul.deposit li a { display: block; height: 100%; text-decoration: none; } #articles ul.deposit li .green { color: #0f0; } #articles ul.deposit li .toggle { color: #ee0; } #articles ul.deposit li .toggle.color { color: #ff3030; } #articles ul.deposit li span.event { display: inline-block; width: 51px; height: 25px; vertical-align: middle; background: url('/CdnRedirect/Web.Portal/DG002-01.Portal/Content/Views/Deposit/images/event.gif') no-repeat left center; } /* #endregion deposit线上存款页面使用 */ /* #region account nav共用 */ .body { position: relative; width: 1000px; margin: 0 auto; padding: 1px; font-size: 14px; background: #201c19; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .body #title { color: #fff; text-align: center; background: #201c19; } .body.container #title, .body #account-heading, .body #withdrawal-heading, #account-panel .account-nav li.active { color: #000; background: #ffcf0e; } .body #account-heading, .body #withdrawal-heading { margin-right: 15px; } /* 檢視存入帳戶的文字顏色 */ .body #show-account-info.btn { color: #fff; } /* #endregion account nav共用 */ /* #region 輸入框placeholder顏色 */ /* 此為預設顏色，若各站需特別色系請由此修改，不需要可整段刪除 */ .form-group .control-div input::-webkit-input-placeholder { color: #999; } .form-group .control-div input::-moz-placeholder { color: #999; } .form-group .control-div input:-ms-input-placeholder { color: #999; } .form-group .control-div input.placeholder { color: #999; } /* #endregion 輸入框placeholder顏色 */ /* ──────────────────────────────────────────────────────── 世足賽直播 2026 - Float Icon + Dialog ──────────────────────────────────────────────────────── */ /* ── Float Icon ── */ .world-cup-float { position: fixed; right: 24px; bottom: 160px; z-index: 1000; cursor: pointer; user-select: none; } .world-cup-float .float-icon { width: 72px; height: 72px; border-radius: 12px; display: block; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); -webkit-transition: opacity 0.2s, -webkit-transform 0.15s; transition: opacity 0.2s, transform 0.15s; } .world-cup-float .float-icon:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } .world-cup-float .float-icon.not-eligible { opacity: 0.45; } .world-cup-float .countdown-icon { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); -webkit-transition: -webkit-transform 0.15s; transition: transform 0.15s; } .world-cup-float .countdown-icon:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } .world-cup-float .countdown-bg { width: 100%; height: 100%; display: block; } .world-cup-float .countdown-digits { position: absolute; bottom: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: flex; gap: 2px; } .world-cup-float .digit-box { position: relative; width: 17px; height: 25px; } .world-cup-float .rect-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .world-cup-float .digit-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .world-cup-float .number-sprite { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* ── Snackbar ── */ .wc-snackbar { position: fixed; bottom: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #c62828; color: #fff; padding: 10px 24px; border-radius: 4px; z-index: 10100; font-size: 14px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; } /* ── Dialog Overlay ── */ .wc-dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9900; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } /* ── Dialog Box ── */ .world-cup-dialog { width: 780px; max-width: 96vw; height: 82vh; background: #fff; border-radius: 8px; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } /* ── Header ── */ .wc-dialog-header { position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; } .wc-title-section { position: relative; } .wc-header-bg { width: 100%; display: block; } .wc-header-trophy { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 70px; height: auto; } .wc-header-overlay { display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 10px 44px; gap: 10px; background: #fff; text-align: center; } .wc-header-logo { width: 44px; height: auto; -webkit-flex-shrink: 0; flex-shrink: 0; object-fit: contain; } .wc-header-texts { min-width: 0; } .wc-header-title { font-size: 40px; font-weight: bold; color: #1a1a1a; line-height: 1.3; } .wc-header-subtitle { font-size: 25px; color: #1B5CFF; margin-top: 4px; font-weight: bold; } .wc-close-btn { position: absolute; top: 6px; right: 8px; z-index: 1; background: none; border: none; cursor: pointer; color: #fff; font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 4px; } .wc-close-btn:hover { background: rgba(255, 255, 255, 0.2); } /* ── List view ── */ .wc-list-view { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow-y: auto; } .wc-list-content { -webkit-flex: 1; flex: 1; } /* ── States ── */ .wc-center-state { padding: 60px 16px; text-align: center; color: #888; font-size: 14px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; } .wc-error-text { color: #e53935; } .wc-loading { display: -webkit-flex; display: flex; justify-content: center; align-items: center; padding: 60px 0; } .wc-spinner { width: 32px; height: 32px; border: 3px solid #e0e0e0; border-top-color: #4caf50; border-radius: 50%; -webkit-animation: wc-spin 0.7s linear infinite; animation: wc-spin 0.7s linear infinite; } @-webkit-keyframes wc-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes wc-spin { to { transform: rotate(360deg); } } /* ── Date section ── */ .wc-date-section { margin: 6px 6px 0; border: 1px solid #d6eaf8; border-radius: 8px; overflow: hidden; } .wc-date-header { display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: #fff; } .wc-date-label { display: -webkit-flex; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #1B5CFF; } .wc-date-icon-wrapper { position: relative; display: -webkit-inline-flex; display: inline-flex; width: 22px; height: 22px; -webkit-flex-shrink: 0; flex-shrink: 0; } .wc-icon-time { width: 100%; height: 100%; } .wc-icon-soccer { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; } .wc-stage-label { font-size: 11px; color: #666; padding: 2px 10px; background: -webkit-linear-gradient(left, rgba(130,231,237,0) 0%, #E5F7FF 51%, rgba(185,219,255,0) 100%); background: linear-gradient(90deg, rgba(130,231,237,0) 0%, #E5F7FF 51%, rgba(185,219,255,0) 100%); } /* ── Match grid ── */ .wc-match-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; padding: 6px; background: #e8e8e8; } .wc-match-card { width: calc(25% - 6px); background: #fff; border-radius: 6px; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-width: 160px; } .wc-card-top { display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; padding: 5px 8px 3px; } .wc-group-tag { font-size: 11px; color: #1B5CFF; } .wc-match-time { font-size: 12px; font-weight: 700; color: #666; background: #D3E7FF; border-radius: 20px; padding: 1px 8px; } .wc-teams-row { display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; -webkit-flex: 1; flex: 1; } .wc-team { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; align-items: center; gap: 4px; width: 44%; } .wc-flag-img { width: 40px; height: 27px; object-fit: cover; border-radius: 2px; display: block; } .wc-flag-placeholder { width: 40px; height: 27px; background: #ddd; border-radius: 2px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #888; } .wc-team-name { font-size: 11px; color: #333; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 2px; } .wc-vs { font-size: 20px; color: #bbb; -webkit-flex-shrink: 0; flex-shrink: 0; width: 12%; text-align: center; } .wc-card-actions { padding: 2px 8px 8px; } .wc-watch-btn { display: block; width: 100%; padding: 5px 0; background: #4caf50; color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; text-align: center; } .wc-watch-btn:hover { background: #388e3c; } .wc-watch-btn[disabled] { background: #bdbdbd; cursor: not-allowed; } /* ── Player view ── */ .wc-player-view { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; height: 100%; background: #000; } .wc-player-header { display: -webkit-flex; display: flex; align-items: center; padding: 8px 12px; background: #1a1f35; color: #fff; gap: 8px; -webkit-flex-shrink: 0; flex-shrink: 0; } .wc-back-btn { background: none; border: none; color: #fff; cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 4px; } .wc-back-btn:hover { background: rgba(255,255,255,0.15); } .wc-match-title { font-size: 14px; font-weight: bold; -webkit-flex: 1; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wc-stream-iframe { -webkit-flex: 1; flex: 1; width: 100%; border: none; background: #000; } .wc-no-url { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }