/* 字体包 */
@font-face {
  font-family: 'w7';
  src: url('https://game.igcdn.cn/ieg/font/w7.eot') format('eot'),
    url('https://game.igcdn.cn/ieg/font/w7.ttf') format('TTF'),
    url('https://game.igcdn.cn/ieg/font/w7.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'hyqh55';
  src: url('https://game.igcdn.cn/ieg/font/hyqh55.eot') format('eot'),
    url('https://game.igcdn.cn/ieg/font/hyqh55.ttf') format('TTF'),
    url('https://game.igcdn.cn/ieg/font/hyqh55.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'hyqh75';
  src: url('https://game.igcdn.cn/ieg/font/hyqh75.eot') format('eot'),
    url('https://game.igcdn.cn/ieg/font/hyqh75.ttf') format('TTF'),
    url('https://game.igcdn.cn/ieg/font/hyqh75.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* 动画 */
/* 文字依次向上 */
@keyframes textToUp {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
/* 显示三角形 */
@keyframes toShow {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
/* 显示文字 */
@keyframes showText {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
/* 变化高度 */
@keyframes changeHeight {
	0% {
		opacity: 1;
		height: 100%;
	}

	100% {
		opacity: 0;
		height: 0;
	}
}
html, body {
	width: 100%;
	height: 100%;
}
.wrapper{
	position: relative;
	width: 100%;
	height: 100%;
}
.hide-txt{
	font-size: 0;
}
.header{
	position: absolute;
	top: 20px;
	left: 140px;
	z-index: 9;
}
.logo{
	display: block;
	width: 257px;
	height: 47px;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/logo.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
/* 轮播样式 */
.fp-overflow{
	width: 100%;
	height: 100%;
}
.fp-table{
	overflow: hidden;
}
#fp-nav ul li{
	width: 46px;
	height: 46px;
}
#fp-nav ul li a::before{
	position: absolute;
	top: 0;
	left: -86px;
	line-height: 46px;
	font-size: 24px;
	color: #fff;
	white-space: nowrap;
	display: none;
}
#fp-nav ul li a.active::before{
	display: block;
}
#fp-nav ul li:first-child a{
	border: none;
}
#fp-nav ul li:first-child a::before{
	content: '首页';
}
#fp-nav ul li:nth-child(2) a:before{
	content: '游戏';
}
#fp-nav ul li:nth-child(3) a:before{
	content: '电竞';
}
#fp-nav ul li:nth-child(4) a:before{
	content: '关于';
}
#fp-nav ul li:last-child{
	display: none;
}
#fp-nav ul li .active{
	border-radius: 50%;
	border: 3px solid #fff;
}
#fp-nav ul li a span{
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background: #fff;
}
.fp-watermark{
	display: none;
}
/* 选中时添加动画 */
.section .tencent-games{
	transform: translateY(100px);
	opacity: 0;
}
.section .tencent-esports{
	transform: translateY(100px);
	opacity: 0;
}
.section .des-text{
	transform: translateY(100px);
	opacity: 0;
}
.section .enter-btn{
	transform: translateY(100px);
	opacity: 0;
}
.section .triangle3{
	opacity: 0;
}
.section .triangle4{
	opacity: 0;
}
.section.active .tencent-games{
	animation: textToUp .8s .2s forwards ease-in-out;
}
.section.active .tencent-esports{
	animation: textToUp .8s .2s forwards ease-in-out;
}
.section.active .des-text{
	animation: textToUp .8s .4s forwards ease-in-out;
}
.section.active .enter-btn{
	animation: textToUp .8s .6s forwards ease-in-out;
}
.section.active .triangle3{
	animation: toShow .5s .8s forwards ease-in-out;
}
.section.active .triangle4{
	animation: toShow .5s .8s forwards ease-in-out;
}
/* 转场动画 */
.transitions{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	display: none;
}
.color{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.transitions.show{
	display: block;
}
.transitions.show .color.color1{
	background: rgba(255, 100, 0);
	animation: changeHeight .6s .1s forwards ease-in-out;
}
.transitions.show .color.color2{
	background: rgba(0, 150, 224);
	animation: changeHeight .5s .1s forwards ease-in-out;
}
.transitions.show .color.color3{
	background: rgba(37,189,43);
	animation: changeHeight .4s .1s forwards ease-in-out;
}
.transitions.show .color.color4{
	background: rgba(255,190,0);
	animation: changeHeight .3s  forwards ease-in-out;
}
/* 内容 */
.tencent-games{
	/* margin-top: 10.4vw; */
	width: 502px;
	height: 185px;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/tencent-games.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
.tencent-esports{
	/* margin-top: 10.4vw; */
	width: 532px;
	height: 159px;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/tencent-esports.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
.des-text{
	margin: 5% 0 0 0;
	/* width: 100%; */
	/* max-width: 903px; */
	font-size: 1.248vw;
	color: #FFF;
	letter-spacing: 0.0208vw;
	line-height: 2.288vw;
	font-family: 'hyqh55';
	text-shadow: 0 1px 2px rgba(79, 79, 79, .3);
}
.enter-btn{
	margin: 3% 0 0 0;
	display: block;
	width: 197px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border: 1px solid #fff;
	font-size: 24px;
	font-family: 'hyqh55';
	color: #FFF;
}
.big-title{
	margin: 110px 0 0 0;
	font-weight: bold;
	font-size: 3.6vw;
	color: #fff;
	line-height: 5.2vw;
	font-family: 'hyqh75';
	/* margin-top: 7.176vw; */
}
.sub-title{
	margin: 50px 0 0 0;
	font-weight: bold;
	font-size: 2.08vw;
	color: #fff;
	line-height: 36px;
	font-family: 'hyqh75';
}
.des-text-long{
	/* max-width: 1175px; */
	/* width: 100%; */
	margin-top: 32px;
	font-size: 1.248vw;
	color: #FFF;
	letter-spacing: .0208vw;
	line-height: 2.288vw;
	font-family: 'hyqh55';
	text-shadow: 0 1px 2px rgba(79, 79, 79,.3);
}
.video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
}
.video-text{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
	z-index: 9;
}
.video-text1{
	display: none;
	text-align: center;
	font-size: 2.6vw;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
	color: #fff;
	font-family: 'w7';
	animation: showText 6s forwards ease-in-out;
	white-space: nowrap;
}
.video-text2{
	display: none;
	text-align: center;
	font-size: 2.6vw;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
	color: #fff;
	font-family: 'w7';
	animation: showText 5s forwards ease-in-out;
	white-space: nowrap;
}
.video-text3{
	display: none;
	text-align: center;
	font-size: 2.6vw;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
	color: #fff;
	font-family: 'w7';
	animation: showText 4s forwards ease-in-out;
}
.video-text4{
	display: none;
	text-align: center;
	font-size: 2.6vw;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
	color: #fff;
	font-family: 'w7';
	animation: showText 6s forwards ease-in-out;
}
.show-text{
	display: block;
}
.content{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 140px;
	right: 140px;
	z-index: 9;
}
#section3 .content{
	top: 0;
	transform: translateY(0);
}
/* 三角形公共样式 */
.triangle1{
	position: absolute;
	top: 40px;
	right: 290px;
	width: 88px;
	height: 43px;
	background-repeat: no-repeat;
	background-size: 100%;
}
.triangle2{
	position: absolute;
	top: 0;
	right: 150px;
	width: 139px;
	height: 68px;
	background-repeat: no-repeat;
	background-size: 100%;
}
.triangle3{
	position: absolute;
	bottom: 0;
	right: 210px;
	width: 139px;
	height: 68px;
	background-repeat: no-repeat;
	background-size: 100%;
}
.triangle4{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 210px;
	height: 210px;
	background-repeat: no-repeat;
	background-size: 100%;
}
/* 首屏 */
.screen{
	
}
/* 腾讯游戏 */
.games {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/games-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.games .sucai{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 67.6vw;
	height: 100%;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/games-img.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
}
.games-triangle1{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/games-triangle1.png);
}
.games-triangle2{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/games-triangle2.png);
}
.games-triangle3{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/games-triangle3.png);
}
.games-triangle4{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/games-triangle4.png);
}
/* 腾讯电竞 */
.esports{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/esports-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.esports .sucai{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 67.6vw;
	height: 100%;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/esports-img.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
}
.esports-triangle1{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/esports-triangle1.png);
}
.esports-triangle2{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/esports-triangle2.png);
}
.esports-triangle3{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/esports-triangle3.png);
}
.esports-triangle4{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/esports-triangle4.png);
}
/* 介绍页 */
.introduce{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(https://game.igcdn.cn/ieg/img-pc/introduce-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.introduce-triangle1{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/introduce-triangle1.png);
}
.introduce-triangle2{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/introduce-triangle2.png);
}
.introduce-triangle3{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/introduce-triangle3.png);
}
.introduce-triangle4{
	background-image: url(https://game.igcdn.cn/ieg/img-pc/introduce-triangle4.png);
}
/* 页脚 */
#section4{
	overflow: visible;
}
#section4.active .footer{
	height: 190px;
}
.footer{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	transition: height 1s;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 1200px;
	padding: 0 140px;
	background: #232323;
	z-index: 9;
	overflow: hidden;
}
.footer-group{
	display: flex;
}
.footer-item{
	margin-right: 50px;
}
.footer-item-head{
	padding: 15px 0;
	font-weight: 600;
	font-size: .936vw;
	color: #FFF;
	font-family: 'hyqh75';
}
.footer-item-content{

}
.footer-item-content a{
	display: block;
	margin-bottom: 9px;
	font-size: .728vw;
	color: #8F8F8F;
	font-family: 'hyqh55';
}
.footer-detail{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.footer-detail .logo{
	margin-bottom: 24px;
}
.footer-detail-item{
	margin-bottom: 4px;
	font-size: .728vw;
	color: #8F8F8F;
}
/* 视频进度条 */
.video-circle {
	position: fixed;
	top: 0;
	bottom: 0;
	transform: translateY(-80px);
	right: 24px;
	margin: auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	/* background: conic-gradient(#fff 0%, #fff 75%, rgba(255,255,255,.5) 75%, rgba(255,255,255,.5) 100%); */
	mask: radial-gradient(transparent 20px, #000 20px);
	-webkit-mask: radial-gradient(transparent 20px, #000 20px);
	z-index: 9;
}
/* 素材随着屏幕变小而透明 */
@media (max-width: 1500px){
	.sucai{
		opacity: .5;
	}
}
@media (max-height: 900px){
	.big-title{
		font-size: 40px;
		margin-top: 90px;
	}
	.des-text-long{
		font-size: 16px;
		margin-top: 16px;
	}
	.sub-title{
		font-size: 28px;
		margin-top: 25px;
	}
}