@charset "utf-8";
@font-face {font-family: 'Noto Sans CJK KR';src: url('../font/NotoSansKR-Regular.otf');}
body {margin: 0; padding: 0; font-size: 0.75em; font-family: 'Noto Sans CJK KR'; font-weight: 400; word-break: keep-all; overflow: auto; height: 100vh; min-width: 1920px; }
label, input, button, select, img { vertical-align:middle; }
p{margin: 0}
a{text-decoration: none;}

/** base **/
body.dark-mode{background: #35383E; color: #FFFFFF;}
body.white-mode{background: #FFFFFF; color: #000000;}

.dark-mode a{color: #BBBBBB;}
.white-mode a{color: #202224;}

.dark-mode input{background: #2A2C31; border: solid 1px #202224; color: #FFFFFF}
.white-mode input{background: #FFFFFF; border: solid 1px #202224; color: #000000;}
.dark-mode label{color: #FFFFFF}
.white-mode label{color: #000000;}

.dark-mode .terms-container .terms-box{background: #35383E;}
.white-mode .terms-container .terms-box{background: #e8e8e8;}

/** button **/
.btn{display:inline-block; box-sizing: border-box; height: 46px; border-radius: 4px;}
.btn span{display:flex; align-items: center; justify-content: center; height: 100%; color: #FFFFFF; font-size: 18px;}
.blue{background: #228DFF;}
.gray{background: #595959;}
.purple{background: #7F65E7}

/** paging **/
.paging-inner{display: flex; justify-content: center; margin-top: 20px;}
.paging-inner p{margin-left: 8px; margin-right: 8px;}
.paging-inner .pstarno{color: #228DFF}

/** scroll **/
.scroll{overflow: scroll;}

/** switch **/
.switch{display: inline-block; text-align: center; }
.switch input {position: absolute; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.switch_label {position: relative; cursor: pointer; display: inline-block; width: 58px; height: 28px; background: #3C3737; border: 2px solid #595959; border-radius: 20px; transition: 0.2s;}
.switch_label:hover {background: #3C3737;}
.onf_btn {position: absolute; top: 4px; left: 3px; display: inline-block; width: 20px; height: 20px; border-radius: 20px; background: #BBBBBB; transition: 0.2s;}
.switch input:checked+.switch_label {background: #228DFF; border: 2px solid #228DFF;}
.switch input:checked+.switch_label:hover {background: #228DFF;}
.switch input:checked+.switch_label .onf_btn {left: 34px; background: #fff; box-shadow: 1px 2px 3px #00000020;}

/** Left Menu **/
.left-menu{height: 100vh; width: 86px; position: fixed; top: 0; left: 0; background: #202224; transition: width ease 0.5s 0s;  box-sizing: border-box; padding: 10px; overflow: hidden; z-index: 1000;}
.left-menu:hover{width: 260px;}
.menu-item{display: flex; align-items: center; margin: 10px 0; cursor: pointer;}
.menu-item.on{background: #228DFF; border-radius: 4px;}
.menu-item.expansion2{height: 300px;}


.menu-item img {
    display: inline-block;
}

.menu-item span {display: inline-block; margin-left: 16px; font-size: 20px; min-width: 160px;}

/** Login Form **/
.login-wrap {display: flex; height: 100vh; width: 100vw; align-items: center; justify-content: center;}
.login-container {min-width: 400px; padding: 20px; text-align: center; border-radius: 4px;}
.login-container .title {font-size: 36px; font-weight: 700; margin-top: 30px;}
.login-container .sub-title {font-size: 18px; font-weight: 400; margin: 20px 0;}
.login-container label {font-size: 18px; margin-top: 10px;display: inline-block;text-align: left;width: 80%;}
.login-container .essential:after {content: " *";color: red;}
.login-container input {margin-top: 6px; width: 80%; height: 46px; padding: 8px 6px; border-radius: 4px;}
.login-container .btn {margin: 30px 0; height: 46px; width: 80%; padding: 8px; }
.login-container .error-txt {margin-top: 10px; color: red;}
.login-container .join-txt {display: inline-block; width: 80%; text-align: left; color: #7B8FA1; margin-bottom: 20px;}
.login-wrap .switch{position: absolute; right: 10px; top: 10px;}

/** Terms Form **/
.terms-wrap {display: flex; height: 100vh; width: 100%; align-items: center; justify-content: center;}
.terms-container {min-width: 1072px; padding: 20px; text-align: center; border-radius: 4px;}
.dark-mode .terms-container{background: #2A2C31; }
.terms-container .title {font-size: 32px; font-weight: 700; margin-top: 30px;}
.terms-container label {font-size: 18px; margin-top: 20px;display: inline-block;text-align: left;width: 82%;}
.terms-container .essential:after {content: " (필수)";color: #228DFF;}
.terms-container .terms-box{height: 216px; width: 82%; display: inline-block; margin-top: 10px; text-align: left; padding: 14px;}
.terms-container .btn {margin: 30px 10px; width: 180px; padding: 8px; }

.terms-container .terms-circle-box,
.join-container .terms-circle-box{margin: 18px auto; display: flex; align-items: flex-start; justify-content: center; width: 650px; text-align: center;}
.terms-container .circle,
.join-container .circle{display:inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #595959; background: #595959;}
.terms-container .circle.on,
.join-container .circle.on{border: 2px solid #228DFF; background: #228DFF;}
.dark-mode .terms-container .circle-span,
.dark-mode .join-container .circle-span{font-size: 12px; color: #BBBBBB; margin-top: 4px;}
.white-mode .terms-container .circle-span,
.white-mode .join-container .circle-span{font-size: 12px; color: #2a2a2a; margin-top: 4px;}
.white-mode .circle{color: white;}

.terms-container .circle-span.on,
.join-container .circle-span.on{color: #228DFF;}
.terms-container hr, .join-container hr{display:inline-block; border: none; border-bottom: 3px dotted #595959; width: 36%;     padding-top: 4px;}
.terms-container hr.on, .join-container hr.on {border-bottom: 3px dotted #228DFF; }

/** Join Form **/
.join-wrap {display: flex; height: 100vh; width: 100%; align-items: center; justify-content: center;}
.join-container {min-width: 1072px; padding: 20px; text-align: center; border-radius: 4px;}
.dark-mode .join-container{background: #2A2C31; }
.join-container .title {font-size: 32px; font-weight: 700; margin-top: 30px;}

.join-container .join-form{width: 60%; display: flex; margin: 10px auto; align-items: center; justify-content: space-between;}
.join-container .join-form label{font-size: 18px; float: left;}
.join-container .join-form label.essential:after {content: " *"; color: #228DFF;}
.join-container .join-form input{ height: 46px; background: #35383E; border-radius: 4px;  padding: 10px;}
.join-container .join-form .double-form{display: flex;}
.join-container .join-form .double-form .btn{width: 120px; margin-left: 20px;}
.join-container .btn-wrap{margin: 20px;}
.join-container .btn-wrap .btn {margin: 10px; height: 46px; width: 128px; padding: 8px;}

#companyModal{width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5);}
#companyModal #modalContent {position: absolute; background-color: #202224; width: 700px; height: 480px; padding: 30px;}
#companyModal #modalContent .title{font-size: 20px; font-weight: 700;}
#companyModal #modalContent .table_wrap{height: 350px; margin-top: 20px; overflow: scroll;}
#companyModal #modalContent table{width: 100%; border-collapse: collapse; text-align: center;}
#companyModal #modalContent th{background: #35383E; padding: 4px;}
#companyModal #modalContent td{padding: 4px;}
#companyModal #modalContent tbody tr{cursor: pointer;}
#companyModal #modalContent tbody tr:hover{background: rgba(51, 51, 51)}
#companyModal #modalContent input[type=text]{height: 46px; padding: 0 8px; border-radius: 4px; margin-right: 10px; width: 280px;}
#companyModal #modalContent .search_wrap{display: flex; margin-top: 10px;}
#companyModal #modalContent .search_wrap .btn{height: 44px; width: 70px; background: #35383E}
#companyModal #modalContent .search_wrap .btn span{font-size: 14px;}
#companyModal.hidden {display: none;}



.is-login-wrap{margin-left: 86px; width: calc(100% - 86px); height: 100%; }
.is-login-wrap .top-wrap{border-bottom: solid 1px #595959; background: #2A2C31; padding: 10px 20px; box-sizing: border-box; font-size: 20px;}

/** MAIN MENU **/
.main-wrap{display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center}
.main-wrap .menu{width: 324px; height: 324px; background: #43484E; border-radius: 7px; margin: 20px 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-direction: column;}


/** room list **/
.room-wrap .room-list-wrap{width: 1700px; height: 800px; background: #2A2C31; text-align: center; margin: 20px auto; box-sizing: border-box; padding: 20px;}
.room-wrap .room-list-wrap>p{font-size: 20px; text-align: left; margin-bottom: 30px;}
.room-wrap .room-list-wrap .table_wrap{width: 1200px; margin: auto;}
.room-wrap .room-list-wrap .table_wrap table{width: 100%; border-collapse: collapse; text-align: center; font-size: 18px;}
.room-wrap .room-list-wrap .table_wrap table td{padding: 2px;}
.room-wrap .room-list-wrap .table_wrap table th{padding: 10px; }
.room-wrap .room-list-wrap .table_wrap table tr{border-bottom: 6px solid #2A2C31;}
.room-wrap .room-list-wrap .table_wrap table thead tr{background: #228DFF;}
.room-wrap .room-list-wrap .table_wrap table tbody tr{background: #202224}
.room-wrap .room-list-wrap .table_wrap table tbody tr:hover{background: #0F1012}
.room-wrap .room-list-wrap .table_wrap table tbody .btn.enter{height: 46px; width: 100px; border: 2px solid #228DFF; }
.room-wrap .room-list-wrap .table_wrap table tbody .btn.enter span{color: #228DFF;}

/** setting wrap **/
.setting-wrap .confirm-wrap{width: 1400px; height: calc(100% - 50px); background: #2A2C31; text-align: center; margin: 0 auto; box-sizing: border-box; padding: 20px; min-height: 600px;}
.setting-wrap .confirm-wrap .title{margin-top: 40px; font-size: 32px; font-weight: bold;}
.setting-wrap .confirm-wrap .sub-title{margin-top: 20px; font-size: 18px;}
.setting-wrap .confirm-wrap .confirm_div{width: 540px; height: 240px; margin: 50px auto; border: 1px solid #3C4145; box-sizing: border-box; padding: 30px; background: #202224;}
.setting-wrap .confirm-wrap .confirm_div label{width: 34%; display: block; color: #BBBBBB; font-size: 18px; margin-bottom: 10px;}
.setting-wrap .confirm-wrap .confirm_div input{width: 80%; height: 46px; padding-left: 10px; padding-right: 10px; box-sizing: border-box}
.setting-wrap .confirm-wrap .confirm_div .btn{margin-top: 20px; width: 80%;}

.setting-wrap .confirm-wrap .edit-wrap{margin-top: 60px;}
.setting-wrap .confirm-wrap .edit-wrap .join-form{width: 560px; display: flex; margin: 10px auto; align-items: center; justify-content: space-between;}
.setting-wrap .confirm-wrap .edit-wrap .join-form label{font-size: 18px; float: left;}
.setting-wrap .confirm-wrap .edit-wrap .join-form label.essential:after {content: " *"; color: #228DFF;}
.setting-wrap .confirm-wrap .edit-wrap .join-form input{ height: 46px; background: #35383E; border-radius: 4px;  padding: 10px;box-sizing: border-box; width: 400px;}
.setting-wrap .confirm-wrap .edit-wrap .join-form .double-form{display: flex;}
.setting-wrap .confirm-wrap .edit-wrap .join-form .double-form .btn{width: 120px; margin-left: 20px;}
.setting-wrap .confirm-wrap .edit-wrap .finish-btn-wrap .btn{width: 200px; margin-top: 30px; margin-left: 10px; margin-right: 10px;}

.setting-wrap .manage-wrap{width: 1700px; height: 800px; background: #2A2C31; text-align: center; margin: 20px auto; box-sizing: border-box; padding: 20px 120px;}
.setting-wrap .manage-wrap .search_wrap{display: flex;}
.setting-wrap .manage-wrap .search_wrap input{height: 46px; background: #202224; border-radius: 4px; padding: 10px; box-sizing: border-box; width: 250px; margin-right: 20px;}
.setting-wrap .manage-wrap .search_wrap .btn{width: 100px;}

.setting-wrap .manage-wrap .table_wrap{width: 100%;}
.setting-wrap .manage-wrap .table_wrap table{width: 100%; border-collapse: collapse; text-align: center; margin-top: 20px;}
.setting-wrap .manage-wrap .table_wrap tr{height: 40px; box-sizing: border-box; cursor: pointer;}
.setting-wrap .manage-wrap .table_wrap th{background: #202224; font-size: 14px;}
.setting-wrap .manage-wrap .table_wrap tbody tr{background: #35383E; font-size: 14px;}
.setting-wrap .manage-wrap .table_wrap tbody tr:hover{background: #20222440;}

    /** Call **/
.call-wrap .screen-list-wrap{width: 1200px; height: 110px; margin: 10px auto; position: relative;}
.call-wrap .screen-list-wrap .video-grid{height: 100%; white-space: nowrap; width: 1070px; overflow: hidden; margin: auto; }
.call-wrap .screen-list-wrap .video-grid .video-wrap{height: 100%; position: relative; display: inline-block;}
.call-wrap .screen-list-wrap .video-grid .video-wrap .name-wrap{position: absolute; font-size: 8px; display: flex; left: 16px; background: #00000050; width: 54px; height: 22px; border-radius: 4px; bottom: 4px; align-items: center; justify-content: center;}

.call-wrap .screen-list-wrap .video-grid .video-wrap video{height: 100%; margin: 0 10px;}
.call-wrap .screen-list-wrap .left-arrow{position: absolute; left: 0; top: 42%; cursor: pointer}
.call-wrap .screen-list-wrap .right-arrow{position: absolute; right: 0; top: 42%; cursor: pointer}

.call-wrap .big-screen-wrap{margin: auto;}
.call-wrap .big-screen-wrap .main_screen{width: 100%; height: 100%;}


/** Draw **/
.call-wrap .big-screen-wrap .draw-nav{width: 100vw; position: absolute; top: 0; left: 0; display: none}
.call-wrap .big-screen-wrap .draw-nav canvas{}

.tool-nav { text-align: center; top: 200px; left: 30px; position: fixed; width: 80px; height: 55px; background: white; border-radius: 30px; overflow: hidden; transition: 0.5s;}
.tool-nav.on { height: 300px;}

.color-nav {padding: 0 10px; text-align: center; top: 250px; left: 120px; position: fixed; display: none; width: 0; height: 72px; background: white; border-radius: 4px; overflow: hidden; transition: 0.5s;}
.color-nav.on{width: 180px; display: block;}
.color_circle {width: 30px; height: 30px; border-radius: 50%; border: 2px solid #FFFFFF; margin-top: 3px; margin-bottom: 3px;}
.color_circle.on {border: 2px solid #E5E5E5;}

.border-nav{padding: 8px 10px; text-align: center; top: 330px; left: 120px; position: fixed; display: none; width: 0; height: 70px; background: white; border-radius: 4px; overflow: hidden; transition: 0.5s;}
.border-nav.on{width: 120px;display: block;}
.border_line{margin:0 10px; border: 1px solid #ffffffff;}
.border_line.on{border: 1px solid #64A5E6; background: #CEE5FC;}


.call-wrap .big-screen-wrap .draw-nav .draw-pen {content: url("/img/draw_pen.png"); width: 36px; height: 36px; margin: 10px 10px; box-sizing: border-box;}
.call-wrap .big-screen-wrap .draw-nav .draw-color {content: url("/img/draw_color.png"); width: 36px; height: 36px; margin: 8px 10px; box-sizing: border-box; border: 2px solid rgb(0, 0, 0);}
.call-wrap .big-screen-wrap .draw-nav .draw-border {content: url("/img/draw_border.png"); width: 36px; height: 36px; margin: 8px 10px; box-sizing: border-box;}
.call-wrap .big-screen-wrap .draw-nav .draw-erase {content: url("/img/draw_erase.png"); width: 36px; height: 36px; margin: 8px 10px; box-sizing: border-box;}
.call-wrap .big-screen-wrap .draw-nav .draw-erase-all {content: url("/img/draw_erase_all.png"); width: 36px; height: 36px; margin: 8px 10px; box-sizing: border-box;}




.call-wrap .bottom-wrap{position: fixed; bottom: 0; height: 82px; background: #2A2C31; width: 100%; display: flex; align-items: center; align-content: flex-start; justify-content: center;}
.call-wrap .bottom-wrap img{padding: 0 10px;margin: 0 20px;}

.call-wrap .bottom-wrap img{cursor: pointer;}
.call-wrap .bottom-wrap img.camera{content: url('/img/ico_camera.png');}
.call-wrap .bottom-wrap img.share{content: url('/img/ico_share.png');}
.call-wrap .bottom-wrap img.fullscreen{content: url('/img/ico_full_screen.png');}
.call-wrap .bottom-wrap img.mute-all{content: url('/img/ico_mute_all.png');}
.call-wrap .bottom-wrap img.mute{content: url('/img/ico_mute.png');}
.call-wrap .bottom-wrap img.record{content: url('/img/ico_record.png');}
.call-wrap .bottom-wrap img.invite{content: url('/img/ico_invite.png');}
.call-wrap .bottom-wrap img.exit{content: url('/img/ico_close.png'); width: 52px;}

.call-wrap .bottom-wrap img.camera.on{content: url('/img/ico_camera_on.png');}
.call-wrap .bottom-wrap img.share.on{content: url('/img/ico_share_on.png');}
.call-wrap .bottom-wrap img.fullscreen.on{content: url('/img/ico_full_screen_on.png');}
.call-wrap .bottom-wrap img.mute-all.on{content: url('/img/ico_mute_all_on.png');}
.call-wrap .bottom-wrap img.mute.on{content: url('/img/ico_mute_on.png');}
.call-wrap .bottom-wrap img.record.on{content: url('/img/ico_record_on.png');}

.call-wrap .right-chat-wrap{height: 100vh; width: 86px; position: fixed; top: 0; right: 0; background: #202224; transition: width ease 0.5s 0s; box-sizing: border-box; overflow: hidden; z-index: 1000;}
.call-wrap .right-chat-wrap .img_chat{content: url('/img/ico_chat.png'); margin-top: 20px; margin-left: 26px;}
.call-wrap .right-chat-wrap.on .img_chat{content: url("/img/ico_chat_on.png")}
.call-wrap .right-chat-wrap.on{display: flex; width: 310px; flex-direction: column;}

.call-wrap .right-chat-wrap .div_chat{display: none; }
.call-wrap .right-chat-wrap.on .div_chat{display: inline-block; width: 100%; min-height: 200px; height: 80vh; max-height: 80%; overflow-y: scroll;}

.call-wrap .right-chat-wrap .input-container{display: none; }
.call-wrap .right-chat-wrap.on .input-container{position: relative; display: inline-block; width: 100%; padding: 10px; box-sizing: border-box;}
.call-wrap .right-chat-wrap.on .input-container .input_chat{width: 100%; height: 46px; border-radius: 4px; font-size: 14px; box-sizing: border-box; padding: 10px 40px 10px 50px; }
.call-wrap .right-chat-wrap.on .input-container .input-icon {content: url("/img/ico_chat_send.png"); position: absolute; right: 24px; top: 50%; transform: translateY(-50%);}
.call-wrap .right-chat-wrap.on .input-container .file-div {position: absolute; display: flex; left: 12px; border-radius: 4px 0 0 4px; height: 44px; top: 50%; transform: translateY(-50%); background: #228DFF; width: 44px; align-items: center; justify-content: center;}

.div_chat .chat_item{padding: 14px; position: relative;}
.div_chat .chat_item .img_user{position: absolute;}
.div_chat .chat_item .chat{padding-left: 50px;}
.div_chat .chat_item .chat .chat_name{font-size: 16px;}
.div_chat .chat_item .chat .chat_date{color: #787A7D; font-size: 12px; margin-left: 10px;}
.div_chat .chat_item .chat .chat_msg{font-size: 12px; margin-top: 2px; word-wrap: break-word;}
.div_chat .chat_item .chat .chat_img{width: 100%;}
.div_chat .chat_item .chat .download-box{    padding: 10px; box-sizing: border-box; display: flex; height: 90px; background: #2A2C31; border: 1px solid #43474E; align-items: center; justify-content: space-between;}
.div_chat .chat_item .chat .download-box .back{min-width: 54px; display: flex; background: url(/img/ico_down_back.png); width: 54px; text-align: center; height: 54px; box-sizing: border-box; align-items: center; justify-content: center;}

.div_chat .enter_ment{text-align: center; padding: 6px;}
.full-wrap{margin: 0 auto; display: flex; width: 1300px; justify-content: center; flex-direction: column;}

.small_mute{content: none; margin-right: 4px;}
.small_mute.on{content: url('/img/ico_small_mute.png');}



#contextMenu {position: absolute; display: none; background-color: #20222495; border-radius: 4px; z-index: 200; width: 170px;}
#contextMenu .name-wrap{display: flex; height: 50px; box-sizing: border-box; padding: 10px; align-items: center;}
#contextMenu .name-wrap img{margin-right: 10px;}
#contextMenu ul {list-style: none; padding: 0; margin: 0;}
#contextMenu li {padding: 14px 10px 14px 28px; cursor: pointer;}
#contextMenu li:hover {background-color: #00000095;}


.hidden {
    display: none;
}

#inviteModal{width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5);}
#inviteModal #modalContent {position: absolute; background-color: #202224; width: 700px; height: 480px; padding: 30px;}
#inviteModal #modalContent .title{font-size: 20px; font-weight: 700;}
#inviteModal #modalContent .table_wrap{height: 350px; margin-top: 20px; overflow: scroll;}
#inviteModal #modalContent table{width: 100%; border-collapse: collapse; text-align: center;}
#inviteModal #modalContent th{background: #35383E; padding: 4px;}
#inviteModal #modalContent td{padding: 4px;}
#inviteModal #modalContent tbody tr{cursor: pointer;}
#inviteModal #modalContent tbody tr:hover{background: rgba(51, 51, 51)}
#inviteModal #modalContent input[type=text]{height: 46px; padding: 0 8px; border-radius: 4px; margin-right: 10px; width: 280px;}
#inviteModal #modalContent .search_wrap{display: flex; margin-top: 10px;}
#inviteModal #modalContent .search_wrap .btn{height: 44px; width: 70px; background: #35383E}
#inviteModal #modalContent .search_wrap .btn span{font-size: 14px;}
#inviteModal #modalContent tbody .btn{width: 70px; height: 30px;}
#inviteModal #modalContent tbody .btn span{font-size: 12px}
#inviteModal.hidden {display: none;}


#recSampleModal{width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); z-index: 400;}
#recSampleModal .recContent {position: absolute; background-color: #202224; width: 600px; height: 500px; padding: 30px; z-index: 4000}
#recSampleModal .recContent .title{font-size: 20px; font-weight: 700;}
#recSampleModal .recContent .search_wrap{display: flex; margin-top: 10px;}
#recSampleModal .recContent .search_wrap .btn{height: 44px; width: 70px; background: #35383E}
#recSampleModal .recContent .search_wrap .btn span{font-size: 14px;}
#recSampleModal .recContent tbody .btn{width: 70px; height: 30px;}
#recSampleModal .recContent tbody .btn span{font-size: 12px}
#recSampleModal.hidden {display: none;}


.history-wrap{width: 90%; height: 800px; margin: 20px auto; text-align: center; background: #2A2C31;}
.history-wrap .h-left{    float: left; width: 65%;}
.history-wrap .h-right{    float: right; width: 35%;}
.history-wrap .h-right .div_chat{    text-align: left; display: inline-block; width: 80%; min-height: 200px; margin: 40px 20px; height: 720px; max-height: 80%; padding: 40px; overflow-y: scroll; box-sizing: border-box; background: #202224;}

.manage-wrap .detail-content {width: 80%; margin: auto;}
.manage-wrap .detail-content .title{font-family: Inter; font-size: 24px; font-weight: 700; line-height: 22px; letter-spacing: -0.10000000149011612px; text-align: left;}
.manage-wrap .detail-content table{width: 100%; margin-top: 40px; border-spacing: 0;}
.manage-wrap .detail-content table td{font-family: Inter; font-size: 20px; font-weight: 600; line-height: 22px; letter-spacing: -0.10000000149011612px; }
.manage-wrap .detail-content table td{ gap: 10px; border: solid 1px #43474E; text-align: left; padding: 12px 0 12px 20px;}
.manage-wrap .detail-content table td.m{background: #35383E; text-align: center; padding-left:  0;}


.search-btn {cursor: pointer; margin-left: 10px; margin-bottom: 32px; display: flex; justify-content: center; align-items: center; width: 102px; height: 48px; border-radius: 4px; background: var(--main-color, #228DFF); color: #FFF; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: 22px; letter-spacing: -0.1px;}
.search-in input {width: 338px; padding-left: 10px; padding-right: 10px; border: none; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal;}
.search-in input:focus{outline: none}
.search-in select {width: 90px; background-color: inherit; color: var(--fontcolor, #ABADC2); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; border: none;}
.search-in select:focus {outline: none}
.search-wrap {width: 1200px; margin: 0 auto; display: flex;}
.search-in {display: flex; padding-left: 10px; width: 448px; height: 45px; border-radius: 4px; border: 1px solid var(--stroke, #464A64);}

.wrapper .tableBox{position: relative; top: 20px; left: 70px; width: 1000px; height: 140px; overflow-y: scroll; border-top: 1px solid dodgerblue;     background: #202224;}
.tableData{width: 100%; border-collapse: collapse; text-align: center;}
.tableData thead tr th{position: sticky; top: 0; background: black; color: #FFF;}
.tableData thead tr th,
.tableData tbody tr td{padding: 10px 0; box-sizing: border-box;  word-break: break-all;}
.tableData tbody tr:hover{background: #3e4148; cursor: pointer;}
.tableData tbody tr.on{background: dodgerblue;}