/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 400 version
*/


/*轮播图重叠区域*/

.m-carousel {
	position: relative;
    width: 100%;
    min-width: 1200px;
    overflow: hidden;
}
.m-carousel .mc {
    position: relative;
    width: 1200px;
    height: 566px;
    margin:0 auto;
}
.m-carousel .mc .item {
    position: absolute;
    width:1200px;
    height: 100%;
    display: block;
    transition: opacity 1s cubic-bezier(.23,.53,.31,1);   
}

.m-carousel .mc .item.active {
    z-index: 1;
}

.m-carousel .mc .item img {
    position: absolute;
    top:0;
    left:0;
    right: 0;
    margin-left: -360px;
    width: 1920px;
    height: 100%;
    user-select: none;
    user-drag:none;
}

.m-carousel .mc .item a {
    display: block;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
    width: 1200px;
    height: 100%;
    /*background: red;*/
}
.m-carousel .mcp {
    position: relative;
}
.m-carousel .mc-pagination {
	position: absolute;
	left:44px;
	bottom: 131px;
	/*background: red;*/
	font-size: 0;
    z-index: 3;
}
.m-carousel .mc-pagination .item{
	position: relative;
	display: inline-block;
	margin-right: 8px;
	width: 40px;
	height: 5px;
	background: #4c5158;
	opacity: .12;
    filter:alpha(opacity=12);
	-webkit-transition: opacity .3s;
	-o-transition: opacity .3s;
	-moz-transition: opacity .3s;
	transition: opacity .3s;
}
.m-carousel .mc-pagination .item:after {
	content: "";
	display: block;
	position: absolute;
	top:-10px;
	bottom: -10px;
	width: 100%;
	/*background: red;*/
}
.m-carousel .mc-pagination.light .item.active,
.m-carousel .mc-pagination .item.active{
	opacity: 1;
    filter: alpha(opacity=100);
}
.m-carousel .mc-pagination.light .item{
    background: #fff;
    opacity: .12;
    filter: alpha(opacity=12);
}



.carousel-bar {
    position: relative;
    margin-top: -98px;
    margin-bottom: 40px;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background: #fff;
    -webkit-box-shadow: 0 0 5px 0 #f4f5f8;
       -moz-box-shadow: 0 0 5px 0 #f4f5f8;
            box-shadow: 0 0 5px 0 #f4f5f8;
    /*box-shadow: 0 0 8px 1px #eee;*/
    z-index: 1;
    border: 1px solid #f2f2f2;
    font-size: 0;
}
.carousel-bar .cb-left {
    float: left;
}
.carousel-bar .cb-left .item {
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 24px;
    /*width: 200px;*/
}
.carousel-bar .cb-left .item img {
    margin-left: 5px;
    padding: 23px 0 17px;
}
.carousel-bar .cb-left .cb-title {
    margin-bottom: 6px;
    line-height: 22px;
    font-size: 15px;
    color: #000;
}
.carousel-bar .cb-left .cb-desc {
    font-size: 14px;
    line-height: 20px;
    color: #b2b2b2;
}
.carousel-bar .cb-left .item.i1 {
    margin-left: 55px;
}
.carousel-bar .cb-left .item.i2 {
    margin-left: 70px;
}
.carousel-bar .cb-left .item.i3 {
    margin-left: 65px;
}
.carousel-bar .cb-right {
    float: right;
    padding-top: 40px;
}
.carousel-bar .cbc-left {
    display: inline-block;
    width: 288px;
}
.carousel-bar .cb-right .cb-title {
    margin-bottom: 9px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
}
.carousel-bar .cb-right .cb-desc {
    width: 288px;
    font-size: 15px;
    line-height: 20px;
    color: #999;
}
.carousel-bar .cb-right .cb-btn {
    float: right;
    display: inline-block;
    margin-top: 5px;
    margin-left: 50px;
    margin-right: 63px;
    width: 110px;
    line-height: 46px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: #4e52ff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    cursor: pointer;
}
.section2, .section4 {
    width: 100%;
    min-width: 1200px;
    overflow: hidden;
}
.section-title {
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: normal;
    color: #0d1b27;
    text-align: center;
}
.section-desc {
    font-size: 18px;
    color: #7f879d;
    text-align: center;
}
.section1 .section1-list {
    /*padding-top: 27px;*/
    padding: 27px 2px 50px;
}
.section1 .section1-list .item {
    float: left;
    padding-top: 37px;
    width: 272px;
    height: 298px;
    font-size: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid transparent;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    text-align: center;
}
.section1 .section1-list .item+.item {
    margin-left: 36px;
}
.section1 .section1-list .item img {
    margin-bottom: 22px;
}
.section1 .section1-list .item h3 {
    margin-bottom: 13px;
    font-weight: normal;
    font-size: 18px;
    color: #000;
}
.section1 .section1-list .item p {
    margin: 0 auto;
    width: 220px;
    line-height: 26px;
    font-size: 15px;
    color: #999;
    transition: color .2s;
}
.section1 .section1-list .item.active, .section1 .section1-list .item:hover {
    border-color: #f2f3f9;
    -webkit-box-shadow: 0 0 8px 0 #f0f1f838;
       -moz-box-shadow: 0 0 8px 0 #f0f1f838;
            box-shadow: 0 0 8px 0 #f0f1f838;
}
.section1 .section1-list .item.active p, .section1 .section1-list .item:hover p{
    color: #666;
}
/*支持游戏列表区域*/

