.sportGame[data-v-0ffd8e9e] { background: #13121a; min-height: 900px; } .sportGame-main[data-v-0ffd8e9e] { position: relative; padding: 10px 0; } .sportGame-main .wrapper[data-v-0ffd8e9e] { position: relative; width: 1000px; margin: 0 auto; padding-top: 10px; } .sportGame-main .wrapper .game-box[data-v-0ffd8e9e] { text-align: center; } .sportGame-main .wrapper .sportGame-ul[data-v-0ffd8e9e] { text-align: center; background: #111; border: 1px solid #333; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 5px; } .sportGame-main .wrapper .sportGame-ul li[data-v-0ffd8e9e] { position: relative; width: 243px; height: 510px; color: #fff; margin: 5px 2px; font-size: 24px; padding-top: 2px; background-color: #333; cursor: pointer; } .sportGame-main .wrapper .sportGame-ul li .gameLogo[data-v-0ffd8e9e] { display: block; width: 100%; height: 100%; } .sportGame-main .wrapper .sportGame-ul li .info[data-v-0ffd8e9e] { position: relative; width: 100%; height: 100%; } .sportGame-main .wrapper .sportGame-ul li .info .playGame[data-v-0ffd8e9e] { position: absolute; bottom: 50px; z-index: 2; width: 134px; left: 50%; margin-left: -67px; color: #fff; font-size: 14px; text-align: center; line-height: 34px; background: transparent; border: 2px solid #858585; border-radius: 20px; } .sportGame-main .wrapper .sportGame-ul li .info .playGame[data-v-0ffd8e9e]:before { content: ''; position: absolute; top: 50%; left: 100px; width: 4px; height: 7px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAOCAYAAAF/bY2OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMTY1YWRhYi1lNTE3LTA0NGYtYTBiZC01M2ZiMmE2ZDJkODQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkZDQkE2RUJCNjU4MTFFODg1M0ZCQTdBNEQ3MThGNTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkZDQkE2RUFCNjU4MTFFODg1M0ZCQTdBNEQ3MThGNTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTZDNTlDNTIwRUZCMTFFODlDMjZGRkRERTRCMUUzQTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTZDNTlDNTMwRUZCMTFFODlDMjZGRkRERTRCMUUzQTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4HaPHjAAAAd0lEQVR42mL4DwQMgoKC/wECiAHOAgggEIuBiYGB4T+IYAQRDAABxAiWBQIwDyTAIiQkBGL8BwggRqgMRAuyGjCDEcwCmQszlgGo8z9cBCDAmP4jANhmFgYEABuHLAA2jQlqNSOyPWBTwSYjuwAGwGa8e/cOrgUADn41pForp5QAAAAASUVORK5CYII=) no-repeat center top; } .sportGame-main .wrapper .sportGame-ul li > i[data-v-0ffd8e9e] { position: absolute; display: block; background: #fce266; -webkit-transition: all 0.4s; transition: all 0.4s; } .sportGame-main .wrapper .sportGame-ul li > i.t[data-v-0ffd8e9e], .sportGame-main .wrapper .sportGame-ul li > i.b[data-v-0ffd8e9e] { width: 0%; height: 2px; } .sportGame-main .wrapper .sportGame-ul li > i.r[data-v-0ffd8e9e], .sportGame-main .wrapper .sportGame-ul li > i.l[data-v-0ffd8e9e] { height: 0%; width: 2px; } .sportGame-main .wrapper .sportGame-ul li > i.t[data-v-0ffd8e9e] { top: 0; left: 0; } .sportGame-main .wrapper .sportGame-ul li > i.r[data-v-0ffd8e9e] { top: 0; right: 0; } .sportGame-main .wrapper .sportGame-ul li > i.b[data-v-0ffd8e9e] { right: 0; bottom: 0; } .sportGame-main .wrapper .sportGame-ul li > i.l[data-v-0ffd8e9e] { bottom: 0; left: 0; } .sportGame-main .wrapper .sportGame-ul li:hover i.t[data-v-0ffd8e9e], .sportGame-main .wrapper .sportGame-ul li:hover i.b[data-v-0ffd8e9e] { width: 100%; } .sportGame-main .wrapper .sportGame-ul li:hover i.r[data-v-0ffd8e9e], .sportGame-main .wrapper .sportGame-ul li:hover i.l[data-v-0ffd8e9e] { height: 100%; } .sportGame-main .wrapper .sportGame-ul li:hover .playGame[data-v-0ffd8e9e] { color: #474747; background-color: #ffcf2e; border: 2px solid #ffcf2e; } .sportGame-main .wrapper .sportGame-ul li:hover .playGame[data-v-0ffd8e9e]:before { background-position: center bottom; }