@charset "UTF-8";
@import url(./reset.css);
@import url(./base.css?v=2);
@import url(./utility.css);
.big {
  font-size: 6rem;
}

.bg-ligray {
  background: #FFFBFC;
}

.bg-gray {
  background: #F5F5F5;
}

.bg-dkgray {
    background: #555;
}

.bg-sky {
  background: #F3F9FF;
}

.bg-purple {
  background: #FCFBFF;
}

.bg-yellow {
  background: #FFFEF5;
}

.bl_header {
    height: 80px;
    background-color: #5a27bf;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 90px;
    min-width: 1350px;
    width: 100%;
}

    .bl_header .inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 96.5px;
        width: 1220px;
        position: relative;
    }

    .bl_header .logo-wrap a{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 12px;
        font-size: 2.8rem;
        font-weight: bold;
    }

    .bl_header .bl_header__nav {
        font-size: 1.6rem;
        height: 100%;
    }

        .bl_header .bl_header__nav .list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            height: 100%;
            position: relative;
            cursor: pointer;
        }

            .bl_header .bl_header__nav .list .item {
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 0 30px;
            }

                .bl_header .bl_header__nav .list .item.active {
                    background-color: #4d19b5;
                    position: relative;
                }

                    .bl_header .bl_header__nav .list .item.active::after {
                        content: url(../img/bar.png);
                        position: absolute;
                        bottom: 10px;
                        left: 50%;
                        -webkit-transform: translateX(-50%);
                        transform: translateX(-50%);
                    }

                    .bl_header .bl_header__nav .list .item.active .depth2 {
                        display: block;
                    }

                .bl_header .bl_header__nav .list .item > a {
                    display: block;
                    height: 100%;
                    line-height: 80px;
                }

                    .bl_header .bl_header__nav .list .item > a:hover {
                        color: #fff;
                    }

    .bl_header .link {
        font-size: 1.2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 36px;
    }

        .bl_header .link .item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 4px;
        }

            .bl_header .link .item .img {
                max-width: 26px;
                max-height: 26px;
            }

        .bl_header .link a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 4px;
            position: relative;
        }
          
            .bl_header .link a:after {
                position: absolute;
                content: "";
                top: 118%;
                left: 0;
                width: 100%;
                height: 2px;
                background: #fff;
                transform: scaleX(0);
            }

            .bl_header .link a:hover:after {
                transform: scaleX(1);
            }

            .bl_header .link a:hover {
                color: #fff;
            }

.bl_side-notice {
  border-width: 1px;
  border-style: solid;
  border-color: #dbdbdb;
  border-radius: 10px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.17);
  padding: 16px 15px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bl_side-notice .inner-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
}
.bl_side-notice .list {
  width: 100%;
}
.bl_side-notice .list li + li {
  margin-top: 10px;
}
.bl_side-notice .list li .list-flex {
  display: flex;
}

.bl_side-login {
  border-width: 1px;
  border-style: solid;
  border-color: #dbdbdb;
  border-radius: 10px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.17);
  padding: 14px 16px 12px;
}

.bl_side-login .box-wrap {
    background: none;
}

.bl_side-login .title {
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: #666;
  margin-bottom: 2px;
}
.bl_side-login .logo-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
}
.bl_side-login .logo-wrap .logo {
  max-width: 32px;
}
.bl_side-login .logo-wrap .logo-text {
  font-size: 2rem;
  line-height: 2.4rem;
}
.bl_side-login .service-wrap {
  font-size: 1.3rem;
  line-height: 2rem;
  color: #666666;
}
.bl_side-login .service-wrap .col:first-child {
  border-right: 1px solid #999999;
}
.bl_side-login .btn-wrap .logout {
   font-size: 12px;
}

.bl_side-rank {
  border-width: 1px;
  border-style: solid;
  border-color: #dbdbdb;
  border-radius: 10px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.17);
  padding: 6px 16px 10px;
}

.bl_side-rank-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bl_side-rank-items .bl_side-rank-item {
  border-width: 1px;
  border-style: solid;
  border-color: #e9e8ee;
  border-radius: 10px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
}
.bl_side-rank-items .bl_side-rank-item .img {
  flex-grow: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.bl_side-rank-items .bl_side-rank-item .rank-icon {
  align-self: flex-start;
  margin-bottom: 5px;
}
.bl_side-rank-items .bl_side-rank-item .user-icon {
  margin-bottom: 12px;
}
.bl_side-rank-items .bl_side-rank-item .user-nickname {
  margin-bottom: 19.5px;
  font-size: 1.3rem;
  font-weight: 700;
}
.bl_side-rank-items .bl_side-rank-item .label {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 5px;
}
.bl_side-rank-items .bl_side-rank-item .gold-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.bl_side-rank-items .bl_side-rank-item .gold {
  font-size: 1.4rem;
  font-weight: 500;
}

.bl_side-pick {
  border-width: 1px;
  border-style: solid;
  border-color: #dbdbdb;
  border-radius: 10px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.17);
  padding: 16px;
  padding-top: 6px;
}

.bl_side-rank,
.bl_side-pick {
  height: 100%;
}

.bl_chat-box .el_btn-wrap {
    border-bottom: 1px solid #e5e5e5;
    gap: 0;
}
.bl_chat-box .bl_real-chat {
  padding: 4px 3px 4px 8px;
  height: 550px;
  overflow-y: scroll;
  background-color: #fff;
}
.bl_chat-box .bl_real-chat .user {
  display: flex;
  gap: 7px;
  margin-bottom: 5px;
}
.bl_chat-box .bl_real-chat .user .img-wrap {
  border-radius: 5px;
  background-color: #e9e8ee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.bl_chat-box .bl_real-chat .user .img-wrap .img {
  max-width: 35px;
}
.bl_chat-box .bl_real-chat .user .chat-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2px 0;
  font-size: 1.3rem;
}
.bl_chat-box .bl_real-chat .user .chat-wrap .user-name {
  font-weight: 700;
  margin-bottom: 3px;
}
.bl_chat-box .bl_real-chat .user .chat-wrap .user-chat {
  line-height: 1.3;
}
.bl_chat-box .bl_real-chat .info {
  margin: 0 auto;
  border-radius: 100px;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
  color: #ED407F;
  background: #fbecf1;
  border: 1px solid #ED407F;
  padding: 10px 0;
  border-radius: 8px;
  justify-content: center;
}
.bl_chat-box .bl_real-chat .result {
  border: 1px solid #a786e9;
  border-radius: 10px;
  padding: 14px 6px 10px;
  display: flex;
  margin: 8px 0;
  justify-content: center;
  align-items: center;
  background: #f7f3ff
} 
.bl_chat-box .bl_real-chat .caution {
  background-color: #e9f5ff;
  color: #44A0F4;
  border-radius: 8px;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.7rem;
  padding: 10px 0;
  margin-bottom: 8px;
  border: 1px solid #44A0F4;
  font-weight: 600
}
.bl_chat-box .bl_real-chat .info-txt {
  color: #ED407F;
  border: 1px solid #ED407F;
  border-radius: 8px;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.7rem;
  padding: 10px 0;
  margin-bottom: 8px;
  font-weight: 600
}
.bl_chat-box .bl_real-chat .result .text {
  margin-bottom: 5px;
}
.bl_chat-box .bl_real-chat .result .text .round {
    font-weight: 600;
    color: #333;
    text-align: center
}
.bl_chat-box .bl_real-chat .result .left {
  color: #333;
  font-weight: 700;
  width: 52%;
  padding-right: 5px;
  text-align: center;
  border-right: 1px solid #d7d7d7;
}
.bl_chat-box .bl_real-chat .result .left .f {
  font-size: 1.2rem;
  line-height: 1.3rem;
  margin-bottom: 8px;
  margin-top: -6px;
}
.bl_chat-box .bl_real-chat .result .left .s {
  font-size: 1.8rem;
  line-height: 2rem;
}
.bl_chat-box .bl_real-chat .result .right {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.bl_chat-box .bl_real-chat .result .c_result {
  line-height: 1.3;
  font-size: 1.2rem;
  text-align: center;
}
.bl_chat-box .bl_real-chat .result .right .result-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bl_chat-box .bl_real-chat .result .right .label {
  font-size: 1.2rem;
  line-height: 1.3rem;
  font-weight: 700;
  padding: 0;
  color: #343434
}
.bl_chat-box .bl_real-chat::-webkit-scrollbar {
  width: 7px;
}
.bl_chat-box .bl_real-chat::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 100px;
}
.bl_chat-box .bl_real-chat {
    overflow-x: hidden;
    word-break: break-word;
}
.bl_chat-box .bl_chat-toolbox {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  align-items: center;
  background: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.bl_chat-box .bl_chat-toolbox .inner-wrap {
  display: flex;
  gap: 8px;
}
.bl_chat-box .bl_chat-toolbox .inner-wrap .img-wrap {
  padding: 8px;
  cursor: pointer;
}
.bl_chat-box .bl_chat-toolbox .toggle-img {
  cursor: pointer;
}
.bl_chat-box .bl_chat-input {
  padding: 16px 7px;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.bl_chat-box .bl_chat-input .login{
  color: #bbb;
}
.bl_chat-box .bl_chat-input .textarea {
  border: none;
  resize: none;
  flex-grow: 1;
  font-size: 1.3rem;
  margin-bottom: 0;
}
.bl_chat-box .bl_chat-input .textarea::-webkit-scrollbar {
  width: 0;
}
.bl_chat-box .bl_chat-input .textarea::-moz-placeholder {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  color: #d0d0d4;
}
.bl_chat-box .bl_chat-input .textarea:-ms-input-placeholder {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  color: #d0d0d4;
}
.bl_chat-box .bl_chat-input .textarea::placeholder {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  color: #d0d0d4;
}
.bl_chat-box .bl_chat-input .max-length-wrap {
  position: absolute;
  font-size: 1.2rem;
  line-height: 1.9rem;
  right:55px;
}
.bl_chat-box .bl_chat-input .max-length-wrap .curr-length {
  font-weight: 700;
}
.bl_chat-box .bl_chat-input .input-img {
  cursor: pointer;
  margin-left: 45px;
}

.bl_footer {
  width: 100%;
  min-width: 1350px;
  font-size: 1.2rem;
  margin-top: 15px;
  background: #f9f9f9;
}
.bl_footer .top {
    background: #fbfcfd;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #eeeeef;
    padding: 25px 0;
}
.bl_footer .top .terms-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 58px;
    color: #888;
    font-size: 13px;
}
.bl_footer .top .inner {
    margin: 0 auto;
    width: 1320px;
}
.bl_footer .container {
  background: #f9f9f9;
  padding: 35px 64px;
  display:flex;
  align-items: flex-start;
  gap: 36px;
  letter-spacing: -0.03rem;
}
.bl_footer .footer-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bl_footer .img-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: -15px;
}
.bl_footer .top .terms-wrap .terms {
  position: relative;
  cursor: pointer;
    letter-spacing: -0.03rem;
}
.bl_footer .top .terms-wrap .terms:after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: -29px;
  width: 1px;
  height: 11px;
  background: #c3c3c3;
}
.bl_footer .top .terms-wrap .terms:last-child:after {
  display:none;
}
.bl_footer .top .img-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bl_footer .footer-left,
.bl_footer .footer-right{
  color: #999;
  font-size: 13px;
  flex: 1
}
.bl_footer .label {
  padding: 0;
}
.bl_footer .footer-left {
  display: flex;
  flex-direction: column;
  margin-top: -4px;
}
.bl_footer .footer-left ul {
  line-height: 1.7;
}
.bl_footer .footer-left .warning {
  font-weight: 500;
  line-height: 1.7;
  margin: 17px 0;
}
.bl_footer .footer-right .first {
  margin-bottom: 26px;
}
.bl_footer .footer-right .label {
  font-weight: 600;
  margin-bottom: 9px;
  font-size: 13px;
}
.bl_footer .footer-right .desc {
  line-height: 1.7;
  text-align: justify;
}
.bl_footer .copyright {
  color: #888;
  font-weight: 400;
}

