* { 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: 900px; overflow: hidden; position: absolute; }
.video video { position: absolute; top: 0; left: 50%; margin-left: -960px; }

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

.container { position: relative; width: 1200px; margin: 0 auto; }
.menu-right{background:url("../trangchuql/menu-right.png") no-repeat;width:274px;height:600px;position:fixed;left:0;z-index:9999;top:20%}.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("../trangchuql/m-home-hover.png") no-repeat}.menu-right .m-home:hover{background:url("../trangchuql/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("../trangchuql/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("../trangchuql/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("../trangchuql/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: 33%; 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: 300px; height: 399px; position: absolute; top: calc(50% - 599px/2); left: calc(50% - 259px/2); transition: transform .3s ease-in-out; }
.wrapper .versions .version:before { position: absolute; top: 4px; left: -150px; content: ' '; width: 500px; height: 530px; background: url(../trangchuql/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: 300px; height: 530px; background: url(../trangchuql/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: 154px; background: url(../trangchuql/light-active.png) no-repeat; position: absolute; top: 380px; left: calc(50% - 300px/2); transform: scale(0.8, 0.5); transition: all .3s ease-out; }
.wrapper .versions .light2 { width: 300px; height: 154px; background: url(../trangchuql/light-active2.png) no-repeat; position: absolute; top: 380px; left: calc(50% - 250px/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; }
.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% - 599px/2); left: calc(50% - 299px/2); transition: transform .3s ease-in-out; }
.wrapper .versions .version1:before { position: absolute; top: 4px; left: -100px; content: ' '; width: 500px; height: 530px; background: url(../trangchuql/game-3.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(../trangchuql/game-2.png) no-repeat center; opacity: 0; transition: all .15s ease-in-out; }





.container2 { position: relative; width: 800px; margin: 0 auto; }
.wrapper .versions2 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ height: 440px; margin-top:-80px; }
.wrapper .versions2 li { width: 50%; position: relative;}
.wrapper .versions2 li:hover .version { transform: scale(0.9); }
.wrapper .versions2 li:hover .version:after { opacity: 1; }
.wrapper .versions2 li:hover .light { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions2 li:hover .light2 { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions2 li:hover .light3 { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions2 li:hover .light4 { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions2 li:hover .light5 { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions2 .version { width: 299px; height: 399px; position: absolute; top: calc(50% - 399px/2); left: calc(50% - 299px/2); transition: transform .3s ease-in-out; }
.wrapper .versions2 .version:before { position: absolute; top: 4px; left: 8px; content: ' '; width: 500px; height: 530px; background: url(../trangchuql/game-1.png) no-repeat center; opacity: 1; transition: all .3s ease-in-out; }
.wrapper .versions2 .version:after { position: absolute; top: 0; left: 0; content: ' '; width: 299px; height: 399px; background: url(../trangchuql/game-2.png) no-repeat center; opacity: 0; transition: all .15s ease-in-out; }
.wrapper .versions2 .ss-logo { width: 239px; height: 291px; position: absolute; top: 78px; left: 30px; z-index: 1; }
.wrapper .versions2 .season { position: absolute; top: 0; left: 0; width: 100%; text-align: center; z-index: 1; }
.wrapper .versions2 .season img { position: relative; }


.wrapper .versions2 .light3 { width: 300px; height: 484px; background: url(../trangchuql/light-active3.png) no-repeat; position: absolute; top: -40px; left: calc(50% - 250px/2); transform: scale(0.8, 0.5); transition: all .3s ease-out; }
.wrapper .versions2 .light4 { width: 300px; height: 484px; background: url(../trangchuql/light-active4.png) no-repeat; position: absolute; top: -40px; left: calc(50% - -100px/2); transform: scale(0.8, 0.5); transition: all .3s ease-out; }
.wrapper .versions2 .light5 { width: 300px; height: 484px; background: url(../trangchuql/light-active5.png) no-repeat; position: absolute; top: -40px; left: calc(50% - 250px/2); transform: scale(0.8, 0.5); transition: all .3s ease-out; }


.wrapper .versions2 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ height: 440px; margin-top:-220px; }
.wrapper .versions2 li { width: 50%; position: relative; }
.wrapper .versions2 li:hover .version2 { transform: scale(0.9); }
.wrapper .versions2 li:hover .version2:after { opacity: 1; }
.wrapper .versions2 li:hover .light { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions2 li:hover .light2 { transform: scale(1, 1); transition: all 0.5s cubic-bezier(0.2, 0.26, 0.42, 1.57); }
.wrapper .versions2 .version2 { width: 299px; height: 399px; position: absolute; top: calc(50% - 399px/2); left: calc(50% - -99px/2); transition: transform .3s ease-in-out; }
.wrapper .versions2 .version2:before { position: absolute; top: 4px; left: 8px; content: ' '; width: 500px; height: 530px; background: url(../trangchuql/game-1.png) no-repeat center; opacity: 1; transition: all .3s ease-in-out; }
.wrapper .versions2 .version2:after { position: absolute; top: 0; left: 0; content: ' '; width: 299px; height: 399px; background: url(../trangchuql/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; }