body {
    /* background: #333; */
    /* background:rgba(214,230,245); */
    background-color: #2c3033;
    background-image: url(../images/video_bg.jpg);
    background-repeat: repeat;
    background-size: 200%;
}
header.video {
    height: 70px;
    background: #090a0a;
    border-bottom: 1px solid #2c3033;
    box-shadow: 3px 3px 15px rgba(0,0,0,0.5);
}
.wrap2 {
    width: 94vw;
    margin: 0 auto;
    position: relative;
}
header.video h1 {
    /* margin-left: 70px; */
    height: 70px;
    width: 150px;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    align-items: center;
}
header.video h1 a {
    width: auto;
    height: auto;
}
header.video h1 a img {
    width: 100%
}
header.video .video_resolution {
    margin-top: 20px;
    position: absolute;
    top: 0;
    right: 450px;
}
.lang {
    color: #fff;
    padding: 0 10px;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    background: #333;
    /*background: #333 url(../images/btn_down_white.png) no-repeat right center;*/
    background-size: 30px auto;
    padding: 8px 25px 8px 10px;
    display: inline-block;
    border-radius: 5px;
    height: 30px;
}
.lang::-ms-expand {
    display:none;
}
.lang:hover {
    background-color: #222;
}
.hamburger {
    width: 30px;
    height: 2px;
    background-color: #eee;
    display: block;
    margin: 5px auto 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
header.video .video_btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}
header.video .video_btn .video_menu_btn {
    width: 50px;
    height: 50px;
    display: block;
    background: none;
}
header.video .video_btn:after {
    content: "";
    clear: both;
    display: block;
}
header.video .video_btn > div {
    float: left;
    margin-right: 20px;
}
header.video .video_btn > div:last-child {
    margin-right: 0;
}
header.video .video_btn .video_set li {
    float: left;
    height: 50px;
    margin-right: 10px;
}
header.video .video_btn a {
    display: block;
    width: 48px;
    height: 50px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}
header.video .video_btn a img {
    width: 100%;
}
header.video .video_btn li a.oneview_btn {
    background-image: url(../images/video_icon_view1.svg);
}
header.video .video_btn li a.freeview_btn {
    background-image: url(../images/video_icon_view2.svg);
}
header.video .video_btn li a.full_btn {
    background-image: url(../images/video_icon_full.svg);
    background-size: 22px;
}
header.video .video_btn li a.lock_btn {
    background-image: url(../images/video_icon_unlock.svg);
    background-size: 28px;
}
header.video .video_btn li a.lock_btn.lock {
    background-image: url(../images/video_icon_lock.svg);
}
header.video .video_btn li a.lang_btn {
    background-image: url(../images/video_icon_lang.svg);
    background-size: 28px 28px;
}
header.video .video_btn .chat_leave {
    display: block;
    width: 48px;
    height: 50px;
    background-image: url(../images/video_icon_leave.svg);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}
header.video .video_btn .chat_leave2 {
    display: block;
    width: 100px;
    height: 30px;
    line-height: 28px;
    background: #ff0000;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Noto Sans KR';
    letter-spacing: 2px;
    transition: .3s;
}
.header_blank {
    display: block;
    width: 100vw;
    height: 70px;
}

/* video_info */
.video_info {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 350px;
    height: calc(100% - 70px);
    z-index: 900;
}
.info_cont {
    position: relative;
    top: 0;
    right: 0;
    display: block;
    transition: .5s;
}
.info_cont.off {
    right: -350px;
}
.info_cont > h3 {
    width: 100%;
    text-align: center;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transform: skew(-0.03deg);
    color: #eee;
    /* 수정 0521 (삭제)
    padding-left: 10px;  */
    box-sizing: border-box;         /* 수정 0520 (추가) */
}
.info_cont > h4 {
    color: #eee;
    font-size: 16px;
    transform: skew(-0.03deg);
    width: 300px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin: 10px 0 0;                  /* 수정 0521 */
    padding-left: 10px;
    text-transform: uppercase;          /* 수정 0521 (추가) */
    font-weight: bold;                  /* 수정 0521 (추가) */
}

/* 참가자목록 */
.info_cont.parti_cont {
    height: 35%; /* 수정 0521 */
    background: #141617;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    border-bottom: 1px solid #2c3033;
}