.el_btn-wrap {
  display: flex;
  gap: 8px;
}
.el_btn-wrap.line4 {
  gap: 11px;
}
.el_btn-wrap.line3 .el_btn {
  max-width: 280px;
}
.el_btn-wrap.line5 {
  margin-top: 0;
}
.el_btn-wrap.line5 .el_btn {
  min-width: 96px;
}
.js_tab_ani.el_btn-wrap {
    padding: 4px 0 6px;
}
.el_btn {
    outline: none;
    border: none;
    width: 100%;
    padding: 14.5px;
    border-radius: 8px;
    background-color: #f5f5f5;
    border: 1px solid #e9e8ee;
    color: #666;
    font-size: 1.6rem;
    text-align: center;
    cursor: pointer;
}
.el_btn:hover a,
.el_btn:hover {
    color: #5A27BF;
    font-weight: 600;
    background: #f4efff;
}
.el_btn.tab_div {
    border: 0;
    border-radius:0;
    padding: 8px;
    height: 50px;
    line-height: 18px;
    font-size: 14px;
    position: relative
}
.el_btn.tab_div:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 50px;
    background: #e5e5e5;
    position: absolute;
    top: 0px;
    right: 0;
}
.el_btn.tab_div:last-child:after {
    display: none;
}
.el_btn.tab_div:last-child {
    line-height: 50px;
    padding: 0
}
.el_btn.tab_div span {
    display: block
}
.el_btn.tab_div.active {
     background-color: #fff;
     font-weight: 600;
     border-bottom: 3px solid #5A27BF;
     color: #5a27bf
}
.el_btn.tab_div:hover{
     background-color: #fff;
     font-weight: 600;
     border-bottom: 3px solid #5A27BF;
     color: #5a27bf;
}
.el_btn.tab_div:first-child{
    border-radius: 10px 0 0;
}
.el_btn.tab_div:last-child {
    border-right: 0;
    border-radius: 0 10px 0 0;
}
.el_btn.tab_div .count_games,
.el_btn.tab_div .count_sports {
    font-size: 12px;
    font-weight: 500;
}
.el_btn.fill {
  background-color: #5a27bf;
  color: #fff;
  font-weight: 700;
  background: -moz-linear-gradient(-45deg,  #5a27bf 0%, #5a27bf 40%, #ffffff 50%, #5a27bf 60%, #5a27bf 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#5a27bf), color-stop(40%,#5a27bf), color-stop(50%,#ffffff), color-stop(60%,#5a27bf), color-stop(100%,#5a27bf));
  background: -webkit-linear-gradient(-45deg,  #5a27bf 0%,#5a27bf 40%,#ffffff 50%,#5a27bf 60%,#5a27bf 100%);
  background: -o-linear-gradient(-45deg,  #5a27bf 0%,#5a27bf 40%,#ffffff 50%,#5a27bf 60%,#5a27bf 100%);
  background: -ms-linear-gradient(-45deg,  #5a27bf 0%,#5a27bf 40%,#ffffff 50%,#5a27bf 60%,#5a27bf 100%);
  background: linear-gradient(135deg,  #5a27bf 0%,#5a27bf 40%,#ffffff 50%,#5a27bf 60%,#5a27bf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a27bf', endColorstr='#5a27bf',GradientType=1 );
  background-repeat: no-repeat;  
  background-position:0px;
  background-size:300%;
}
    .el_btn.fill:hover {
        animation: light 1s;
        -webkit-animation: light 1s;
    }
@keyframes light {
    0% {
        background-position: -600px;
    }

    100% {
        background-position: 0px;
    }
}

@-webkit-keyframes light {
    0% {
        background-position: -600px;
    }

    100% {
        background-position: 0px;
    }
}

.el_btn.small {
    max-width: 200px;
    height: 32px;
    border-radius: 5px;
    font-size: 1.4rem;
    padding: 7px 0;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.el_btn.small.sub_title {
    max-width: 270px;
}
.el_btn.small.active {
  background-color: #f4efff;
  font-weight: 600;
  color: #5A27BF;
}

.el_title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  margin-bottom: 6px;
  box-shadow: inset 0px -1px 0px #e9e9e9;
}

.el_title {
  font-size: 2rem;
  font-weight: 700;
}

.el_more {
  font-size: 1.3rem;
  position: relative;
  width: 53px
}
.el_more:before {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 60%;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    transform: translate(-50%,-50%) rotate(135deg);
}
.el_more:hover:before {
    border-color: #0d6efd
}

.el-rank-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.el-rank-items .el-rank-item {
  display: flex;
  align-items: center;
  padding: 15px 20px; 
  border-radius: 16px;
  position: relative;
}
.el-rank-items .el-rank-item.full {
  display: block;
}
.el-rank-items .el-cont {
  margin-bottom: 20px;
}
.el-rank-items .el-cont .graph_list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-rank-items .el-cont .graph_list {
  margin-top: 16px;
}
.el-rank-items .el-cont .graphs {
  margin: 0 4px;
  position: relative;
  height: 30px;
  background-color: #fff;
  width: 270px;
  box-sizing: border-box;
  border: 1px solid #E9E8EE;
  border-radius: 16px;
  overflow: hidden;
}
.el-rank-items .el-cont .graphs .bar {
  display: inline-block;
  position: relative;
  height: 30px;
  line-height: 26px;
  text-align: center;
  font-weight: 400;
  font-size: 1.2rem;
  overflow: hidden;
}
.el-rank-items .el-cont .graphs .bar.gray {
  color: #666;
}
.el-rank-items .el-cont .graphs .bar.pink {
  background-color: #ED407F;
  color: #fff;
}
.el-rank-items .el-cont .graphs .bar.sky {
  background-color: #44A0F4;
  color: #fff;
}
.el-rank-items .el-cont .graphs .bar.bdrleft {
  border-radius: 16px 0 0 16px;
}
.el-rank-items .el-cont .graphs .bar.bdrright {
  border-radius: 0 16px 16px 0;
}
.el-rank-items .el-cont .graphs .bar.fl-left {
  float: left;
}
.el-rank-items .el-cont .graphs .bar.fl-right {
  float: right;
}
.el-rank-items .el-cont .graphs .block {
  display: block;
}
.el-rank-items .el-cont .graphs .text {
  position: absolute;
  top: 7px;
  z-index: 101;
}
.el-rank-items .el-cont .graphs .text.left {
  left: 12px;
}
.el-rank-items .el-cont .graphs .text.right {
  right: 12px;
}
.el-rank-items .el-cont .graphs .number {
  text-align: center;
  font-weight: 400;
  font-size: 1rem;
}
.el-rank-items .el-cont .graphs .number.color_w {
  color: #fff;
}
.el-rank-items .el-cont .graphs .number.color_g {
  color: #666;
}

.chart_wrap {
  position: absolute;
  z-index: 1;
}
.chart_wrap .chart {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transition: 0.3s;
}
.chart_wrap .chart .center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  background: #fff;
}

.status_ul {
  font-weight: 400;
  font-size: 1.2rem;
  color: #333;
}
.status_ul strong {
  font-weight: 700;
}
.status_ul li > * {
  display: inline-block;
  margin-right: 2px;
}
.status_ul li + li {
  margin-top: 6px;
}
.status_ul .shape {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.status_ul .shape.pink {
  background: #ED407F;
}
.status_ul .shape.dk-pink {
  background: #cf2a66;
}
.status_ul .shape.sky {
  background-color: #44A0F4;
}
.status_ul .shape.dk-sky {
  background-color: #2881d3
}
.status_ul .shape.green {
  background-color: #23C58D;
}

.hp_border {
  border-width: 1px;
  border-style: solid;
  border-color: #e9e8ee;
  border-radius: 10px;
}

.hp_shadow {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
}

.hp_box {
  border-width: 1px;
  border-style: solid;
  border-color: #dbdbdb;
  border-radius: 10px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.17);
}
.hp_box.fill {
  border-width: 1px;
  border-style: solid;
  border-color: #5a27bf;
  border-radius: 10px;
}
.hp_box.outline {
  border: 1px solid #a786e9;
}
.hp_box.analysis {
  padding: 10px 12px;
}

.un_hfull {
  display: flex;
  flex-direction: column;
}
.un_hfull .bl_side-login {
  flex-grow: 1;
}

.bl_title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.bl_register .select_wrap .select {
  height: 36px;
}
.bl_register .bl_register-tit {
  text-align: center;
}
.bl_register .bl_register-tit strong {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #ED407F;
  }
.bl_register .bl_register-tit .time_result {
  margin: 16px 0; 
  display: flex;
  align-items: center;
  justify-content: center;

}
.bl_register .bl_register-tit .time_result p {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  color: #333;
  letter-spacing: -0.05rem;
}
    .bl_register .bl_register-tit .time_result p .ii,
    .bl_register .bl_register-tit .time_result p .ss {
        display: inline-block;
        color: #fff;
        background: #ED407F;
        letter-spacing: -0.05rem;
        font-weight: 600;
        padding: 3px 4px;
        border-radius: 3px;
    }
    .bl_register .bl_register-tit .time_result img {
        width: 20px;
        margin-top: 2px;
        margin-right: 2px;
    }
    .bl_register .bl_register-tit .time_result p .black {
        color: #333;
        letter-spacing: 0.01rem;
        font-weight: 600;
    }
.bl_register .bl_register-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.bl_register .bl_register-list:hover {
  background: #F5F5F5;
  border-radius: 8px;
}
.bl_register .bl_register-list p {
  font-weight: 500;
  font-size: 1.3rem;
  color: #333;
}
.bl_register .bl_register-list .circle-wrap span {
  display: inline-block;
  font-size: 1.3rem;
}
.bl_register .bl_register-list .circle-wrap span + span {
  margin-left: 4px;
}
.bl_register .bl_register-list .circle-wrap .circle.bigs {
  width: 35px;
  height: 35px;
  line-height: 34px;
}
.bl_register .el_btn.fill {
  font-weight: 400;
}

.gm_pick_box {
  position: relative;
  height: 310px;
  padding: 8px 16px;
}

.gm_time_over {
  position: absolute;
  width: 315px;
  height: 193px;
  top: 100px;
  left: 14px;
}

.gm_inpick {
  text-align: center;
  position: absolute;
  width: 315px;
  height: 193px;
  top: 100px;
  left: 14px;
}

.gm_inpick .g_txt p {
  margin: 19px 0;
  font-size: 1.3rem;
}
.gm_inpick .g_txt strong {
  color: #5a27bf;
  font-weight: 600;
  font-size: 15px;
}
.gm_inpick .g_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin: 0 35px;
  padding: 20px 0;
  border: 2px solid #d1d1d1;
  border-radius: 15px;
  background: #fff;
}

.box-sty {
  border: 0;
  background: #F5F5F5;
  border-radius: 8px;
}
.box-sty p {
  font-size: 1.2rem;
  font-weight: 400;
}
.box-sty .img {
  display: inline-block;
}

.box_form {
  border-width: 1px;
  border-style: solid;
  border-color: #e9e8ee;
  border-radius: 16px;
  padding: 8px;
}

.hp_banner .hp_banner-inner {
  background: #E9E8EE;
  border-radius: 8px;
  text-align: center;
}
.main-top {
    position: relative
}

.side_banner {
    position: absolute;
    right: -103px;
    top: 0;
    width: 160px;
    height: 600px
}

.side_banner img {
    border-radius: 8px
}

.side_banner2 {
    position: absolute;
    right: -103px;
    top: 614px;
    width: 160px;
    height: 200px
}

.side_banner2 img {
    border-radius: 8px
}

.banner_resize {
    width: 160px;
    height: 200px
}

.sub_title {
  font-weight: 700;
  font-size: 1.3rem;
  margin: 9px 0;
  text-align: center;
}

.sub_cont {
  margin-top: 12px;
}
.sub_cont .subject {
  font-weight: 500;
  font-size: 1.2rem;
  color: #333;
}
.sub_cont .numbering {
  color: #5a27bf;
  font-weight: 500;
  font-size: 1.3rem;
  display: inline-block;
  margin-right: 10px;
  line-height: 1.5;
}
.sub_cont .board_list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 5px;
}
.sub_cont .board_list .item:hover {
  background: #F1F1F1;
  border-radius: 5px;
  transition: all ease 0.2s;
}
.sub_cont .board_list .item .tit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub_cont .board_list .item .tit .subject {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub_cont .board_list .item .tit .subject.photo-sub {
  width: 130px;
}
.sub_cont .list.board_list .item {
  padding: 3px 0;
}
.sub_cont .list.board_list .item .tit {
    white-space: inherit
}
.sub_cont .board_img .item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub_cont .board_img .item + .item {
  margin-top: 8px;
}
.sub_cont .board_img .item .img-wrap img {
  overflow: hidden;
  border-radius: 4px;
}
.sub_cont .board_list .item .img-wrap img {
    width: 85px;
    height: 85px;
    border-radius: 8px;
    border: solid rgba(0, 0, 0, 0.06);
}
.txt-small {
    font-weight: 400;
    font-size: 1.2rem;
}
.hp_box-sec .flex {
  gap: 8px;
}
.hp_box-sec .select select {
  width: 160px;
}
.hp_box-sec .box-wrap {
  padding: 11px 12px;
  border: 1px solid #E9E8EE;
  gap: 16px;
}
.hp_box-sec .box-wrap p {
  font-weight: 400;
  font-size: 1.2rem;
  color: #333;
}
.hp_box-sec .box-wrap p span {
  font-weight: 700;
}
.hp_box-sec .box-wrap .violet-color {
  color: #5A27BF;
}

.depth2_item {
    display: none;
    position: absolute;
    top: 94%;
    margin-left: -30px;
    width: 150px;
    padding: 10px 0;
    z-index: 100;
}

.depth2 {
    top: 100%;
    width: 150px;
    padding: 10px 0;
    z-index: 100;
    background-color: #fff;
    color: #333;
    font-weight: 500;
    font-size: 13px;
    -webkit-box-shadow: 0px 10px 30px rgba(132, 101, 193, 0.1);
    box-shadow: 0px 10px 30px rgba(132, 101, 193, 0.1);
    border-radius: 8px;
    border: 1px solid #5a27bf;
}
.depth2 > li {
  position: relative;
  padding: 0 8px;
}
.depth2 > li:hover > a {
  color: #fff;
  background: #996aff;
  border-radius: 8px;
}
.depth2 > li.active .depth3 {
  display: block;
}
.depth2 > li a {
  display: block;
  padding: 10px 8px;
}

.depth3_item {
    display: none;
    position: absolute;
    top: -21px;
    left: 144px;
    width: 155px;
    padding: 10px 0;
    z-index: 100;
}

.depth3 {
    margin-left: 10px;
    top: -11px;
    left: 138px;
    width: 159px;
    padding: 10px 0;
    z-index: 100;
    background-color: #fff;
    color: #333;
    font-weight: 500;
    font-size: 13px;
    -webkit-box-shadow: 0px 10px 30px rgba(132, 101, 193, 0.1);
    box-shadow: 0px 10px 30px rgba(132, 101, 193, 0.1);
    border-radius: 8px;
    border: 1px solid #5a27bf;
}
.depth3 > li {
  position: relative;
  padding: 0 8px;
}
.depth3 > li:hover > a {
  color: #fff;
  background: #996aff;
  border-radius: 8px;
}

.list-style:before {
    content: '';
    display:block;
    width: 4px;
    height: 4px;
    background: #777;
}

.badge {
  display: inline-block;
  padding: 2.5px 5px 3.5px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  font-size: 1.2rem;
}
.badge.def {
  background: #FFFFFF;
  border: 1px solid #D4D3D9;
  color: #333;
}
.badge.pup {
  background: #5a27bf;
  border: 1px solid #5a27bf;
  color: #fff;
}
.badge.line-green {
  border: 1px solid #23C58D;
  color: #23C58D;
}
.badge.pink {
  background: #ED407F;
  border: 1px solid #ED407F;
  color: #fff;
}
.badge.line-pink {
  border: 1px solid #ED407F;
  color: #ED407F;
}
.badge.lt-pink {
  background: #FBECF1;
  border: 1px solid #ED407F;
  color: #ED407F;
}
.badge.sky {
  background: #44A0F4;
  border: 1px solid #44A0F4;
  color: #fff;
}
.badge.line-sky {
  border: 1px solid #44A0F4;
  color: #44A0F4;
}
.badge.lt-sky {
  background: #E9F5FF;
  border: 1px solid #44A0F4;
  color: #44A0F4;
}
.badge.lilac {
  background-color: #e9dfff;
  color: #5A27BF;
}

.label {
  display: inline-block;
  padding: 7px 8px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  vertical-align: middle;
}
.label.def {
  background-color: #F9F6FF;
  color: #5A27BF;
}
.label.pink {
  border: 1px solid #ED407F;
  color: #ED407F;
}
.label.sky {
  border: 1px solid #44A0F4;
  color: #44A0F4;
}
.label.gray {
  border: 1px solid #D4D3D9;
  color: #333;
}
.label.gray-bg {
  background: #D4D3D9;
  color: #333;
}
.label.pup{
  border: 1px solid #5a27bf;
  color: #5a27bf;
}
.label.sky-bg {
  background-color: #44A0F4;
  border: 1px solid #44A0F4;
  color: #fff;
}
.label.pink-bg {
  background-color: #ED407F;
  border: 1px solid #ED407F;
  color: #fff;
}
.label.pup-bg {
  border: 1px solid #5a27bf;
  background-color: #5a27bf;
  color: #fff;
}

.new {
  background: url(/Assets/img/new.png) no-repeat;  
  width: 16px;
  height: 16px;
  background-size: 16px;
  text-indent: -9999px;
  display: inline-block;
  line-height: 16px;
}

.circle {
  display: inline-block;
  color: #fff;
  border-radius: 50%;
  text-align: center;
}
.circle.xsmall {
  width: 16px;
  height: 16px;
  line-height: 13px;
  font-weight: 600;
  font-size: 1.2rem;
}
.circle.small {
  width: 18px;
  height: 18px;
  font-size: 1.2rem;
  line-height: 17px;
}
.circle.medium {
  width: 23px;
  height: 23px;
  line-height: 22px;
  font-size: 1.2rem;
  font-weight: 400;
}
.circle.xbig {
  width: 23px;
  height: 23px;
  line-height: 22px;
  font-size: 1.2rem;
  font-weight: 600;
}
.circle.bigs {
  width: 28px;
  height: 28px;
  line-height: 27px;
  font-weight: 500;
  font-size: 1.2rem;
}
.circle.pup {
  background-color: #5a27bf;
}
.circle.sky {
  background-color: #44A0F4;
}
.circle.pink {
  background-color: #ED407F;
}
.circle.gray {
  border: 1px solid #D4D3D9;
  color: #180049;
  line-height: 22px;
}
.circle.graybg {
  background: #88858E;
  color: #fff;
}
.circle.sha {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 0px 2px rgba(0, 0, 0, 0.1);
  color: #333;
}
.circle.green {
  background-color: #23C58D;
}
.circle.yellow {
  background-color: #EED700;
  color: #fff;
}
.circle.graybold {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
  font-weight: 600;
}
.circle.green {
  color: #23C58D;
  border: 1px solid #23C58D;
  background: #edffe9 !important;
}
.circle.red {
  color: #ED407F;
  border: 1px solid #ED407F !important;
  background: #fbecf1;
}
.circle.blue {
  color: #44A0F4;
  border: 1px solid #44A0F4 !important;
  background: #e9f5ff;
}
.circle.org {
  color: #FF9A02;
  background: #FFEACA;
  border: 1px solid #FF9A02
}
.circle.darkgray {
  color: #fff;
  background-color: #88858E;
}
.circle.high {
  background-color: #333;
}
.circle.mid {
  background-color: #A1013B;
}
.circle.middle {
  background-color: #ED407F;
}
.circle.low {
  background-color: #FFD2E2;
  color: #C0255D;
}

.square {
  display: inline-block;
  border-style: solid;
  border-width: 1px;
  font-weight: 700;
  font-size: 1rem;
  padding: 5px;
  text-align: center;
}
.square.pink {
  border-color: #ED407F;
  color: #ED407F;
}
.square.sky {
  border-color: #44A0F4;
  color: #44A0F4;
}

.winner {
  color: #ED407F;
}

.loser {
  color: #44A0F4;
}

.select_wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.select_wrap .select {
  flex: 1;
}

.ranking .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px;
}
.ranking.c_list .item {
    cursor: pointer
}
.ranking .item:hover {
  background: #f1f1f1;
  border-radius: 5px;
  transition: all ease 0.2s;
}
.ranking .item .determine {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ranking .item .determine .img-wrap {
  min-width: 36px;
  text-align: center;
}
.ranking .item .determine .img-wrap img {
  max-width: 36px;
}
.ranking .item .determine .img-wrap .circle {
  margin: 0 auto;
}
.ranking .item .determine .name-wrap {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer
}
.ranking .item .determine .name-wrap:hover {
  color: #0a58ca
}
.ranking .item .determine .name-wrap::before {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  left: -8px;
  width: 1px;
  height: 16px;
  background: #E9E8EE;
}
.ranking .item .determine .name-wrap .img {
  max-width: 35px;
}
.ranking .item .determine .name-wrap .user-nickname {
  font-weight: 400;
  font-size: 1.3rem;
  cursor: pointer;
}
.ranking .item .info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ranking .item .info p {
  font-weight: 500;
  font-size: 1.3rem;
  color: #333;
}
.ranking .item .info p .probable {
  font-weight: 400;
}
.ranking .item .info p span {
  margin: 0 2px;
}
.ranking .item .info .etp-txt {
  font-size: 1.3rem;
  font-weight: 500;
}
.ranking .item .info .etp-txt strong {
  font-weight: 700;
}

.level-txt {
  position: relative;
  font-size: 12px;
  font-weight: 400;
  border: 1px solid #d8c6ff;
  padding: 2px;
  border-radius: 0px 2px 2px 0px;
  color: #5a27bf;
  margin-left: 16px;
  border-left: 0;
}
.level-txt strong {
  font-weight: 700;
}
.level-txt .triangle {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 2px;
  left: -6px;
}
.level-txt .triangle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #d8c6ff;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
}
.level-txt.right {
  border: 1px solid #d8c6ff;
  border-right: 0;
  margin-right: 16px;
  margin-left: 0;
}
.level-txt.right .triangle {
  left: auto;
  right: -5px;
  top: 2px;
}
.level-txt.right .triangle::before {
  transform: rotate(135deg);
}
.level-num {
    font-size: 12px;
}
.tab .tab-menu {
  display: flex;
  margin: 0 1px;
}
.tab .tab-menu li {
  width: 100%;
  margin-left: -1px;
}
.tab .tab-menu li.active a{
    color: #fff;
    background-color: #5a27bf;
}
.tab .tab-menu li.active:hover > a {
    border: 1px solid #5a27bf;
}
.tab .tab-menu li:not(.active):hover > a {
    border: 2px solid #7e4fe5;
    box-shadow: 0px 2px 8px #0000ff40
}
.tab .tab-menu li:first-child a {
    border-radius: 8px 0 0 8px;
    overflow: hidden;
}
.tab .tab-menu li:last-child a {
  border-radius: 0 8px 8px 0;
  overflow: hidden;
}
.tab .tab-menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 1.5rem;
  color: #5a27bf;
  font-weight: 700;
  padding: 13px;
  border: 1px solid #5a27bf;
}
.tab.type2.w-87 .tab-menu li a {
  min-width: 87px;
}
.tab.type2 .tab-menu li {
  width: auto;
  margin-left: 0;
  flex: 1;
  position:relative;
}
.tab.type2 .tab-menu li:after {
    content:'';
    position: absolute;
    width: 1px;
    height:14px;
    background: #dbdbdb;
    top:9px;
    right: 0px;
}
.tab.type2 .tab-menu li:last-child:after{
    display: none;
}
.tab.type2 .tab-menu > li:hover,
.tab.type2 .tab-menu li.active > a {
  color: #5A27BF;
  background-color: #F4EFFF;
  border-radius: 5px;
  font-weight: 600
}
.tab.type2 .tab-menu li a {
  font-weight: 500;
  font-size: 1.4rem;
  color: #333;
  border: 0;
  padding: 7px;
  height: 32px;
  min-width: 100px;
}
.tab.type2.full {
  width: 100% !important;
}
.tab.type3 {
  padding: 12px 16px;
  background-color: #fff;
}
.tab.type3 .tab-menu {
  width: auto;
  margin-left: 0;
  flex: 1;
}
.tab.type3 .tab-menu li {
  margin: 0 2px;
}
.tab.type3 .tab-menu li.active a {
  background: #f4efff;
  color : #5a27bf;
  font-weight: 600;
  border-radius: 4px;
  box-sizing: border-box;
}
.tab.type3 .tab-menu li a {
  font-weight: 400;
  font-size: 1.3rem;
  color: #333;
  border: 0;
  padding: 7px;
  height: 32px;
  line-height: 32px;
  padding: 8px 12px;
  gap: 12px;
}

.board-list {
  font-size: 1.3rem;
  font-weight: 400;
}
.board-list .dt_list .tlist:hover,
.board-list .dt_list_pattern tr:hover,
.board-list .dt_list .tlist:hover td{
    background: #F8F8F8;
}
.board-list .dt_null:hover {
    background: none;
}
.board-list.vertical tr td {
  box-shadow: none;
  border-top: 1px solid #F5F5F5;
}
.board-list.vertical tr:last-child td {
  border-bottom: 1px solid #F5F5F5;
}
.board-list.vertical th {
  background: #F5F5F5;
  border-color: #EEE;
  color: #333;
  text-align: left;
  padding: 13px 16px;
}
.board-list.vertical td {
  padding: 14px 8px;
}
.board-list.vertical td p {
  font-weight: 700;
}
.board-list table thead {
  border-right: 1px solid #e9dfff;
  border-left: 1px solid #e9dfff;
}
.board-list tr.date td {
  color: #333;
  font-weight: 700;
  font-size: 1.2rem;
}
.board-list th {
  padding: 15px 6px;
  background-color: #F9F6FF;
  color: #270075;
  border-bottom: 1px solid #e9dfff;
  border-top: 1px solid #e9dfff;
    border-left: 1px solid #e9dfff;
  text-align: center;
  vertical-align: middle;
}
.board-list td {
  padding: 0 18px;
  color: #333;
  vertical-align: middle;
  box-shadow: inset 0px -1px 0px #E9E8EE;
  text-align: center;
  height: 54px;
}

.board-list .dt_null img {
  margin: 20px;
  width: 50px;
 }
.board-list .dt_null p {
  line-height: 1.3;
  margin-bottom: 20px;
 }
.board-list td.writer {
  text-align: left;
  padding: 0 8px;
}
.board-list td.writer > * {
  vertical-align: middle;
  margin-left: 4px;
}
.board-list td.writer .img {
  vertical-align: middle;
}
.board-list td.tit {
  text-align: left;
}
.board-list td.tit > * {
  margin-right: 8px;
}
.board-list td.tit .comment {
  color: #5a27bf;
  font-weight: 500;
  font-size: 1.2rem;
}
.board-list td.color-pick {
  color: #ED407F;
}
.board-list td.color-pup {
  color: #5A27BF;
}
.board-list td.number {
  color: #5A27BF;
}
.board-list td.no-result {
  color: #333;
  font-weight: 400;
  font-size: 1.2rem;
  padding: 165px 0 130px;
  background: url("../../assets/img/icon-smile-big.png") center 110px no-repeat;
}
.board-list td.league-name {
  color: #fff;
  font-weight: 500;
  font-size: 1.3rem;
}
.board-list .rank-img {
  max-width: 35px;
}
.board-list strong {
  font-weight: 700;
}
.board-list.analysis td {
  height: auto;
  padding: 0;
  line-height: 1.5;
  color: #666;
}
.board-list.analysis .txt-num {
  margin-top: 8px;
}
.board-list.analysis .txt-num .color-black {
  font-weight: 500;
}
.board-list .dd_title {
  padding: 15px 7px;
  background-color: #F9F6FF;
  color: #270075;
  border-bottom: 1px solid #e9dfff;
  border-top: 1px solid #e9dfff;
  text-align: center;
  vertical-align: middle;
}
.board-list .dd_content {
  padding: 10px 0;
}
.board-list .dd_content + .dd_content {
  border-top: 1px solid #eee;
}
.board-list .table-wrap {
  display: table;
  width: 100%;
}
.board-list .table-wrap li {
  border-top: 0;
  display: table-cell;
}
.board-list .table-wrap li + li {
  border-left: 1px solid #eee;
}

.align {
  vertical-align: middle;
  display: inline-block;
}
.align img {
  vertical-align: text-top;
}

.pattern .pat-tit {
  line-height: 40px;
  padding: 0;
  background-color: #F9F6FF;
  color: #270075;
  font-weight: 400;
  border-bottom: 1px solid #e9dfff;
  border-top: 1px solid #e9dfff;
}
.pattern .number {
  background: #F5F5F5;
  color: #666;
  font-size: 12px;
  font-weight: 400;
}
.pattern td .pat-tit {
  border-right: 1px solid #e9dfff;
}
.pattern td:first-child .pat-tit{
  border-left: 1px solid #e9dfff;
}
.pattern li {
  height: 40px;
  padding: 10px 0;
}
.pattern li .circle {
  display: inline-block;
  position: relative
}
.pattern .search td {
  width: 5%;
  border-left: 1px solid #f3f3f3;
}
.pattern .search td:last-child {
  border-right: 1px solid #f3f3f3;
}

.tlist p + .btn {
  margin-top: 8px;
}

.color-red {
  color: #ff2323 !important;
}

.color-blue {
    color: #1547ac !important;
}

.color-org {
  color: #FF9A02 !important;
}

.color-pink {
  color: #ED407F !important;
}

.color-green {
  color: #23C58D !important;
}

.color-sky {
  color: #44A0F4 !important;
}

.color-black {
  color: #333;
}

.color-pup {
  color: #5A27BF;
}

.color-gray {
  color: #555
}
.bg-lilac {
    background: #FBFAFF;
    box-shadow: inset 0px -1px 0px #F5F5F5;
}

.top-txt {
  margin-bottom: 10px;
}
.top-txt .title {
  font-weight: 700;
  font-size: 1.4rem;
  color: #333;
}
.top-txt .title.big {
  font-size: 2rem;
}

.cursor-pnt {
  cursor: pointer;
}

.str {
  font-weight: 700;
}

.box-area p {
  font-weight: 400;
  font-size: 1.2rem;
  color: #333;
}
.box-area p span {
  font-weight: 500;
  color: #5A27BF;
}
.box-area .flex {
  gap: 8px;
}
.box-area .flex .person span {
  font-weight: 700;
}

.btn {
  display: inline-block;
  height: 32px;
  border-radius: 4px;
  border-width: 1px;
  vertical-align: middle;
  text-align: center;
  font-size: 1.3rem;
  box-sizing: border-box;
  line-height: 32px;
  padding: 0 0.75rem;
}
.btn.xxsmall {
  height: 26px;
  line-height: 22px;
}
.btn.xsmall {
  height: 28px;
  line-height: 26px;
}
.btn.smallhalf {
  height: 32px;
  line-height: 32px;
}
.btn.small {
  height: 36px;
  line-height: 33px;
}
.btn.medium {
  height: 40px;
  line-height: 36px;
}
.btn.xmedium {
  height: 44px;
  line-height: 40px;
}
.btn.big {
  height: 48px;
  line-height: 46px;
}
.btn.outline {
  border-style: solid;
  border-color: #A786E9;
  color: #5A27BF;
  background-color: #fff;
}
.btn.outline:hover {
  background: #5a27bf;
  color: #fff;
  border : 1px solid #5a27bf
}
.btn.bg {
  color: #fff;
  background-color: #5a27bf;
}
.btn.def {
  border: 1px solid #d1d1d1;
  color: #666;
  background-color: #fff;
}
.btn.def:hover {
    border: 1px solid #5a27bf;
    color: #5a27bf;
}
.btn.pup {
  border-color: #a786e9;
  color: #5A27BF;
}
.btn.pup-bg {
  background: #5a27bf;
  color: #fff
}
.btn.pup:hover {
  background: #5a27bf;
  color: #fff;
}
.btn.pink {
  border:1px solid #ED407F;
  color: #ED407F;
}
.btn.pink-bg {
  background:#ED407F;
  color: #FFF;
}
.btn.pink-bg:hover {
  background:#fd5491;
}
.btn.pink:hover {
  background: #ED407F;
  color: #FFF;
}
.btn.sky-bg {
  background:#44A0F4;
  color: #FFF;
}
.btn.sky-bg:hover {
  background: #4daaff;
}
.btn.gray {
  color: #B7B7B7;
  background: #F5F5F5;
  border: 1px solid #F5F5F5;
}
.btn.outline.gray {
  color: #666;
  border: 1px solid #d5d5d5;
  background: #fff
}
.btn.outline.gray:hover {
    border: 1px solid #5a27bf;
    color: #5a27bf;
}
.btn.more {
  border: 1px solid #E9E8EE;
  border-radius: 8px;
  background-color: #fff;
  height: 40px;
}
    .btn.more:hover {
        border: 1px solid #5a27bf;
        color: #5a27bf;
    }
        .btn.more:hover span {          
            background: url(../../Assets/img/icon-more-pup.png) left center no-repeat;
        }
.btn.graybg {
  color: #333;
  background: #e7e7e7;
}
.btn.dk-graybg{
    color: #fff;
    background: #88858E
}
.btn.dk-graybg:hover {
    background: #686868;
}
.btn.graybg:hover {
  background: #dfdfdf
}
.btn.bdr {
  border-radius: 100px;
}
.btn.ico-reset {
  background: url("../../assets/img/icon-reset.png") no-repeat left 10px center;
  padding-left: 30px;
}
.btn.icon-pres {
  background: url("../../assets/img/icon-present.png") no-repeat left 10px center;
  padding-left: 30px;
}
.btn.icon-comd {
  background: url("../../assets/img/icon-like-b.png") no-repeat left 10px center;
  padding-left: 30px;
}

.btn-ico {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border: none;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
}
.btn-ico.reset {
  width: 32px;
  height: 32px;
  background-image: url("../../assets/img/icon-reset.png");
}
.btn-ico.reset.b-color {
  background-image: url("../../assets/img/reset-icon.png");
  border: 1px solid #E9E8EE;
  border-radius: 4px;
  width: 28px;
  height: 28px;
}
.btn-ico.reset.b-color:hover {
  background-image: url("../../assets/img/icon-reset-pur.png");
  border: 1px solid #5a27bf;
  width: 28px;
  height: 28px;
}
.btn-ico.view {
  width: 32px;
  height: 32px;
  background-image: url("../../assets/img/icon-view.png");
}
.btn-ico.set {
  width: 32px;
  height: 32px;
  background-image: url("../../assets/img/icon-setting.png");
}
.btn-ico.data {
  width: 12px;
  height: 12px;
  background-image: url("../../assets/img/icon-data.png");
}
.btn-ico.reset-pup {
  border: 1px solid #a786e9;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  background-image: url("../../assets/img/icon-reset-pur.png");
  background-size: 60%;
}
.btn-ico.back {
  background-image: url("../../assets/img/icon-back.png");
  width: 36px;
  height: 36px;
}
.btn-ico.back.def {
  border: 1px solid #E9E8EE;
  border-radius: 4px;
}

.ico-arrow span {
  padding-right: 10px;
  background: url("../../assets/img/icon-arrow-right.png") right center no-repeat;
}

.ico-more span {
  padding-left: 20px;
  background: url("../../assets/img/icon-more.png") left center no-repeat;
}

.ico-right span {
  padding-right: 20px;
  background: url("../../assets/img/rigth-arrrow-icon.png") right center no-repeat;
}

.ico-tooltip {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../../assets/img/ico-tooltip.png") no-repeat center;
}

.icon-tooltip {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../../assets/img/icon-tooltip.png") no-repeat center;
}

.btn-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.search_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  gap: 8px;
}

