@charset "euc-kr";

.position_relative {
    position: relative;
}


#contentFrame {
    width: 835px;
    min-height: 1270px;
    margin-bottom: 50px;
}

.position_absolute {
    position: absolute
}

.hide {
    display: none
}

.pick .pick_button.on {
    cursor: pointer;
    color: #fff !important;
    border: 1px solid #8540b8;
}

.js_btn {
    cursor: pointer;
}

.pt_pj_1 {
    color: #fff !important;
    background: #a152db !important
}

.pt_pj_2 {
    color: #fff !important;
    background: #d2a92d !important
}

.gr_register .gr_register-tit {
    text-align: center;
}

    .gr_register .gr_register-tit strong {
        display: inline-block;
        font-size: 1.3rem;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .gr_register .gr_register-tit .time_result {
        margin-bottom: 35px;
    }

        .gr_register .gr_register-tit .time_result p {
            position: relative;
            display: inline-block;
            font-size: 2rem;
            font-weight: 700;
            color: #5A27BF;
            padding-left: 24px;
        }

            .gr_register .gr_register-tit .time_result p::before {
                content: '';
                position: absolute;
                top: calc(50% - 10px);
                left: 0;
                background: url("../img/icon-clock.png") no-repeat left center;
                width: 20px;
                height: 20px;
            }

            .gr_register .gr_register-tit .time_result p span {
                display: inline-block;
                color: #fff;
                background-color: #5a27bf;
                border-radius: 3px;
                padding: 3px;
                margin: 0 4px;
            }

.gr_register .gr_register-list .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 2px 0px;
    height: 38px;
    line-height: 48px;
}

    .gr_register .gr_register-list .item:hover {
        background: #f5f5f5;
        border-radius: 8px;
    }

    .gr_register .gr_register-list .item p {
        font-weight: 500;
        font-size: 1.3rem;
        color: #333;
    }
        .gr_register .gr_register-list .item p .gr_time {
            color: #ff2323;
            font-weight: 600;
            margin-right:4px;
        }
            .gr_register .gr_register-list .item p .txt-bolder {
                margin-left: 4px;
            }
            .gr_register .gr_register-list .item .circle-wrap span {
                display: inline-block;
                box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
            }

div.tip-updown {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden
}

    div.tip-updown table.tip-table, div.tip-updown table.tip-table td {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit
    }

        div.tip-updown table.tip-table, div.tip-updown table.tip-table td {
            vertical-align: middle;
            font-style: inherit;
            font-variant: inherit
        }

    div.tip-updown td.tip-bg-image span {
        display: block;
        overflow: hidden;
        width: 10px;
        height: 10px;
        font: 1px/1px sans-serif
    }

    div.tip-updown td.tip-right {
        background-position: 100% 0
    }

    div.tip-updown td.tip-bottom {
        background-position: 100% 100%
    }

    div.tip-updown td.tip-left {
        background-position: 0 100%
    }

    div.tip-updown div.tip-inner {
        background-position: -10px -10px
    }

    div.tip-updown div.tip-arrow {
        position: absolute;
        visibility: hidden;
        overflow: hidden;
        font: 1px/1px sans-serif
    }

.tip-updown {
    z-index: 100000;
    max-width: 200px;
    padding: 8px;
    text-align: left;
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(0,0,0,.8)
}

    .tip-updown .tip-inner {
        text-align: center;
        font-size: 12px;
        line-height: 1.8
    }

    .tip-updown .tip-arrow-top {
        top: 0;
        left: 50%;
        width: 9px;
        height: 5px;
        margin-top: -5px;
        margin-left: -5px;
        opacity: .8;
        background: url(/assets/img/tip-twitter_arrows.gif) no-repeat
    }

    .tip-updown .tip-arrow-right {
        top: 50%;
        left: 100%;
        width: 5px;
        height: 9px;
        margin-top: -4px;
        margin-left: 0;
        opacity: .8;
        background: url(/assets/img/tip-twitter_arrows.gif) no-repeat -9px 0
    }

    .tip-updown .tip-arrow-bottom {
        top: 100%;
        left: 50%;
        width: 9px;
        height: 5px;
        margin-top: 0;
        margin-left: -5px;
        opacity: .8;
        background: url(/assets/img/tip-twitter_arrows.gif) no-repeat -18px 0
    }

    .tip-updown .tip-arrow-left {
        top: 50%;
        left: 0;
        width: 5px;
        height: 9px;
        margin-top: -4px;
        margin-left: -5px;
        opacity: .8;
        background: url(/assets/img/tip-twitter_arrows.gif) no-repeat -27px 0
    }

.font12 {
    font-size: 12px;
    color: #666;
}

.user_photo {
    display: inline-block;
    overflow: hidden;
    margin-right: 5px;
}

.user_photo img {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    border-radius: 50%;
}

.user_photo150 {
    width: 150px;
    height: 150px
}

.user_photo80 {
    width: 80px;
    height: 80px
}

.user_photo90 {
    width: 90px;
    height: 90px
}

.user_photo60 {
    width: 60px;
    height: 60px
}

.user_photo50 {
    width: 50px;
    height: 50px
}

.user_photo55 {
    width: 55px;
    height: 55px
}

.user_photo40 {
    width: 40px;
    height: 40px
}

.user_photo30 {
    width: 32px;
    height: 32px;
    line-height: 30px
}

.name-wrap .img_photo {
    border-radius: 50%;
}

/* Æ˾÷ À©µµ¿ì¿ë Ãß°¡ */
.wpopupwrap {
    overflow: hidden;
    padding: 0 20px;
    background-color: #fbfcfd
}
/* popup size */
.wpopup-small {
    width: 450px;
    min-width: 450px;
}

