@charset "utf-8";
@import url(https://unpkg.com/@kfonts/nexon-lv2-gothic/index.css);
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


:root {
    --body : #111 ;
    --darknavy : #091C4E ;
    --darkgray : #2B2F36; 
    --gray : #666666;
    --blue : #4777F5;
    --orange : #F55C36 ;

    --bg-navy: #133CA8 ;
    --bd-blue: #7199F2;
}
img {-webkit-touch-callout:none;}
/* reset with bootstrap */
body{position:relative;-webkit-text-size-adjust:none;}
body,input,textarea,select,button,table{font-weight: 400;font-family: 'NEXON Lv2 Gothic',sans-serif;line-height: 1.3;color: #111}
a,input,textarea,select,button{text-decoration:none;color:#231f20;outline:0 ;-webkit-transition:color .2s,border-color .2s,background .2s,box-shadow .2s,opacity .2s;transition:color .2s,border-color .2s,background .2s,box-shadow .2s,opacity .2s}
a:hover,a:focus,a:active{color:inherit;text-decoration: none;}
[role=button]{outline:0 !important}
a:focus:not(:focus-visible),input:focus:not(:focus-visible),textarea:focus:not(:focus-visible),select:focus:not(:focus-visible),button:focus:not(:focus-visible),[role=button]:focus:not(:focus-visible){outline:0 !important}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
input{background: none; border: 0;box-shadow: none;}
input::-ms-clear,input::-ms-reveal{display:none;width:0;height:0;}
input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
li{list-style:none}
label{cursor:pointer;margin: 0;}
table{width:100%;border-collapse:collapse}
a,button{cursor:pointer}
button{display: inline-block; border:0;box-shadow:none;background:none;font-family: inherit;}
i{font-style:normal;}
img{max-width:100%}
h1, h2, h3, h4, h5, h6{font-weight: 700 !important;font-size: inherit;line-height: inherit;}
textarea{resize: none;overflow: hidden}

body{width: 700px; height: 1340px; overflow: hidden;margin: 0 auto;}
@font-face {
    font-family: 'ONE-Mobile-POP';
    src: url("../font/ONE\ Mobile\ POP.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* rank */
.rank-wrap{ width: 700px; height: 1340px;}
.rank-wrap > section{position: relative; width: 100%; height: 100%; background: url(../images/rank/bg.jpg) no-repeat center top /cover;}
.rank-wrap .btn-retry {display: flex;align-items: end;position: absolute;bottom: -2px;left: 0;width: 100%;}
.rank-wrap .btn-retry img {width: 100%;height: 100%;object-fit: cover;}
.rank-wrap .btn-close {position: absolute;top: 32px;right: 32px;width: 52px;height: 52px;background: url(../images/rank/btn-close.svg) no-repeat center/cover;}

.top-rank-wrap {position: absolute;top: 128.09px;left: 50%;transform: translateX(-50%);width: 639px;}
.top-rank {position: absolute;width: 202.22px;height: 254px;border-radius: 24px;}
.top-rank.my-score {box-shadow: 0px 0px 38.889px 0px rgba(255, 236, 129, 0.80);}
.top-rank .info {position: absolute;top: 154px;left: 50%;transform: translateX(-50%);color: #58616F;text-align: center;text-wrap: nowrap;font-family: "NEXON Lv2 Gothic";font-size: 26px;font-weight: 500;line-height: 150%;letter-spacing: -1.04px;}
.top-rank .score {display: flex;align-items: center;position: absolute;top: 200px;left: 50%;transform: translateX(-50%);text-align: center;font-family: Outfit;font-size: 26px;font-weight: 700;line-height: 100%;letter-spacing: -1.04px;}
.top-rank .score .sec {font-size: 38.889px;letter-spacing: -1.556px;}
.top-rank.top1 {top: 56px;left: 217.78px;}
.top-rank.top2 {top: 99px;left: 0;}
.top-rank.top3 {top: 99px;right: 0;}
.top-rank.top1 .score {color: #FF8703;}
.top-rank.top2 .score {color: #595D6B;}
.top-rank.top3 .score {color: #996834;}

.list-wrap {position: absolute;top: 524.22px;left: 0;padding: 38px 0 180px;width: 100%;height: 815.45px;border-radius: 40px 40px 0px 0px;overflow-x: hidden;overflow-y: scroll;-ms-overflow-style: none;scrollbar-width: none;}
.list-wrap::-webkit-scrollbar {display: none;}
.list-item {display: flex;align-items: center;gap: 23.33px;padding: 31.111px 38.889px;}
.list-item .ranking {min-width: 46.66px;font-family: "Outfit", sans-serif;font-size: 27.222px;font-weight: 700;line-height: 150%;letter-spacing: -1.089px;color: #8A94A3;text-align: right;}
.list-item .info {flex: 1;font-family: 'NEXON Lv2 Gothic',sans-serif;font-size: 26px;font-weight: 500;line-height: 0;letter-spacing: -1.04px;color: #58616F;}
.list-item .score {display: flex;align-items: center;gap: 3.89px;color: #2B2F36;text-align: right;font-family: Outfit;font-size: 25.278px;font-weight: 700;line-height: 100%;letter-spacing: -1.011px;}
.list-item .score .sec {font-size: 31.111px;font-weight: 700;letter-spacing: -1.244px;}

.list-item.my-score {background: #FFFBCF;}
.list-item.my-score .ranking {color: #2B2F36;font-size: 32px;letter-spacing: -1.28px;}

/* no-list */
.list-wrap .no-list {padding-top: 130px;height: 100%; text-align: center;display: none;}
.list-wrap.vacant {overflow: hidden;}
.list-wrap.vacant .no-list {display: block;}
.list-wrap.vacant .list-item {display: none;}
.list-wrap.vacant + .btn-retry {display: none;}
.list-wrap .no-list .btn-trygame {position: absolute;bottom: -2px;left: 0;width: 100%;}