.info_cont.parti_cont .info_me {
    /* width: 310px;           수정 0521 (삭제) */
    height: 46px;
    margin: 8px 0 0;            /* 수정 0521 (추가) */
}

/* 참가자 정보 set */
.info_set {
    width: 300px;
    height: 46px;
    line-height: 46px;
    display: block;
    font-size: 14px;
    box-sizing: border-box;
}
.info_me .info_set {
    /* border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; */
    box-sizing: border-box;
    background: #2c3033;
    padding: 0 10px;
    margin-left: -38px;     /* 수정 0521 */
    border-radius: 20px;
    width: 270px;   /* 수정 0521 */
}
/* 수정 0521 (추가) */
.info_me .info_set:before {
    content: "ME";
    color: #eee;
    position: relative;
    left: 45px;
    font-weight: bold;
    opacity: .2;
    font-size: 20px;
}

.info_me .info_set .info_face {
    margin: 8px 8px 0 8px;
}
.info_set span {
    color: rgb(221, 221, 221);
    display: block;
    float: left;
    font-family: 'Noto Sans KR';
}
.info_set .info_face {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/video_icon_infoface.svg);
    margin: 8px; /* 수정 0524 */
}
.info_set .info_id {
    color: #999;
    font-size: 14px;
    margin-left: 5px;
}
.info_set .info_id:before {
    content: "(";
    margin-right: 5px;
}
.info_set .info_id:after {
    content: ")";
    margin-left: 5px;
}
.info_set > a {
    float: right;
    width: 20px;
    height: 30px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    transition: .3s;
}
.info_set .info_mic {
    background-image: url(../images/video_icon_mic_b.svg);
    margin: 8px 0;
}
.info_set .info_mic.on {
    background-image: url(../images/video_icon_micoff_b.svg);
}

.info_set .info_hand {
    background-image: url(../images/video_icon_hand_b.svg);
    cursor: pointer;
    margin: 8px;
}
.info_set .info_hand.on {
    background-image: url(../images/video_icon_hand_red.svg);
    cursor: pointer;
}

/* 참가자 리스트 */
.info_listcont {
    width: 310px;
    height: 193px; /* 수정 0521 */
    overflow-y: auto;
    box-sizing: border-box;
}
.info_listcont li {
    width: 100%;
    height: 46px;
}

