@charset "utf-8";
.mainGameWrap {}
.sc-btn {margin: 20px 10px 20px;cursor: default;}
.sc-btn.deny {filter: grayscale(1);}
.sc-btn .g-container {width: 100%;position: relative;padding: 4px;background: linear-gradient(135deg, #c5a773 12.5%, transparent 25%, transparent 50%, #c5a773 62.5%, transparent 75%, transparent), #fffce8 100%;animation: scbtnAnim 0.8s ease backwards;box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 6px, rgba(0, 0, 0, 0.5) 0px 3px 6px;}
.sc-btn .g-panel {width: 100%;overflow: hidden; background-image: var(--bmw-cas-bg);}
.sc-btn .g-img {width: calc(100% - 8px);height: calc(100% + 6px);position: absolute;left: 0;right: 0;bottom: 3px;margin: 0 auto;z-index: 2;transition: 0.3s;animation: none;}
.sc-btn .g-bg {width: 235px; height: 235px;}
.sc-btn .g-footer {width: 100%;height: 40px;font-weight: 600; background-image: radial-gradient(100% 100% at 100% 0, #faeba6 0, #725130 100%);color: rgba(0, 0, 0, 0.75);font-size: 18px;letter-spacing: -2px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);position: absolute;left:0 ;right: 0;bottom: 0;margin: 0 auto;z-index: 3;overflow: hidden;animation: scBtnFooter 0.8s ease 0.5s backwards;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;transition: 0.3s;}
.sc-btn .play-btn {width: 60px;height: 60px;border-radius: 50%;position: absolute;right: 0;left: 0;bottom: 0;top: 0;margin: auto;border: none;background-image: linear-gradient(#f7ef0f, #d29f00);font-size: 20px;z-index: 3;box-shadow: 0 2px 5px rgba(0, 0, 0, 1); display: none;}
.slotWrap .sc-btn .g-container,
.slotWrap .sc-btn .g-panel {border-radius: 0;}
.slotWrap .sc-btn .g-img {top:3px; height: calc(100% - 46px);border-radius:0}
.slotWrap .sc-btn .g-footer {width: calc(100% - 6px); bottom: 3px; max-width: unset; border-radius: 0;}
.sc-btn.deny:hover {cursor: not-allowed; opacity: 0.4}
.sc-btn.active:hover .play-btn {display: block;}
.sc-btn.active:hover .g-footer {color: #ffffff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);background-image: var(--bmw-cas-active);}
.sc-btn.active:hover .g-panel {box-shadow: inset 0 0 15px rgba(0, 0, 0, 1);}
.sc-btn.active:hover .g-panel .g-bg {opacity: 0;}
.sc-btn.active:hover .g-img {animation: scBtnImg 0.8s ease 1 backwards;}
.sc-btn.active:hover .g-container {background: linear-gradient(40deg, #d72e14 0%, #fff300 100%);}
.selectedSlotLists {width: 1500px;margin: 1em auto;background-color: #161616;padding:1em;border-radius:0px;margin-bottom:1em;display:none;position:relative; border-radius: 1em;}
.selectedSlotLists .btn-close {position:absolute; right: 1em; top: 1em;}
.selectedSlotLists h2 {	font-size: 1.3em;color: var(--bmw-cas-title);padding:4px 0 8px 8px; font-weight: 600;}
.selectedSlotList {display:flex;flex-wrap: wrap;height:734px;overflow-y:scroll;list-style:none;padding:0;}
.selectedSlotList::-webkit-scrollbar {width: 8px;}
.selectedSlotList::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #111;background-color:#222;border-radius:6px;}
.selectedSlotList::-webkit-scrollbar-thumb {background-color: #fc0;border-radius:6px;}
.selectedSlotList li {width:100%;flex: 1 1 18%;margin:10px 6px 20px;font-weight:600;color:#fff;font-size:14px;}
.selectedSlotList li div.main {width:100%;aspect-ratio: 4 / 3;background-size:100% 100%;border-radius:0px;margin-bottom:5px;position:relative;cursor:pointer;border:1px solid #000;box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,1);filter:grayscale(0.4) brightness(0.8);transition: all 100ms;}
.selectedSlotList li p {padding:0em;text-align:center;transition:color 0.3s}
.selectedSlotList li img {position:absolute;width:62px;height:62px;left:calc(50% - 31px);top:calc(50% - 31px);display:none;}
.selectedSlotList li:hover img {display:block;}
.selectedSlotList li:hover div.main {border-color: #fc0;background-color:#000;filter:grayscale(0) brightness(1);transition: all 100ms;}
.selectedSlotList li:hover p {color: #fc0;}