.section2 .m-container {
    position: relative;
    height: 644px;
}
.section2 .s2-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 644px;
    margin-left: -360px;
    background: url(../images/game-list-bg.jpg) no-repeat 100% 100%;
    -webkit-background-size: 1920px 644px;
    -moz-background-size: 1920px 644px;
      -o-background-size: 1920px 644px;
         background-size: 1920px 644px;
}
.section2 .s2-content {
    position: relative;
    z-index: 1;
}
.section2 .s2-content .section-title {
    padding-top: 57px;
    color: #fff;
}
.section2 .s2-content .section-desc {
		margin-bottom: 45px;
    color: #fff;
    opacity: .5;
    filter:alpha(opacity=50);
}
.s2-game-logos {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: -360px;
    font-size: 0;
    line-height: 0;
    width: 1920px;
    height: 98px;
}
.s2-game-logos img {
    position: absolute;
    top:0;
    left:0;
    width: 1920px;
    height: 98px;
}
@keyframes slidegame{0%{background-position:0}to{background-position:-2955px}}
.s2-game-logos .scroll-pic {
    width: 1920px;
    height: 98px;
    background: url(../images/game-logos.png) 0px center / 1920px 49px repeat-x;
    animation: 30s linear 0s infinite normal none running slidegame;
}

.section2 .s2-carousel {
	position: relative;
	width: 1200px;
    height: 318px;
	overflow: hidden;
}

.section2 .s2-carousel .swiper-slide {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	text-align: center;
	height: 318px;
	line-height: 0;
}
.section2 .s2-carousel .swiper-slide img {
	border:1px solid #26262e;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none; -webkit-user-drag: none;
}


.section2 .s2-carousel .arrow-left,
.section2 .s2-carousel .arrow-right {
	position: absolute;
	top:50%;
	margin-top: -16px;
	width: 32px;
	height: 32px;
	-webkit-transition: background .3s;
	-o-transition: background .3s;
	-moz-transition: background .3s;
	transition: background .3s;
	background: transparent;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
}

.section2 .s2-carousel .arrow-left>i,
.section2 .s2-carousel .arrow-right>i{
	display: inline-block;
	line-height: 0;
	width:32px;
	height: 32px;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	  -o-background-size: 100% 100%;
	     background-size: 100% 100%;
	background-repeat: no-repeat;
}
.section2 .s2-carousel .arrow-left>i{
	background-image: url(../images/index-left-icon.png);
}
.section2 .s2-carousel .arrow-right>i {
	background-image: url(../images/index-right-icon.png);
	right:42px;
}
.section2 .s2-carousel .arrow-left {
	left:42px;
}
.section2 .s2-carousel .arrow-right {
	right:42px;
}

.section2 .s2-carousel .arrow-left:hover,
.section2 .s2-carousel .arrow-right:hover {
	background-color: #000;
	opacity: .65;
    filter:alpha(opacity=65);
}

/*新闻*/
.section3 {
    position: relative;
    z-index: 1;
}
.s3-news .s3-news-head {
	position: relative;
	margin-bottom: 30px;
	padding-top: 52px;
	padding-left: 42px;

}

.s3-news .s3-news-title {
    line-height: 48px;
    font-size: 30px;
    color: #0d1b27;
}
.s3-news .s3-desc {
    line-height: 28px;
    font-size: 18px;
    color: #7f879d;
}
.s3-news .right-link {
		position: absolute;
		top:80px;
		right: 40px;
    font-size: 18px;
    color: #7f879d;
}
.s3-news .s3-news-list  {
	min-height: 264px;
}
.s3-news .s3-news-list .item {
	float:left;
	margin-right: 40px;
	padding-left: 42px;
	width:498px;
}

.s3-news .s3-news-list .item a {
	display: block;
	padding:10px 0;
	line-height: 24px;
	font-size: 16px;
}
.s3-news .s3-news-list .s3-item-title {
		width:390px;
		color:#333;
}
.s3-news .s3-news-list .s3-item-date {
	float:right;
	color:#666;
}
.s3-news .s3-news-list .item:hover  .s3-item-title,
.s3-news .s3-news-list .item:hover  .s3-item-date {
    color:#4e52ff;
}
/*体验*/
.section4 {
	position: relative;
	top:-49px;
    /*margin-top: -60px;*/
	height: 361px;
        z-index: 0;
	margin-bottom: -49px;
}
.section4 .m-container {
    position: relative;
    height: 361px;
}
.section4 .m-container .s4-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1920px;
    height: 361px;
    margin-left: -360px;
    background: url(../images/bottom-banner.png) no-repeat 100% 100%;
    -webkit-background-size: 1920px 361px;
    -moz-background-size: 1920px 361px;
      -o-background-size: 1920px 361px;
         background-size: 1920px 361px;
}

