.main{height:98vh}.compete{width:100%;margin:0 auto}.compete .role{width:20%;min-width:260px;position:relative;z-index:3}.compete .role img{width:calc(100% + 300px);top:0;position:absolute}.compete .role.r_J img{left:0}.compete .role.r_E img{right:0}.compete .heroCard{position:relative;z-index:2}.compete .heroCard ul{width:100%}.compete .heroCard ul>li{width:30%;max-width:150px;padding:5px}.compete .heroCard ul>li .hero{width:100%;position:relative;z-index:0}.compete .heroCard ul>li .hero img{width:100%}.compete .heroCard ul>li .frame{top:0;left:0;display:none;position:absolute;z-index:1}.compete .heroCard ul>li .ethnicName{left:0;right:0;bottom:20%;padding:5px;opacity:0;text-align:center;background:linear-gradient(90deg,rgba(242,230,148,0),rgb(16,14,10) 50%,rgba(242,230,148,0));position:absolute;z-index:2}.compete .heroCard .Justice ul>li .ethnicName{background:linear-gradient(90deg,rgba(242,230,148,0),rgb(230,158,14) 50%,rgba(242,230,148,0))}.compete .heroCard .Evil ul>li .ethnicName{background:linear-gradient(90deg,rgba(242,230,148,0),rgb(38,5,47) 50%,rgba(242,230,148,0))}.compete .heroCard ul>li:hover .ethnicName{opacity:1}.compete .heroCard ul>li .ethnicName h4{font-size:22px;color:var(--bw6)}.compete .heroCard ul.Justice>li .card{background:var(--a_1)}.compete .heroCard ul.Evil>li .card{background:var(--b_1)}.foreground{left:0;right:0}.EmblemShading{width:50%;top:-25%;z-index:0}.EmblemShading img{width:100%;opacity:.1}.e_J.EmblemShading{left:-10%}.e_E.EmblemShading{right:-10%}@media (max-width:1600px){.compete .role img{width:190%;top:0;position:absolute}}@media (max-width:950px){.foreground{height:20%;max-height:260px}.compete .role img{width:80%;top:0;position:absolute}.compete .role{min-width:360px;position:absolute}.compete .role.role.r_J{left:-35%}.compete .role.role.r_E{right:-35%}}