/* 스크롤바 */
.info_listcont::-webkit-scrollbar { width: 5px; background-color: #eee; }
.info_listcont::-webkit-scrollbar-thumb { background-color: #ff0000; border-radius: 10px; background-clip: padding-box; border: 0px solid transparent; }
.info_listcont::-webkit-scrollbar-track  { background-color: #000; }
.info_cont.chat_cont {
    height: 65%; /* 수정 0521 */
    background: #141617;
}
.info_btn {
    width: 46px;
    height: 46px;
    background-image: url(../images/close_btn_mob.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    top: 5px;
    right: 10px; /* 수정 0521 */
    position: absolute;
    border-radius: 100%;
    display: block;
    z-index: 10;
    transition: .5s;
}
.info_btn.off {
    left: -55px;
    background-color: rgba(20, 22, 23,1);
    border: 1px solid rgba(128, 128, 128, 0.2);
    box-sizing: border-box;
    transition: .3s;
}

/* 수정 0521 ___ START (삭제)
.info_btn.off:hover {
    transform: scale(1.2);
    background-color: #090a0a;
}
.info_btn.off:hover:after {
    display: none;
    content: "participants";
    position: absolute;
    top: 30%;
    left: -190%;
    color: #eee;
    font-size: 14px;
    text-align: right;
}
.chat_btn.off:hover:after {
    display: none;
    content: "chatting";
    left: -140%;
}

수정 0520 ___ END (삭제) */

.info_btn.parti_btn.off {
    background-image: url(../images/video_icon_people.svg);
}
.info_btn.chat_btn.off {
    background-image: url(../images/video_icon_send.svg);
}


/* 채팅창 영역 */
.chat_screen {
    height: calc(100% - 56px - 74px - 60px); /* 수정 0524 */
    overflow: auto;
    padding-bottom: 5px;
    box-sizing: border-box;
}
.chat_screen::-webkit-scrollbar {
    display: none;
}
.video_info .chat_cont {
    position: relative;
}
.video_info .chat_cont .chat_window {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    height: auto;
    padding: 10px 0;
    box-sizing: border-box;
}
.video_info .chat_cont .chat_window .chat_input {
    width: 260px;
    height: 50px;
    resize: none;
    background: #fff;
    padding: 0 10px;
    line-height: 1.6;
    border: none;
    box-sizing: border-box;
}
.video_info .chat_cont .chat_window .chat_input::-webkit-scrollbar {
    display: none;
}
.video_info .chat_cont .chat_window .chat_input:focus {
    outline: none;
}
.video_info .chat_cont .chat_window > a {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
    display: block;
    width: 36px;
    height: 36px;
    background-color: #2c3033;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
    transition: .3s;
}

/* 수정 0521 (삭제) .video_info .chat_cont .chat_window .chat_share {
    right: 10px;
    background-image: url(../images/video_icon_clip.svg);
} */
.video_info .chat_cont .chat_window .chat_send {
    right: 10px;
    background-image: url(../images/video_icon_chat_send.svg);
    cursor: pointer; /* 수정 0521 (추가) */
}


/* 수정 0521 ___ START (삭제)
.video_info .chat_cont .chat_window > a:hover {
    background-color: #141617;
}
수정 0521 ___ END (삭제) */

/* 채팅화면 */
.chat_other:after,
.chat_me:after {
    content: "";
    clear: both;
    display: block;
}
.chat_other .chat_txt {
    float: left;
}
.chat_me .chat_txt {
    float: right;
    background: #d6e6f5;
}
.chat_txt {
    font-family: 'Noto Sans KR';
    background: #eee;
    width: 50%;
    margin: 0 10px 10px;
    border-radius: 10px;
    padding: 8px;
    position: relative;
}
.chat_txt:after {
    content: "";
    clear: both;
    display: block;
}
.chat_txt .chat_face {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/video_icon_infoface.svg);
    float: left;
    cursor: default;
}
.chat_txt > p {
    font-size: 15px;
    line-height: 1.6;
    font-family: 'Noto Sans KR';
    color: #111;
}
.chat_txt > span { 
    display: inline-block;
    line-height: 30px;
    height: 30px;
    
}
.chat_txt span.chat_name {
    padding-left: 8px;
    font-size: 14px;
    color: #111;
    /* 아이디짤림방지 */
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat_txt span.chat_id {
    color: #333;
    font-size: 12px;
}
.chat_txt span.chat_id:before {
    content: "(";
}
.chat_txt span.chat_id:after {
    content: ")";
}
.chat_txt span.chat_time {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    color: #999;
    padding: 0 6px;
    transform: translate(100%, 0%);
    right: 0;
    width: 100px;
}
.chat_me .chat_txt a,
.chat_me .chat_txt .chat_name,
.chat_me .chat_txt .chat_id {
    display: none;
}
.chat_me .chat_txt .chat_time {
    transform: translate(-100%, 0%);
    left: 0;
    bottom: 0;
    text-align: right;
}

/* 수정 0520 ___ START */

/* TTS / STT 아이콘 */
.chat_set {
    position: absolute;
    right: 10px;
    top: 13px;
}
.chat_set > a {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: .5s;
    opacity: .7;
}
.chat_input {
    background-image: url(../images/video_input.svg);
}
.chat_output {
    background-image: url(../images/video_output.svg);
}

/* 수정 0520 ___ END */







/* 수정 0521 (추가) */
/* 공유파일 버튼 */
button.filelist {
    border: none;
    width: 46px;
    height: 46px;
    background-color: transparent;
    background-image: url(../images/video_filelist.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    top: 5px;
    left: 5px;
    position: absolute;
    cursor: pointer;
}

/* 공유파일 리스트 */
.filelist_cont {
    position: absolute;
    width: 300px;
    top: 0;
    left: -300px;
    height: 100%;
    background: #141617;
    border-right: 1px solid #2c3033;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    transition: .6s;
    z-index: -1;

}
.filelist_cont.off {
    left: 350px;
}
.filelist_cont h3 {
    width: 100%;
    text-align: center;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    font-weight: bold;
    transform: skew(-0.03deg);
    color: #eee;
    box-sizing: border-box;
}

.file_btn {
    width: 46px;
    height: 46px;
    background-image: url(../images/close_btn_mob.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;  /* 수정 0524 */
    top: 5px;
    left: -50px;
    position: absolute;
    display: block;
    z-index: 10;
    transition: .3s;
    opacity: 0.7;
}
.file_btn.off {
    left: 10px;
    background-image: url(../images/video_icon_clip.svg);
}
.file_btn.hide {
    display: none;
}
.filelist_cont button {
    cursor: pointer;
    border: none;
}
.share_btn {
    background-color: #2c3033;
    width: 260px;
    height: 46px;
    font-size: 14px;
    color: #fff;
    border-radius: 20px;
    font-family: 'Noto Sans KR';
    font-weight: 100;
    border: 1px solid #4e5459;
    transition: .3s;
    transform: skew(-0.03deg);
    letter-spacing: 1px;
}
.share_btn:hover {
    background: #4e5459;
    color: #fff;
}
.filelist_wrap {
    margin-top: 20px;
    width: 94%;
    height: 450px;
    background: transparent;
    overflow: auto;
    box-sizing: border-box;
    padding: 0 10px;


    /* 수정 0524 ___ START (추가) */


}
.filelist_wrap::-webkit-scrollbar { width: 5px; background-color: #eee; }
.filelist_wrap::-webkit-scrollbar-thumb { background-color: #ff0000; border-radius: 10px; background-clip: padding-box; border: 0px solid transparent; }
.filelist_wrap::-webkit-scrollbar-track  { background-color: #000; }

/* 채팅언어 input/output 설정 */
.lang_cont {
    position: relative;
    height: 60px;
    box-sizing: border-box;
}
.langstyle {
    box-sizing: border-box;
    width: 50%;
    height: 60px;
    position: relative;

}
.langstyle:before {
    content: "";
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 100;
    top: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    margin-left: 5px;
}
#inchatLang:before {
    left: 10px;
    background-image: url(../images/video_pen.svg);
}
#outchatLang:before {
    left: 5px;
    background-image: url(../images/video_eye.svg);
}
#inchatLang {
    float: left;
    padding: 0 5px 0 10px;
}
#outchatLang {
    float: right;
    padding: 0 10px 0 5px;
}

.chat_lang {
    width: 100%;
    color: #fff;
    padding: 0 10px;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    background: #333 url(../images/btn_down_white.png) no-repeat right center;
    background-size: 25px auto;
    display: inline-block;
    border-radius: 5px;
    height: 25px;
    font-size: 12px;
    margin-bottom: 5px;
    border: none;
    padding-left: 35px;
}


.chat_lang::-ms-expand {
    display:none;
}
.chat_lang:hover {
    background-color: #222;
}
.chat_lang_sub {
    padding-left: 10px;
}


/* 수정 0524 ___ START (추가) */

.fileform {
    width: 100%;
    height: 125px; /* 수정 */
    border: 1px solid #666;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    margin-bottom: 10px;
}

.fileform:after {
    content: "";
    clear: both;
    display: block;
}
.fileform > span {
    float: left;
}
.fileform .info_face {
    margin: 8px;
    background: url(../images/video_icon_info_face.svg) no-repeat center;
    width: 30px;
    height: 30px;
}
.file_name {
    cursor: pointer;
}
.file_name:before {
    content: "파일명 : ";
}
p.file_name {       /* video_style.css:793 */
    color: #999;
    padding-left: 10px;
    line-height: 30px;
    /* float: left; 삭제 */
    width: calc(100% - 0px);
    /* border-top: 1px solid #333; 삭제 */
    box-sizing: border-box;
}

.file_down {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/file_down.png) no-repeat center top/cover;
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 50%;
    cursor: pointer; /* 추가 */
}
.file_down:before {
    content:"";
    display: block;
    width: 30px;
    height:0;
    background:url(../images/file_down_red.png) no-repeat center top/cover;
    position: absolute;
    left:0;
    top:0;
    transition:0.8s;
}
.file_down:hover:before {
    height: 30px;
}









/* 수정 0524 ___ END (추가) */









/* 모바일 HOVER 방지용 */
@media (hover: hover) {
    header.video .video_btn .chat_leave2:hover {
        background: #fff;
        color: #111;
    }
    .video_m_list li a.watch:hover {
        background: #111;
    }
    .chat_set > a:hover {                /* 수정 0520 */
        opacity: 1;
    }
    /* 수정 0521 ___ START (추가) */
    .info_btn.off:hover {
        transform: scale(1.2);
        background-color: #090a0a;
    }
    .info_btn.off:hover:after {
        display: none;
        content: "participants";
        position: absolute;
        top: 30%;
        left: -190%;
        color: #eee;
        font-size: 14px;
        text-align: right;
    }
    .chat_btn.off:hover:after {
        display: none;
        content: "chatting";
        left: -140%;
    }
    .video_info .chat_cont .chat_window > a:hover {
        background-color: #141617;
    }
    .file_btn:hover {
        opacity: 1;
    }
    /* 수정 0521 ___ END (추가) */
    /* 수정 0524 ___ START (추가) */







    /* 수정 0524 ___ END (추가) */

}






.MuiBadge-anchorOriginTopRightRectangle {
    top: 0;
    left: 0;
    transform: scale(1) translate(50%, -50%);
    transform-origin: 100% 0%;
}

.MuiBadge-colorPrimary {
    color: #fff;
    background-color: #ff0000;
}

.MuiBadge-badge {
    height: 20px;
    display: none;
    padding: 0 6px;
    z-index: 1;
    position: absolute;
    flex-wrap: wrap;
    min-width: 20px;
    box-sizing: border-box;
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    align-items: center;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    line-height: 1;
    align-content: center;
    border-radius: 10px;
    flex-direction: row;
    justify-content: center;
}

.MuiBadge-badge.off {
    top: 45px;
    left: -70px;
    display: flex;
    z-index: 11;
}




.MuiBadge-anchorOriginTopRightRectangle2 {
    top: 0;
    left: 0;
    transform: scale(1) translate(50%, -50%);
    transform-origin: 100% 0%;
}

.MuiBadge-colorPrimary2 {
    color: #fff;
    background-color: #ff0000;
}

.MuiBadge-badge2 {
    height: 20px;
    display: none;
    padding: 0 6px;
    z-index: 1;
    position: absolute;
    flex-wrap: wrap;
    min-width: 20px;
    box-sizing: border-box;
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    align-items: center;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    line-height: 1;
    align-content: center;
    border-radius: 10px;
    flex-direction: row;
    justify-content: center;
}

.MuiBadge-badge2.off {
    top: 45px;
    left: -70px;
    display: flex;
    z-index: 11;
}



.MuiBadge-anchorOriginTopRightRectangle3 {
    top: 0;
    left: 0;
    transform: scale(1) translate(50%, -50%);
    transform-origin: 100% 0%;
}

.MuiBadge-colorPrimary3 {
    color: #fff;
    background-color: #ff4444;
}

.MuiBadge-badge3 {
    height: 20px;
    display: none;
    padding: 0 6px;
    z-index: 1;
    position: absolute;
    flex-wrap: wrap;
    min-width: 20px;
    box-sizing: border-box;
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    align-items: center;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    line-height: 1;
    align-content: center;
    border-radius: 10px;
    flex-direction: row;
    justify-content: center;
}

.MuiBadge-badge3.off {
    top: 15px;
    left: -2px;
    display: flex;
    z-index: 11;
}

#main_video_area {
    width: calc(100% - 350px);
}

#main_video_area.off {
    width: 95%;
    z-index: 9999;
}



header.video .video_btn .chat_leave2 { /* 헤더에 나가기버튼 텍스트 대문자변경 */
    display: block;
    width: 100px;
    height: 30px;
    line-height: 28px;
    background: #ff0000;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Noto Sans KR';
    letter-spacing: 2px;
    transition: .3s;
    text-transform: uppercase; /* 추가 */
}

ul.info_me .info_set > a.info_hand { /* ME : 손들기 */
    cursor: pointer;
}

/* 수정 0526 오후 3:25 ___ START (추가) */
.tts_set {
    width: 27px;
    height: 46px;
    background-image: url(../images/video_tts_on.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    top: 5px;
    left: 62px;
    position: absolute;
    display: block;
    z-index: 10;
    opacity: 0.7;
}

.tts_set.off {
    background-image: url(../images/tts_off.svg);
}
/* 수정 0526 오후 3:25 ___ END (추가) */

header.video {
    z-index: 99999 !important;
}
.wb_btn {
    display: block;
    width: 46px;
    height: 46px;
    background-color: #fff;
    background-image: url(../images/wb_icon.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 80px;
    left: 10px;
    border-radius: 50%;
    line-height: 46px;
    text-align: center;
    z-index: 100000;
    background-color: rgba(20, 22, 23,1);

}
.wb_btn.wb_on {
    background-image: url(../images/wb_icon_close.svg);
}
.wb_wrap {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    /*width: 80%;*/
    top: 68px;
    margin-top: 78px;
    height: 70vh;
    display: flex;
    align-items: center;
    /*background: rgba(204, 204, 255, 0);*/
    /*background: #fff;*/
    /*width: 80vw;*/
    /*background: none;*/
    width: 80vw !important;
    background: none !important;

    margin-top: 10px;
    display: none;
}
.wb_wrap.show {
    display: block;
    /*display: flex !important;*/
    z-index: 100001;
}

.wb_wrap.show.off {
    /*width: calc(80vw - 350px) !important;*/
    /*transform: translate(-80%, 0);*/
    width: 80vw !important; /* .off 붙기 전 초기 값 유지 */
    transform: translate(-50%, 0);/* .off 붙기 전 초기 값 유지 */

    padding-right: 300px; /* 추가 */
}


.wb_wrap.re {
    width: 1200px;
    left: 40%;
}

.if {
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    grid-area: 1 / 1 / 1 / 1;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    box-sizing: border-box;
}
.if iframe {
    width: 100% !important;
    height: 100%;
    width: 65vw;
    background:#eee;
}
.if_hidden1 {
    height: 9vw;
}
.if_hidden2 {
    justify-content: center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.main_video_screen.wb_on {
    top: 720px;
}
.video_info.off {
    right: 0px;
}

#main_video_speak.off {
    display: none;
}


/* 모바일 HOVER 방지용 */
@media (hover: hover) {
    header.video .video_btn .chat_leave2:hover {
        background: #fff;
        color: #111;
    }
    .video_m_list li a.watch:hover {
        background: #111;
    }
    .chat_set > a:hover {                /* 수정 0520 */
        opacity: 1;
    }
    /* 수정 0521 ___ START (추가) */
    .info_btn.off:hover {
        transform: scale(1.2);
        background-color: #090a0a;
    }
    .info_btn.off:hover:after {
        display: none;
        content: "participants";
        position: absolute;
        top: 30%;
        left: -190%;
        color: #eee;
        font-size: 14px;
        text-align: right;
    }
    .chat_btn.off:hover:after {
        display: none;
        content: "chatting";
        left: -140%;
    }
    .video_info .chat_cont .chat_window > a:hover {
        background-color: #141617;
    }
    .file_btn:hover {
        opacity: 1;
    }
    /* 수정 0521 ___ END (추가) */
    /* 수정 0524 ___ START (추가) */

}

.MuiTypography-body1 {
    width: 100%;
    height: 46px;
    line-height: 46px !important;
    text-align: right;
    padding: 0 50px 0 0 !important;
}

p.file_name {
    white-space: nowrap !important;
}



    /* 수정 0524 ___ END (추가) */


.MuiPopover-root {
    z-index: 130001;
}


.tts_set.move {     /* 수정 0527 (속성추가) */
    left: 15px;
}

.fileform {
    height: 86px !important;
}
.file_name {
    white-space: nowrap;
}



.MuiBadge-colorPrimary, .MuiBadge-colorPrimary2 {
    background-color: #ff0000 !important;
}
.MuiBadge-badge.off, .MuiBadge-badge2.off {
    top: 45px !important;
    left: -70px !important;
}

.MuiBadge-badge3.off {
    left: -2px !important;
}
.MuiBadge-colorPrimary3 {
    background-color: #ff4444 !important;
}

.if iframe.half { 
    width: 50vw !important;
    height: 58% !important;
}



/* 0721 비디오화면 수정 시작 */

#main_video_area.off {
    width: 90%;
    z-index: 99999;
    margin: 70px auto 0;
}
#main_video_area {
    width: calc(100% - 410px);
    height: calc(100vh - 90px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 10px;
    box-sizing: border-box;
    margin-top: 70px;
    margin-left: 60px;
}
#main_video_area.speak {
    flex-wrap: nowrap;
}
#main_video_speak {
    width: calc(100% - 350px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.screen {
    width: auto;
}
.screen img {
    width: 100%;
}
.webcam_box {
    width: 330px;
    height: 100%;
    overflow: auto;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    justify-content: center;
    overflow-x: hidden;
    margin-right: 1%;
}
.webcam_box::-webkit-scrollbar { width: 5px; background-color: #eee; }
.webcam_box::-webkit-scrollbar-thumb { background-color: #ff0000; border-radius: 10px; background-clip: padding-box; border: 0px solid transparent; }
.webcam_box::-webkit-scrollbar-track  { background-color: #000; }

.webcam {
    width: auto;
    margin-bottom: 2%;
}
.webcam img {
    width: 100%;
    background: #ccc;
}

/* 0721 비디오화면 수정 끝 */

.MuiGrid-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
}

#main_video_speak .webcam {
    display: block;
    width: 100%;
}

.share_box .screen > div {
    width: 100% !important;
    height: auto !important;
}

/* #main_video_area.focus 포커스모드에서 내가 화면공유했을 때 */

#main_video_area .webcam_box .MuiGrid-root.MuiGrid-item > div:first-child {
    flex-direction: column !important;
    /* margin-bottom: 5px !important; */
}
#main_video_area.wb .webcam_box .MuiGrid-root.MuiGrid-item > div:first-child {
    flex-direction: row !important;
}
#main_video_area.wb .webcam_box .MuiGrid-root.MuiGrid-item > div:first-child {
    flex-direction: row !important;
}
#main_video_area .webcam_box .MuiGrid-root.MuiGrid-item > div:first-child .screen{
    margin-bottom: 5px;
}