.section4 .s4-content  {
	position: relative;
	z-index: 1;
	padding-top: 193px;
	color:#fff;
	text-align: center;
}
.section4 .s4-title  {
	margin-bottom: 31px;
	font-size: 32px;
    font-weight: normal;
	/*font-weight: bold;*/
}

.section4 .s4-content .s4-btn {
	display: block;
	margin:0  auto;
	width:138px;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	border:1px solid #ffffff;
	color:#ffffff;
	text-align: center;
}

/*
   侧边栏
 */
/*右侧漂浮*/
.right-sidebar{
    position: fixed;
    right: 32px;
    top: 50%;
    background-color: #ffffff;
    border: solid 1px #ecebf6;
    padding: 0 10px;
    z-index: 2100;
}
.right-sidebar .item{
    position: relative;
    padding: 10px 0 9px;
    border-bottom: 1px solid #efefef;
    text-align: center;
    cursor: pointer;
	font-size: 0;
}
.right-sidebar .item .s-icon{
		position: absolute;
		top:0;
		left:0;
		display: inline-block;
    width:22px;
    height: 20px;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
      -o-background-size: 100% 100%;
         background-size: 100% 100%;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1;
    filter:alpha(opacity=100);
}
.right-sidebar .item .si-wrap {
	position: relative;
	margin:0 auto;
	width:22px;
	height: 20px;
}
.right-sidebar .item .s-icon.default {
	opacity: 1;
    filter:alpha(opacity=100);
}
.right-sidebar .item .s-icon.active {
	opacity: 0;
    filter:alpha(opacity=0);
}

.right-sidebar .item .s1.default{
	background-image: url('../images/sidebar/s1.jpg');
}

.right-sidebar .item .s2.default{
	background-image: url('../images/sidebar/s2.jpg');
}

.right-sidebar .item .s3.default{
	background-image: url('../images/sidebar/s3.jpg');
}

.right-sidebar .item .s4.default{
	background-image: url('../images/sidebar/s4.jpg');
}

.right-sidebar .item .s1.active{
	background-image: url('../images/sidebar/s1-1.jpg');
}
.right-sidebar .item .s2.active{
	background-image: url('../images/sidebar/s2-1.jpg');
}
.right-sidebar .item .s3.active{
	background-image: url('../images/sidebar/s3-1.jpg');
}
.right-sidebar .item .s4.active{
	background-image: url('../images/sidebar/s4-1.jpg');
}
.right-sidebar .item:hover .s-icon.default{
	opacity: 0;
    filter:alpha(opacity=0);
}
.right-sidebar .item:hover .s-icon.active{
	opacity: 1;
    filter:alpha(opacity=100);
}

.right-sidebar .item>p{
    line-height: 24px;
    font-size: 12px;
    color: #999999;
}
.si-content{
    display: block;
    position: absolute;
    right: 67px;
    top: 0;
    width: 200px;
}
.si-content-d1{
    padding: 0 18px;
    border: 1px solid #efefef;
    background-color: #ffffff;
}
.si-content-d1 li{
    padding: 16px 0;
    border-bottom: 1px solid #efefef;
}
.si-content-d1 li:last-child{
    padding-bottom: 0;
    border: none;
}
.si-content-d1 li>h3{
    font-size: 18px;
    font-weight: bold;
    color:#000000;
}
.si-content-d1 li>p{
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
}

.si-content-d1 li.qrcode>p {
	line-height: 40px;
	margin-bottom: 0;
}
.si-content-d1 li.qrcode>img {
	width: 100%;
}
/* 客服弹窗 */
.kefu_fix{
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -180px;
    margin-top: -180px;
    width: 360px;
    background: #fff;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    padding: 40px;
    text-align: center;
    z-index: 10;
}
.kefu_fix>h3{
    font-size: 20px;
    margin-bottom: 30px;
}
.kefu_fix>p{
    font-size: 14px;
    color: #a8a8b3;
    margin: -15px 0 30px 0;
}
.kefu_fix>img{
    margin-bottom: 20px;
}
.kefu_fix>a{
    display: inline-block;
    margin: 0 20px;
    line-height: 40px;
    padding: 0 20px;
    font-size: 14px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.kefu_fix_close{
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
}

/*活动区域*/
  .index-activity{
    position: fixed;
    left: 51px;
    top: 50%;
    z-index: 999;
    margin-top:-70px;
    height: 380px;
    width: 190px;
    background-image: url('../images/tmp/index_activity.png');
    -webkit-background-size: 190px 380px;
       -moz-background-size: 190px 380px;
         -o-background-size: 190px 380px;
            background-size: 100% 100%;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    background: none\9;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/tmp/index_activity.png',sizingMethod='scale');

  }
  .index-activity a{
    display: block;
    width: 100%;
    height: 100%;
  }