@charset "utf-8";

/***** index *****/
#orpg_container {
    width: 100%;
    height: 100%;
    display: flex;
}

#orpg_container .left_box {
    position: relative;
    width: 27%;
    height: 100%;
}
#orpg_container .left_box .menu_box {
    position: absolute;
    top: 50%;
    right: -85px;
    z-index: 10;
    transform: translateY(-50%);
    width: 420px;
    height: 720px;
}
#orpg_container .left_box .menu_box .m_list {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
}
#orpg_container .left_box .menu_box .m_list li {
    width: 300px;
    height: 60px;
}
#orpg_container .left_box .menu_box .m_list li:nth-child(1),
#orpg_container .left_box .menu_box .m_list li:nth-child(2) {margin: 0 0 10px;}
#orpg_container .left_box .menu_box .m_list li a {
    width: 100%;
    height: 100%;
    background-color: var(--main-color-1);
    color: var(--main-font-1);
    border: 1px solid var(--line-color);
    display: inherit;
    text-align: center;
    transform: skewX(-10deg) rotate(-2deg);
    text-shadow: 3px 3.5px 0 rgb(0, 0, 0, 0.7);
}
#orpg_container .left_box .menu_box .m_text {
    position: relative;
    width: 370px;
    height: 460px;
    background-color: var(--box_color_2);
    margin: 30px 0 0 35px;
    border: 1px solid var(--line-color);
}
#orpg_container .left_box .menu_box .m_text .top_tape {
    transform: rotate(354deg) translate(-50%, -50%);
    top: -10px;
    width: 45%;
    height: 35px;
}
#orpg_container .left_box .menu_box .m_text .top_tape::before,
#orpg_container .left_box .menu_box .m_text .top_tape::after {
    height: 35px;
    opacity: 1;
}
#orpg_container .left_box .menu_box .m_text .m_memo {
    width: 100%;
    height: 100%;
    padding: 50px 30px 20px;
}
#orpg_container .left_box .menu_box .m_text .m_memo > div {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, transparent 79px, transparent 79px, transparent 81px, transparent 81px), linear-gradient(#444 1px, transparent 1px);
    background-size: 100% 35px;
    background-position-y: 30px;
    background-attachment: local;
    padding: 0 5px;
    line-height: 2.5;
    overflow-y: auto;
    scrollbar-width: none;
}

#orpg_container .right_box {
    width: 73%;
    height: 100%;
    display: flex;
}
#orpg_container .right_box .room_box {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 1250px;
    height: 800px;
    background-color: var(--box_color_1);
    background-image: url(../img/background_pattern.png);
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
#orpg_container .right_box .room_box .top_tape {
    transform: rotate(358.5deg) translate(-50%, -50%);
    width: 50%;
}

#orpg_container .right_box .room_list {
    width: 100%;
    height: 100%;
    display: flex;
}
#orpg_container .right_box .room_list .r_category {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#orpg_container .right_box .room_list .r_category .ca_list {
    width: 65%;
    min-height: 50%;
    padding: 28% 0 0;
}
#orpg_container .right_box .room_list .r_category .ca_list li {margin: 0 0 18px;}
#orpg_container .right_box .room_list .r_category .ca_list li a {
    position: relative;
    font-family: 'Gothic_Goding';
    font-size: 2.2em;
    font-weight: 800;
    letter-spacing: 3px;
}
#orpg_container .right_box .room_list .r_category .ca_list li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 50%;
    z-index: -1;
    background-color: var(--main-color-3);
    opacity: 0.7;
}
#orpg_container .right_box .room_list .r_category .ca_list li a:hover {z-index: 2;}
#orpg_container .right_box .room_list .r_category .ca_list li a:hover::after {
    width: 100%;
    transition: width 0.5s;
}
#orpg_container .right_box .room_list .r_category .ca_list li a::before {
    content: "✔";
    margin: 0 8px 0 0;
    font-size: 0.7em;
}
#orpg_container .right_box .room_list .r_category .ca_list li a:hover {}

