.grRank .top-box{background:#efefef}
#container.grRank{padding: 139px 0 0;}
.grRank .top-box .inner{height: 264px; background: url(../images/gr/topback_vally.jpg) no-repeat; padding: 84px 0 0 10px;}
.grRank .top-box .inner .page-title-text{font-size:16px; color:#727b82; line-height: 1.5;}
.grRank .intro{background: linear-gradient(#fff, #d6d6d6)}
.grRank .vally-wrap{position: relative; width:1125px; margin:0 auto;}
.vally-list{position:absolute; top:22px; left:0; width:265px; height: 240px; border:1px solid #d6d9dd; background:#fff; border-radius: 10px; padding:22px 24px;}
.vally-list strong{display:block; text-align: center; padding-bottom:12px; font-size: 16px; font-weight: 500; color:#000;}
.vally-list strong:after{content:''; display:block; width:100%; height: 1px; background:#afafaf; margin-top:12px;}
.vally-list ul li + li{margin-top:12px;}
.vally-list ul li > em{font-size:16px; font-weight: 600; color:#5491e0;}
.vally-list ul li > p{font-size:13px; color:#666;}

.map-vally{position:relative; height: 968px; background: url(../images/gr/vally_island.png) no-repeat; margin:18px 0 0 240px;}
.map-vally:hover{background:url(../images/gr/hover.png) no-repeat -2px -2px;}
.map-vally .imgbox-wrap{position:absolute; z-index:200;opacity:0;}
.map-vally .area-cont { position:relative; }
.map-vally .area-cont > li{position:absolute;}

.map-vally .area-cont > li .name{display:none;}
.map-vally .area-cont > li.on .name{display:block; position:relative; top:0; left:6px; width:234px; padding:15px; border:1px solid #45647b; border-radius: 5px; background:#fff;}
.map-vally .area-cont > li.on .name:before{display:block; content:''; position:absolute; top:50%; left:-5px; margin-top:-4px; width: 8px; height: 8px; border-top:1px solid #45647b; border-right:1px solid #45647b; background:#fff; transform: rotate(-135deg);}
.map-vally .area-cont > li.on .name a:hover{color:#44667f}
.map-vally .area-cont > li.on .name ul li{font-size:20px; color:#44667f;}
.map-vally .area-cont > li.on .name ul li + li{margin-top:10px;}
.map-vally .area-cont > li.on .name ul li strong{font-weight: 500;}
.map-vally .area-cont > li.on .name ul li span{position: relative; margin-left:25px;}
.map-vally .area-cont > li.on .name ul li span:before{content:''; display:inline-block; position:absolute; top:6px; left:-14px; width:1px; height: 20px; background:#c9c9c9;}

.map-vally .area-cont > li[data-area="1"] {top:91px; left:374px; width:108px;height:216px;}
.map-vally .area-cont > li[data-area="1"].on {background:url('../images/gr/img_b_1.png') no-repeat;}
.map-vally .area-cont > li[data-area="1"].on .name{top:122px; left:114px;}

.map-vally .area-cont > li[data-area="2"] {top:91px; left:375px; width:108px;height:270px;}
.map-vally .area-cont > li[data-area="2"].on {background:url('../images/gr/img_b_2.png') no-repeat;}
.map-vally .area-cont > li[data-area="2"].on .name{top:180px; left:114px;}

.map-vally .area-cont > li[data-area="3"] {top:91px; left:374px; width:108px;height:326px;}
.map-vally .area-cont > li[data-area="3"].on {background:url('../images/gr/img_b_3.png') no-repeat;}
.map-vally .area-cont > li[data-area="3"].on .name{top:232px; left:114px;}

.map-vally .area-cont > li[data-area="4"] {top:91px; left:374px; width:108px;height:393px;}
.map-vally .area-cont > li[data-area="4"].on {background:url('../images/gr/img_b_4.png') no-repeat;}
.map-vally .area-cont > li[data-area="4"].on .name{top:294px; left:114px;}

.map-vally .area-cont > li[data-area="5"] {top:78px;left:645px;width:159px;height:294px;}
.map-vally .area-cont > li[data-area="5"].on {background:url('../images/gr/img_a.png') no-repeat;}
.map-vally .area-cont > li[data-area="5"].on .name{top:124px; left:172px; width:240px; z-index: 300;}

.map-vally .area-cont > li[data-area="6"] {top:84px;left:148px;width:221px;height:280px;}
.map-vally .area-cont > li[data-area="6"].on {background:url('../images/gr/img_seed.png') no-repeat;}
.map-vally .area-cont > li[data-area="6"].on .name{top:130px; left:180px; width:210px; z-index: 300;}

.vallyPop .vallyRoom{display:none; position:fixed; top:0; left:0; z-index: 1000; width:100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
.vallyPop .vallyRoom > div{width:1120px; height: 895px; background:#fff; border-radius: 30px; position:absolute; top:100px; left:50%; margin-left:-560px;}
.vallyPop .vallyRoom .popClose{background:none; position:absolute; top:45px; right:45px;}
.vallyPop .vallyRoom .roomTxt{margin:65px 0 0 65px;}
.vallyPop .vallyRoom .roomTxt strong{font-size:56px; color:#3f5b6f; font-weight: 500; line-height: 1;}
.vallyPop .vallyRoom .roomTxt strong em{font-weight: 600;}
.vallyPop .vallyRoom .roomTxt p{font-size:16px; color:#727b82; line-height: 1; margin-top:15px;}
.vallyPop .vallyRoom .roomWrap .imgRoom{position:absolute; top:100px; left:50%; margin-left:-500px; z-index: 0;}
.vallyPop .vallyRoom .roomWrap .room a{display:inline-block; padding:8px 15px 7px 12px; border:2px solid #7686a1; border-radius: 50px; background:#fff; line-height: 1;font-size:16px;}
.vallyPop .vallyRoom .roomWrap .room a .rank_name{color:#000; font-weight: 500;}
.vallyPop .vallyRoom .roomWrap .room a .rank_num{color:#888; margin-right:5px; vertical-align: top;}
.vallyPop .vallyRoom .roomWrap .room{position:absolute;}

/*이주의동아리(1~100위까지 가능함) 1위일 경우 이주의 동아리 뱃지가 우선순위*/
.vallyPop .vallyRoom .roomWrap .room.weekbest .rank_num img{position:absolute; top:-5px; left:-5px;}
.vallyPop .vallyRoom .roomWrap .room.weekbest a{padding:8px 25px 8px 35px; border-color:#ad7fdd;}
.vallyPop .vallyRoom .roomWrap .room.weekbest a .rank_num{font-size:0;}
.vallyPop .vallyRoom .roomWrap .room.weekbest .rank_name{color:#7c3ac8;}

.vallyPop .vallyRoom .roomTop .roomWrap .room a{position: relative; padding:8px 15px 8px 30px; border-color:#e2a92c}
.vallyPop .vallyRoom .roomTop .roomWrap .room .rank_num{font-size:0;}
.vallyPop .vallyRoom .roomTop .roomWrap .room a .rank_num img{position:absolute; top:3px; left:8px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room01{top:120px; left:546px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room01 a{padding:8px 25px 8px 40px; border-color:#ed6362;}
.vallyPop .vallyRoom .roomTop .roomWrap .room01 a .rank_num img{top:-5px; left:-5px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room01 .roomImg{position:absolute; transform: skewY(-31deg); top:65px; left:-67px; width:33px; height: 52px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room01.weekbest a{border-color:#7c3ac8;}
.vallyPop .vallyRoom .roomTop .roomWrap .room02{top:353px; left:120px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room02 .roomImg{position:absolute; transform: skewY(-31deg); top:-21px; left:92px; width:33px; height: 54px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room03{top:500px; left:342px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room03 .roomImg{position:absolute; transform: skewY(-31deg); top:-29px; left:111px; width:33px; height: 54px;}
.vallyPop .vallyRoom .roomTop .roomWrap .room a .rank_name, .vallyPop .vallyRoom .roomMid .roomWrap .room a .rank_name{display:inline-block; max-width:165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.vallyPop .vallyRoom .roomTop .roomWrap .weekbest a .rank_num img{top:-9px; left:-9px;}
.vallyPop .vallyRoom .roomTop .roomWrap .weekbest.room01 a .rank_num img{top:-5px; left:-5px;}

.vallyPop .vallyRoom .roomMid .roomWrap .room04{top:378px; left:432px;}
.vallyPop .vallyRoom .roomMid .roomWrap .room05{top:298px; left:616px;}
.vallyPop .vallyRoom .roomMid .roomWrap .room06{top:645px; left:340px;}
.vallyPop .vallyRoom .roomMid .roomWrap .room07{top:505px; left:565px;}
.vallyPop .vallyRoom .roomMid .roomWrap .room08{top:405px; left:665px;}
.vallyPop .vallyRoom .roomMid .roomWrap .room09{top:345px; left:822px;}

.vallyRoom .roomSub .roomWrap .room a .rank_name{display:inline-block; max-width:100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room16{top:588px; left:342px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room17{top:575px; left:556px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room18{top:504px; left:726px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room19{top:548px; left:920px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room20{top:398px; left:962px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room21{top:288px; left:838px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room22{top:282px; left:624px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room23{top:280px; left:355px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room24{top:330px; left:270px;}
.vallyPop .vallyRoom .roomSub01 .roomWrap .room25{top:474px; left:225px;}

.vallyPop .vallyRoom .roomSub02 .roomWrap .room26{top:565px; left:326px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room27{top:700px; left:550px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room28{top:620px; left:650px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room29{top:575px; left:556px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room30{top:500px; left:700px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room31{top:560px; left:772px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room32{top:550px; left:920px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room33{top:428px; left:724px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room34{top:416px; left:962px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room35{top:360px; left:880px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room36{top:262px; left:784px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room37{top:310px; left:590px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room38{top:280px; left:358px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room39{top:330px; left:270px;}
.vallyPop .vallyRoom .roomSub02 .roomWrap .room40{top:470px; left:224px;}