@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

body {padding:0; margin:0;  font-family: 'Noto Sans KR'; font-weight: 400; color:#333; line-height: 1.2;}
::selection {background-color:#2f57ff; color:#FFF;}
::-webkit-scrollbar {display:none;}
ul {padding:0; display: inline-block; margin:0 auto;}
li {list-style: none;}
b, strong, .bold, h1, h2, h3, h4, h5, h6, h7, h8 {font-weight: 700;}
h1, h2, h3, h4, h5, h6, h7, h8, p {margin:5px 0;}
p {font-weight:300;}
div, section, article, li, nav {overflow: hidden;}
a {color:inherit; text-decoration: none; cursor: pointer;}
header, footer {padding:30px 0;}
img {max-width: 100%;}

.rela {position: relative;}
.abs {position:absolute;}


#event {background-color: #FFF; box-shadow: 0px 0px 5px #CCC}
#event a:hover {color:#2f57ff}

.bg {background-color:#1E273B; color:#FFF;}
.bgbk {background-color:#000; color:#FFF;}
.bgwh {background-color:#FFF; color:#000;}
.none {display: none;}
.inb {display: inline-block;}

.tc {text-align: center;}
.fl, ul.left>li {float:left;}
.fr {float:right;}
.w1200 {margin:auto; max-width: 1200px; padding: 0 10px;}
.w400 {margin:auto; max-width: 400px; padding: 0 10px;}
.w500 {margin:auto; max-width: 500px;}
.w100 {width:100%;}
.h100 {height:100%;}
.small {font-size:0.8em;}
.link, .u {text-decoration: underline;}
.box {padding:20px; border:#FFF 1px solid; box-sizing: border-box; border-radius: 30px 0px; color:#FFF; font-weight: 400;}

header#top {font-size:0.8em;}
 
.star {color:#FEEF22; text-shadow: #000 0px 0px 3px; font-size:1.4em;}

.flex {display: flex;}
.around {justify-content: space-around;}
.center {justify-content: center; align-items: center;}
.vcenter {align-items: center;}
.between {justify-content: space-between;}

.rela {position:relative;}

.btn {padding:10px 20px !important; box-sizing: border-box; cursor: pointer; font-weight: 400; transition: all 0.1s; margin:5px auto; background-color:transparent;}
.btn.yk {border:#FEEF22 2px solid; color:#FEEF22;}
.btn.bl {border:#2f57ff 2px solid; color:#2f57ff;}
.btn.wh {border:#FFF 2px solid; color:#FFF;}
.btn.bl:hover, .btn.bl.active {background-color:#2f57ff; color:#FFF !important;}
.btn.wh:hover {background-color:#FFF; color:#2f57ff;}
.btn.yk:hover {background-color:#FEEF22; color:#2f57ff;}

.mt10 {margin-top:10px;}
.mt30 {margin-top:30px;}
.mt50 {margin-top:50px;}

.mb10 {margin-bottom:10px;}
.mb30 {margin-bottom:30px;}
.mb50 {margin-bottom:50px;}

.mr30 {margin-right:30px;}
.mr50 {margin-right:50px;}

.pad10 {padding:10px;}
.pad20 {padding:20px;}
.pad30 {padding:30px;}

.tb10 {padding-top:10px; padding-bottom:10px;}
.tb30 {padding-top:30px; padding-bottom:30px;}

.grid {float:left; box-sizing: border-box;}
.p1 {width:100%;}
.p2 {width:50%;}
.p3 {width:33.3%;}
.p4 {width:25%;}
.p5 {width:20%;}

.p75 {width:75%;}

.even {float: right;}

h2.bl {color:#2f57ff;}

/* Header */

#logo {width:50px;}
ul.left>li {padding:5px; margin:5px;}
#nav a {margin-right:30px;}
#nav a:last-child {margin-right:0;}

/* Footer */
#foot_logo {width:200px;}
.disable {opacity: 0.5;}


#vNow img {border-radius: 15px; box-shadow: #AAA 0px 0px 5px 1px;}
#mp_icon {background-color:#2f57ff; color:#FFF; padding:5px 10px; border-radius: 20px;}
.rankName {margin:auto 10px; width:100%;}
.rankName>h4 {word-break: break-all; white-space: nowrap; text-overflow: ellipsis; width: 120px; overflow: hidden;}
#rankIndex .rankNum {margin:auto 15px; font-weight: 700; width:20px; display: flex; align-items: center; justify-content: center;}
.rankList {margin:10px auto; overflow: visible; flex-wrap: wrap;}
.rankListApp {margin:10px auto; overflow: visible; flex-wrap: wrap; width:100%;}
.trans {transition:all 0.3s;}
.rankImg {display: inline-block; width:100px; height:100px; border-radius: 50px; box-sizing: border-box; padding:5px; position: relative;}
.rankImg img{background-color:#666;box-sizing: border-box; border-radius: 50px;}
.rankResult {margin:auto 10px;}
.rankList>div {padding:10px; align-content: center;   position:relative; overflow: visible; height:82px; background-color:#FFF; text-align: left; font-size:1.1em; color:#111; border-left:#EEE 10px solid;}
.rank1>div {border-left: #FC0 10px solid;}
.rank2>div {border-left: #BBB 10px solid;}
.rank3>div {border-left: #C90 10px solid;}
.rankTitle {padding:15px; background-color:#29344A; text-align: center; margin:0;}
.rankNumHigh {position:absolute; width:100%; left:30px; top:-24px; color:#000;}
.rankNumHigh h2 {width:30px; height:30px; display: flex; align-items: center; justify-content: center; padding:5px; border-radius: 30px; box-shadow: #333 2px 2px 10px}

.profile {width:140px; border-radius: 50px; border:#CCC 1px solid; background-color:#CCC;}


/* Reflective */
@media screen and (max-width:500px)
{
	.mnone {display: none;}
	.even {float: none;}
	.m1 {width:100%;}
	.m2 {width:50%;}
	.mfl {float:left !important;}
}