.search_box .select select {
  width: 120px;
}

.search_box .keyword {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search_box .keyword .btn {
  width: 55px;
  font-weight: 700;
  font-size: 1.3rem;
}

.box-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  border: 1px solid #F5F5F5;
  border-radius: 8px;
}

.box-wrap .btn-wrap-box .btn {
  margin: 0;
  margin-left: 8px;
}

.box-wrap .btn-wrap-box.flex {
  gap: 8px;
  margin-right: 20px;
}

.box-wrap .btn-wrap-box.mr-no {
  margin-right: 12px;
  height: 54px;
  box-sizing: border-box;
}

.box-wrap .btn-wrap-box.mr-no .btn {
  margin: 12px 0;
}

.box-wrap .btn-wrap-box.mr-no .datepicker {
  width: 113px;
  cursor: pointer
}

.box-wrap.cont-center {
  justify-content: center;
}

.box-wrap .radio-list .radio + .radio {
  margin-left: 25px;
}

.search-wrap {
  display: flex;
  align-items: center;
}
.search-wrap .datepick {
  display: flex;
  align-items: center;
}
.search-wrap .datepick .datepicker {
  width: 113px;
  cursor: pointer;
}
.search-wrap .datepick .dash {
  display: inline-block;
  padding: 0 10px;
}

