﻿/* 热门游戏 */

.index-m { margin-top: 10px; }
.index-ranking { width: 218px; float: left; background: #FFF;}
.index-ranking-title { background: #fff; font-size: 15px; border-bottom: 1px solid #f93c1a; margin: 10px 5px; }
.index-ranking-title p { display: inline-block; width: 100px; height: 30px; line-height: 30px; text-align: center; color: #111; cursor: pointer; }
.index-ranking-title p.on { color: #fff; border-bottom-color: transparent; background: linear-gradient(90deg, #ff4f00 0, #ff7432); background-size: contain; }
.index-ranking  .none{ display: none;}
.index-ranking  .block{ display: block;}
.index-rank-list { width: 100%; height: 462px; border-bottom: 1px solid #e6e6e6; display: none; overflow:hidden}
.index-rank-item { position: relative; padding: 0 13px; height: 40px; }
.flex-align-center, .flex-center, .flex-space-between { display: flex; align-items: center; }
.index-rank-item dt { margin-right: 16px; }
.index-rank-item dt .rank-icon { width: 20px; height: 20px; font-size: 14px; border-radius: 50%; color: #afb1ba; background-color: transparent; text-align: center; }
.index-rank-item dt .rank-icon.rank-icon1 { background-color: #ffb30e; color: #fff; }
.index-rank-item dt .rank-icon.rank-icon2 { background-color: #b5b7c0; color: #fff; }
.index-rank-item dt .rank-icon.rank-icon3 { background-color: #e39a73; color: #fff; }
.index-rank-item.hover dd .img-cont, .index-rank-item.hover dd p .down { display: block; }
.index-rank-item dd .img-cont { display: none; margin-right: 14px; width: 50px; height: 50px; }
.index-rank-item dd .img-cont img { width: 100%; height: 100%; border-radius:8px;}
.flex-column { flex-direction: column; }
.flex, .flex-column { display: flex; }
.flex-center { justify-content: center; }
.index-rank-item dd p a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1; font-size: 14px; color: #111; text-align: center }
.index-rank-item dd .down { display: none; margin-top: 10px; width: 94px; cursor: pointer }
.index-rank-item.hover { height: 80px; background: #fafafa; }
.index-rank-item.hover dd .img-cont, .index-rank-item.hover dd p .down { display: block; }
.index-rank-item dd .down { display: none; margin-top: 10px; width: 94px; cursor: pointer; }
.el-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: 0; margin: 0; transition: .1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; }
.el-button--default { height: 26px; line-height: 26px; font-size: 14px; color: #242424; background: linear-gradient(90deg, #fddb55 0, #febe39); }
.el-button { padding: 0; border: none; border-radius: 15px; }

/* banner */
.index-c-right { background: #fff; width: 782px; overflow: hidden; }
.index_banner { width: 560px; position: relative; height: 317px; overflow: hidden; margin-top: 2px; }
.index_banner .bd { position: relative; z-index: 0; }
.index_banner .bd ul { width: 100% !important; }
.index_banner .bd li { width: 100% !important; height: 464px; }
.index_banner .bd li .siteWidth { width: 1000px; position: relative; margin: 0 auto; height: 464px; }
.index_banner .bd li a { height: 464px; display: block; }
.index_banner .hd { width: 100%; position: absolute; z-index: 1; bottom: 0px; left: 0; height: 20px; line-height: 20px; text-align: center; }
.index_banner .hd ul { display: inline-block; margin: 0 auto; text-align: center; }
.index_banner .hd ul li { display: block; cursor: pointer; width: 12px; height: 12px; float: left; z-index: 100; margin-left: 15px; border-radius: 100%; background: #FFF; text-indent: -9999px; }
.index_banner .hd ul .on { background: #fff000 }
/*login*/


.login { padding: 10px 10px 10px 10px; overflow: hidden; box-sizing: border-box;width: 222px; }
.login p { height: 38px; line-height: 38px; margin: 0px auto; margin-bottom: 10px; position: relative; }
.login .ttl { margin: 6px 0px 10px; text-align: center; height: auto; line-height: inherit; }
.login p .img01 { position: absolute; top: 12px; left: 10px; }
.login .ttl span { font-size: 14px; }
.login p input[type=text], .login p input[type=password] { width: 168px; padding-left: 30px; height: 38px; line-height: 38px; border: none; color: #666; font-size: 13px; display: block; border: 1px solid #e6e6e6; background-color: #F5F5F5; }
.login p input:focus { transition: all 0.3s; border: 1px solid #000; }
.login .p04 input:focus { border: none; }
.login .p02 .forget { display: block; position: absolute; color: #4a3863; right: 3px; top: 5px; line-height: 2.0; width: 66px; text-align: center; text-decoration: underline; }
.login .p02 .forget:hover { color: #f00; }
.login .p03 .test { top: 5px; right: 2px; width: 71px; height: 27px; position: absolute; }
.login .p04 input { font-size: 15px; border: none; width: 200px; float: left; height: 36px; line-height: 36px; color: #FFF; cursor: pointer; transition: all 0.4s; background: linear-gradient(90deg, #ff4f00 0, #ff7800); }
.login .p04 input:hover { background: linear-gradient(90deg, #1d62f0 0, #1ad6fd); }
.login .p05 input { font-size: 15px; border: none; width: 200px; float: left; height: 36px; line-height: 36px; color: #FFF; cursor: pointer; transition: all 0.4s; background: linear-gradient(90deg, #ff7a00 0, #ffac00); }
.login .p05 input:hover { background: linear-gradient(90deg, #0075d9 0, #2395ff); }
.login .p06 { margin: 10px 0 0; height: auto; line-height: inherit; color: #ffe8a1; }
.login .p06 a { display: inline-block; color: #666; float: left; font-size: 14px; }
.login .p06 a.reg { float: right; color: #f00; }
.login .p06 a.reg span { display: block; padding-right: 10px; background: url('../images/icon-arrow.png') no-repeat right center; }
.login .p06 a:hover { color: #f00; }

.login .memberinfo {width:100%;font-size:14px; overflow:hidden}
.login .memberinfo .ttl { margin: 10px 0px 10px; padding-bottom:10px;text-align: center; height: auto; line-height: inherit; border-bottom:1px dashed #ccc; }
.login .memberinfo .bot { margin: 14px 0px 0px;text-align: center; height: auto; line-height: inherit;}
.login .memberinfo .name,.login .memberinfo .balance{font-size:13px;line-height:30px;vertical-align:top;}
.login .memberinfo .name strong,.login .memberinfo .balance strong{font-size:14px; color:#F00}

.login .memberinfo a.update{background:url('../images/f5.png') no-repeat 0 6px; width:20px; height:22px; display: inline-block; margin-left:20px; vertical-align:top;}
.login .memberinfo a.update:hover{background:url('../images/f5-h.png') no-repeat 0 6px;}
.login .memberMeun{padding: 2px 0; margin:5px auto 10px;position: relative;text-align:left;top:0;right:auto; border:1px solid #e6e6e6; border-left:0;border-right:0; overflow:hidden}
.login .memberMeun a{ float:left; display:inline-block;line-height:16px; padding:6px;font-size:13px; }
.login .memberMeun a:hover{color:#ff0000}
.login .memberMeun a.Message-no{ background:url('../images/message.png')  center top no-repeat; width:29px;height:22px; position:relative; }
.login .memberMeun a.Message-no span{ display:inline-block;position:absolute;right:-13px;top:-1px;width:29px; color:#fff;}

.login a.logout { display:block;font-size: 15px; text-align:center; border: none; width: 100%; height: 36px; line-height: 36px; color: #FFF; cursor: pointer; transition: all 0.4s; background: linear-gradient(90deg, #ff7a00 0, #ffac00); }
.login  a.logout:hover { background: linear-gradient(90deg, #0075d9 0, #2395ff); }


/* ==============    index-winner     ============== */

.index-winner { width: 1000px; padding-top: 10px; margin: 0px auto; overflow: hidden; }
.index-winner .container { height: 100px; font-size: 0; background: #fff; border: 1px solid #e6e6e6; overflow: hidden; }
.index-winner .ttl { float: left; margin: 10px 10px 0; width: 25px; padding: 10px 0; text-align: center; font-size: 14px; color: #fff; background-color: #5c5c5c; border-radius: 30px; }
.index-winner .jackpot-notice { margin: 5px 10px 5px 50px; }
.index-winner .jackpot-notice ul { height: 90px; vertical-align: top; }
.index-winner .jackpot-notice ul li { width: 220px; text-align: left; line-height: 30px; padding-right:10px;}
.index-winner .jackpot-notice ul li p { margin: 0; color: #797979; font-size: 12px; border-right:1px dotted #CCC }
.index-winner .jackpot-notice ul li p span { color: #323232; margin: 0 5px; min-width: 60px; display: inline-block; }
.index-winner .jackpot-notice ul li p span.c2 { color: #ff0000; }
.index-winner .jackpot-notice ul li p span.c2+span { color: #ff0000; }
.index-winner .carousel-control { width: 10px; height: 64px; vertical-align: top; background-repeat: no-repeat; background-position: center top; cursor: pointer; }
.index-winner .carousel-control.left.prev { position: absolute; left: 40px; top: 14px; background: url("../images/winner_prev.png") no-repeat; cursor: pointer; }
.index-winner .carousel-control.right.next { position: absolute; right: 10px; top: 14px; background: url("../images/winner_next.png") no-repeat; cursor: pointer; }

/*4大游戏模块*/
.intro-box { width: 1000px; margin: 10px auto 20px; overflow: hidden; }
.intro-box ul li { background: #fff; width: 239px; height: 320px; border-radius: 2px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 11px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); text-align: center; margin-left: 7px; display: inline-block; vertical-align: top; border: 1px solid #e6e6e6 }
.intro-box ul li h5 { font-weight: 400; color: #000; font-size: 24px; margin-top: 36px; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; }
.intro-box ul li p { color: #777; font-size: 14px; margin: 20px 11px 10px; }
.intro-box ul li i { margin-top: 48px; transform-origin: top; -webkit-transform-origin: top; -ms-transform-origin: top; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; }
.intro-box ul li .btn-primary { width: 212px; line-height: 40px; visibility: hidden; margin-top: 30px; opacity: 0; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; }
.intro-box ul li.item1 { margin-left: 0; }
.intro-box ul li.item1 i { display: inline-block; width: 140px; height: 120px; background: url('../images/icons-4games.png'); background-position: 0 0px; background-repeat: no-repeat; }
.intro-box ul li.item2 i { display: inline-block; width: 140px; height: 120px; background: url('../images/icons-4games.png'); background-position: 0 -129px; background-repeat: no-repeat; }
.intro-box ul li.item3 i { display: inline-block; width: 140px; height: 120px; background: url('../images/icons-4games.png'); background-position: 0 -259px; background-repeat: no-repeat; }
.intro-box ul li.item4 i { display: inline-block; width: 140px; height: 120px; background: url('../images/icons-4games.png'); background-position: 0 -389px; background-repeat: no-repeat; }
.intro-box ul li:hover i { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); }
.intro-box ul li:hover h5 { margin-top: -40px; }
.intro-box ul li:hover .btn-primary { visibility: visible; opacity: 1; }
.intro-box ul li .btn-primary { color: #fff; font-size: 16px; border-radius: 2px; background: linear-gradient(90deg, #0075d9 0, #2395ff); text-align: center; display: block; margin: 0 auto; }