/* 나중에 삭제할 것*/
/* #main_video_area {
    background: rgba(0,0,0,0.5);
}
.webcam_box {
    background: rgba(0, 225, 255, 0.5);
}
#main_video_speak {
    background: rgba(237,34,34,.5);
} */

/* 화이트보드열었을때 
 1. 스크립트
 - .wb_btn 눌렀을 때 
    1) 
*/

#main_video_area.wb #main_video_speak {
    display: none;
}
#main_video_area.wb .webcam_box { /* 0806 수정 */
    position: absolute;
    bottom: 20px;
    width: 80vw;
    height: 18vh;
    padding: 0 !important;
}
#main_video_area.wb .webcam_box .MuiGrid-container {
    flex-direction: row;
}
#main_video_area.wb .webcam_box .MuiGrid-container > div {
    margin-right: 10px;
}
#main_video_area.wb .webcam_box .MuiGrid-container > div:last-child {
    margin-right: 0;
}
/* 공유화면 이름 */
.share_box {
    position: relative;
}
.share_box > span {
    display: block;
    padding: 0 10px;
    position: absolute;
    bottom: -30px;
    left: 0;
    z-index: 100;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    color: #333 !important;
    font-weight: bold;
    font-family: 'Noto Sans KR';
}

.enabled {
    font-size: 1em !important;
    padding: 8px 10px !important;
    background: rgba(237,34,34,0.6) !important; /*#ed2222*/
}

.MuiFab-secondary {
    background-color: rgba(237,34,34,0.8) !important;
}
.MuiFab-secondary:hover {
    background-color: rgba(237,34,34,1) !important;
}

.MuiFab-root {
    width: 50px !important;
    height: 50px !important;
    margin: 5px !important;
}
.MuiFab-primary {
    background-color: rgba(6,161,137,0.6) !important; /*#06a189*/
}
.MuiFab-primary:hover {
    background-color: rgba(6,161,137,1) !important;
}
/* 0723 pm 04:28 */

.MuiIconButton-colorSecondary {
    color: #ed2222 !important;
}


/* 0802 */
#main_video_area.wb .webcam_box.show {
    width: calc(100% - 500px);
}