.bg-area {
  background: #F5F5F5;
  border-radius: 0px 0px 5px 5px;
}

.bg-area .bbs-category ul li {
  padding-left: 32px;
}

.bg-area .bbs-category ul li:first-child {
  padding-left: 20px;
}

.bg-area .btn-wrap {
  padding-right: 8px;
}

.bg-area .btn-ico {
  background-color: transparent;
}

.person {
  font-weight: 400;
  font-size: 1.2rem;
  color: #333;
}
.person span {
  font-weight: 700;
  color: #5A27BF;
}

.row-cont {
  padding-top: 24px;
}
.row-cont .title {
  font-size: 2.4rem;
  font-weight: 700;
}
.row-cont .cont {
  min-height: 364px;
  padding: 15px;
  font-size: 1.2rem;
  color: #B7B7B7;
}
.row-cont .btn-area {
  margin-top: 24px;
}
.row-cont .btn-area .btn {
  min-width: 120px;
}

.sns-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  gap: 18px;
}
.sns-area li a {
  text-indent: -9999px;
  width: 32px;
  height: 32px;
  display: block;
  background-repeat: no-repeat;
}
.sns-area li a.naver {
  background-image: url("../../assets/img/sns-naver.png");
}
.sns-area li a.facebook {
  background-image: url("../../assets/img/sns-facebook.png");
}
.sns-area li a.tweeter {
  background-image: url("../../assets/img/sns-tweeter.png");
}
.sns-area li a.google {
  background-image: url("../../assets/img/sns-google.png");
}
.sns-area li a.tstory {
  background-image: url("../../assets/img/sns-tstory.png");
}
.sns-area li a.pinterest {
  background-image: url("../../assets/img/sns-pinterest.png");
}
.sns-area li a.share {
  background-image: url("../../assets/img/sns-share.png");
}
.sns-area li a.kakao {
  background-image: url("../../assets/img/sns-kakao.png");
}