#orpg_container .right_box .room_list .r_category .r_etc_text {
    position: relative;
    width: 75%;
    height: 35.5%;
    background-color: var(--box_color_2);
    padding: 10px;
    border: 1px solid var(--line-color);
    border-radius: 10px;
    box-shadow: 1px 1px 0 var(--line-color);
}
#orpg_container .right_box .room_list .r_category .r_etc_text .top_tape {
    top: 5px;
    transform: rotate(3deg) translate(-50%, -50%);
    width: 25%;
    height: 30px;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .top_tape::before,
#orpg_container .right_box .room_list .r_category .r_etc_text .top_tape::after {height: 30px;}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info {
    width: 100%;
    height: 100%;
    border: 1px solid var(--line-color);
    border-radius: 10px;
    overflow: hidden;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con {
    height: 85%;
    display: flex;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_1,
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_2 {
    width: 50%;
    height: 100%;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_1 {
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_1 .me_name {
    width: 100%;
    background-color: #BBB;
    color: #F0F0F0;
    padding: 8px 0;
    font-size: 1.2em;
    font-weight: 800;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_2 {border-left: 1px solid var(--line-color);}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_2 .c_2_head {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-color);
    font-size: 1.1em;
    font-weight: 800;
    text-align: center;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_2 .c_2_list {
    height: 82%;
    overflow-y: auto;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_2 .c_2_list .c_2_link {
    padding: 3px 5px;
    border-bottom: 1px solid var(--line-color);
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_con .c_2 .c_2_list .c_2_empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#orpg_container .right_box .room_list .r_category .r_etc_text .me_info .m_footer {
    height: 15%;
    background-color: var(--line-color);
    color: #F0F0F0;
    border-top: 1px solid var(--line-color);
    font-family: 'Gothic_Goding';
    font-size: 1.35em;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 2;
}

#orpg_container .right_box .room_list .r_list {
    width: 60%;
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
}
#orpg_container .right_box .room_list .r_list li {
    position: relative;
    width: 50%;
    height: 50%;
}
#orpg_container .right_box .room_list .r_list li .r_link {
    position: relative;
    width: 100%;
    height: 100%;
    display: inherit;
}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item {
    position: relative;
    width: 290px;
    height: 320px;
    background-color: var(--box_color_2);
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
#orpg_container .right_box .room_list .r_list li:nth-child(1) .r_link .ro_item {
    top: 23px;
    transform: rotate(3deg);
}
#orpg_container .right_box .room_list .r_list li:nth-child(2) .r_link .ro_item {
    top: 10px;
    left: 10px;
    transform: rotate(356deg);
}
#orpg_container .right_box .room_list .r_list li:nth-child(3) .r_link .ro_item {top: 20px;}
#orpg_container .right_box .room_list .r_list li:nth-child(4) .r_link .ro_item {
    top: 10px;
    left: 10px;
    transform: rotate(2deg);
}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .sticker {
    top: 0;
    left: 45%;
    width: 35px;
    height: 35px;
    border-width: 1px;
    box-shadow: -2px 2px 0 #FFF inset;
    filter: none;
}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .top_tape {
    width: 35%;
    height: 25px;
}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .top_tape::after,
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .top_tape::before {height: 25px;}
#orpg_container .right_box .room_list .r_list li:nth-child(1) .r_link .ro_item .top_tape,
#orpg_container .right_box .room_list .r_list li:nth-child(2) .r_link .ro_item .top_tape,
#orpg_container .right_box .room_list .r_list li:nth-child(3) .r_link .ro_item .top_tape,
#orpg_container .right_box .room_list .r_list li:nth-child(4) .r_link .ro_item .sticker {display: none;}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .r_head {height: 20px;}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .r_thumb {
    width: 240px;
    height: 210px;
    background-color: #F0F0F0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .r_info {
    width: 240px;
    margin: 10px auto 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
