@charset "UTF-8";
/* CSS Document */

.hero .banner01{
    position: absolute;
    overflow: hidden;
    bottom: 27.1%;
    right: 34.6%;
    width: 16.1%;
}

.hero .banner01 img{
	opacity: 0;
	width: 100%;
}

.hero .banner01:hover{
	opacity:0.7;
}




.hero .banner02{
	position: absolute;
    overflow: hidden;
	bottom: 27.1%;
    right: 18%;
    width: 16.1%;
}

.hero .banner02 img{
	opacity: 0;
	width: 100%;
}

.hero .banner02:hover{
	opacity:0.7;
}





.hero .banner03{
    position: absolute;
    overflow: hidden;
    bottom: 27.1%;
    right: 1.4%;
    width: 16.1%;
}

.hero .banner03 img{
	opacity: 0;
	width: 100%;
}

.hero .banner03:hover{
	opacity:0.7;
}





.hero .banner04{
    position: absolute;
    overflow: hidden;
    bottom: 18.1%;
    right: 34.6%;
    width: 16.1%;
}

.hero .banner04 img{
	opacity: 0;
	width: 100%;
}

.hero .banner04:hover{
	opacity:0.5;
}





.hero .banner05{
    position: absolute;
    overflow: hidden;
    bottom: 18.1%;
    right: 18%;
    width: 16.1%;
}

.hero .banner05 img{
	opacity: 0;
	width: 100%;
}

.hero .banner05:hover{
	opacity:0.5;
}




.hero .banner06{
    position: absolute;
    overflow: hidden;
    bottom: 18.1%;
    right: 1.4%;
    width: 16.1%;
}

.hero .banner06 img{
	opacity: 0;
	width: 100%;
}

.hero .banner06:hover{
	opacity:0.5;
}


.hero .banner07{
    position: absolute;
    overflow: hidden;
    bottom: calc(6.8% + 80px);
    left: 3.9%;
    width: 300px;
}

.hero .banner07 img{
	opacity: 0;
	width: 100%;
}

.hero .banner07:hover{
	opacity:0.5;
}










.hero .player_hero {
    display:none;
    position: absolute;
    overflow: hidden;
    bottom: 5.9%;
    left: 3.9%;
    width: 300px;
}

.hero .banner_ev{
    position: absolute;
    overflow: hidden;
    bottom: calc(6.8% + 80px);
    left: 3.9%;
    width: 300px;
}

.hero .banner_ev img{
	opacity: 0;
	width: 100%;
}

.hero .banner_ev:hover{
	opacity:0.5;
}


.tie_up_banner{
	background: #000;
	padding: 5%;
	margin: 0;	
}

.tie_up_banner ul{
	letter-spacing: -.40em;
	text-align: left;
	width: 90%;
    max-width: 980px;
	margin: 0 auto;
}

.tie_up_banner li{
	width: 24%;
	margin: 0.35% 0.5%;
	/*float: left;*/
	display: inline-block;
	letter-spacing: normal;
}

.tie_up_banner a{
	display: block;
}

.tie_up_banner a:hover{
	opacity: 0.7;
}















@media screen and (max-width:991px){
.tie_up_banner li{
	width: 32.33333333%;
	margin: 0.5%;
	/*float: left;*/
}
	
.tie_up_banner ul{
	text-align: left;
}
}

@media screen and (max-width:640px){
	
	
.tie_up_banner li{
	width: 48%;
	margin: 0.5% 1%;
	/*float: left;*/
}
}