.info-box {
  padding: 24px;
  background: #F5F5F5;
  border-radius: 8px;
}
.info-box.small {
  padding: 10px 12px;
  margin-top: 24px;
}
.info-box.org {
  background-color: #FFF4F0;
}
.info-box.org p {
  font-weight: 600;
  font-size: 12px;
  color: #FF3535;
  text-align: left;
  padding-left: 20px;
  background: url("../../assets/img/icon-info-org.png") no-repeat left center;
  background-size: 16px 16px;
}
.info-box strong {
  display: inline-block;
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 25px;
  background: url("../../assets/img/icon-info.png") left top 1px no-repeat;
  color: #5A27BF;
}
.info-box ul li {
  position: relative;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 22px;
  padding-left: 22px;
  letter-spacing: -0.02rem;
}
.info-box ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("../../assets/img/icon-info-list.png") center no-repeat;
}
.info-box ul li span {
  color: #5A27BF;
  font-weight: 700;
}
.info-box ul li span.color-black {
  color: #333;
}

.color-pick {
  color: #ED407F;
}

.name-wrap{
  display: flex;
  align-items: center;
  justify-content: left;
}
.user_nick {
  display: flex;
  align-items: center;
  justify-content: left;
  font-weight: 400;
  font-size: 1.3rem;
  justify-content: center
}
.user_nick span {
  text-align: left;
  line-height: 1.2;
}
.user_nick img {
  margin-right: 3px;
}
.name-wrap img {
  margin-right: 4px;
}
.name-wrap .img {
  max-width: 22px;
}
.name-wrap .user-nickname,
.name-wrap .user_nickname {
    font-weight: 400;
    font-size: 1.3rem;
}