#orpg_container .right_box .room_list .r_list li .r_link .ro_item .r_info .r_sub{
    font-size: 1.2em;
    font-weight: 800;
    margin: 0 0 5px;
}
#orpg_container .right_box .room_list .r_list li .r_edit {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
}
#orpg_container .right_box .room_list .r_list li:nth-child(1) .r_edit {
    top: 33px;
    right: 40px;
    transform: rotate(3deg);
}
#orpg_container .right_box .room_list .r_list li:nth-child(2) .r_edit {
    top: 7px;
    right: 48px;
    transform: rotate(356deg);
}
#orpg_container .right_box .room_list .r_list li:nth-child(3) .r_edit {
    top: 23px;
    right: 50px;
}
#orpg_container .right_box .room_list .r_list li:nth-child(4) .r_edit {
    top: 18px;
    right: 33px;
    transform: rotate(2deg);
}
#orpg_container .right_box .room_list .r_list li .r_edit .delete-btn,
#orpg_container .right_box .room_list .r_list li .r_edit .edit-btn {
    background-color: transparent;
    color: var(--font-color);
    margin: 0 5px 0 0;
    padding: 0;
    border: 0;
    font-size: 0.9em;
}
#orpg_container .right_box .room_list .r_list li.empty_list {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    font-weight: 800;
    filter: drop-shadow(#FFF 1px 0px 0px) drop-shadow(#FFF 0px 1px 0px) drop-shadow(#FFF -1px 0px 0px) drop-shadow(#FFF 0px -1px 0px);
}

#orpg_container .right_box .room_pagination {
    position: relative;
    left: -10px;
    z-index: 1;
    width: 50px;
    padding: 0 0 90px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
#orpg_container .right_box .room_pagination a {
    width: 100%;
    height: 25px;
    background-color: var(--main-color-1);
    color: var(--main-font-1);
    margin: 0 0 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 800;
    text-align: center;
    line-height: 1.8;
}



/***** create_room/edit_room *****/
#cr_container {
    width: 100%;
    height: 100%;
    padding: 65px 0 0;
}
#cr_container .cr_box {
    position: relative;
    width: 60%;
    background-color: #FFF;
    margin: 0 auto;
    padding: 60px 40px;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
#cr_container .cr_box table th,
#cr_container .cr_box table td {padding: 5px;}
#cr_container .cr_box .thumb_preview {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    color: #BBB;
    border-style: solid;
    border-width: 1px 1px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cr_container .cr_box .user_list {
    min-height: 200px;
    padding: 10px;
    border: 1px solid var(--line-color);
    overflow-y: auto;
}
#cr_container .cr_box .user_list .u_list {margin: 0 0 5px;}
#cr_container .cr_box .user_list .u_list:last-child {margin: 0;}
#cr_container .cr_box .submit_btn {
    margin: 20px 0 0;
    text-align: center;
}



/***** setup *****/
#setup_container {
    width: 100%;
    height: 100%;
    padding: 65px 0 0;
}
#setup_container .st_box {
    position: relative;
    width: 60%;
    background-color: #FFF;
    margin: 0 auto;
    padding: 60px 40px;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
#setup_container .st_box .bg_url,
#setup_container .st_box .fontPreview {width: 49.5%;}
#setup_container .st_box .font_preview {
    width: 100%;
    background-color: #F0F0F0;
    padding: 0 5px;
}
#setup_container .st_box .submit_btn {
    margin: 20px 0 0;
    text-align: center;
}



/***** enter_room *****/
#home_back {
    position: fixed;
    top: 0px;
    left: 10px;
    z-index: 999;
    padding: 10px 0;
    display: flex;
    align-items: center;
}
#home_back .back_btn {margin: 0 5px 0 0;}
#home_back .game_info {
    font-size: 1.4em;
    font-weight: 800;
    letter-spacing: 1px;
}

#game_container {
    height: 100%;
    display: flex;
}

#game_content {
    width: 100%;
    height: 100%;
}

