* { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { font-family: 'Arial', sans-serif; background: #000; overflow-x: hidden; padding: 0; margin: 0; }

.video { width: 100%; height: 1080px; overflow: hidden; position: absolute; }
.video video { position: absolute; top: 0; left: 50%; margin-left: -960px; }

.overlay { width: 100%; height: 100%; background: url(../images/overlay.png) repeat; position: fixed; top: 0; left: 0; opacity: 1; }

.container { position: relative; width: 1100px; margin: 0 auto; }
.menu-right{background:url("../images/menu-right.png") no-repeat;width:274px;height:600px;position:fixed;left:0;z-index:9999;top:25%}.menu-right .m-download{position:absolute;top:0;width:222px;height:193px;left:0;margin:0 auto}.menu-right .m-home{position:absolute;top:193px;width:125px;height:44px;left:63px;margin:0 auto;right:0;background:url("../images/m-home-hover.png") no-repeat}.menu-right .m-home:hover{background:url("../images/m-home-hover.png") no-repeat;width:125px;height:44px}.menu-right .m-event{position:absolute;top:239px;width:125px;height:40px;left:63px;margin:0 auto;right:0}.menu-right .m-event:hover{background:url("../images/m-event-hover.png") no-repeat;width:125px;height:44px}.menu-right .m-fanpage{position:absolute;top:284px;width:125px;height:40px;left:65px;margin:0 auto;right:0}.menu-right .m-fanpage:hover{background:url("../images/m-fanpage-hover.png") no-repeat;width:125px;height:44px}.menu-right .m-group{position:absolute;top:330px;width:125px;height:40px;left:65px;margin:0 auto;right:0}.menu-right .m-group:hover{background:url("../images/m-group-hover.png") no-repeat;width:125px;height:44px}.menu-right .m-giftcode{position:absolute;top:425px;width:131px;height:185px;left:65px;margin:0 auto;right:0}
.wrapper .logo { text-align: center; }
.wrapper .versions { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ height: 480px; margin-bottom: 105px; }
.wrapper .versions li { width: 50%; position: relative; }
.wrapper .versions li:hover .version { transform: scale(0.9); }
.wrapper .versions li:hover .version:after { opacity: 1; }
.wrapper .versions li:hover .light { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions li:hover .light2 { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions .version { width: 299px; height: 399px; position: absolute; top: calc(50% - 399px/2); left: calc(50% - 299px/2); transition: transform .3s ease-in-out; }
.wrapper .versions .version:before { position: absolute; top: 4px; left: 8px; content: ' '; width: 284px; height: 385px; background: url(../images/game-1.png) no-repeat center; opacity: 1; transition: all .3s ease-in-out; }
.wrapper .versions .version:after { position: absolute; top: 0; left: 0; content: ' '; width: 299px; height: 399px; background: url(../images/game-2.png) no-repeat center; opacity: 0; transition: all .15s ease-in-out; }
.wrapper .versions .ss-logo { width: 239px; height: 291px; position: absolute; top: 78px; left: 30px; z-index: 1; }
.wrapper .versions .season { position: absolute; top: 0; left: 0; width: 100%; text-align: center; z-index: 1; }
.wrapper .versions .season img { position: relative; }
.wrapper .versions .light { width: 300px; height: 654px; background: url(../images/light-active.png) no-repeat; position: absolute; top: -270px; left: calc(50% - 300px/2); transform: scale(0.8, 0.5); transition: all .3s ease-out; }
.wrapper .versions .light2 { width: 300px; height: 654px; background: url(../images/light-active2.png) no-repeat; position: absolute; top: -270px; left: calc(50% - 300px/2); transform: scale(0.8, 0.5); transition: all .3s ease-out; }
.wrapper .versions { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ height: 480px; margin-bottom: 105px; }
.wrapper .versions li { width:50%; position: relative;margin-top: 520px;}
.wrapper .versions li:hover .version1 { transform: scale(0.9); }
.wrapper .versions li:hover .version1:after { opacity: 1; }
.wrapper .versions li:hover .light { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions li:hover .light2 { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions .version1 { width: 299px; height: 399px; position: absolute; top: calc(50% - 399px/2); left: calc(50% - 299px/2); transition: transform .3s ease-in-out; }
.wrapper .versions .version1:before { position: absolute; top: 4px; left: 8px; content: ' '; width: 284px; height: 385px; background: url(../images/game-1.png) no-repeat center; opacity: 1; transition: all .3s ease-in-out; }
.wrapper .versions .version1:after { position: absolute; top: 0; left: 0; content: ' '; width: 299px; height: 399px; background: url(../images/game-3.png) no-repeat center; opacity: 0; transition: all .15s ease-in-out; }



.footer { background: #000; position: relative;height:130px }
.footer .container { display: flex; flex-wrap: wrap; }
.footer .container .copyright { padding-top: 35px; font-weight: 600; flex: 1; color: #b3b7b8; }
.footer .container .copyright strong { color: #ff0; }
.footer .container .copyright .d { color: #4a4c52; padding-top: 10px; }