@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
	font-family: "Encode Sans Expanded", sans-serif;
  font-weight: 200;
  font-style: normal;
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}


body {
     font-size: 24px;
    font-family: "Encode Sans Expanded", sans-serif;
	  font-weight: 200;
	  font-style: normal;
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    color: #fff;
	background-color:#000;
	overflow-x: hidden;

	}



*,:after,:before {
    background-repeat: no-repeat;
    box-sizing: inherit
}

:after,:before {
    text-decoration: inherit;
    vertical-align: inherit
}

* {
    margin: 0;
    padding: 0
}

hr {
    color: inherit;
    height: 0;
    overflow: visible
}

ul li {
    list-style: none;
}


details,main {
    display: block
}

summary {
    display: list-item
}

small {
    font-size: 80%
}

[hidden] {
    display: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

a {
    background-color: initial;
	color: #FFF;
}

a:hover, a:visited, a:link, a:active {
text-decoration: none;
}

a:active,a:hover {
    outline-width: 0;
	color: #FFF;
}

code,kbd,pre,samp {
    font-family: monospace,monospace
}

pre {
    font-size: 1em
}

b,strong {
    font-weight: bolder
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    border-color: inherit;
    text-indent: 0
}

input {
    border-radius: 0
}

[disabled] {
    cursor: default
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    resize: vertical
}

button,input,optgroup,select,textarea {
    font: inherit
}

optgroup {
    font-weight: 700
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

[role=button],[type=button],[type=reset],[type=submit],button {
    color: inherit;
    cursor: pointer
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type=reset],[type=submit],button,html [type=button] {
    -webkit-appearance: button
}

button,input,select,textarea {
    background-color: initial;
    border-style: none
}

a:focus,button:focus,input:focus,select:focus,textarea:focus {
    outline-width: 0
}

select {
    -moz-appearance: none;
    -webkit-appearance: none
}

select::-ms-expand {
    display: none
}

select::-ms-value {
    color: currentColor
}

legend {
    border: 0;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    color: inherit;
    font: inherit
}

img {
    border-style: none
}

progress {
    vertical-align: initial
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled=true] {
    cursor: default
}





.container {
	width: 100%;
    background: url("../images/bg_pc.jpg") no-repeat center top;
	background-size: 100% 47.26rem;
}


.wrap {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 47.26rem;
}


.video {
    position: relative;
	z-index: 5;
    top: 6.65rem;
	left: 0.413rem;
    width: 9.40rem;
    height: 5.25rem;
    cursor: pointer;
	background: url(../images/yt.png) no-repeat;
	background-size: 100%;
	}

.story {
    position: relative;
    top: 7.7rem;
	left: 1rem;
    width: 5.25rem;
    height: 9.4rem;
	font-size: .21rem;
    color: #FFFFFF;
	line-height: .37rem;
	}

.league {
		position: relative;
		top: 10.55rem;
		left: .62rem;
		width: 9rem;
		height: 5.25rem;
		font-size: .18rem;
		color: #FFF;
		line-height: .35rem;
			font-weight: 300;
			text-align:center;
}
	
.event {
		position: relative;
		float: left;
		top: 7.85rem;
		left: .41rem;
		width: 4.58rem;
		height: 6rem;
		background: url(../images/event.png) no-repeat center top;
	background-size: 4.58rem 5.43rem;

}
	
.text {
		position: relative;
		top: 0.8rem;
		width: 3.78rem;
		height: 1.1rem;
		font-size: .18rem;
		color: #FFF;
		line-height: .26rem;
		font-weight: 300;
		display: flex;
		padding: 0.2rem 0.4rem 0.2rem 0.4rem
}

.banner {
		position: relative;
		top: 0.82rem;
		width: 4.58rem;
		height: 3.11rem;
		
}

.link {
		position: relative;
		
		top:0.9rem;
		width: 4.58rem;
		height: 1.2rem;
		font-size: .16rem;
		color: #FFF;
		line-height: .33rem;
		font-weight: 300;
		text-align:center;
}

.reward {
		position: relative;
		float: left;
		top: 7.85rem;
		left: .65rem;
		width: 4.58rem;
		height: 6rem;
		background: url("../images/reward.png") no-repeat center top;
		background-size: 4.58rem 5.43rem;

}

.app {
		position: relative;
		top: 9.15rem;
		left: .8rem;
		width: 4rem;
		height: 1.8rem;
		font-size: .18rem;
		color: #FFF;
		line-height: .26rem;
		font-weight: 300;
		display: flex;

}

.app-link {
		position: absolute;
		top:37.2rem;
		left: 5.25rem;
		width: 4.58rem;
		height: 1.2rem;
		font-size: .16rem;
		color: #FFF;
		line-height: .33rem;
		font-weight: 300;
		text-align:center;
}

.arrow { 
	font-weight: 100;
	
}




.imagination {
		position: absolute;
		top:40.35rem;
		left: 5.7rem;
		width: 3.7rem;
		height: 1.2rem;
		font-size: .16rem;
		color: #FFF;
		line-height: .3rem;
		font-weight: 300;
}

.respect {
		position: absolute;
		top:42rem;
		left: 5.7rem;
		width: 3.7rem;
		height: 1.8rem;
		font-size: .16rem;
		color: #FFF;
		line-height: .3rem;
		font-weight: 300;
}

.encouragement {
		position: absolute;
		top:44.17rem;
		left: 5.7rem;
		width: 3.7rem;
		height: 1.8rem;
		font-size: .16rem;
		color: #FFF;
		line-height: .3rem;
		font-weight: 300;
}

.footer {
	position: relative;
	overflow: hidden;
	left: 0rem;
	width: 100%;
	height: 0.3rem;
	color: #fff;
	font-size: .16rem;
	background-color: #000;
	padding-top: 0.1rem;
}


.pop-video {
	
    display: none;
    position: relative;
	margin: 0.2rem;
	top: 0.5rem;
    width: 6rem;
    background: #000;
}
.video-play {
	
    float: left;
    margin: .1rem;
    display: inline;
    width: 5.8rem;
    height: 3.97rem;
}
.pop-video iframe {
    width: 100%;
    height: 100%;
}

.close-video {
    position: absolute;
    right: 0;
    top: -0.4rem;
    width: .5rem;
    height: .5rem;
    background: url(../images/btn_close.png) no-repeat;
	background-size: .5rem .5rem;
}



@media (max-width:1024px) {
    
}


@media (max-width:820px) {
    
	
	
	
}





@media (max-width:750px) {
    .footer-pc {
        display: none;
    }
    body {
        font-size: .24rem;
   }
     .container {
        height: 55.91rem;
        background: url(../images/bg_sp.jpg) no-repeat center top;
        background-size: 10.24rem 55.91rem;
    }

	
	
    .wrap {
        width: 10.24rem;
    }
    
	.video {
    position: relative;
    top: 6.65rem;
	left: 0.412rem;
    width: 9.40rem;
    height: 5.25rem;
    cursor: pointer;
	}
	
	.story {
    position: relative;
    top: 7.7rem;
	left: 1rem;
    width: 9.20rem;
    height: 5.25rem;
	font-size: .33rem;
    color: #FFFFFF;
	line-height: .47rem;
	}

	.league {
    position: relative;
    top: 18.1rem;
	left: .62rem;
    width: 9rem;
    height: 5.25rem;
	font-size: .34rem;
    color: #FFF;
	line-height: .5rem;
	font-weight: 300;
	text-align:center;
	}
	
	

	
	.sp:before { 
    content: ' '; 
    display: block;
					
}
		

	.event {
			position: relative;
			float: left;
			top: 18rem;
			left: .41rem;
			width: 4.58rem;
			height: 6.5rem;
			background: none;

	}

	.text {
			position: relative;
			top: 0.0rem;
			width: 3.78rem;
			height: 2.2rem;
			font-size: .28rem;
			color: #FFF;
			line-height: .34rem;
			font-weight: 300;
			display: flex;
			padding: 0.2rem 0.4rem 0.2rem 0.4rem
	}

	.banner {
			position: relative;
			top: 0.12rem;
			width: 4.58rem;
			height: 3.11rem;

	}

	.link {
			position: relative;

			top:0.3rem;
			width: 4.58rem;
			height: 0.8rem;
			font-size: .27rem;
			color: #FFF;
			line-height: .33rem;
			font-weight: 300;
			text-align:center;
	}

	.reward {
			position: relative;
			float: left;
			top: 18rem;
			left: .65rem;
			width: 4.58rem;
			height: 6rem;
			background: none;

	}

	.app {
			position: absolute;
			top: 41.8rem;
			left: .8rem;
			width: 4rem;
			height: 3rem;
			font-size: .28rem;
			color: #FFF;
			line-height: .35rem;
			font-weight: 300;
			display: flex;

	}

	.app-link {
			position: absolute;
			top:44.7rem;
			left: 5.25rem;
			width: 4.58rem;
			height: 1.2rem;
			font-size: .27rem;
			color: #FFF;
			line-height: .33rem;
			font-weight: 300;
			text-align:center;
	}

	.imagination {
			position: absolute;
			top:48.0rem;
			left: 5.2rem;
			width: 4.7rem;
			height: 1.5rem;
			font-size: .26rem;
			color: #FFF;
			line-height: .37rem;
			font-weight: 300;
	}

	.respect {
			position: absolute;
			top:50rem;
			left: 5.2rem;
			width: 4.7rem;
			height: 2.3rem;
			font-size: .26rem;
			color: #FFF;
			line-height: .37rem;
			font-weight: 300;
	}

	.encouragement {
			position: absolute;
			top:52.77rem;
			left: 5.2rem;
			width: 4.7rem;
			height: 2.5rem;
			font-size: .26rem;
			color: #FFF;
			line-height: .37rem;
			font-weight: 300;
	}
	
	.footer {
		position: relative;
		overflow: hidden;
		left: 0rem;
		width: 100%;
		height: 0.6rem;
		color: #fff;
		font-size: .25rem;
		background-color: #000;
		padding-top: 0.25rem;
}
	
	.pop-video {
		display: none;
		position: relative;
		width: 10.24rem;
		background: #000;
	}
	.video-play {
		float: left;
		margin: .10rem;
		display: inline;
		width: 10.04rem;
		height: 6.83rem;
	}
	.pop-video iframe {
		width: 100%;
		height: 100%;
	}
	.close-video {
        top: -.9rem;
        width: 1rem;
        height: 1rem;
        background-size: 1rem 1rem;
    }

	
}