@charset "utf-8";

/*basic*/

* { margin: 0; padding: 0; }

fieldset, img { border: 0; }

table { border-collapse: collapse; border-spacing: 0; }

li { list-style: none; }

.clearfix:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }

.clearfix { zoom: 1; }

.clear { clear: both; }

a { text-decoration: none; color: #fff; }

a:hover { text-decoration: none; }

.txtcenter { text-align: center; }



/**/

.navbar { position: relative; z-index: 2; }

.fullbg { position: relative; z-index: 1; }

.cart { position: fixed; right: 0; bottom: 0; z-index: 3; }



body { background: url(bg.jpg?v=4) no-repeat center top; background-size: cover; font-family: 'Heebo', Arial, sans-serif; color: #fff; }

.wrapper { width: 1050px; margin: 0 auto; }

.navbar { float: right; height: 22px; line-height: 22px; padding: 6px;/* background: #e3bb3b;*/ text-align: right; color: #fff; }

.navbar .wrapper{width:100%;}

.before, .after, .game-select, .user-info > * { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; height: 24px; line-height: 24px; }

.after a { position: relative; }

.after a .num { display: inline-block; vertical-align: middle; width: 20px; height: 20px; line-height: 22px; border-radius: 14px; border: none; padding: 0; background: #fff; font-size: 14px; text-align: center; color: #e3bb3b; margin-top: -3px; margin-left: 5px; }

.navbar a { color: #fff; margin: 0 5px; }

.navbar a:hover { text-decoration: underline; }

.navbar .user-info { display: none; /*float: left;*/ padding-left: 8px; float: right; }

.user-info #puser span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -2px; }

.game-select { position: relative; width: 200px; padding: 0 5px; margin-left: 10px; text-align: left; border: 1px solid #333; background: #e0e0e2; cursor: pointer; }

.game-select:after { position: absolute; right: 5px; top: 8px; content: ""; width: 0; height: 0; border: 6px solid transparent; border-top: 8px solid #333; }

.game-select ul { display: none; position: absolute; left: -1px; top: 24px; width: 210px; height: auto; border: 1px solid #333; background: #fff; }

.game-select ul li { width: 200px; padding: 0 5px; }

.game-select ul li:hover { background: #e0e0e2; }





.header { padding: 0; }

.logo { display: block; width: 240px; height: 112px; background: url(logo.png) no-repeat 0 0; margin: 0; }

.top { position: relative; }

.topinfo { position: absolute; right: 0; top: 45px; width: 700px; display: flex; justify-content: flex-end; }

.topinfo > * { margin-left: 20px; }

a.banner { position: absolute; right: 0; top: 0; cursor: default; display: none;}

/*.longbanner { padding: 10px 0; }*/

.longbanner, .longbanner img { height: 80px; width: 100%; display:block; }

.picscroll { height:80px; overflow:hidden; margin:10px 0; }



.menu { width: 100%; height: 80px; margin: 60px auto 30px auto; text-align: center; display: flex; justify-content: center; }

.menu a { display: inline-block; vertical-align: top; float: none; width: 45%; max-width: 480px; height: 60px; margin: 10px 8px; line-height: 60px; background: url(obg1.png) repeat center top; text-align: center; color: #fff; font-size: 26px; font-weight: bold; transition: all .2s ease-in-out; white-space: nowrap; padding: 0 10px; box-sizing: border-box; }

.menu a:hover { color: #e3bb3b; }

.menu a.on { height: 80px; margin: 0; line-height: 80px; background: #e3bb3b; color: #000; text-decoration: none; }

.menu a i { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 46px; height: 50px; background: url(btns.png) no-repeat 0 0; margin-right: 5px; }

.menu a i.ic1 { background-position: -66px 0; }

.menu a i.ic2 { background-position: -66px -52px; }

.menu a i.ic3 { background-position: -66px -108px; }

.menu a.on i.ic1, .menu a.on:hover i.ic1 { background-position: 0 0; }

.menu a.on i.ic2, .menu a.on:hover i.ic2 { background-position: 0 -52px; }

.menu a.on i.ic3, .menu a.on:hover i.ic3 { background-position: 0 -108px; }

.menu a:hover i.ic1 { background-position: -130px 0; }

.menu a:hover i.ic2 { background-position: -130px -52px; }

.menu a:hover i.ic3 { background-position: -130px -108px; }





.sub-menu { margin: 20px auto 30px; text-align: center; }

.sub-menu a { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 0 40px; color: #c3c3c3; font-size: 18px; font-weight: bold; border-bottom: 2px solid transparent; }

.sub-menu a:before { display: block; width: 4px; height: 4px; content: ""; position: absolute; left: -8px; top: 50%; margin-top: -2px; background: #c3c3c3; }

.sub-menu a.on, .sub-menu a:hover { color: #e3bb3b; text-decoration: none; border-bottom-color: #e3bb3b; }

.sub-menu a.on:before, .sub-menu a:hover:before { background: #e3bb3b; }



.icon-phone { display: inline-block; vertical-align: middle; *display: inline; *zoom: 1; vertical-align: middle; width: 18px; height: 26px; margin-top: -2px; background: url(btns.png) no-repeat -281px -311px; }

.sub-menu a:hover .icon-phone, .sub-menu a.on .icon-phone { background-position: -313px -311px; }



.mall { width: 100%; margin: 0 auto; }



.card-list li { float: left; width: 23%; margin: 1%; color: #fff; }

.card-list li img { width: 100%; }

.card-list .price { position: relative; width: 90%; height: 32px; padding: 5px 5%; line-height: 32px; background: url(obg1.png) repeat center top; font-size: 16px; }

.card-list .price b { color: #e3bb3b; }

/*a.add-to-cart { display: block; width: 32px; height: 32px; text-align: center; line-height: 34px; font-size: 36px; background: #e3bb3b; color: #38383c; border-radius: 2px; }

a.add-to-cart:hover { text-decoration: none; background: #eb6100; }

.card-list .price a.add-to-cart { position: absolute; right: 5px; top: 5px; }*/

.card-list li .num { position: absolute; right: 5px; top: 5px; }

.card-list li .num > *, .item-list li .num > * { display: inline-block; vertical-align: middle; *display: inline; *zoom: 1; text-align: center; }



/*shopping cart*/

.cart-btn { position: fixed; right: 0; top: 0; height: 100%; z-index: 33;  width: 40px;background: url(bg.jpg?v=4) no-repeat center top; background-size: cover;  }

.cart-width { width: 600px; }

.cart-all-btn { position: absolute; left: 0; width: 40px; top: 40%; z-index: 2; }

.cart-link, .cart-shortcut { /*position: absolute; bottom: 0;*/ display: block; height: 32px; padding: 8px 0; background: #767678; font-size: 24px; line-height: 32px; }

.cart-link { /*right: 180px; */width: 40px; background: url(btns.png) no-repeat 2px -175px #767678; border-bottom: 2px solid #fff; }

.cart-link:hover { background: url(btns.png) no-repeat 2px -216px #e3bb3b; }

.cart-shortcut { /*right: 0;*/ width: 100%; height: auto; text-align: center; background: #e3bb3b; }

.cart-shortcut > *, .cart-list li > *, .cart-list li .num > * { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }

.cart-shortcut b { font-weight: normal; display: block; font-size: 0; height: 100px; background: url(mycart-en.png) no-repeat 0 0; }

.cart-shortcut em { display: block; width: 32px; height: 40px; background: url(btns.png) no-repeat -335px -6px; margin-top: 5px; }

.cart-shortcut:hover, .cart-shortcut.on { background: #e3bb3b; color: #303034; }

.cart-shortcut:hover b, .cart-shortcut.on b { border-left-color: #303034; background-position: -46px 0; }

.cart-shortcut:hover em { background-position: -372px -6px; }

.cart-shortcut.on em { background-position: -372px -56px }

.cart-shortcut .num { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; line-height: 28px; border-radius: 14px; border: none; padding: 0; background: #d70404; font-size: 14px; text-align: center; color: #fff; }

.cart-shortcut:hover .num { color: #fff; }



.cart-list { display: none; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; padding: 30px 4% 30px 60px; background: #1e1e1f; border-left: 1px solid #e3bb3b; color: #fff; height: 100%; }

.cart-list .shopcartpanel { max-height: calc(100vh - 140px); overflow: hidden; }

.cart-list li { padding: 5px 0; border-bottom: 1px dashed #404040; }

.cart-list li > * { text-align: center; }

.cart-list li .name { width: 55%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cart-list li .num { width: 15%; }

.cart-list li .num span, .card-list li .num span, .item-list li .num span { width: 22px; color: #e3bb3b; }

.cart-list li .num a, .card-list li .num a, .item-list li .num a { width: 24px; height: 24px; line-height: 25px; background: #3f3f40; font-size: 22px; border-radius: 3px; }

.cart-list li .num a:hover, .card-list li .num a:hover, .item-list li .num a:hover { text-decoration: none; background: #e3bb3b; color: #1e1e1f; }

.cart-list li .price { width: 18%; margin: 0 1%; font-weight: bold; font-size: 20px; color: #e3bb3b; }

.cart-list li a.delete { text-decoration: underline; }

.cart-list li a.delete:hover { color: #e3bb3b; }

.cart-pay { text-align: right; padding-top: 15px; }

.cart-pay a { background: #e3bb3b; text-decoration: none; color: #1e1e1f; padding: 2px 10px; border-radius: 3px; font-weight: bold; }

.cart-pay a:hover { background: #eb6100; }

.cart-total { text-align: right; padding-top: 15px; }

.cart-list .nothing { position: absolute; left: 0; top: 50%; margin-top: -90px; width: 100%; text-align: center; }

.cart-list .nothing a { color: #e3bb3b; }

.cart-list .nothing a:hover { text-decoration: underline; }



.card-list li .num a, .item-list li .num a { text-decoration: none; background: #e3bb3b; color: #1e1e1f; }

.card-list li .num a:hover, .item-list li .num a:hover { background: #ffb53a; }



/*20240108 buy limit*/

.card-list li .num a.inactive, .card-list li .num a.inactive:hover, .item-list li .num a.inactive, .item-list li .num a.inactive:hover { background: #898989; cursor:default; }

.cart-list li .num a.inactive, .mycart-list td .num a.inactive { color: #aaa; cursor:default; }

.cart-list li .num a.inactive:hover { background: #3f3f40; }

.mycart-list td .num a.inactive { background: #4a4a4c; color: #999; } 

.mycart-list td .num a.inactive:hover { background: #4a4a4c; }



/*pop*/

.pop-box { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }

.mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1112;}

.pop { position: relative; margin: 0 auto; z-index: 1113; background: #1a191d; border: 3px solid #666; color: #fff; padding-bottom: 30px; }

.box1 { width: 460px; }

.box2 { width: 760px; }

.pop-head { height: 30px; }

.pop-head .close { position: absolute; right: 5px; top: 5px; display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 36px; }

.pop-head .close:hover { text-decoration: none; }

.pop-main label, .pop-main input { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }

.pop-main label { width: 100px; text-align: right; }

#order-box .pop-main label { color: #e3bb3b }

#TQGameCard-box .pop-main label, #TQGameCard-credit .pop-main label { width: 130px; }

.pop-main input, .pop-main select { width: 200px; height: 26px; padding: 0 3px; line-height: 26px; border: 1px solid #666; }

.pop-main input.yzm { width: 100px; }

#TQGameCard-box .pop-main input, #TQGameCard-credit .pop-main input { width: 170px; }

#TQGameCard-box .pop-main input#txtCaptcha, #TQGameCard-credit .pop-main input#creditCaptcha { width: 68px; }

#TQGameCard-box .pop-main #tqconfirm label { width: 190px; }



#imgCode, #verifycodeImg, #creditverifycodeImg { vertical-align: middle; height: 40px; }

#verifycodeImg, #creditverifycodeImg { margin-left: 2px; }

.pop-main li { padding: 4px 0; }

.pop-main ul { width: 80%; margin: 0 auto; }

a.btn { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 100px; height: 30px; line-height: 30px; margin: 10px auto; background: #e3bb3b; border-radius: 2px; color: #1a191d; font-size: 18px; font-weight: bold; text-align: center; }

a.btn:hover { background: #eb6100; }

a.button { background: #e3bb3b; padding: 0 8px; border-radius: 3px; color: #fff; }

a.button img { height: 20px; vertical-align: middle; }

a.button:hover { background: #eb6100; }

.pop-main .link { text-align: center; font-size: 14px; padding-top: 10px; }

.pop-main .link a { margin: 0 10px; }

#common-box { top: 30%; }

.thirdlogin { text-align: center; }

.thirdlogin img { width: 22%; margin: 0 1%; }



/*offline*/

.mall .sub-left { float: left; width: 460px; }

.mall .sub-left img { width: 90%; }

.mall .sub-right { float: right; width: 560px; margin-left: 30px; }

.mall .exchange { /*float: left;*/ width: 100%; padding: 20px; background: #202023; color: #fff; box-sizing: border-box; }

.mall .exchange ul { /*border-bottom: 1px dashed #717173; margin-bottom: 20px;*/ }

.mall .exchange li { padding: 4px 0; line-height: 30px; }

.mall .exchange li > * { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }

.mall .exchange li label { width: 210px; text-align: right; }

.mall .exchange li label strong { color: #e3bb3b; }

.mall .exchange li input, .mall .exchange li select { width: 190px; height: 28px; padding: 0 3px; line-height: 28px; border: 1px solid #7e7e80; background: #38383d; color: #fff; }

.mall .exchange li input#txtVerifycode { width: 87px; }

#verifycodeImg { height: 40px; }

.mall .exchange li select { width: 198px; height: 30px; }

.mall .exchange li input.txt { background: none; border: none; font-size: 16px; }

.mall .offline-list { /*float: right;*/ width: 460px; }

.mall .offline-list p { padding-bottom: 10px; }

.mall .offline-list p strong { color: #e3bb3b; }

.mall .method-list { margin-bottom: 20px; }

.mall .method-list li { position: relative; float: left; width: 140px; height: 112px; margin: 10px 6px; text-align: center; font-size: 14px; font-weight: normal; }

.mall .method-list li a { display: block; padding: 15px 0 10px; }

.mall .method-list li a:hover { background:#202023; }

.mall .method-list li img { width: 104px; height: 60px; }

.mall .method-list li.check { width: 100%; height: auto; background: none; }

.mall .method-list li.check a { display: block; width: 40px; height: 32px; margin: 0 auto; background: url(btns.png) no-repeat -54px -180px; padding: 0; }

.mall .method-list li.check a.on { background-position: -104px -180px; }

.mall .method-list li.check:hover { background: none; }

.mall .method-list li.check a:hover { background-position: -54px -258px; }

.mall .method-list li.check a.on:hover { background-position: -104px -258px; }

.mall .method-list li span.new { position: absolute; top: -15px; right: -15px; z-index: 3; width: 61px; height: 62px; background: url(new.png) no-repeat 0 0; }



.mall .method-list#channellist { text-align: center; }

.mall .method-list#channellist li { float: none; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }



.process { text-align: left; color: #e3bb3b; font-size: 18px; font-weight: bold; margin-bottom: 20px; }

.process p { position: relative; /*padding: 5px 0 5px 32px;*/ padding: 5px 0;  }

.process p i { width: 10px; height: 16px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: -1px 0 0 10px; background: url(rarrow.png) no-repeat right center; }

.process p:before { /*position: absolute; left: 0; top: 50%; margin-top: -1.5px; content: ""; width: 56px; height: 3px; background: #e3bb3b;*/ }

.process p span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin-top: -2px; height: 20px; border-radius: 20px; padding: 0 10px; text-align: center; line-height: 20px; color: #000; background: #e3bb3b; font-weight: bold; margin-right: 4px; }

.offbanner img { width: 100%; margin-top: 20px; }



/*mobile*/

.mall .mobile .method-list { width: 817px; margin: 0 auto; border-bottom: 1px dashed #4f4e53; }

.mall .mobile .method-list li { margin: 10px 20px; }

.mall .mobile .method-list li a { background: #39383d; border: 2px solid transparent; }

.mall .mobile .method-list li a:hover, .mall .mobile .method-list li a.on { border-color: #e3bb3b; }

.mall .mobile-info { width: 410px; padding: 20px 0; margin: 0 auto; }

.mall .mobile-info li { margin: 5px 0; }

.mall .mobile-info li > * { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }

.mall .mobile-info li label { width: 170px; text-align: right; }

.mall .mobile-info li select { width: 190px; height: 28px; padding: 0 3px; line-height: 28px; border: 1px solid #7e7e80; background: #38383d; color: #fff; }

.mall .mobile-info li input { padding: 0 2px; background: #4c4c4d; width: 186px; height: 32px; line-height: 32px; border: none; color: #afafaf; margin-right: 3px; }

.mall .mobile-info li input#txtVerifycode { width: 80px; }

.mall .mobile-info li #verifycodeImg { width: 100px; vertical-align: middle; }

.mall .mbhint { text-align: center; padding-bottom: 10px; }



/*silver*/

.mall.treasure.silver p { padding: 6px 0; }

.mall.treasure.silver table { width: 100%; margin: 6px 0; text-align: center; }

.mall.treasure.silver th, .mall.treasure.silver td { border: 1px solid #aeadaf; line-height: 40px; }

.mall.treasure.silver td { color: #d98a06; } 

.mall .silver-cont { padding-top: 30px; }



/**/

.mall.treasure .type-menu { position: relative; width: 90%; padding: 0 5%; }

.mall.treasure .type-menu.hide { display: none; }

.mall.treasure .type-slide { text-align: center; }

.mall.treasure .type-slide > a { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 0 40px; color: #c3c3c3; font-size: 18px; font-weight: bold; border-bottom: 2px solid transparent; }

.mall.treasure .type-slide > a:before { display: block; width: 4px; height: 4px; content: ""; position: absolute; left: -8px; top: 50%; margin-top: -2px; background: #c3c3c3; }

.mall.treasure .type-slide > a.on, .mall.treasure .type-slide > a:hover { color: #e3bb3b; text-decoration: none; border-bottom-color: #e3bb3b; }

.mall.treasure .type-slide > a.on:before, .mall.treasure .type-slide > a:hover:before { background: #e3bb3b; }



/*.mall.treasure .type-slide > a { position: relative; display: block; float: left; width: 16.6%; height: 42px; line-height: 42px;  border-bottom: none; margin: 0; text-align: center;  border-bottom: 2px solid #c3c3c3; }

.mall.treasure .type-slide > a b { display: block; width: 90%; margin: 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mall.treasure .type-slide > a:hover, .mall.treasure .type-slide > a.on { border-bottom: 2px solid #e3bb3b; color: #e3bb3b; }*/



/*.mall.treasure .type-slide > a.on:after, .mall.treasure .type-slide > a.on:before { display: block; width: 4px; height: 4px; content: ""; position: absolute; top: 50%; margin-top: -2px; background: #e3bb3b; }

.mall.treasure .type-slide > a.on:after { right: -2px; }

.mall.treasure .type-slide > a.on:before { left: -2px; }*/

.mall.treasure .type-menu .type-slide-arrow { display: none; }

.mall.treasure .type-menu .type-slide-arrow a { position: absolute; top: 50%; margin-top: -22px; width: 45px; height: 45px; }

.type-menu a.prev { left: 0; background: url(prev.gif) no-repeat 0 0; }

.type-menu a.next { right: 0; background: url(next.gif) no-repeat 0 0; }





.item-list { padding: 30px 0; }

.item-list li { position: relative; z-index: 2; float: left; background: #38383b; width: 21%; padding: 1%; margin: 1%; font-size: 14px; height: 460px; display: flex; flex-direction: column; overflow: hidden; }



.item-list li:hover { z-index: 3; }

.item-list .time { height: 20px; line-height: 20px; text-align: center; font-size: 13px; text-align: center; padding: 5px 0 0 0; }

.item-list .time i { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 19px; height: 19px; background: url(btns.png) no-repeat 0 -297px; margin-right: 2px; }

.item-list .time b { color: #e3bb3b; }

/*.item-list .item-info { height: 100px; padding: 10px 0; }

.item-list .item-info:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; } 

.item-list .item-info p { float: right; width: 130px; line-height: 18px; margin-bottom: 6px; color: #aaa; }

.item-list .item-info p.item-name { max-height: 54px; overflow: hidden; text-overflow: ellipsis; font-weight: bold; color: #fff; }

.item-list .item-info img { float: left; width: 80px; height: 80px; }

.item-list .item-price { position: relative; height: 32px; line-height: 32px; border-top: 1px solid #28282b; padding: 10px 0 0 0; }

.item-list .item-price b { color: #e3bb3b; font-size: 16px; }

.item-list .item-price a.add-to-cart { position: absolute; right: 5px; top: 8px; }

.item-list .item-description { display: none; position: absolute; bottom: 172px; left: 50%; margin-left: -128px; width: 240px; padding: 8px; background: #131313; border-radius: 4px; }

.item-list .item-description:after { position: absolute; bottom: -12px; left: 20%; content: ""; width: 0; height: 0; border: 6px solid transparent; border-top: 8px solid #131313; }

.item-list .item-description p { padding-bottom: 3px; font-size: 13px; line-height: 16px; }*/



.item-list .info { position: relative; height: auto; min-height: 40px; padding: 15px 0; }

.item-list .info:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; } 

.item-list .info.soldout:before { position: absolute; left: 0; top: 0; content:""; display:block; width:100%; height:100%; background:url(soldout-en.png) no-repeat center 25%/80% auto; }

.item-list .info p {/* float: right; width: 130px;*/ width: 100%; text-align: center; line-height: 18px; margin-bottom: 6px; color: #aaa; }

.item-list .info p.name { float: none; width: 100%; text-align: center; max-height: none; white-space: normal; overflow: visible; text-overflow: ellipsis; font-weight: bold; font-size: 18px; color: #fff; margin-top: 0; }

.item-list .info del { color: #d16060; }

.item-list .info img { /*float: left;*/ width: 120px; height: 120px; display: block; margin: 0 auto; }

.item-list .price { position: relative; height: 32px; line-height: 32px; border-top: 1px solid #28282b; padding: 10px 0 ; }

.item-list .price b { color: #e3bb3b; font-size: 16px; }

.item-list .price a.add-to-cart { /*position: absolute; right: 5px; top: 8px;*/ }

.item-list .price .num { position: absolute; right: 5px; top: 10px; }



.item-list .nums{position: relative; height: 32px; line-height: 32px; border-top: 1px solid #28282b; padding: 10px 0 0 0;}

.item-list .nums p{position:absolute;top:8px;right: 5px;}

.item-list .nums .numtxt{width:50px;height:30px;line-height:30px;text-align:center;border:1px solid #ddd;padding:0}

.item-list .nums .numbtn{display:inline-block;width:32px;height:32px;text-align:center;line-height:34px;font-size:36px;background:#e3bb3b;color:#38383c;border-radius:2px;text-decoration:none;vertical-align:middle}

.item-list .nums .numbtn.minus{margin-left: 56px;}



.item-list .description { display: block; position: static; width: auto; margin: 8px 0 0 0; padding: 8px 4px 0 4px; background: none; border-top: 1px solid #444; border-radius: 0; word-break: break-word; font-size: 12px; line-height: 16px; color: #7cbf7c; text-align: center; flex: 1 1 auto; overflow: hidden; box-sizing: border-box; }

.item-list .description .desc-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.item-list li.expanded .description .desc-text { 
    display: block; 
    -webkit-line-clamp: unset; 
    overflow-y: auto; 
    max-height: 60px; 
    padding-right: 4px; 
}

/* تحسين شكل الـ scrollbar (اختياري لكن بيدي شكل احترافي) */
.item-list li.expanded .description .desc-text::-webkit-scrollbar { width: 4px; }
.item-list li.expanded .description .desc-text::-webkit-scrollbar-thumb { background: #e3bb3b; border-radius: 4px; }
.item-list li.expanded .description .desc-text::-webkit-scrollbar-track { background: transparent; }

.item-list .description .read-more { display: none; margin-top: 4px; color: #e3bb3b; cursor: pointer; font-size: 12px; text-decoration: underline; }

.item-list .contact-admin { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; font-size: 12px; color: #7289da; text-decoration: none; }

.item-list .contact-admin svg { width: 14px; height: 14px; fill: #7289da; flex-shrink: 0; }

.item-list .contact-admin:hover { color: #99aab5; text-decoration: underline; }

.item-list .contact-admin:hover svg { fill: #99aab5; }

.item-list .description:after { display: none; }

.item-list .description p { padding-bottom: 3px; font-size: 12px; line-height: 16px; color: #7cbf7c; }

/*.item-list .info:hover ~ .description { display: block; }*/

.item-list .description.show { display: block; }



.pages { text-align: center; font-size: 14px; padding: 10px 0; }

.pages a { margin: 0 8px; }

.pages a.on, .pages a:hover { text-decoration: underline; color: #e3bb3b; }

.page { padding-top: 10px; }







.shake { animation: shake ease-in-out .2s; -webkit-animation: shake ease-in-out .2s; }



@keyframes shake {

	0% {

		transform: translateX(5px) rotate(2deg);

	}

	100% {

		transform: translateX(-5px) rotate(-2deg);

	}

}

@-webkit-keyframes shake {

	0% {

		-webkit-transform: translateX(5px) rotate(2deg);

	}

	100% {

		-webkit-transform: translateX(-5px) rotate(-2deg);

	}

}



/*my cart*/

.progress { text-align: center; color: #666; font-size: 22px; font-weight: bold; margin-bottom: 30px; }

.progress > p { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding: 0 55px; margin: 0 -3px; }

.progress > p:before, .progress > p:after { position: absolute; top: 50%; content: ""; width: 50px; height: 4px; margin-top: -2px; background: #666; }

.progress > p:before { left: 0; }

.progress > p:after { right: 0; }

.progress > p span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 28px; height: 28px; line-height: 30px; border-radius: 15px; text-align: center; background: #666; color: #2d2c31; }

.progress > p.on { color: #e3bb3b; }

.progress > p.on span, .progress > p.on:before, .progress > p.on:after { background: #e3bb3b; }



.full-cart { background: #3c3c40; padding: 3% 0; color: #c3c3c3; }

.mycart-list { width: 90%; margin: 0 auto; }

.mycart-list table { width: 100%; text-align: center; }

.mycart-list th { border-bottom: 1px solid #c3c3c3; line-height: 50px; font-size: 18px; }

.mycart-list th.th1 { width: 32%; }

.mycart-list th.th2 { width: 10%; }

.mycart-list th.th3 { width: 20%; }

.mycart-list th.th4 { width: 10%; }

.mycart-list th.th5 { width: 20%; }

.mycart-list th.th6 { width: 8%; }

.mycart-list td { padding: 10px 0; }

.mycart-list td b { color: #e3bb3b; }

.mycart-list tr.on td { background: #46464a; }

.basic > * { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin-right: 8px; }

.basic:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }

.basic > p.name { /*width: 160px;*/ width: 220px; text-align: left; line-height: 18px; font-weight: bold; }

.mycart-list .basic > p.name { width: 160px; word-break: break-all; }

.basic img { width: 60px; height: 60px; }

.select-box { position: relative; width: 16px; height: 16px; cursor: pointer; }

.select-box:after { position: absolute; left: 0; bottom: 0; content: ""; width: 12px; height: 12px; border: 1px solid #c3c3c3; }

.select-box.on { background: url(btns.png) no-repeat 0 -340px; }

.select-box.on:after { border-color: #e3bb3b; }

.mycart-list td .num a { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 26px; height: 26px; line-height: 26px; background: #525254; font-size: 20px; margin: 0 3px; }

.mycart-list td .num a:hover { background: #737377 }

a.oprt { display: block; margin: 0 auto; width: 22px; height: 22px; background: url(btns.png) no-repeat -205px -314px; }

a.oprt:hover { background-position: -239px -314px; }



.receiver-info { padding: 40px 0; font-size: 16px; }

.receiver-info .title { font-weight: bold; color: #e3bb3b; margin-bottom: 15px; font-size: 16px; }

/*.acc-info * { font-size: 14px; }*/

.acc-info input, .acc-info select { padding: 0 2px; background: #4c4c4d; width: 180px; height: 32px; line-height: 32px; border: none; color: #afafaf; margin-right: 3px; }

.acc-info select.server { margin-right: 0; }

.mycart-submit { text-align: right; }

.mycart-submit a.btn { text-align: center; width: 140px; height: 40px; line-height: 40px; font-size: 18px; }

.mycart-total { width: 96%; padding: 0 2%; height: 42px; line-height: 42px; /*background: #46464a;*/ border-top: 1px solid #525252; border-bottom: 1px solid #c3c3c3;}

.mycart-total p { float: right; margin-left: 30px; }

.mycart-total p span { color: #e3bb3b; font-size: 18px; }

#spanCardCode { display: block; margin-top: 10px; }

#txtVerificationCode { width: 100px; }

#verifycodeImg { width: 100px; vertical-align: middle; }



/**/

/*.payment-select > ul { width: 80%; margin: 30px auto 0; }

.payment-select > ul > li { float: left; width: 33.3%; text-align: center; }

.payment-select > ul > li p { color: #e3bb3b; font-size: 18px; font-weight: bold; padding-bottom: 20px; }

.payment-list a img { width: 125px; height: 70px; }

.payment-list a { position: relative; display: block; width: 125px; height: 70px; margin: 10px auto; overflow: hidden; border: 4px solid transparent; }

.payment-list a.on, .payment-list a:hover { border-color: #e3bb3b; }

.payment-list a.on:after { position: absolute; right: 0; bottom: 0; content: ""; background: url(btns.png) no-repeat 2px -370px #e3bb3b; color: #fff; display: block; width: 18px; height: 18px; padding: 2px; }*/



.order-final { text-align: center; border-bottom: 1px solid #525252; padding-bottom: 20px; margin-bottom: 25px; }

.order-final > *{ display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 0 15px; }

.order-final > .order-final-info { text-align: left; }

.order-final-info i { color: #e3bb3b; }





.payment-select { color: #c3c3c3; border-bottom: 1px solid #525252; padding-bottom: 20px; margin-bottom: 25px; }

.payment-select .area-payment { padding-bottom: 10px; }

.area-payment b { color: #e3bb3b; }

.area-payment a { color: #e3bb3b; text-decoration: underline; }

.area-payment a:hover { color: #eb6100; }

.payment-select .method-title { font-weight: bold; font-size: 18px; color: #e3bb3b; padding: 25px 0 10px; }

.payment-list li { float: left; margin: 10px 28px 12px; text-align: center; font-size: 14px; line-height: 16px; }

.payment-list li b { font-weight: normal; }

.payment-list a img { width: 110px; height: 65px; }

.payment-list a { position: relative; display: block; width: 110px; height: 65px; border: 4px solid transparent; }

.payment-list a.on, .payment-list a:hover { border-color: #e3bb3b; }

.payment-list a.on:after { position: absolute; right: 0; bottom: 0; content: ""; background: url(btns.png) no-repeat 3px -369px #e3bb3b; color: #fff; display: block; width: 18px; height: 18px; padding: 2px; }







.payment-hint { padding: 30px 0; color: #e3bb3b; font-size: 17px; }

.payment-addtional { display: none; }

.payment-addtional input { padding: 0 3px; width: 200px; height: 26px; line-height: 26px; background: #4c4c4d; color: #c3c3c3; border: none; }

.payment-submit { text-align: right; }

.payment-submit a.btn { text-align: center; width: 160px; height: 40px; line-height: 40px; font-size: 18px; }



.country-list, .payment-addtional select { padding: 0 3px; height: 26px; line-height: 26px; border: 1px solid #000; }

.area-payment .country-list, .payment-addtional select { background: #4c4c4d; color: #c3c3c3; border-color: #c3c3c3; }



/*order*/

.order-cont { background: #38383b; width: 90%; padding: 3% 5%; }

.order-cont dt { border-bottom: 1px solid #e3bb3b; color: #e3bb3b; }

.order-cont dd { padding: 10px 0; border-bottom: 1px solid #656567; }

.w1, .w2, .w3, .w4, .w5, .w6 { float: left; text-align: center; height: 50px; line-height: 50px; }

/*.w1 { width: 32%; }

.w2 { width: 15%; }

.w3 { width: 15%; }

.w4 { width: 10%; }

.w5 { width: 20%; }

.w6 { width: 8%; }*/

.w1 { width: 34%; }

.w2 { width: 16%; }

.w3 { width: 16%; }

.w4 { width: 12%; }

.w5 { width: 22%; }



.pay-status { float: left; width: 32px; height: 32px; margin: 6px 15px 0 0; background: url(btns.png) no-repeat 0 0; }

.pay-status.paid { background-position: 0 -414px; }

.pay-status.unpaid { background-position: 0 -450px; }

.pay-status.expire { background-position: -147px -414px; }

.order-info { color: #838383; font-size: 14px; padding-bottom: 10px; }

.order-info div > * { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin-right: 40px; }

.order-item { display: none; color: #c3c3c3; padding: 6px; border-bottom: 1px dashed #404046; }

.order-item:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }

.order-item .basic > p.name { font-weight: normal; font-size: 16px; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }

.order-item a.oprt { margin: 14px auto; }

.order-item .w1, .order-item .w2, .order-item .w3, .order-item .w4, .order-item .w5, .order-item .w6 { height: auto; }

.order-more { position: relative; height: 25px; line-height: 25px; text-align: right; padding-top: 10px; }

.order-more > * { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }

.order-more p.total { position: absolute; right: 85px; bottom: 0; height: 25px; line-height: 28px; width: 180px; text-align: left; }

.order-more p.total b { color: #e3bb3b; }

.order-more a.more { width: 25px; height: 16px; background: url(btns.png) no-repeat -58px -403px; margin: 0 30px; }

.order-more a.more:hover { background-position: -58px -350px; }

.order-more a.more.on { background-position: -92px -403px; }

.order-more a.more.on:hover { background-position: -92px -350px; }

.order-pay { text-align: right; padding-top: 10px; }

.order-pay a { text-align: center; }



.order-top { position: relative; height: 32px; line-height: 32px; padding-bottom: 20px; }

.order-types { margin-left: 10px; }

.order-types a { position: relative; margin-right: 50px; font-size: 18px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-weight: bold; color: #c3c3c3; }

.order-types a:hover, .order-types a.on { text-decoration: underline; color: #e3bb3b; }

.order-types a b { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; /*width: 24px;*/ height: 24px; line-height: 24px; border-radius: 12px; border: none; background: #d70404; font-size: 14px; text-align: center; color: #fff; margin-left: 5px; padding: 0 9px; }

.order-search { position: absolute; right: 0; top: 0; }

.order-search input { height: 32px; line-height: 32px; background: #4c4c4f; border: none; color: #fff; font-size: 14px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }

.order-search input[type="text"] { width: 270px; padding: 0 2px; }

.order-search input[type="button"] { width: 32px; background: url(btns.png) no-repeat -52px -448px #4c4c4f; cursor: pointer; }

.order-search input[type="button"]:hover { background-position: -95px -448px; }

.order h2 { color: #e3bb3b; padding-bottom: 30px; font-size: 26px; }



.order-types a:before { display: block; width: 4px; height: 4px; content: ""; position: absolute; left: -10px; top: 50%; margin-top: -2px; background: #c3c3c3; }

.order-types a.on:before, .order-types a:hover:before { background: #e3bb3b; }





.footer { padding: 50px 0 20px 0; text-align: center; color: #aaa; }

.footer a { color: #aaa}

.footer a:hover { text-decoration:underline; }



#ifWebChat { display: block; margin: 0 auto; }

.tqnextcont, .tqcreditcont { width: 70%; margin: 0 auto; }

.tqnextcont > div, .tqcreditcont > div { padding: 3px 0; }

.payment-addtional > p { position: relative; padding: 3px 0; }

.payment-addtional select, .payment-addtional input { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 220px; height: 30px; line-height: 30px;}

.payment-addtional label { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 180px; text-align: right; }

.payment-addtional input { width: 215px; }

.payment-addtional#div_codapay label { width: 170px; }

.nodata { display: none; width: 100%; padding: 40px 0 20px 0 ; text-align: center; }

.laypage_main * { font-size: 14px!important; }

.dlocalhint { position: absolute; top: 0; left: 410px; }



.rmsg { color: #777; text-align: center; }



.payresult {  margin: 0 auto; padding: 30px 0 }

.success, .fail {width: 400px; position: relative; line-height: 25px; border: 1px solid #666; padding: 40px 30px 40px 150px; margin: 0 auto }

.success:before { position: absolute; left: 20px; top: 50%; display: block; content: ""; background: url(right.png) no-repeat center center #e3bb3b; text-align: center; color: #fff; width: 90px; height: 90px; border-radius: 50px; font-size: 60px; margin-top: -45px; }

.fail:before { position: absolute; left: 20px; top: 50%; display: block; content: ""; background: url(wrong.png) no-repeat center center #e3bb3b; text-align: center; color: #fff; width: 90px; height: 90px; border-radius: 50px; font-size: 60px; margin-top: -45px; }

.payresult a { color: #e3bb3b; }

.payresult a:hover { text-decoration: underline; }



/*language switch 20211201*/

.switch-lang { float: right; /*position: absolute; right: 0; top: 50%;*/ height: 34px; /*margin-top: -17px;*/ display: flex; align-items: center; justify-content: center; }

.switch-lang a { float: left; display: block; width: 40px; height: 34px; line-height: 34px; text-align: center; box-sizing: border-box; border: 1px solid #7b7a7a; }

.switch-lang a:hover, .switch-lang a.on { background: #e3bb3b; border-color: transparent; color: #000; }

.switch-lang select { height: 30px; line-height: 30px; background: none; border: 1px solid #fff; color: #fff; font-size: 15px; font-family: 'Heebo', Arial, sans-serif; }

.switch-lang select option { background: #fff; color: #000; }

.switch-lang:before { content: ""; display: block; width: 22px; height: 22px; background: url(pic.png) -297px -279px; margin-right: 5px;}





/*countdown 20211231*/

.countdowntime { text-align: right; font-weight: bold; color: #e3bb3b }

.countdowntime * { font-style: normal; }

.payment-hint .countdowntime { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }



/*20220704 adyen insite pay css*/

#dropin-container { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; background: rgba(0,0,0,.6); }

#dropin-container.adyen-show { display: flex; align-items: center; justify-content: center; }

.adyen-checkout__dropin { width: 40%; margin: 0 auto; }

.adyen-close { color: #fff; font-size: 36px; width: 40px; height: 40px; line-height: 40px; text-align: center; position: absolute; right: 0; top: 0; }

.adyen-checkout__dropdown__list { color: #000; }



/*credit limit*/

.payment-list.inactive, .payment-list li.inactive a { filter: grayscale(100%); cursor: default; }

.payment-list li.inactive { position: relative; }

.payment-list li.inactive a:hover { border-color: transparent; }

.limit-msg { display: none; position: absolute; width: 120%; left: -10%; bottom: 75px; background: rgba(0,0,0,.6); color: #c3c3c3; box-sizing: border-box; padding: 4%; }

.payment-list li.inactive:hover .limit-msg { display: block; }



/*20221215 old payment center entrance*/

.old-entrance { display: block; width: 40px; height: 250px; background: url(old.png) no-repeat -7px -307px #e3bb3b; margin-top: 10px; font-size: 0; }

.old-entrance:hover { background-position: -7px -5px; }

.cart-all-btn { top: 50%; margin-top: -235px; }



/*tq game card balance credit*/

.linkbtn { color: #f39800; text-decoration: underline; }

.linkbtn:hover { color: #eb6100; text-decoration: underline; }

.tqsuccessmsg { width: 80%; margin: 0 auto; text-align: left; }

.tqsuccessmsg p { padding: 3px 0; }

.tqsuccessmsg p a { color: #f39800 }

.tqsuccessmsg p a:hover { text-decoration: underline; }



/*offline methods tabs*/

.offline-types { border-bottom: 3px solid #424245; padding: 20px 0 0 0; margin-bottom: 20px; text-align: center; }

.offline-types a { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; position: relative; font-weight: bold; width: 49%; line-height: 40px; }

.offline-types a:hover, .offline-types a.on { color: #e3bb3b; }

.offline-types a:hover:after, .offline-types a.on:after { position: absolute; left: 0; bottom: -3px; width: 100%; content: ""; height: 3px; background: #e3bb3b; }

.offline-list .method-list li { display: none; }

.offline-list .method-list li[data-id="3"] { display: block; }



/*payment add second confirm*/

#beforeconfirm-box .pop-main p { width: 80%; margin: 0 auto; }

#beforeconfirm-box a.btn { margin: 20px 20px 0 20px; }

.loading-box { display: none; width:100%; height:100%; position:fixed; top:0; left:0; background:#000 url(loader.gif) no-repeat center center; opacity:.7; filter:alpha(opacity=70); z-index:100000; }



/*subcribe function*/

.mall.subscribe { min-height:540px; }

.subscribe-btn { text-align: center; }

.subscribe-btn .btn { width: auto; padding: 0 10px; }

.subscribe .item-list, .treasure .item-list { padding: 0; }

.subscribe .price { display: flex; align-items: center; justify-content: space-between;  }

a.btn.subs, a.btn.sed { width: 80px; font-size: 14px; }

#confirm-info, #choose-server, #repeat-hint { position: fixed; top: 35%; }

#loading-hint { position:fixed; top:40%; }



.subs-btn { position:fixed; left:50px; top:50%; display:block; width:120px; text-align:center; color:#1a191d; margin-top:-60px; z-index:33;  }

.subs-btn img { width:100%; display:block; }

.subs-btn:hover { filter:brightness(120%); }

.subs-rule { padding-top:20px; }

a.btn.inactive { background: #878787; cursor:default; }

#confirm-info .txtcenter a.btn, #repeat-hint .txtcenter a.btn { margin:10px; }

.subscribe-cont { width:80%; margin:0 auto; }

.pop-main .subscribe-cont ul { width:100%; }

#confirm-info .pop-main label { width:56%; }



/*payermax hint 20240201*/

.payermax-hint { margin-top: 10px; color:#ffb700; }



/*live treausure*/

.nolivedata { color: #777; text-align: center; display:flex; align-items:center; justify-content:center; min-height:500px; min-height: 50vh; }

.item-list.nolivedata li { width:100%; font-size:120%; }



/*multi redeem cards*/

.card-msg { color: #e3bb3b; font-size: 12px; }

.add-hint { display: none; width: 200px; position: absolute;  background: #6b6b6d; color: #fff; padding: 5px; font-size: 13px; line-height: 1.2; right: -220px; top: 0; }

.card-group, .card-ipt-info, .card-group-panel { position: relative; display: inline-block; vertical-align: middle; *display: inline; *zoom: 1; }

.card-group-panel { width: 330px; vertical-align: top;}

.mall .exchange li .card-group input { width: 116px; }

.mall .exchange li .card-group input[type="password"] { width: 146px;}

.btn-add-card, .btn-remove-card { display: inline-block; vertical-align: middle; width: 28px; height: 28px; line-height: 28px; font-size: 120%; border: 1px solid #fefefe; text-align: center; box-sizing: border-box; }

.btn-add-card:hover, .btn-remove-card:hover { color: #e3bb3b; border-color: #e3bb3b; }

.card-group { padding: 3px 0; }

.mall .exchange li label { width: 175px;}

.mall .exchange li.multi-cards label { vertical-align: top; line-height: 40px; }

.mall .exchange li input, .mall .exchange li select { width: 300px; margin: 0; box-sizing: border-box; height: 30px; line-height: 30px; }

.mall .exchange li input#txtVerifycode { width: 194px;}

.btn-add-card:hover ~ .add-hint {  display: block;  }



@media screen and (orientation: portrait) {

	* { font-family: Arial; }

	body { font-size: 3.2vw; width: 100%; overflow-x: hidden; padding-bottom: 8vw; }

	select { -webkit-appearance: none; }

    .wrapper { width: 96%; margin: 0 auto; }

    .header { padding: 2vh 0 0 0; }

    .logo { width: 60vw; height: 28vw; background-size: 100% 100%; margin: 0 auto 2vh; }

    .topinfo { position: relative; right: auto; top: auto; width: 100%; padding: 1vh 0; display: block; }

    .switch-lang { float: right; }

    .navbar { float: left; padding: 0; height: 5vw; line-height: 5vw; }

    .topinfo > * { margin-left: 0; }

    .longbanner { padding: 1vh 0; }

    .before, .after, .game-select, .user-info > * { height: 5vw; line-height: 5vw; }

    .switch-lang { width: 14vw; height: 5vw; }

    .switch-lang a { width: 7vw; height: 5vw; line-height: 5vw; }

    .menu { height: auto; margin: 0 auto 2vh auto }

    .menu a { font-size: 3vw; height: 4.6vh; line-height: 4.6vh; margin: 0.7vh 0; display: flex; align-items: center; justify-content: center; }

    .menu a > * { flex-shrink: 0 }

    .menu a.on { height: 6vh; line-height: 6vh; font-size: 3vw; }

    .menu a i { width: 3vh; height: 3vh; margin-right: 0.5vw; }

    .menu a i.ic1 { background: url(icon2-1.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a i.ic2 { background: url(icon1-1.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a i.ic3 { background: url(icon3-1.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a.on i.ic1, .menu a.on:hover i.ic1 { background: url(icon2-2.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a.on i.ic2, .menu a.on:hover i.ic2 { background: url(icon1-2.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a.on i.ic3, .menu a.on:hover i.ic3 { background: url(icon3-2.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a:hover i.ic1 { background: url(icon2-3.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a:hover i.ic2 { background: url(icon1-3.png) no-repeat 0 0; background-size: 100% 100%; }

    .menu a:hover i.ic3 { background: url(icon3-3.png) no-repeat 0 0; background-size: 100% 100%; }



    .menu a:nth-child(3) { padding: 0.3vh 0; height: 4vh; line-height: 2vh; }

    .menu a:nth-child(3).on { padding: 1vh 0; height: 4vh; line-height: 2vh; }

    .menu a i.ic2 { margin-left: 3vw; margin-right: -2vw; }



    .card-list li { width: 48%; }

    .sub-menu { margin: 1vh auto 2vh; }

    .sub-menu a { font-size: 3.2vw; }

    .card-list li img { display: block; }

    .card-list .price { height: 3vh; padding: 0.5vh 5%; line-height: 3vh; font-size: 3vw; }

    .cart-list li .num a, .card-list li .num a, .item-list li .num a { width: 4vw; height: 4vw; line-height: 4vw; font-size: 4.4vw; }

    .cart-list li .num span, .card-list li .num span, .item-list li .num span { width: 4vw; }



    .cart-total { padding-top: 2vh;  }

	.cart-pay { padding-top: 1vh; }

	.cart-total, .cart-pay { height: 3vh; line-height: 3vh; }

	.cart-pay a { padding: 1vw 1.5vh; }

	.cart-list .shopcartpanel { max-height: calc(90vh - 12vw); overflow: hidden; }



    .mall .mbhint { padding-bottom: 1vh; }

    .mall .mobile .method-list { width: 100%; }

    .mall .mobile .method-list li { margin: 1vw 2vw; }

    .mall .method-list li { width: 24vw; height: auto; font-size: 3vw; }

    .mall .method-list li a { padding: 2vw; }

    .mall .method-list li a img { width: 100%; display: block; height: auto; }

    .mall .mobile-info li label { width: 38%; }

	.mall .mobile-info li input { width: 44%; }

	.mall .mobile-info li select { width: 45%; }

	.mall .mobile-info li input#txtVerifycode { width: 20%; }

	.mall .mobile-info li #verifycodeImg { width: 22%; height: auto; }

	.tqnextcont { width: 76%; }

	#TQGameCard-box .pop-main label { width: 48%; }

	#TQGameCard-box .pop-main input { width: 46%; }

	#TQGameCard-box .pop-main input#txtCaptcha { width: 20%; }

	#TQGameCard-box #verifycodeImg { width: 25%; height: auto; }



    .item-list { padding: 3vw 0; }

    .item-list li { width: 46%; font-size: 2.8vw; }

    .item-list .price { padding: 1vh 0; height: 5vw; line-height: 5vw; }

    .item-list .price b { font-size: 3vw; }

    .item-list .price .num { top: 1vh; right: 0; }

    .item-list .description { width: 100%; box-sizing: border-box; padding: 8px 2vw 0 2vw; margin-left: 0; }



    .mall .sub-right, .mall .sub-left { float: none;  width: 100%; margin: 0 auto; }

    .mall .offline-list { width: 100%; text-align: center; }

    .mall .offline-list .method-list { display: flex; justify-content: center; flex-wrap: wrap; }

    .mall .offline-list .method-list li { float: none; margin: 1vw; }

    .mall .offline-list p { margin-bottom: 1vh; }

    .offbanner img { margin: 2vh 0; }

    .process { font-size: 3.5vw; margin-bottom: 2vh; }

    .process p { padding: 0.5vh 0; height: 4vw; line-height: 4vw; }

    .process p span { height: 4vw; line-height: 4vw; margin-right: 1vw; padding: 0 1vw; border-radius: 4vw; }

    .process p i { width: 2vw; height: 3.2vw; margin: -0.5vh 0 0 1vw; background-size: 100% 100%; }



    .mall .exchange li label { width: 36vw; }

    .mall .exchange li select, .mall .exchange li input { width: 40vw; height: 6vw; line-height: 6vw; font-size: 3.2vw; }

    .mall .exchange li input { width: 38.6vw; }

    .mall .exchange li input#txtVerifycode { width: 19vw; }

    #verifycodeImg { width: 18vw; }

    a.btn, a.btn.subs, a.btn.sed { width: 16vw; height: 6vw; line-height: 6vw; font-size: 3.2vw; margin: 1vh auto; }

    a.btn:hover { background: #e3bb3b; }

    a.oprt { width: 4vw; height: 4vw; background: url(delete.png) no-repeat 0 0; background-size: 100% 100%; }

    a.oprt:hover { background-position: 0 0; }

    .mycart-total p span { font-size: 3.6vw; }



    .cart-btn { width: 100%; top: auto; bottom: 0; height: auto; left: auto; right: 0; }

    .cart-all-btn { top: auto; bottom: 0; left: auto; right: 0; display: flex; justify-content: center; width: 38vw; }

    .cart-shortcut { width: 30vw; display: flex; justify-content: center; align-items: center; font-size: 3vw; padding: 0; line-height: 3vw; }

    .cart-shortcut b { height: 3vw; line-height: 3vw; font-size: 4vw; background: none; color: #fff; }

    

    .cart-link { width: 8vw; height: 8vw; padding: 0; background: url(cart.png) no-repeat center center #767678; background-size: 100% 80%; }

    .cart-link:hover { background: url(cart_1.png) no-repeat center center #767678; background-size: 100% 80%; }

    .cart-shortcut em { width: 5vw; height: 5vw; background: url(icon4-1.png) no-repeat 0 0; background-size: 100% 100%; margin-top: 0; margin-left: 1vw; }

    .cart-shortcut.on em { transform: rotate(-180deg); background-position: 0 0; }

    .cart-shortcut:hover b { color: #000; }

    .cart-shortcut:hover em { background: url(icon4-2.png) no-repeat 0 0; background-size: 100% 100%; }

	.cart-list { width: 100%; box-sizing: border-box; padding: 2% 2% 12vw 2%; border-bottom: none; }

	.cart-list .nothing { position: relative; padding: 4vh 0; top: auto; left: auto; margin: 0 auto; margin-top: 0; }

	.cart-list .nothing img { width: 20%; }

	.cart-shortcut .num { width: 5vw; height: 5vw; left: -2.5vw; top: -2.5vw; line-height: 5vw; border-radius: 5vw; font-size: 3vw; }

	.cart-list li .price { font-size: 3.8vw; }

	.cart-list li .name { width: 53%; }



	.cart-total { padding-top: 2vh;  }

	.cart-pay { padding-top: 1vh; }

	.cart-total, .cart-pay { height: 3vh; line-height: 3vh; }

	.cart-pay a { padding: 1vw 1.5vh; }

	.cart-list .shopcartpanel { max-height: calc(90vh - 12vw); overflow: hidden; }



	.progress { font-size: 3.4vw; }

	.mycart-list table tr th:nth-child(2), .mycart-list table tr td:nth-child(2), .mycart-list table tr th:nth-child(3), .mycart-list table tr td:nth-child(3) { display: none; }

	.mycart-list th { font-size: 2.8vw; }

	.basic > p.name { font-size: 2.6vw; margin-right: 1vw; }

	.mycart-list .basic > p.name { width: 20vw; }

	.basic img { width: 6vw; height: 6vw; margin-right: 1vw; }

	.mycart-list td { padding: 1vh 0; font-size: 2.6vw; }

	.mycart-list td .num a { width: 4vw; height: 4vw; line-height: 4.2vw; margin: 0 0.5vw; }

	.mycart-list th.th4 { width: 14%; }

	.mycart-list th.th5 { width: 14%; }

	.mycart-total { height: 4vh; line-height: 4vh; }

	.mycart-total p { margin-left: 4vw; }

	.receiver-info { padding: 3vh 0; font-size: 3vw; }

	.acc-info input, .acc-info select { width: 100%; margin-bottom: 0.5vh; /*color: #000;*/ }

	.acc-info select { -webkit-appearance: none; }

	.acc-info input { width: calc(100% - 0.6vw) }

	.acc-info select { margin: 0.5vh 0; }

	.mycart-submit a.btn, .payment-submit a.btn { width: 34vw; height: 8vw; line-height: 8vw; font-size: 3.4vw; }

	.order-final > * { margin: 0 1vh; }

	.order-final-info h2 { font-size: 3.8vw; }

	.progress > p { padding: 0 8vw; }

	.progress > p span { width: 4vw; height: 4vw; line-height: 4.2vw; border-radius: 4vw; font-size: 3vw; }

	.progress > p:before, .progress > p:after { width: 7vw; height: 0.6vw; margin-top: -0.3vw; }



	.payment-select .method-title { font-size: 3.6vw; padding: 3vh 0 1vh; }

	.payment-list li { margin: 1vw 2.5vw; }

	.payment-list a { width: 24vw; height: auto; }

	.payment-list a img { width: 24vw; height: 13.8vw; display: block; }

	.payment-hint { padding: 2vh 0; font-size: 3.2vw; }



	.box1 { width: 90%; }

	.pop-head { height: 8vw; line-height: 8vw; }

	.pop-head .close { width: 6vw; height: 6vw; line-height: 6vw; font-size: 8vw; }

	.pop-main label { width: 20vw; height: 5vw; line-height: 5vw; }

	.pop-main input, .pop-main select { width: 40vw; height: 5vw; line-height: 5vw; font-size: 3vw; }

	.pop-main input.yzm { width: 18vw; }

	#imgCode { height: 8vw; }

	.pop-main .link { font-size: 3.2vw; padding-top: 1vh; }





	.order-info { font-size: 2.4vw; }

	.order-cont dd { padding: 1.5vw 0; }

	.order h2 { padding: 0 0 6vw 1vw; font-size: 6vw; }

	.order-info div > * { margin-right: 3vw; }

	.order-info div.order-num > * { margin-right: 0; }

	.order-top { height: auto; line-height: 5vw; padding-bottom: 4vw; }

	.order-types a { font-size: 3.2vw; margin: 2vw; }

	.order-types a b { line-height: 3vw; height: 3vw; border-radius: 4vw; padding: 1vw; font-size: 2.8vw; min-width: 3vw; }

	.order-search { top: -13vw; }

	.order-cont .w2, .order-cont .w3 { display: none; }

	.order-cont .w1 { width: 50% }

	.order-cont .w4 { width: 20% }

	.order-cont .w5 { width: 30% }

	.order-item .basic > p.name { font-size: 2.8vw; width: 32vw }

	.w1, .w2, .w3, .w4, .w5, .w6 { height: 8vw; line-height: 8vw; }

	.order-search input[type="text"] { width: 40vw; height: 6vw; line-height: 6vw; font-size: 3vw; }

	.order-search input[type="button"] { width: 6vw; height: 6vw; line-height: 6vw; background: url(zoom.png) no-repeat 0 0/100% 100%; background-color: #4c4c4f }

	.order-search input[type="button"]:hover { background-position: 0 0; }

	.order-more p.total { right: 10vw; height: 5vw; line-height: 5vw; width: 38vw; }

	.order-more a.more, .order-more a.more:hover { width: 5vw; height: 5vw; background: url(icon4-3.png) no-repeat 0 0/100% 100%; margin: 0; }

	.order-more a.more.on, .order-more a.more.on:hover { transform: rotate(180deg); background-position: 0 0 }

	.order-num { width: 100%; }

	.pay-status { float: none; width: 8vw; height: 8vw; margin: 0 2vw 1vw 0; }

	.pay-status.paid { background: url(finish.png) no-repeat 0 0/100% 100%; }

	.pay-status.unpaid { background: url(bag.png) no-repeat 0 0/100% 100%; }

	.pay-status.expire { background: url(stop.png) no-repeat 0 0/100% 100%; }



	.laypage_main a, .laypage_main span { padding: 0 2vw!important; margin: 0 1vw 1vw!important; height: 5vw!important; line-height: 5vw!important; font-size: 3.2vw!important; }



	.gameevents { display: none; }

	.payresult { padding: 3vh 0; }

	.success, .fail { width: 100%; line-height: 5vw; padding: 3vh 4vw 3vh 18vw; box-sizing: border-box; }

	.success:before, .fail:before { left: 4vw; width: 10vw; height: 10vw; background-size: 100% 100%; border-radius: 10vw; margin-top: -5vw; }



	.item-list .info p { line-height: 12px; }

	.dlocalhint { top: auto; bottom: 34px; left: 0; width: 100%; }





	/*20220704 adyen insite pay css*/

	.adyen-checkout__dropin { width: 80%; height: 100%; margin: 0 auto; padding: 20px 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; }

	#dropin-container * { font-size: 0.81em; }

	#dropin-container .adyen-close { font-size: 5vh; }



	/*20221021*/

	.mall .method-list li span.new { position: absolute; top: -3vw; right: -3vw; z-index: 3; width: 10vw; height: 10vw; background: url(new.png) no-repeat 0 0/100% 100%; }



	/*credit limit*/

	.limit-msg { bottom: 15vw; }



	/*20221215 old payment center entrance*/

	.old-entrance { display: flex; align-items: center; height: auto; line-height: 3vw; font-size: 4vw; width: auto; background: #e3bb3b; color: #fff; margin-top: 0; margin-left: 1vw; padding: 0 2vw; }

	.old-entrance:hover { color: #000; }

	.cart-all-btn { width: auto; }



	/*tq game card balance credit*/

	#TQGameCard-box .pop-main #tqconfirm label { width: 38vw; }

	#TQGameCard-credit .pop-main label { width: 26vw; }

	#TQGameCard-credit .pop-main input { width: 32vw; }

	#TQGameCard-credit .pop-main input#creditCaptcha { width: 12vw; }

	#creditverifycodeImg { width: 20vw; height: auto; }



	/*live treausure*/

	.nolivedata { min-height:60vh; }



	/*multi redeem cards*/

	.card-group-panel { width: 53%;}

	.mall .exchange li .card-group input { width: 32%; }

	.mall .exchange li .card-group input[type="password"] { width: 44%;}

	.mall .exchange li label { width: 44%;}

	.mall .exchange li input, .mall .exchange li select { width: 50%; }

	.mall .exchange li input#txtVerifycode { width: 27%}

	.btn-add-card:hover ~ .add-hint { width: 50vw; padding: 1vw; right: 0; bottom: 7vw; top: auto; }

	.btn-add-card, .btn-remove-card { width: 6vw; height: 6vw; line-height: 6vw;}

}

/* Fixed Discord community button */

.discord-float { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 999; display: flex; flex-direction: column; align-items: center; text-decoration: none; width: 92px; }

.discord-float .discord-icon-wrap { position: relative; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(145deg, #6a72f5, #4752c4); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 rgba(88,101,242,0.6); transition: transform .25s ease, box-shadow .25s ease; }

.discord-float .discord-icon-wrap:before { content: ""; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border-radius: 50%; border: 2px solid rgba(88,101,242,0.55); animation: discordPulse 2.2s ease-out infinite; }

.discord-float svg { width: 30px; height: 30px; fill: #fff; position: relative; z-index: 1; }

.discord-float:hover .discord-icon-wrap { transform: scale(1.12); box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 22px rgba(88,101,242,0.85); }

.discord-float .discord-caption { margin-top: 8px; width: 100%; text-align: center; font-size: 11px; line-height: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); padding: 4px 6px; background: rgba(20,20,24,0.55); border-radius: 8px; border: 1px solid rgba(88,101,242,0.4); transition: background .25s ease, border-color .25s ease; }

.discord-float:hover .discord-caption { background: rgba(88,101,242,0.85); border-color: #fff; }

@keyframes discordPulse { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }

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

    .discord-float { left: 8px; width: 60px; }

    .discord-float .discord-icon-wrap { width: 46px; height: 46px; }

    .discord-float svg { width: 22px; height: 22px; }

    .discord-float .discord-caption { font-size: 9px; line-height: 11px; padding: 3px 4px; }

}

/*=== Hot Badge - Professional Ribbon Effect ===*/
.item-list li { position: relative; }

.hot-badge {
    position: absolute;
    top: 14px;
    left: -38px;
    z-index: 20;
    width: 140px;
    padding: 5px 0;
    background: linear-gradient(135deg, #ff5252 0%, #d70404 50%, #a80303 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.45);
    overflow: hidden;
    animation: hotPulse 2.2s ease-in-out infinite;
}

/* شكل الحواف المدببة (ribbon tails) */
.hot-badge:before,
.hot-badge:after {
    content: "";
    position: absolute;
    bottom: -4px;
    border: 4px solid transparent;
}
.hot-badge:before { left: 0; border-left-color: #7a0202; border-bottom-color: #7a0202; }
.hot-badge:after { right: 0; border-right-color: #7a0202; border-bottom-color: #7a0202; }

/* لمعة metallic بتتحرك فوق الشريط */
.hot-badge .shine {
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%);
    transform: skewX(-25deg);
    animation: hotShine 2.6s ease-in-out infinite;
}

/* نبضة خفيفة + توهج */
@keyframes hotPulse {
    0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 0 rgba(215,4,4,0.5); }
    50% { box-shadow: 0 3px 12px rgba(0,0,0,0.5), 0 0 14px rgba(255,82,82,0.75); }
}

@keyframes hotShine {
    0% { left: -75%; }
    60% { left: 130%; }
    100% { left: 130%; }
}

@media screen and (orientation: portrait) {
    .hot-badge { width: 110px; font-size: 10px; top: 10px; left: -30px; padding: 4px 0; }
}

/*=== Hot Badge - Green Variant ===*/
.hot-badge.green {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 50%, #1b5e20 100%);
}

.hot-badge.green:before,
.hot-badge.green:after {
    border-left-color: #0d3d10;
    border-bottom-color: #0d3d10;
}

.hot-badge.green:before { right: auto; }
.hot-badge.green:after { right: 0; }

@keyframes hotPulseGreen {
    0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 0 rgba(46,125,50,0.5); }
    50% { box-shadow: 0 3px 12px rgba(0,0,0,0.5), 0 0 14px rgba(76,175,80,0.75); }
}

.hot-badge.green { animation: hotPulseGreen 2.2s ease-in-out infinite; }

/*=== Top Navigation Bar (matches index.html exactly) ===*/
.nav { position: relative; height: 80px; line-height: 80px; z-index: 1; }
.nav ul.clearfix { display: flex; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 0; width: auto; height: 80px; }
.nav ul.clearfix li { position: relative; float: none; width: auto; padding: 0 18px; text-align: center; font-size: 16px; }
.nav ul.clearfix li:hover { background: url(https://www.eudemons.com/en/images/navhover.png) no-repeat center top; }
.nav ul.clearfix li a { display: block; width: 100%; white-space: nowrap; overflow: visible; color: #fff; }
.nav .subnav { display: none; position: absolute; width: 140%; left: 0; top: 80px; line-height: 50px; background: rgba(0,0,0,.8); z-index: 50; }
.nav li:hover .subnav { display: block; }
.nav .subnav a { display: block; width: 100%; text-align: center; border-bottom: 1px solid #444; }
.nav .subnav a:nth-last-child(1) { border-bottom: none; }
.nav .subnav a:hover { background: url(https://www.eudemons.com/en/images/navhover.png) no-repeat center top; }

@media screen and (orientation: portrait) {
    .nav { height: auto; line-height: normal; }
    .nav ul.clearfix { flex-wrap: wrap; }
    .nav ul.clearfix li { width: auto; padding: 5px 10px; font-size: 3vw; }
}


/*=== Elegant Store Title - Perfectly Centered & Unclickable ===*/
.menu.clearfix {
    position: relative;
    padding-bottom: 12px;
    height: 80px;
}

#treasuretabs.on {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;
    background: none;
    height: auto;
    line-height: normal;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(180deg, #fff3d0 0%, #e3bb3b 55%, #a97d1a 100%);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    cursor: default;
    user-select: none;
}

#treasuretabs.on i.ic3 {
    background-image: none;
    width: 34px;
    height: 34px;
    margin-right: 12px;
    filter: none;
}

.menu.clearfix:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e3bb3b, transparent);
}

/*=== Fix: remove width constraints so the title fits and centers properly ===*/
#treasuretabs.on {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;
    overflow: visible;
    margin: 0 auto !important;
    float: none;
}

.menu.clearfix {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*=== Make the title unclickable and perfectly static ===*/
#treasuretabs.on {
    pointer-events: none;
    cursor: default;
    user-select: none;
}