#game_content .latest_chat {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
#game_content .latest_chat .la_box_1 {
    position: absolute;
    top: 0px;
    width: 75%;
    height: 70%;
}
#game_content .latest_chat .la_box_1 .la_emotion {
    position: relative;
    top: 55px;
    height: 100%;
}
#game_content .latest_chat .la_box_1 .la_emotion img {
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 700px;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}
#game_content .latest_chat .la_box_2 {
    position: absolute;
    bottom: 0px;
    width: 75%;
    height: 30%;
    padding: 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#game_content .latest_chat .la_box_2 .la_name {
    position: absolute;
    top: -5px;
    z-index: 2;
    height: 13%;
    background-color: var(--main-color-1);
    color: var(--main-font-1);
    margin: 0 0 0 20px;
    padding: 0 15px;
    border: 1px solid var(--line-color);
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 2.2;
    transform: skewX(-10deg) rotate(-2deg);
}
#game_content .latest_chat .la_box_2 .la_chat {
    position: absolute;
    bottom: 20px;
    z-index: 1;
    width: 100%;
    height: 87%;
    background-color: var(--box_color_2);
    background-image: linear-gradient(#EEE 1px, transparent 1px), linear-gradient(90deg, #EEE 1px, transparent 1px);
    background-size: 25px 25px, 25px 25px;
    padding: 30px 25px 20px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    font-size: 1.2em;
    line-height: 1.5;
    overflow-y: auto;
    scrollbar-width: none;
}

#game_chat {
    width: 550px;
    height: 100%;
    background-color: var(--box_color_2);
    background-image: linear-gradient(#EEE 1px, transparent 1px), linear-gradient(90deg, #EEE 1px, transparent 1px);
    background-size: 25px 25px, 25px 25px;
    padding: 10px 0 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    float: right;
}
#game_chat .chat_head {
    width: 98%;
    height: 5%;
    background-color: var(--main-color-1);
    margin: 0 0 2% 2%;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tabnav li {display: inline-block;}
.tabnav li a {
    color: var(--main-font-1);
    margin: 0 7px;
    font-size: 1.1em;
}
.tabnav li a.active {font-weight: 800;}

.tabcontent {height: 94%;}
.tabcontent #tab01,
.tabcontent #tab02,
.tabcontent #tab03,
.tabcontent #tab04,
.tabcontent #tab05,
.tabcontent #tab06 {height: 100%;}

.tabcontent #tab02,
.tabcontent #tab03,
.tabcontent #tab04,
.tabcontent #tab05,
.tabcontent #tab06 {
    padding: 10px 20px 20px;
    overflow-y: auto;
    scrollbar-width: none;
}

.tabcontent #tab02 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#game_chat .chat_content {
    height: 70%;
    padding: 0 0 10px;
}
#game_chat .chat_content .chat_messages {
    height: 100%;
    padding: 0 10px;
    overflow-y: auto;
}

#game_chat .chat_text {
    height: 30%;
    background-color: #FFF;
    border-top: 1px solid var(--line-color);
}
#game_chat .chat_text .chat_mode {
    margin: 0 0 3px;
    padding: 10px;
    display: flex;
}
#game_chat .chat_text .chat_mode div {
    display: flex;
    align-items: center;
    margin: 0 10px 0 0;
}

#game_chat .chat_text .chat_footer {
    height: 25%;
    padding: 0 10px;
}
#game_chat .chat_text .chat_footer .chat_btn {
    margin: 14px 0 0;
    float: right;
}

#tab06 .default_btn {
    width: 100%;
    margin: 0 0 30px;
    border-top: none;
}
#game_chat .character_list {
    width: 100%;
    height: 95%;
    padding: 10px 0 0;
    border-top: 1px solid var(--line-color);
    overflow-y: auto;
}
#game_chat .character_list .li_head {
    font-size: 1.2em;
    font-weight: 800;
}
#game_chat .character_list ul {margin: 10px 0 0;}
#game_chat .character_list ul li {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
}
#game_chat .character_list ul li .thumb {
    width: 45px;
    height: 45px;
    background-color: #FFF;
    margin: 0 10px 0 0;
    border: 1px solid var(--line-color);
    border-radius: 100%;
    overflow: hidden;
}
#game_chat .character_list ul li img {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    object-fit: cover;
    object-position: center;
}
#game_chat .character_list ul li button {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 1.1em;
    font-weight: 800;
}
#game_chat .character_list ul li button:hover {color: ;}
#game_chat .character_list ul li button:last-child {
    margin: 0 0 0 5px;
    font-size: 0.9em;
    font-weight: inherit;
}
#game_chat .character_list ul li button:last-child:hover {color: #FF0000;}

