@charset "utf-8";
@font-face {
    font-family: nanum gothic;
    font-style: normal;
    font-weight: 400;
    src: local('NanumGothic'),url(./fonts/l6D95h51ocAZakGcjUM0xOzt2j2cdCJff4F50jtiucc.woff2) format('woff2');
    unicode-range: U+3131-318E,U+3200-321C,U+3260-327B,U+AC00-D7AF
}

@font-face {
    font-family: nanum gothic;
    font-style: normal;
    font-weight: 400;
    src: local('NanumGothic'),url(./fonts/l6D95h51ocAZakGcjUM0xOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215
}

@font-face {
    font-family: nanum gothic;
    font-style: normal;
    font-weight: 700;
    src: local('NanumGothic Bold'),local('NanumGothic-Bold'),url(./fonts/P5XmTawmZlSUXQlRuA1sCN3Je5MGCwFj-BXA2CKQFK4.woff2) format('woff2');
    unicode-range: U+3131-318E,U+3200-321C,U+3260-327B,U+AC00-D7AF
}

@font-face {
    font-family: nanum gothic;
    font-style: normal;
    font-weight: 700;
    src: local('NanumGothic Bold'),local('NanumGothic-Bold'),url(./fonts/P5XmTawmZlSUXQlRuA1sCHNuWYKPzoeKl5tYj8yhly0.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215
}

html {font-size: 13px;}
body{
    margin: 0;
    padding: 0;
    color: #555;
    background: #f2f5f6;
    font-family: apple sd gothic neo,nanum gothic,sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
div {position: relative;box-sizing: border-box;}
ul, li {list-style:none;}
a {text-decoration-line:none}
input::placeholder {
    color: #888;
}

.img {background: url(../img/image_set.png) no-repeat;}
.table {
    display: table;
    width: 100%;
}
.table_cell {
    display: table-cell;
}

.chat_container {
    width: 100%;
    height: 615px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    overflow: hidden;
}
.chat_header_container {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.chat_header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background: #eaeef1;
}
.chat_tabs {
  width: 100%;
  height: auto;
  overflow: hidden;
  }
.chat_tabs_memu {}  
.chat_tab_item {
  width: calc(100%/3);
  height: 60px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background-color: #f8f8f8;
  line-height: 60px;
  text-align: center;
  color: #333333;
  display: block;
  float: left;
  text-align: center;
  transition: all 0.2s ease;
}
.chat_tab_item:hover {
  opacity: 0.75;
}
.chat_tabs input[name="chat_tab_item"] {display: none;}
.chat_tabs label {}

.chat_tabs input:checked + .chat_tab_item {
  background-color: #1ba9de;
  border: 1px solid #1796c5;
  color: #fff;
}



.chat_msg_container {
    width: 100%;
    height: calc(100% - 110px);
    background: #fff;
}

.chat_notices {
/*    display: none;*/
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
    background:#f8f8f8;
    overflow: hidden;
}

.chat_notices_in {width: 100%;height: 100%;overflow: hidden;}
.chat_notices_in ul {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.chat_notices_in ul li {
    width: 100%;
    height: 50px;
    padding: 5px 0;
    line-height: 40px;
    text-align: center;
}
.chat_notices_in ul li span {
    color: #555;
}
.chat_notices_in ul li span.mark {
    padding: 3px 10px;
    border: dashed 1px #00baff;
    border-radius: 5px;
    color: #00baff;
    margin-right: 10px;
    background-color: #fff;
}

/* 탭 컨텐츠 스타일 */
.chat_tab_content {
  /* display: none; */
  width: 100%;
  height: 100%;
  clear: both;
  overflow: hidden;
}
.chat_content {
    width: 100%;
    height: calc(100% - 90px);
    clear: both;
    padding-bottom:20px;
    overflow-x: hidden;
    overflow-y: auto;
}

.chat_content .chat_content_div {
    width: 100%;
    height: auto;
    padding:10px;
}
.chat_content_box {
    width: 100%;
    height: auto;
    /* line-height: 25px; */
    padding: 0 10px;
}

.table_cell.d_icon {
    vertical-align: top;
    width: 28px;
    padding: 2px 0;
    text-align: center;
}
.table_cell.d_icon .icon_img {}
.table_cell.d_msg {
    vertical-align: middle;
    letter-spacing: -1px;
    line-height: 1.7;
    padding-left: 2px;
    word-break: break-all;
}

.table_cell.d_msg .user_icon {margin-right: 5px;cursor: pointer;}
.table_cell.d_msg .user_icon .nick_span {font-weight: 700;/* margin-right: 10px; */}
.chat_content_box  dl {
    width: 100%;
    min-height: 26px;
    margin: 5px 0;
}

.table_cell.d_msg .user_info_box {
    display: none;
    position: absolute;
    margin-top: -25px;
    margin-left: 120px;
    width: 135px;
    height: 180px;
    padding: 0 5px;
    border: 1px solid #e5e5e5;
    background: #f8f8f8;
    overflow: hidden;
    z-index: 1000;
}
.table_cell.d_msg .user_info_box div {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
}
.table_cell.d_msg .user_info_box div .icon_img {margin-right:1px;vertical-align: middle;}
.table_cell.d_msg .user_chat_content {}

.chat_content .system_msg_box {
    width:100%;
    height:auto;
    padding: 5px 10px;
}
.chat_content .system_msg_box span {
    display: inline-block;
    width:100%;
    line-height: 30px;
    text-align: center;
    border: dashed 1px #00baff;
    border-radius: 20px;
    color: #0a88ed;
    background-color: #f8f8f8;
}


.result_msg_box {
    position: relative;
    width: calc(100% - 25px);
    height:auto;
    padding: 0px 10px 10px 10px;
    border-radius: 12px;
    border: dashed 1px #ff9090;
    text-align: center;
    margin: 0  auto 5px;
    background: #f8f8f8;
}
.result_msg_box div {
    display: flex;
    justify-content: center;
}
.result_msg_box div {
}
.result_msg_box .game_info{
    font-weight: 700;
    font-size: 14px;
    line-height: 35px;
    /* color: #fff; */
    /* text-shadow: 0 0 3px #000; */
}
.result_msg_box .game_info .game_round {
    margin-left: 10px;
}

.ricon {
    position: relative;
    width: 32px;
    height: 31px;
    margin: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-family: segoe ui, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 0 3px #000;
    border: 1px solid rgba(0, 0, 0, .5);
}

.ricon.r1 {
    background: #2193b0;
    background: -webkit-linear-gradient(45deg,#2193b0,#6dd5ed);
    background: linear-gradient(45deg,#2193b0,#6dd5ed)
}    
.ricon.r2 {
    background: #f12711;
    background: -webkit-linear-gradient(45deg,#f12711,#f37669);
    background: linear-gradient(45deg,#f12711,#f37669)
}
.ricon.r3 {
    background: #56ab2f;
    background: -webkit-linear-gradient(45deg,#56ab2f,#a8e063);
    background: linear-gradient(45deg,#56ab2f,#a8e063)
}

.ricon.rpb::before {
    position: absolute;
    content: 'p';
    font-size: 8px;
    background: #ffb400;
    background: -webkit-linear-gradient(45deg, #ffb400, #f0cc77);
    background: linear-gradient(45deg, #ffb400, #f0cc77);
    width: 11px;
    height: 11px;
    padding: 0 0 1px 1px;
    top: -5px;
    right: -5px;
    line-height: 9px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    font-weight: 400;
    display: block;
    text-align: center;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, .5);
    text-shadow: 0 0 0;
    z-index: 200;
    color: #424242;
}
.ricon.rpg::before {
    position: absolute;
    content: 'G';
    font-size: 8px;
    background: #ffb400;
    background: -webkit-linear-gradient(45deg, #ffb400, #f0cc77);
    background: linear-gradient(45deg, #ffb400, #f0cc77);
    width: 11px;
    height: 11px;
    padding: 0 0 1px 1px;
    top: -5px;
    right: -5px;
    line-height: 9px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    font-weight: 400;
    display: block;
    text-align: center;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, .5);
    text-shadow: 0 0 0;
    z-index: 200;
    color: #424242;
}

.scale-up-center {
    -webkit-animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.tooltip {
    position: relative; /* 툴팁을 상대 위치로 설정 */
}

.tooltip::after {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 30px;
    line-height: 30px;
    color: #b5b5b5;
    font-size: 11px;
    background-color: #000000;
    padding: 0 8px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-top: -35px;
}


/* 화살표 스타일 */
.tooltip::before {
    content: "";
    position: absolute;
    top: -6px; /* 툴팁 아래쪽에 위치시킴 */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    border-width: 6px; /* 화살표 크기 조절 */
    border-style: solid; /* 경계선 스타일을 solid로 설정 */
    border-color: #000 transparent transparent transparent; /* 화살표 색상을 설정 */
    transition: opacity 0.2s ease;
    z-index: 998; /* 툴팁 텍스트보다 뒤에 나오도록 설정 */
}

.tooltip:hover::after {
    opacity: 1;
    transition-delay: 0.1s; /* 부드러운 등장 효과 */
}

.tooltip:hover::before {
    opacity: 1;
    transition-delay: 0.1s; /* 부드러운 등장 효과 */
}

.setting_box {
    width: 100%;
    height: 35px;
    padding: 0 10px;
    border-top: 1px solid #dddbdb;
    background-color: #f8f8f8;
}
.setting_box div {
    float: left;
    width: 35px;
    height: 35px;
    line-height: 40px;
    text-align: center;
}
.setting_box div span {
    display: inline-block;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.setting_box div.result_on_div {float: right;}
.btn_clear {
    background-position: -15px -132px;
}
.btn_text_up {
    background-position: -30px -132px;
}
.btn_text_down {
    background-position: -45px -132px;
}
.btn_result_on {
    width: 34px !important;
    height: 15px;
    background-position: -146px -132px;
}
.btn_result_off {
    width: 34px !important;
    height: 15px;
    background-position:-146px -147px;
}
.chat_input {
    display: flex;
    width: 100%;
    height: 55px;
    line-height: 53px;
    padding: 0 10px;
    border-top: 1px solid #e5e5e5;
    align-items: center;
}
.chat_input input {
    width: calc(100% - 20px);
    height: 48px;
    line-height: 48px;
    color: #555;
    border: 0;
    border-radius: 3px;
    outline: none;
    background-color: rgb(255 255 255);
}
.chat_input span {
    display: block;
    width: 15px;
    height: 15px;
    cursor: pointer;
    background-position: -163px -54px;
}

.loading-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.ring {/* background: #16161c !important; */z-index: 10010;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 80px;height: 80px;background:transparent;/* border:3px solid #3c3c3c; */border-radius:50%;text-align:center;line-height: 80px;/* letter-spacing:4px; *//* text-transform:uppercase; *//* text-shadow:0 0 10px #fff000; *//* box-shadow:0 0 20px rgba(0,0,0,.5); */}
.ring:before {content: '';position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;border: 2px solid transparent;border-top: 2px solid #FF9800;/* border-right: 2px solid #FF9800; */border-bottom: 2px solid #FF9800;border-radius: 50%;animation: animateC 2s linear infinite;}
.ring>span {/* display:block; */position:absolute;top: calc(50% - 1px);left:50%;width:50%;height: 0px;background:transparent;transform-origin:left;animation:animate 2s linear infinite;}
.ring>span:before {content:'';/* position:absolute; *//* width: 9px; *//* height: 9px; *//* border-radius:50%; *//* background: #E91E63; *//* top: 0px; *//* right: 0px; *//* box-shadow: 0 0 20px #E91E63; */}
@keyframes animateC
{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes animate
{
  0% {transform:rotate(45deg);}
  100% {transform:rotate(405deg);}
}

.error_div {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #fff;
}
.error_div div {margin-top: 50%;}