.wpopup-medium {
    width: 550px;
    min-width: 550px;
}

.wpopup-large {
    width: 830px;
    min-width: 830px;
}

.wpopup-xlarge {
    width: 960px;
    min-width: 960px;
}

.wpopup-bigs {
    width: 1260px;
    min-width: 1260px;
}
/*scrolling*/
.wpopupwrap.scrolling .popup-content {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.wpopupwrap .board-list.vertical td {
    padding: 0 8px;
}

.wpopupwrap .el_btn-wrap {
    margin-top: 48px;
}

.wpopupwrap .el_btn.small {
    max-width: none;
}

.wpopupwrap .info-box {
    margin-top: 16px;
}

.wpopupwrap .popup-content > .el_btn-wrap {
    margin-top: 0;
}

.wpopupwrap .box-wrap {
    margin-top: 18px;
    border: 0;
}

.wpopupwrap .box-wrap .level-txt {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
}

.wpopupwrap .box-wrap strong {
    font-weight: 700;
}

.wpopupwrap .charts {
    margin-top: 8px;
}

.wpopupwrap .btn-wrap .btn {
    min-width: 72px;
}

.wpopupwrap .name-wrap .img {
    max-width: 56px;
}

.wpopupwrap .start-txt {
    position: absolute;
    top: 18px;
    right: 45px;
    font-weight: 400;
    font-size: 12px;
    color: #000;
}

.wpopupwrap .btn.primary {
    color: #fff;
    background-color: #5A27BF;
}
.wpopupwrap .btn.primary:hover {
    background-color: #6a37ce;
}

.wpopupwrap .btn.outline-bold {
    border: 1px solid #E9E8EE;
}

.wpopupwrap .btn.w-big {
    width: 160px;
}

.wpopupwrap .btn.w-small {
    width: 80px;
}


.wpopup-medium .popup-footer {
    text-align: center;
}

    .wpopup-medium .popup-footer button {
        width: 160px;
    }

.wpopupwrap .board-list.vertical td {
    padding: 0 8px;
}

.wpopupwrap .el_btn-wrap {
    margin-top: 48px;
}

.wpopupwrap .el_btn.small {
    max-width: none;
}

.wpopupwrap .info-box {
    margin-top: 16px;
}

.wpopupwrap .popup-content > .el_btn-wrap {
    margin-top: 0;
}

.wpopupwrap .box-wrap {
    margin-top: 18px;
    border: 0;
}

.wpopupwrap .box-wrap .level-txt {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
}

.wpopupwrap .box-wrap strong {
    font-weight: 700;
}

.wpopupwrap .charts {
    margin-top: 8px;
}

.wpopupwrap .btn-wrap .btn {
    min-width: 72px;
}

.wpopupwrap .name-wrap .img {
    max-width: 56px;
}

.wpopupwrap .start-txt {
    position: absolute;
    top: 18px;
    right: 45px;
    font-weight: 400;
    font-size: 12px;
    color: #000;
}

.popup-container p.txt-left {
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    padding: 0 0 16px;
}

.me {
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    padding: 4px 5px;
    background: #888;
}

/*¸ÞÀÎ ·¹À̾ƿô*/
.aside {
    flex: 0 0 auto;
    width: 360px;
}
.top-rank {
    flex: 0 0 auto;
    width: 422px;
}
.top-chatroom {
    flex: 0 0 auto;
    width: 100%;
}

/* º£½ºÆ®±æµå Ç÷ÎÆùè³Ê */
.guild_list:before {
    content: '';
    display: inline-block;
    background: #44a0f4;
    border-radius: 5px 5px 0 0;
    width: 50px;
    height: 34px;
    line-height: 10px;
    color: #fff;
    font-weight: 600;
    display: inline-block;
    position: absolute;
    top: -34px;
    left: 0px;
    z-index: -1;
}
.guild_list span.tit {
    position: absolute;
    top: -30px;
    left: 7px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}
    .guild_list {
    position: absolute;
    width: 51px;
    height: 51px;
    top: 877px;
    right: -1px;
}

    .guild_list .item {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-top: 1px solid #44a0f4;
        border-left: 1px solid #44a0f4;
        border-right: 1px solid #44a0f4;
        background: #fbfbfb;
        position: relative;
    }
        .guild_list .item:last-child {
            border-bottom: 1px solid #44a0f4;
        }

        .guild_list .item .guild_photo img {
            box-sizing: border-box;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin: 1px 0 0 2px;
        }

        .guild_list .info_wrap .info_box {
            display: none;
            position: absolute;
            position: absolute;
            top: 0;
            left: -423px;
            z-index: 9999;
            width: 422px;
            height: 50px;
            border-top: 1px solid #ed407f;
            border-left: 1px solid #ed407f;
            border-bottom: 1px solid #ed407f;
            background-color: #ed407f;
            border-radius: 8px 0 0 8px;
            font-size: 1.3rem;
            padding: 8px;
            line-height: 31px;
            color: #fff
        }
        .guild_list .info_wrap .info_box p {
            display:flex;
            justify-content: space-between
        }
            .guild_list .info_wrap .info_box p span {
                margin: 0 auto;
            }
            .guild_list .info_wrap .info_box p span.split {
                display: inline-block;
                width: 1px;
                height: 14px;
                background: linear-gradient(90deg, #a2003b, #ffb5d1);
                margin-top: 9px;
            }
          
        .guild_list .info_wrap:hover .info_box {
            display: block
        }
        .guild_list .info_wrap .info_box .name strong{
            font-weight: 600;
        }