#game_chat .handout_upload,
#game_chat .background_upload {
    width: 100%;
    background-color: #FFF;
    margin: 0 0 30px;
    padding: 10px;
    border: 1px solid var(--line-color);
    box-shadow: 2px 2px 0 var(--line-color);
}
#game_chat .handout_upload .preview,
#game_chat .background_upload .preview {
    width: 100%;
    height: 150px;
    margin: 0 0 10px;
    border: 1px solid var(--line-color);
}
#game_chat .handout_upload .preview img,
#game_chat .background_upload .preview img {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    object-fit: cover;
    object-position: center;
}
#game_chat .handout_upload input[type="file"],
#game_chat .background_upload input[type="file"] {
    width: 70%;
    margin: 15px 0 0;
}
#game_chat .handout_upload .default_btn,
#game_chat .background_upload .default_btn {
    margin: 15px 0 0;
    float: right;
}
#game_chat .ho_head,
#game_chat .bg_head,
#game_chat .sc_head {
    font-size: 1.2em;
    font-weight: 800;
}
#game_chat .ho_list,
#game_chat .bg_list {
    height: 65%;
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
}
#game_chat .ho_list .ho_item,
#game_chat .bg_list .bg_item {
    width: 47%;
    background-color: #FFF;
    margin: 0 1.5% 3%;
    padding: 10px;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
#game_chat .sc_item {
    background-color: #FFF;
    margin: 10px 0 0;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
#game_chat .sc_item .s_sub {
    background-color: var(--main-color-2);
    color: var(--main-font-2);
    padding: 5px;
    font-size: 1.1em;
    font-weight: 800;
    text-align: center;
}
#game_chat .sc_item .s_con {
    padding: 10px;
    line-height: 2;
}
#game_chat .ho_list .ho_item img,
#game_chat .bg_list .bg_item img {
    width: 100%;
    height: 100px;
    margin: 0 0 5px;
    border: 1px solid var(--line-color);
    object-fit: cover;
    object-position: center;
}
#game_chat .ho_list .ho_item button,
#game_chat .bg_list .bg_item button {
    width: 100%;
    background-color: var(--main-color-2);
    color: var(--main-font-2);
    padding: 3px 0;
    border: 1px solid var(--line-color);
    font-weight: 800;
}

#game_chat .sc_item button {
    background-color: transparent;
    border: none;
    font-size: 0.8em;
}



/***** crerat_character, get_character *****/
#create_ch_conainter,
#update_ch_conainter {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
}

#cc_head {
    margin: 0 0 30px;
    font-size: 2em;
    font-weight: 800;
}
#cc_head button {
    background-color: transparent;
    margin: 0 5px 0 0;
    padding: 0;
    border: none;
}

#cc_content,
#uc_content {}
#cc_content .c_c td,
#uc_content .u_c td {padding: 0;}
#cc_content .c_c td input
#uc_content .u_c td input {margin: 0 0 5px;}
#cc_content .c_c .select_btn,
#uc_content .u_c .select_btn {
    background-color: var(--main-color-1);
    color: var(--main-font-1);
    margin: 10px 0 0;
    padding: 7px 0;
    border: 1px solid var(--line-color);
    display: inherit;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}
