.subnav {
    position: absolute;
    top: 44px;
    left: 50%;
    z-index: 90;
    display: flex;
    height: 0;
    width: 100vw;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    overflow: hidden;
    background: #fff url(../images/bgx.jpg) repeat-x center top;
    -moz-box-shadow: 0 10px 15px 0 rgba(0,0,0,.15);
    -webkit-box-shadow: 0 10px 15px 0 rgba(0,0,0,.15);
    box-shadow: 0 10px 15px 0 rgba(0,0,0,.15);
    -moz-transition: height .3s ease-out;
    -o-transition: height .3s ease-out;
    -webkit-transition: height .3s ease-out;
    transition: height .3s ease-out;
    transform: translateX(-50%);
}

ul.nav-menu>li:hover .subnav{
    height: 317px;
    z-index: 900;
}

.subnav .slider {
    position: relative;
    display: flex;
}
.subnav .discount {
	width: 120px;
	padding-bottom: 82px;
	padding-left: 10px;
	text-align: left
}
.subnav .discount .title {
	display: block;
	color: #222;
	font-size: 22px;
	line-height: 30px
}
.subnav .discount .en-title {
	display: block;
	margin-top: 5px;
	color: #597ef7;
	font-size: 14px;
	line-height: 15px;
	letter-spacing: -.93px
}
.subnav .discount i {
	display: block;
	height: 43px;
	margin-top: 26px;
	margin-bottom: 16px;
	background-repeat: no-repeat;
	background-position: left center
}
.subnav .discount .sub-title {
	display: block;
	margin-top: 7px;
	color: #222;
	font-size: 14px
}
.subnav .discount:hover {
	opacity: .8
}
.subnav.dz .discount i {
	background-image: url('../images/dz-discount.png')
}
.subnav.live .discount i {
	background-image: url('../images/live-discount.png')
}
.subnav.qp .discount i {
	background-image: url('../images/qp-discount.png')
}
.subnav .slider span{
    position:absolute;
    width:40px;
    height:42px;
    bottom:135px;
    background-repeat:no-repeat;
    background-position:center top;
    cursor:pointer
}
.subnav .slider span.arrow-p {
	left: -40px;
	background-image: url('../images/prev.png')
}
.subnav .slider span.arrow-n {
	right: -165px;
	background-image: url('../images/next.png')
}
.subnav .slider li {
	display: flex;
	height: 317px;
    cursor: pointer;
}
.subnav .slider li .info .title {
	margin: 0;
	color: #252943;
	font-size: 20px;
	font-weight: 600
}
.subnav .slider li .info .text {
	margin: 7px 0 14px;
	color: #333;
	font-size: 12px;
	line-height: 20px;
	opacity: .8
}
.subnav .slider li .info .btn-enter {
	display: block;
	width: 110px;
	height: 40px;
	background: url('../images/enter.png') no-repeat center top;
	background-size: 100% 100%
}
.subnav .slider.slide-4 li {
	position: relative;
	width: 270px;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	-webkit-justify-content: center;
	justify-content: center
}
.subnav.live .slider.slide-4 li{
	width: 260px;
}
.subnav .slider.slide-4 li .info {
	position: absolute;
	top: 37px;
	right: 0;
	left: 0;
	text-align: center
}
.subnav.live .slider.slide-4 li .info{
    top: 17px;
}
.subnav .slider.slide-4 li .info .text {
	margin: 0;
	line-height: 18px
}
.subnav .slider.slide-3 li{
    width:360px;
    -webkit-align-items:flex-end;
    align-items:flex-end;
    -webkit-justify-content:space-between;
    justify-content:space-between
}
.subnav .slider.slide-3 li .info{
    text-align:left;
    padding-bottom:108px
}
.subnav li:before {
	content: '';
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-moz-transition: transform .3s;
	-o-transition: transform .3s;
	-webkit-transition: transform .3s;
	transition: transform .3s
}
.subnav li:hover:before {
	-moz-transform: translateY(-2.5%) scale(1.05);
	-ms-transform: translateY(-2.5%) scale(1.05);
	-o-transform: translateY(-2.5%) scale(1.05);
	-webkit-transform: translateY(-2.5%) scale(1.05);
	transform: translateY(-2.5%) scale(1.05)
}
.subnav.dz li:before {
	width: 238px;
	height: 296px
}
.subnav.live li:before{ 
    width:270px;
    height:296px
}
.subnav.board li:before{
    width:238px;
    height:296px
}
.subnav.board .main-cell{
    width: 1080px;
}
.subnav.dz li[game-box="ag"]:before {
	background-image: url('../images/ag.png')
}
.subnav.dz li[game-box="mg"]:before {
	background-image: url('../images/mg.png')
}
.subnav.dz li[game-box="pt"]:before {
	background-image: url('../images/pt.png')
}
.subnav.dz li[game-box="bb"]:before {
	background-image: url('../images/bb.png')
}
.subnav.dz li[game-box="cq9"]:before {
	background-image: url('../images/cq9.png')
}
.subnav.dz li[game-box="pg"]:before {
	background-image: url('../images/pg.png')
}
.subnav.live li[game-box="we"]:before {
	background-image: url('../images/we-zr.png')
}
.subnav.live li[game-box="ag"]:before {
	background-image: url('../images/ag-zr.png')
}
.subnav.live li[game-box="bb"]:before {
	background-image: url('../images/bb-zr.png')
}
.subnav.live li[game-box="bg"]:before {
	background-image: url('../images/bg-zr.png')
}
.subnav.live li[game-box="dg"]:before {
	background-image: url('../images/dg-zr.png')
}
.subnav.live li[game-box="mg"]:before {
	background-image: url('../images/mg-zr.png')
}
.subnav.live li[game-box="ab"]:before {
	background-image: url('../images/ab-zr.png')
}
.subnav.qp li[game-box="ky"]:before {
	background-image: url('../images/ky-qp.png')
}
.subnav.qp li[game-box="leg"]:before {
	background-image: url('../images/leg-qp.png')
}
.subnav.qp li[game-box="bs"]:before {
	background-image: url('../images/bs-qp.png')
}
.subnav.qp li[game-box="yg"]:before {
	background-image: url('../images/yg-qp.png')
}
.subnav.qp li[game-box="yb"]:before {
	background-image: url('../images/yb-qp.png')
}
.subnav.qp li[game-box="nb"]:before {
	background-image: url('../images/nb-qp.png')
}

.main-cell {
    overflow: hidden;
    position: relative;
    width: 980px;
}