.graph {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 287px;
}

.charts {
  width: 100%;
  height: 8px;
  background-color: #E9E8EE;
  font-weight: 400;
  font-size: 1.2rem;
}
.charts.bdr {
  border-radius: 100px;
  overflow: hidden;
}
.charts .charts-chart {
  height: 8px;
  padding: 0;
  text-align: center;
  background-color: #ED407F;
  color: #111;
}
.charts .charts-chart.primary {
  background-color: #5A27BF;
}

.box-area {
  border-radius: 4px;
  padding: 11px;
}
.box-area p {
  font-size: 1.2rem;
  font-weight: 700;
}
.box-area.pup {
  background: #F9F6FF;
  border: 1px solid #F4EFFF;
}
.box-area.pup p {
  color: #5A27BF;
}
.box-area.def {
  background: #F5F5F5;
  border: 1px solid #F5F5F5;
}
.box-area.def p {
  color: #333;
}

.list-type ul {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.list-type ul li {
  border: 1px solid #E9E8EE;
  border-radius: 8px;
  padding: 16px;
}
.list-type ul li:hover, 
.list-type ul li.selected {
  border: 1px solid #A786E9;
}
.list-type.item li .box-area {
  border-radius: 4px;
  padding: 11px;
}
.list-type.item li .box-area p {
  text-align: center;
  font-size: 1.2rem;
}
.list-type.item li .box-area.amount {
  background: #F9F6FF;
  border: 1px solid #F4EFFF;
}
.list-type.item li .box-area.amount p {
  color: #5A27BF;
  font-weight: 700;
}
.list-type.item li .box-area.amo-no {
  background: #F5F5F5;
  border: 1px solid #F0F0F4;
}
.list-type.item li .box-area.amo-no p {
  color: #B7B7B7;
  font-weight: 400;
}
.list-type.item li .btn-wrap-box {
  text-align: center;
  margin-top: 16px;
}
.list-type.item li .btn-wrap-box .btn {
  padding: 0 19px;
}
.list-type.item li .btn-wrap-box .btn:hover{
  background: #5a27bf;
  color: #fff;
}
.list-type.cash .box-area-wrap {
  padding: 16px;
}
.list-type.cash .box-area-wrap .img-box {
  background-color: #fff;
}
.list-type.item .radio-list .item {
  justify-content: flex-start;
  position: relative;
}
.list-type.item .radio-list .item + .item {
  margin-top: 4px;
}
.list-type.li3 li {
  width: calc(33.333% - 14px);
}
.list-type.li4 li {
  width: calc(25% - 15px);
}
.list-type.li4 .list-item {
  width: 25%;
}

.box-area-wrap {
  text-align: center;
  padding: 16px;
}
.box-area-wrap.bg {
  background: #F5F5F5;
}
.box-area-wrap .img-box {
  padding: 8px;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  background: #F5F5F5;
  border-radius: 8px;
}
.box-area-wrap .txt-box {
  margin-top: 20px;
}
.box-area-wrap .txt-box p {
  color: #333;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6;
}
.box-area-wrap .txt-box p.tit {
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.box-area-wrap .txt-box p.tit strong {
  font-weight: 700;
}
.box-area-wrap .txt-box .box-area-flex {
  margin-top: 20px;
  padding: 10px 12px;
  background-color: #FBFAFF;
  border: 1px solid #F4EFFF;
  border-radius: 8px;
}
.box-area-wrap .txt-box .box-area-flex.bg-write {
  background-color: #fff;
  border: 1px solid #F9F6FF;
  margin-top: 8px;
}
.box-area-wrap .txt-box .box-area-flex.bg-violet {
  background: #F9F6FF;
  border: 1px solid #F4EFFF;
}
.box-area-wrap .txt-box .box-area-flex.bg-gray {
  background: #FFFFFF;
  border: 1px solid #E9E8EE;
}
.box-area-wrap .txt-box .box-area-flex.bg-gray p {
  font-weight: 500;
  color: #333;
}
.box-area-wrap .txt-box .box-area-flex.bg-gray strong {
  color: #B7B7B7;
  font-weight: 400;
  font-size: 1.2rem;
}
.box-area-wrap .txt-box .box-area-flex + .box-area-flex {
  margin-top: 8px;
}
.box-area-wrap .txt-box .box-area-flex p {
  color: #5A27BF;
  font-weight: 400;
  font-size: 1.3rem;
}
.box-area-wrap .txt-box .box-area-flex strong {
  font-weight: 700;
  font-size: 1.3rem;
  color: #ED407F;
}

.box-area-wrap .txt-box p span,
.box-area-wrap .txt-box .sub-tit span {
    color: #ED407F;
    font-weight: 600;
}

.box-area-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.box-flex-start .img-box {
  margin: 0;
  position: relative;
}
.box-flex-start .img-box .badge {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.8rem;
}
.box-flex-start .txt-box {
  margin-top: 0;
  margin-left: 12px;
}
.box-flex-start .txt-box p.tit {
  margin-bottom: 5px;
}
.box-flex-start .txt-box .sub-tit {
  line-height: 14px;
}

.hp_box .tab.type2 {
  width: calc(100% - 400px);
}
.hp_box .tab.type2 .tab-menu li a {
  font-size: 1.3rem;
}
.hp_box .tab.type2 .tab-menu li:hover > a {
    background: #f4efff;
    box-shadow: none;
    border: 0;
    color: #5a27bf;
    font-weight: 600;
    border-radius: 5px;
}
.hp_box .tab.type2.w-87 {
  width: calc(100% - 100px);
}
.hp_box .tab.type2 + .select_wrap {
  width: 192px;
}
.hp_box .tab.type2 + .select_wrap select {
  width: 100%;
}
.hp_box .select_wrap select {
  width: 120px;
}
.hp_box .status_ul {
  display: flex;
  vertical-align: middle;
  margin-top: 12px;
}
.hp_box .status_ul li {
  display: flex;
  align-items: center;
  vertical-align: middle;
}
.hp_box .status_ul li + li {
  margin-left: 16px;
  margin-top: 0;
}
.hp_box .status_ul li .split.color-white {
  color: #fff;
  margin: 0 5px;
}
.hp_box .chart-box {
  position: relative;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 68px;
}
.hp_box.ladder .chart-box{
  margin-top: 30px;
}
.hp_box .chart-box .chart_wrap {
    position: relative;
}
.hp_box .chart-box .status_ul {
  display: block;
  border: 1px solid #E9E8EE;
  border-radius: 15px;
  background-color: #fff;
  padding: 16px 22px;
  margin-top: 0;
  line-height: 1.7;
}
.hp_box .chart-box .status_ul li {
  display: block;
  font-size: 1.2rem;
}
.hp_box .chart-box .status_ul li + li {
  margin-left: 0;
  margin-top: 5px;
}

.form-box .select select {
    width: 120px;
}
.form-box input + input {
  margin-top: 8px;
}
.form-box.error input {
  border-color: #FF3535;
}
.form-box.error input::-moz-placeholder {
  color: #FF3535;
}
.form-box.error input:-ms-input-placeholder {
  color: #FF3535;
}
.form-box.error input::placeholder {
  color: #FF3535;
}
.form-box.flex .select select {
    width: 170px;
    cursor: pointer
}
.form-box.flex + .form-box {
  margin-top: 0;
}

.form-cont {
  display: flex;
  gap: 6px;
}
.form-cont.phone > * {
  flex: 1;
}
.form-cont.phone input {
  margin-top: 0;
}

.tooltip-wrap {
  display: inline-block;
  position: relative;
}
.tooltip-wrap .popover {
  display: none;
  min-width: 150px;
  max-width: 200px;
  padding: 8px 12px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #F4EFFF;
  font-weight: 400;
  font-size: 1.2rem;
  z-index: 100;
  border-radius: 8px;
}
.tooltip-wrap .popover::before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  top: -7px;
  left: calc(50% - 7.5px);
  transform: rotate(135deg);
  background: #fff;
  border: 1px solid #F4EFFF;
  border-right: 0;
  border-top: 0;
  border-radius: 5px;
}
.tooltip-wrap.is-open .popover {
  display: inline-block;
  position: absolute;
  top: 35px;
  left: -65px;
}
.tooltip-wrap p {
  color: #5A27BF;
  font-weight: 400;
}
.tooltip-wrap p span {
  font-weight: 700;
}

.pt_button {
    border: 1px solid #5a27bf;
    color: #5a27bf;
    margin-right: 5px;
}
.radio-list .pt_button:hover,
.radio-list .pt_button.selected {
    background: #5a27bf;
    color: #fff
}
.newCalendar {
    position: relative;
}
.newCalendar.pick {
  height: 68px;
}
.newCalendar .calendarCtrl {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.newCalendar.daily .calendarCtrl,
.newCalendar .calendarCtrl.interval {
  padding: 0;
}
.newCalendar .calendarCtrl b {
  font-weight: 700;
  font-size: 1.7rem;
  color: #333;
  height: 27px;
  line-height: 24px;
  padding: 0 10px;
  vertical-align: middle;
}
.newCalendar .calendarCtrl a {
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%;
}
.newCalendar .calendarCtrl a.toround {
    width: 73px;
    height: 28px;
    line-height: 26px;
    padding: 0px;
}
    .newCalendar .calendarCtrl a.today {
        width: 40px;
    }
.newCalendar .calendarCtrl a.toround.today {
    width: 50px;
}
.newCalendar .calendarCtrl a.prev {
  background-image: url("../img/icon-left-gray.png");
}
.newCalendar .calendarCtrl a.next {
  background-image: url("../img/icon-right-gray.png");
}
.newCalendar .calendarCtrl a.prev:hover {
  background-image: url("../img/icon-left-sky.png");
  background-repeat: no-repeat;
}
.newCalendar .calendarCtrl a.next:hover {
  background-image: url("../img/icon-right-sky.png");
  background-repeat: no-repeat;
}
.newCalendar .calendarCtrl .select.month {
  cursor: pointer;
  padding: 0 44px 0 24px;
  font-weight: 700;
  font-size: 1.7rem;
  color: #333;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
  border: 0;
  background: url("../../assets/img/icon-select-b.png") no-repeat right 28px center;
}
.newCalendar .calendarCtrl .select.month.game-round {   
    height: 28px;
    line-height: 26px; 
    margin: 0 10px;
    padding: 0 25px 0 10px;
    background: url(../../assets/img/icon-select-b.png) no-repeat right 9px center;
}
.newCalendar .calendarCtrl .select.month + .month {
  padding-left: 10px;
}
.newCalendar .calendarCtrl .select.month.birth {
  padding: 0 35px 0 10px;
  background-position: right 20px center;
}
.newCalendar .calendarCtrl .btn {
  margin:0 15px;
}
.newCalendar .calendarCtrl .btn .datepicker {
  margin: -2px 0 0;
}
.newCalendar .calendar-desc {
  position: absolute;
  top: 22px;
  right: 24px;
}
.newCalendar .calendar-desc p {
  font-weight: 400;
  font-size: 12px;
  color: #333;
}
.newCalendar .calendar-desc p em {
  font-weight: 700;
}
.newCalendar .calendar-desc p span {
  color: #5a27bf;
}
.newCalendar .calendar-wrap {
  position: relative;
  text-align: center;
}
.newCalendar .calendar-wrap .date {
  position: relative;
  display: inline-block;
  border-top: 1px solid #F5F5F5;
  border-bottom: 1px solid #F5F5F5;
  width:23px;
}
.newCalendar .calendar-wrap .date.on strong {
  color: #5a27bf;
  background-color: #fff;
}
.newCalendar .calendar-wrap .date strong {
  margin: 0;
  padding: 0;
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #666;
  background: #F5F5F5;
  width: 2.2em;
  height: 2.2em;
  line-height: 2.2em;
  border-left: 1px solid #F5F5F5;
}
.newCalendar .calendar-wrap .date em {
  display: block;
  width: 2.5em;
  height: 2.5em;
  border-left: 1px solid #F5F5F5;
}
.newCalendar .calendar-wrap .date em.checked {
  background: url("../img/icon-check.png") no-repeat center;
}

.ui-datepicker.ui-widget {
    width: 25em;
    font-family: 'Pretendard-Regular';
}
.ui-datepicker-header.ui-widget-header {
    background: #548cff;
    border: 1px solid #5d7cbc
}
.ui-datepicker-prev:after {
    content: '';
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    top: 66%;
    left: 15px;
}
.ui-datepicker-next:after {
    content: '';
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-135deg);
    top: 66%;
    right: 15px;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    width: 68px;
    height: 28px;
    margin: 5px 3px;
    font-size: 1.2rem;
    cursor: pointer
}
.ui-datepicker-header .ui-datepicker-prev.ui-state-hover,
.ui-datepicker-header .ui-datepicker-next.ui-state-hover {
    border: none;
    background: none;
    cursor: pointer;
}
.ui-datepicker table.ui-datepicker-calendar {
    height: 20em;
}
.ui-datepicker .ui-datepicker-calendar th {
    font-size: 1.2rem;
    padding : 1em .3em;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default,
.ui-datepicker .ui-button,
.ui-button.ui-state-disabled:hover,
.ui-button.ui-state-disabled:active {
    height: 100%;
    background: none;
    text-align: center;
    line-height: 30px;
    color: #333;
    border-radius: 8px;
    font-size: 1.2rem;
}
.ui-datepicker .ui-datepicker-today .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-widget-header .ui-state-highlight {
    border: 1px solid #548cff;
    background: #548cff url(images/ui-bg_glass_56_fbf8ee_1x400.png) 50% 50% repeat-x;
    color: #fff;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    opacity:0;
}
.ui-widget-content button.ui-widget button {
    font-family: 'Pretendard-Regular';
}

.boxtype {
    background-color: #F5F5F5;
    border-radius: 0px 0px 5px 5px;
}
.boxtype p {
  font-weight: 400;
  font-size: 1.2rem;
}
.boxtype p em {
  font-weight: 700;
}

.hp_txt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 8px;
  position: relative;
}
.hp_txt p {
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.03rem;
}
.hp_txt a.link-home {
    margin-right: 13px;
    font-size: 13px;
}
.hp_txt a.link-home:hover:before{
    border-left: 1px solid #0a58ca;
    border-top: 1px solid #0a58ca;
}
.hp_txt a.link-home:before{
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 50%;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    transform: translate(-50%,-50%) rotate(135deg);
}
.hp_txt p.point-color {
  font-weight: 500;
}
.hp_txt p img {
  vertical-align: sub;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.hp_txt p .clock-pup {
   margin-right: 2px;
} 

.textarea {
  font-weight: 400;
  font-size: 13px;
  margin-bottom: 12px;
}

.img-box img {
  width: 100%;
}

.btn-wrap.analysis {
  text-align: center;
  padding: 16px 0;
}
.btn-wrap.analysis .btn {
  width: 200px;
}

.col-wid {
  width: 830px;
}
.col-wid .tab.type2 {
  width: calc(100% - 192px);
}
.col-wid .tab .tab-menu li a {
  min-width: 91px;
}

.parity-wrap {
  position: relative;
  text-align: center;
  margin-top: 10px;
  /*table*/
}
.parity-wrap .item {
  display: inline-block;
  position: relative;
}
.parity-wrap .item .list {
  height: 150px;
  padding: 3px 1px;
  border-right: 1px solid #F5F5F5;
}
.parity-wrap .item .list span {
  display: block;
}
.parity-wrap .item .list span + span {
  margin-top: 5px;
}
.parity-wrap .item strong {
  margin: 0;
  padding: 0;
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: #333;
  background: #F5F5F5;
  width: 24px;
  height: 24px;
  line-height: 2em;
  border: 1px solid #F5F5F5;
}
.parity-wrap .item strong.odd {
  font-weight: 700;
  font-size: 1.2rem;
  color: #44A0F4;
}
.parity-wrap .item strong.even {
  font-weight: 700;
  font-size: 1.2rem;
  color: #ED407F;
}
.parity-wrap .item:first-child {
  border-left: 1px solid #F5F5F5;
}
.parity-wrap.type2 .item p {
  margin: 0;
  padding: 0;
  display: block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-weight: 400;
  font-size: 0.8rem;
  color: #333;
  box-sizing: border-box;
  border: 1px solid #F5F5F5;
  border-left: 0;
  background: #F5F5F5;
}
.parity-wrap.type2 .item p.color-pink {
  color: #ED407F;
}
.parity-wrap.type2 .item strong {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-weight: 600;
  font-size: 0.8rem;
  color: #333;
  box-sizing: border-box;
  border-left: 0;
}
.parity-wrap.type2 .item em {
  margin: 0;
  padding: 0;
  display: block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-weight: 400;
  font-size: 0.8rem;
  color: #333;
  box-sizing: border-box;
  border: 1px solid #F5F5F5;
  border-left: 0;
}
.parity-wrap.type2 .circle {
  margin-top: 3.5px;
}
.parity-wrap.bd-all {
  border: 1px solid #F5F5F5;
  padding: 0;
  background: #fff;
  width: 100%;
  overflow: auto;
}
.parity-wrap.bd-all > table {
  white-space: nowrap;
  border-collapse: collapse;
}
.parity-wrap td.box-td {
  position: relative;
}
.parity-wrap table.list {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.parity-wrap table.list td {
  border-top: 1px solid #F5F5F5;
  border-left: 1px solid #F5F5F5;
  padding: 0;
  width: 33px;
  height: 33px;
  text-align: center;
}
.parity-wrap table.list td div {
  width: 32px;
  height: 32px;
  text-align: center;
}
.parity-wrap table.list td.name {
  border: none;
  border-left: 1px solid #F5F5F5;
  border-bottom: 1px solid #F5F5F5;
  background: #F5F5F5;
  font-size: 13px;
  font-weight: 500;
}
.parity-wrap table.list td.name div {
  line-height: 32px;
}
.parity-wrap table.list td.bottom {
  border-top: 1px solid #F5F5F5;
  background: #F5F5F5;
}
.parity-wrap table.list td.bottom div {
  line-height: 31px;
}
.parity-wrap table.list td.bottom div strong {
  font-weight: 600;
  font-size: 1.2rem;
  color: #333;
}
.parity-wrap table.list td.bottom div span{
  border-top: 1px solid #F5F5F5;
  background: #F5F5F5;
  font-size: 12px;
}
.powerladder .box-td .list tbody td {
  height: 31px;
  width: 38px;
}
.powerladder .box-td .list tbody td div {
  height: 31px;
  width: 38px;
  line-height: 31px;
}
.powerladder .box-td .list tbody td div.round {
  padding: 6px 0;
}

.btn-posit {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}

/*알림설정*/
.setting {
  margin-top: 24px;
}
.setting .onoff {
  position: relative;
  padding: 10px 12px;
  background: #F5F5F5;
  border-radius: 8px;
  font-weight: 400;
  font-size: 12px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setting .onoff + .onoff {
  margin-top: 4px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch input:checked + .slider {
  background-color: #5A27BF;
}
.switch input:checked + .slider::before {
  transform: translateX(12px);
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D4D3D9;
  transition: 0.4s;
  border-radius: 16px;
}
.switch .slider::before {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
}

.checkbox-list.check-box {
  font-size: 0;
  margin-top: 16px;
}
.checkbox-list .checkbox-item {
  display: inline-block;
  width: calc(50% - 4px);
}
.checkbox-list .checkbox-item input[type=checkbox] {
  overflow: hidden;
  position: absolute;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0 none;
  opacity: 0;
}
.checkbox-list .checkbox-item input[type=checkbox] + label {
  display: inline-block;
  position: relative;
  border: 1px solid #E9E8EE;
  border-radius: 5px;
  padding: 8px;
  color: #333;
  font-weight: 400;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
}
.checkbox-list .checkbox-item input[type=checkbox]:checked + label {
  border: 1px solid #5A27BF;
  padding-left: 24px;
}
.checkbox-list .checkbox-item input[type=checkbox]:checked + label::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 32px;
  background: url("../img/icon-checked-pur.png") no-repeat center;
  width: 17px;
  height: 16px;
}
.checkbox-list .checkbox-item + .checkbox-item {
  margin-left: 8px;
}

.filebox {
  display: flex;
}
.filebox.imgbg {
  align-items: flex-end;
  margin-top: 16px;
  gap: 8px;
}
.filebox .file-img {
  background: #F5F5F5;
  border-radius: 8px;
  padding: 20px;
  width: 120px;
  height: 120px;
  position: relative;
}
.filebox .file-img img {
  display: block;
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.filebox .file-img .title {
    font-size: 12px;
    position: absolute;
    left: 5px;
    bottom: 4px;
}
.filebox .file-input {
  width: calc(100% - 112px);
  text-align: left;
  margin-left: 10px;
}
.filebox .file-input .upload-name {
  width: 100%;
  margin-top: 5px;
  margin-left: 0;
}
.filebox input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.filebox label {
  cursor: pointer;
}
.filebox .upload-name {
  border: 0;
  background-color: transparent;
  margin-left: 4px;
  font-weight: 400;
  font-size: 12px;
  color: #5A27BF;
}

.umbering-wrap {
  margin-top: 6px;
}
.umbering-wrap ul {
  display: flex;
  flex-wrap: wrap;
}
.umbering-wrap ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(50% - 4px);
  padding: 8px;
  background: #F5F5F5;
  border-radius: 8px;
  margin-top: 4px;
}
.umbering-wrap ul li:hover a{
  text-decoration: underline;
}
.umbering-wrap ul li + li:nth-child(even) {
  margin-left: 4px;
}
.umbering-wrap ul li p {
  color: #333;
  font-weight: 500;
  font-size: 12px;
}
.umbering-wrap ul li .txt-num {
  color: #333;
  font-weight: 500;
  font-size: 12px;
}
.btn-ft .btn-wrap-box .item {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.btn-ft .btn-wrap-box .item .circle {
  margin-left: 0;
}

.infos-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.infos-wrap .box-area-wrap {
  margin-top: 0;
  display: flex;
  align-items: center;
  padding: 0;
  text-align: left;
}
.infos-wrap .box-area-wrap .img-box {
  width: 48px;
  height: 48px;
  position: relative;
}
.infos-wrap .box-area-wrap .img-box::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 3px solid #fff;
  background-color: #5A27BF;
  width: 14px;
  height: 14px;
  border-radius: 100px;
}
.infos-wrap .box-area-wrap .img-box img {
  width: 32px;
  height: 32px;
}
.infos-wrap .box-area-wrap .meber {
  margin-left: 16px;
}
.infos-wrap .box-area-wrap .meber a {
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  position: relative;
  padding-right: 20px;
}
.infos-wrap .box-area-wrap .meber a::before {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 9px);
  background: url("../img/rigth-arrrow-icon.png") no-repeat center;
  width: 18px;
  height: 18px;
}
.infos-wrap .box-area-wrap .meber p {
  font-weight: 400;
  font-size: 12px;
  color: #333;
  margin-top: 4px;
}
.infos-wrap + .box-wrap {
  margin: 12px 0 8px;
  border: 0;
}

.comment-wrap .write {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.comment-wrap .write.bg {
  background: #F5F5F5;
  border-radius: 8px;
}
.comment-wrap .write p {
  font-weight: 400;
  font-size: 13px;
  color: #333;
}
.comment-wrap .write p.date {
  font-size: 12px;
  color: #666;
}
.comment-wrap .answer {
  padding: 12px;
  padding-left: 30px;
  position: relative;
}
.comment-wrap .answer::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  background: url("../img/icon-answer.png") no-repeat center;
  width: 24px;
  height: 24px;
}
.comment-wrap .answer p {
  font-weight: 400;
  font-size: 13px;
  color: #333;
}

.info-li {
  margin-top: 8px;
  margin-left: 8px;
}
.info-li li {
  position: relative;
  text-align: left;
  padding-left: 10px;
  font-weight: 400;
  font-size: 12px;
  color: #666;
}
.info-li li::before {
  content: "-";
  position: absolute;
  top: 0;
  left: 0;
}

.bg-box {
  background: #F5F5F5;
  border-radius: 16px;
  padding: 24px 16px;
}
.bg-box p {
  text-align: center;
  color: #333;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 18px;
}

.ml-none {
  padding: 0;
}
.ml-none .bbs-category ul li {
  padding-left: 32px;
}
.ml-none .bbs-category ul li:first-child {
  padding-left: 20px;
}
.ml-none .btn-ico {
  background-color: transparent;
}

.icon-time {
  padding: 82px 0 64px;
  background: url(../../assets/img/icon-time.png) top 33px center no-repeat;
}

.command-wrap li {
  padding: 12px 0;
}
.command-wrap li + li {
  border-top: 1px solid #F5F5F5;
}
.command-wrap li strong {
  font-weight: 500;
  font-size: 1.3rem;
  color: #333;
}
.command-wrap li p {
  color: #999;
  font-weight: 400;
  font-size: 1.2rem;
  margin-top: 10px;
}

.box-in {
  display: flex;
  align-items: center;
}
.box-in .box-item {
  font-weight: 400;
  font-size: 1.2rem;
  color: #333;
  position: relative;
  padding-right: 45px;
}
.box-in .box-item:not(:last-child):after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 22.5px;
  width: 1px;
  height: 14px;
  background: #D4D3D9;
}
.box-in .box-item span + span {
  margin-left: 16px;
}

.exp-line {
  margin: 12px 0;
}
.exp-line .chart-txt {
  position: relative;
  margin-top: 6px;
}
.exp-line .chart-txt > * {
  display: inline-block;
  font-size: 12px;
}
.exp-line .chart-txt .exp_per {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #333333;
  font-weight: 700;
}
.exp-line .chart-txt .next_exp {
  position: absolute;
  right: 0;
}

.flex-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cnt-grp {
  position: absolute;
  right: 10px;
  z-index: 100;
}
.cnt-grp .pointer {
  cursor: pointer;
}
.cnt-grp .cntbtn {
  display: inline-block;
  font-size: 18px;
  width: 30px;
  color: #ccc;
}
.cnt-grp .cntbtn.down {
  text-align: right;
}
.cnt-grp .cntbtn.up {
  text-align: left;
}
.cnt-grp .cntnum {
  font-size: 12px;
  font-weight: 700;
  padding: 0 5px;
  position: relative;
  top: -1px;
}

.league-box .league-name {
  font-weight: 700;
  font-size: 14px;
  position: relative;
}
.league-box .league-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-repeat: no-repeat;
  vertical-align: middle;
}
.league-box .league-icon.mlb {
  background-image: url("../img/img-mlb.png");
}
.league-box .league-box-btn {
  display: inline-block;
  transform: translateY(-50%);
  vertical-align: middle;
  top: 50%;
  position: absolute;
  right: 16px;
}/*# sourceMappingURL=index.css.map */