#cc_content .c_c .select_box,
#uc_content .u_c .select_box {
    background-color: #FFF;
    border-width: 0 1px 1px 1px;
    border-style: solid;
}
#cc_content .c_c .select_box table,
#uc_content .u_c .select_box table{
    border-collapse: collapse;
    border-spacing: 0
}
#cc_content .c_c .select_box th,
#uc_content .u_c .select_box th {
    background-color: var(--main-color-2);
    padding: 7px 0;
}
#cc_content .c_c .select_box td,
#uc_content .u_c .select_box td {padding: 5px;}
#cc_content .c_c .select_box .p_img,
#uc_content .u_c .select_box .u_img {
    width: 100%;
    height: 120px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
}
#cc_content .c_c .select_box .p_img img,
#uc_content .u_c .select_box .u_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/***** chat_messages *****/
.ch-messages {height: 100%;}
.ch-messages .all_btn {
    background-color: var(--line-color);
    color: #FFF;
    padding: 10px 0;
    display: inherit;
    text-align: center;
}
.ch-messages .message {border-bottom: 1px solid var(--line-color);}
.ch-messages .character-message {
    display: flex;
    padding: 15px 0;
}
.ch-messages .character-message .thumb {
    width: 45px;
    height: 45px;
    background-color: #FFF;
    margin: 0 10px 0 0;
    border: 1px solid var(--line-color);
    border-radius: 100%;
    overflow: hidden;
}
.ch-messages .character-message .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.ch-messages .character-message .content {
    width: 84.5%;
}
.ch-messages .character-message .content .info {
    margin: 0 0 5px 0;
}
.ch-messages .character-message .content .con {
    text-align: justify;
    line-height: 1.5;
    white-space: pre-wrap;
}

/*** 주사위 ***/
.ch-messages .character-message .content .con .dice_box_1 p:last-child {
    margin: 5px 0 0;
    font-weight: 800;
}
.ch-messages .character-message .content .con .dice_box_1 .d_calc {
    background-color: #FFF;
    margin: 3px 0;
    padding: 0 2px;
    display: inline-block;
    border: 1px solid var(--line-color);
}
.ch-messages .character-message .content .con .dice_box_1 .d_result {
    background-color: #FFF;
    margin: 0 0 0 5px;
    padding: 2px 5px;
    border: 1px solid var(--line-color);
    font-weight: 800;
}
.ch-messages .character-message .content .con .dice_box_2 {
    min-height: 70px;
    background-color: #FFF;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px var(--line-color);
    display: flex;
}
.ch-messages .message .con .weapon_box {
    min-height: 70px;
    background-color: #FFF;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px var(--line-color);
    display: flex;
}
.ch-messages .character-message .content .con .dice_box_2 .d_info_1,
.ch-messages .message .con .weapon_box .w_info_1 {
    width: 25%;
    height: auto;
    background-color: var(--main-color-2);
    color: var(--main-font-2);
    border-right: 1px solid var(--line-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Paperlogy-8ExtraBold';
    font-size: 1.7em;
    text-align: center;
    line-height: 1.1;
}
.ch-messages .character-message .content .con .dice_box_2 .d_info_2,
.ch-messages .message .con .weapon_box .w_info_2 {
    width: 75%;
    height: 100%;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ch-messages .character-message .content .con .dice_box_2 .d_info_2 p,
.ch-messages .message .con .weapon_box .w_info_2 p {font-size: 1.1em;}
.ch-messages .character-message .content .con .dice_box_2 .d_info_2 p:last-child,
.ch-messages .message .con .weapon_box .w_info_2 p.w_f_result,
.ch-messages .message .con .weapon_box .w_info_2 p.w_s_result{
    text-align: right;
    font-size: 1.5em;
    font-weight: 800;
}
.ch-messages .character-message .content .con .dice_box_2 .d_info_2 .i_e {
    margin: 5px 0 10px;
    padding: 5px 0;
    border-style: solid;
    border-width: 1px 0;
}
.ch-messages .message .con .weapon_box .w_info_2 p.w_s_result {margin: 10px 0 0;}

.ch-messages .gm-message {
    padding: 20px 15px;
    text-align: center;
}
.ch-messages .gm-message .con {
    font-size: 1.1em;
    font-weight: 800;
    line-height: 1.5;
    white-space: pre-wrap;
}
.ch-messages .gm-message .con .handout_box {
    position: relative;
    margin: 15px 0 10px;
}
.ch-messages .gm-message .con .handout_box .ho_sub.top_tape {
    top: -10px;
    height: 25px;
    padding: 0 15px;
    font-size: 1.1em;
    font-weight: 800;
    line-height: 1.7;
    opacity: 1;
}
.ch-messages .gm-message .con .handout_box .ho_sub.top_tape::after,
.ch-messages .gm-message .con .handout_box .ho_sub.top_tape::before {height: 25px;}
.ch-messages .gm-message .con .handout_box .ho_con {
    background-color: #FFF;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
.ch-messages .gm-message .con .handout_box .ho_con img {
    width: 100%;
    cursor: pointer;
}

/* CoC 광기 카드 */
.ch-messages .message .con .mad_box {
    position: relative;
    margin: 20px 0 0;
}
.ch-messages .message .con .mad_box .m_sub.top_tape {
    top: -10px;
    height: 25px;
    padding: 0 15px;
    font-size: 1.1em;
    font-weight: 800;
    line-height: 1.8;
    opacity: 1;
}
.ch-messages .message .con .mad_box .m_sub.top_tape::after,
.ch-messages .message .con .mad_box .m_sub.top_tape::before {height: 25px;}
.ch-messages .message .con .mad_box .m_con {
    background-color: #FFF;
    padding: 25px 15px 15px;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
    font-size: 1.1em;
}
.ch-messages .message .con .mad_box .m_con .mad_dice {
    background-color: #FFF;
    margin: 0 5px 0 2px;
    padding: 1px 5px;
    border: 1px solid var(--line-color);
}

/* insane 광기 카드 */
.ch-messages .message .con .i_mad_box {
    position: relative;
    margin: 20px 0 0;
}
.ch-messages .message .con .i_mad_box .i_m_sub.top_tape {
    top: -10px;
    height: 25px;
    padding: 0 15px;
    font-size: 1.1em;
    font-weight: 800;
    line-height: 1.8;
    opacity: 1;
}
.ch-messages .message .con .i_mad_box .i_m_sub.top_tape::after,
.ch-messages .message .con .i_mad_box .i_m_sub.top_tape::before {height: 25px;}
.ch-messages .message .con .i_mad_box .i_m_con {
    background-color: #FFF;
    padding: 25px 15px 15px;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
    font-size: 1.1em;
}

/* insane 감정표 */
.ch-messages .character-message .content .con .emotions_box {
    background-color: #FFF;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
.ch-messages .character-message .content .con .emotions_box .emo_sub {
    background-color: var(--main-color-2);
    color: var(--main-font-2);
    padding: 5px 0;
    font-size: 1.1em;
    font-weight: 800;
    text-align: center;
}
.ch-messages .character-message .content .con .emotions_box .emo_con {
    padding: 10px;
    font-size: 1.1em;
}

/* 장면표 */
.ch-messages .character-message .content .con .badend_box,
.ch-messages .character-message .content .con .scene_box, 
.ch-messages .character-message .content .con .drama_box,
.ch-messages .character-message .content .con .japan_box,
.ch-messages .character-message .content .con .rt_box,
.ch-messages .character-message .content .con .victoria_box {
    background-color: #FFF;
    border: 1px solid var(--line-color);
    box-shadow: 1px 1px 0 var(--line-color);
}
.ch-messages .character-message .content .con .badend_box .be_sub,
.ch-messages .character-message .content .con .scene_box .sc_sub, 
.ch-messages .character-message .content .con .drama_box .dr_sub,
.ch-messages .character-message .content .con .japan_box .jp_sub,
.ch-messages .character-message .content .con .rt_box .rt_sub,
.ch-messages .character-message .content .con .victoria_box .vt_sub {
    background-color: var(--main-color-2);
    color: var(--main-font-2);
    padding: 5px 0;
    font-size: 1.1em;
    font-weight: 800;
    text-align: center;
}
.ch-messages .character-message .content .con .badend_box .be_con,
.ch-messages .character-message .content .con .scene_box .sc_con, 
.ch-messages .character-message .content .con .drama_box .dr_con,
.ch-messages .character-message .content .con .japan_box .jp_con,
.ch-messages .character-message .content .con .rt_box .rt_con,
.ch-messages .character-message .content .con .victoria_box .vt_con {
    padding: 10px;
    font-size: 1.1em;
}


/***** 버튼 *****/
.menu_btn {
    font-family: 'GangwonEduPowerExtraBoldA';
    font-size: 3.3em;
    line-height: 1.7;
    letter-spacing: 3px;
}
.default_btn {
    background-color: var(--main-color-1);
    color: var(--main-font-1) !important;
    padding: 5px 10px;
    border: 1px solid var(--line-color);
    display: inline-block;
    font-weight: 800;
}
.enter_btn {
    width: 100%;
    background-color: var(--main-color-1);
    color: var(--main-font-1);
    margin: 20px 0 0;
    padding: 7px 0;
    border: 1px solid var(--line-color);
}


/***** 꾸밈 요소 *****/
.top_tape {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    background-color: var(--main-color-3);
    color: var(--main-font-3);
    opacity: 0.5;
    filter: drop-shadow(var(--line-color) 1px 0px 0px) drop-shadow(var(--line-color) 0px 1px 0px) drop-shadow(var(--line-color) -1px 0px 0px) drop-shadow(var(--line-color) 0px -1px 0px);
}
.top_tape::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 5px;
    height: 40px;
    border-left: 4px dotted var(--main-color-3);
    box-sizing: border-box;
}
.top_tape::before {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 40px;
    border-right: 4px dotted var(--main-color-3);
    box-sizing: border-box;
}

.sticker {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: var(--main-color-2);
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-radius: 100%;
    box-shadow: 3px 3px 0 #FFF;
    text-align: center;
    filter: drop-shadow(var(--line-color) 1px 0px 0px) drop-shadow(var(--line-color) 0px 1px 0px) drop-shadow(var(--line-color) -1px 0px 0px) drop-shadow(var(--line-color) 0px -1px 0px);
}
.sticker .material-symbols-outlined {
    color: var(--main-font-2);
    font-size: 2.5em;
    line-height: 1.3;
}

.secret-message {
    background-color: rgba(255, 0, 0, 0.1);
    padding: 5px;
}
.whisper-message {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 5px;
}

.q_tooltip {
    position: relative;
    width: 15px;
    height: 15px;
    background-color: #FFF;
    margin: 0 0 0 2px;
    border: 1px solid var(--line-color);
    border-radius: 100%;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    cursor: help;
}
.q_tooltip:hover::after {
    position: absolute; 
    top: 20px;
    left: 10px;
    width: 160px;
    background-color: #FFF;
    padding: 5px 7px 5px 5px; 
    border: 1px solid var(--line-color); 
    font-size: 12px;
    text-align: justify;
    line-height: 1.5;
    z-index: 1000;
}
.c_info:hover::after {
    content: 'GM 권한이 있는 유저는 모든 캐릭터들의 관리와 수정이 가능하지만, 삭제는 생성한 유저만 가능합니다.'; 
}
.h_info:hover::after {
    content: '이미지를 업로드하여 핸드아웃을 출력할 수 있습니다.'; 
}
.b_info:hover::after {
    content: '이미지를 업로드하여 배경화면을 설정할 수 있습니다. 활성화된 배경화면을 삭제하면 기본 화면으로 돌아갑니다. GM을 제외한 유저는 수동 새로고침을 해야 배경화면이 반영 됩니다.'; 
}
.s_info:hover::after {
    content: '예시 양식에 맞춰 작성하세요. 양식에 벗어나거나 구분을 하는 쉼표가 빠지면 제대로 작동되지 않습니다.'; 
}
.q_tooltip.t_info {margin: 0 0 0 7px;}
.t_info:hover::after {
    content: 'HTML 코드를 삽입할 수 있습니다. 허용된 코드는 <b> <i> <a> <img> <div> <span> <p> <iframe> 입니다.';
    top: inherit;
    bottom: 20px;
}

/* 유튜브 영상을 출력했을 경우 */
.ch-messages .message .con iframe {
    width: auto;
    height: auto;
}