/* font */ /* 나눔스퀘어라운드 웹폰트 v1.11 https://github.com/innks/NanumSquareRound */ @font-face { font-family: "NanumSquareRound"; font-style: normal; font-weight: 300; src: url("../fonts/NanumSquareRoundL.eot"), /* IE9 Compat Modes */ url("../fonts/NanumSquareRoundL.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/NanumSquareRoundL.woff2") format("woff2"), /* Modern Browsers */ url("../fonts/NanumSquareRoundL.woff") format("woff"), /* Modern Browsers */ url("../fonts/NanumSquareRoundL.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: "NanumSquareRound"; font-style: normal; font-weight: 400; src: url("../fonts/NanumSquareRoundR.eot"), /* IE9 Compat Modes */ url("../fonts/NanumSquareRoundR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/NanumSquareRoundR.woff2") format("woff2"), /* Modern Browsers */ url("../fonts/NanumSquareRoundR.woff") format("woff"), /* Modern Browsers */ url("../fonts/NanumSquareRoundR.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: "NanumSquareRound"; font-style: normal; font-weight: 700; src: url("../fonts/NanumSquareRoundB.eot"), /* IE9 Compat Modes */ url("../fonts/NanumSquareRoundB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/NanumSquareRoundB.woff2") format("woff2"), /* Modern Browsers */ url("../fonts/NanumSquareRoundB.woff") format("woff"), /* Modern Browsers */ url("../fonts/NanumSquareRoundB.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: "NanumSquareRound"; font-style: normal; font-weight: 800; src: url("../fonts/NanumSquareRoundEB.eot"), /* IE9 Compat Modes */ url("../fonts/NanumSquareRoundEB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/NanumSquareRoundEB.woff2") format("woff2"), /* Modern Browsers */ url("../fonts/NanumSquareRoundEB.woff") format("woff"), /* Modern Browsers */ url("../fonts/NanumSquareRoundEB.ttf") format("truetype"); /* Safari, Android, iOS */ } /* init */ *{margin:0;padding:0; box-sizing: border-box;} html,body{width:100%; margin: 0 auto;} html{overflow-y:scroll} html body{ font-size:14px; font-family: "NanumSquareRound", sans-serif; line-height: 1; *word-break:break-all; -ms-word-break:break-all; } body,h1,h2,h3,h4,h5,h6,th,td,input,textarea,select,option,a,b{ font-size:14px; font-family: "NanumSquareRound", sans-serif; line-height: 1; } body p{margin:0;padding:0} img,fieldset,iframe{border:0 none} ul,ol,li{list-style:none;margin:0;padding:0;} em,address{font-style:normal} img,input,select,textarea{vertical-align:middle} a{text-decoration:none;cursor:pointer} a:hover{color:#404040;text-decoration:none} button,label{cursor:pointer;_cursor /**/:hand} button *{position:relative} *:focus {outline: none !important; outline-width: 0; box-shadow: none !important;} textarea{overflow:auto} option{padding-right:6px} .input_text, textarea{*margin:-1px 0;padding-right:1px} .input_check, .input_radio{width:13px;height:13px} .blind, legend, caption{text-indent:-9999px;font-size:0;height:0;line-height:0;overflow:hidden} hr{display:none} legend{*width:0} :root legend{font-size:0;line-height:0} caption{*line-height:0} textarea {display: inline-block; flex-direction: column; padding: 2px; margin: 0em; background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); border-width: 1px; border-style: solid; border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); border-image: initial; -webkit-rtl-ordering: logical; white-space: pre-wrap; overflow-wrap: break-word; column-count: initial !important; font: 400 13.3333px Arial; color: -internal-light-dark(black, white); text-align: start; text-rendering: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; -webkit-writing-mode: horizontal-tb !important; resize: auto; appearance: textarea; cursor: text;} textarea:focus{outline:none !important;} button:focus{outline:none !important;} .cls::after {content: ''; clear: both; display: block; } .fl-l {float: left !important; } .fl-r {float: right !important; } .ta-l {text-align: left !important;} .ta-c {text-align: center !important;} .ta-r {text-align: right !important;} .va-t {vertical-align: top !important;} .va-m {vertical-align: middle !important;} .d-none {display: none !important; } .pb-20 {padding-bottom: 20px;} .pb-30 {padding-bottom: 30px;} .mt-15 {margin-top:15px;} .mb-20 {margin-bottom: 20px;} .bt_line {border-bottom:solid 1px #dfdfdf;} .t_line {border-right:solid 1px #dfdfdf;} .bt_line_lt{border-bottom: 1px solid #e0e0e0;} .bdt_line_lt{border-top: 1px solid #e0e0e0;} .lt_line {border-left:solid 1px #dfdfdf;} /* TABLE */ table {width: 100%; white-space: nowrap; border: solid 1px #dfdfdf;} tbody {background: #fff;} thead {background: #fff;} tr:hover {background: #EDF0FF;} th, td {color: #404040; padding: 10px; text-align: center;} td{position: relative;} /* 부트스트랩 재정의 */ .container-fluid {padding: 0;} .container-fluid.student {font-size: 0; vertical-align: top; position: relative; height: 100%;} /* 레이아웃 재정의 */ /* body {min-width: 1280px;} */ .container {width: 100%; max-width: 1280px;} /* .section.teacher {display: flex; justify-content: flex-start; align-items: flex-start; min-width: 1280px;} */ .over-box-y {overflow-x: hidden; overflow-y: auto;} .over-box-y::-webkit-scrollbar {width: 4px;} .over-box-y::-webkit-scrollbar-thumb {background-color: #d2d2d2; border-radius: 2px;} .over-box-y::-webkit-scrollbar-track {background-color: none;} .over-box-x {overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;} /* .over-box-x::-webkit-scrollbar {height: 4px;} .over-box-x::-webkit-scrollbar-thumb {background-color: #d2d2d2; border-radius: 2px;} .over-box-x::-webkit-scrollbar-track {background-color: none;} */ /* #wrap {height: 100vh; height: calc(var(--vh, 1vh) * 100);} */ /* body {height: 100%; min-height: 800px} body [orient="portrait"] {min-height: 800px;} body [orient="landscape"] {min-height: 800px;} */ /* #wrap {overflow: hidden; max-height: 100vh} */ /* 로그인 - 공통 */ .login {width: 100%; height: 100vh; overflow: hidden; background-size: contain; background-position: right bottom; background-repeat: no-repeat;} .login .section {height: 100%;} .login .container {display: table; width: 100%; max-width: 100% !important; height: 100%;} .login .log-box {display: table-cell; margin: 0 auto; padding-left: 160px; vertical-align: middle;} .login .sub-title {margin-top: 20px; font-size: 20px;} .login .sub-title::before {content: ''; display: block; width: 38px; height: 34px; margin-bottom: 16px;} .login .title {display: block; margin-top: 16px; font-size: 64px; font-weight: 700;} .login .custom-form {position: relative; height: 63px; margin-top: 84px;} .login .custom-form input {padding: 14px 8px; background: transparent; font-size: 20px; font-weight: bold; border: none; border-bottom: 2px solid;} .login .custom-form p {position: relative; bottom: -10px; left: 8px; font-size: 14px; color: #ff0000;} .login .btn {width: 100%; max-width: 130px; padding: 14px 0; margin-left: 16px; font-size: 20px; font-weight: 700; line-height: 1; color: #fff; border: 0; border-radius: 25px;} .login .msg {margin-top: 40px; font-size: 18px;} .login .msg::before {content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 4px; vertical-align: middle;} /* 로그인 - 선생님 */ .login.teacher {background-color: #31325a; background-image: url(../images/teacher/bg_login.png); color: #fff;} .login.teacher .sub-title::before {background: url(../images/teacher/ic_login_teacher.png);} .login.teacher .title {color: #fff;} .login.teacher .custom-form input{ border-color: #fff; color: #fff;} .login.teacher .custom-form input::placeholder {color: #ababab;} .login.teacher .btn {background: #ff8800;} .login.teacher .btn:hover {background: #f66300;} .login.teacher .msg {color: #ff8800;} .login.teacher .msg::before {background: url(../images/teacher/ic_alarm_teacher.png) no-repeat;} /* 로그인 - 학생 */ .login.student {background-color: #fec734; background-image: url(../images/student/bg_login.png); color: #404040;} .login.student .sub-title::before {background: url(../images/student/ic_login_student.png);} .login.student .title {color: #404040;} .login.student .custom-form input{border-color: #404040; color: #404040;} .login.student .custom-form input::placeholder {color: #404040;} .login.student .btn {background: #476eff;} .login.student .btn:hover {background: #2755ff;} .login.student .msg {color: #ff0000;} .login.student .msg::before {background: url(../images/student/ic_alarm_teacher.png) no-repeat;} /* 리스트 - 공통 */ .member-list {min-height: 100vh;} /* .member-list .member-list-header {width: 100%; padding: 115px 90px 50px;} */ .member-list .member-list-header {width: 100%; padding: 115px 0 50px;} .member-list .member-list-header h1 {font-size: 50px; font-weight: bold; letter-spacing: -2px;} .member-list .member-list-header .user {margin-top: 16px;} .member-list .member-list-header .user .user-num {font-size: 20px; vertical-align: middle; font-weight: bold;} .member-list .member-list-header .user .user-num::before {content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 14px; vertical-align: middle; background: url(../images/common/ic_profile.png) no-repeat;} .member-list .member-list-header .user .btn {width: 100px; padding: 7px 0; margin-left: 20px; font-size: 14px; font-weight: bold; line-height: 1; border-radius: 31px;} .member-list .member-list-header .join {margin-top: 28px;} .member-list .member-list-header .btn-join {width: 180px; padding: 15px 0; background-color: #ff8800; font-size: 18px; font-weight: bold; color: #fff; border: 0; border-radius: 31px; transition: background-color .1s linear;} .member-list .member-list-header .btn-join:hover {background-color: #f66300;} .member-list .member-list-body .container {margin-top: 70px;} .member-list .member-list-body table {margin-top: 15px; border: 0;} .member-list .member-list-body h2 {font-size: 24px; font-weight: bold; color: #404040;} .member-list .member-list-body table tbody td {border-bottom: 1px solid #f3f3f3;} .member-list .member-list-body table tbody tr:last-child td {border-bottom: 0;} .member-list .member-list-body table th {padding: 20px 0; background: #30325a; font-size: 20px; color: #fff;} .member-list .member-list-body table td {padding:16px 0; font-size: 16px; color: #404040;} .member-list .member-list-body .btn {width: 160px; padding: 11px 0; text-align: center; line-height: 1; color: #476eff; border: solid 1px #476eff; font-size: 16px; border-radius: 31px;} /* 리스트 - 선생님 */ .member-list.teacher .member-list-header {padding: 115px 90px 50px; background-color: #31325a; background-repeat: no-repeat; background-image: url(../images/teacher/bg_list.png); background-position: 100% 10px;} .member-list.teacher .member-list-header {min-width: 1140px; color: #fff;} .member-list.teacher .member-list-header .container {max-width: 100%;} .member-list.teacher .member-list-header .user .btn {color: #fff; border: solid 1px #fff;} .member-list.teacher .member-list-header .user .btn:hover {background-color:#fff; color: #31325a; border-color: transparent;} /* 210507, 배경색 추가 */ .member-list.teacher {background-color: #f3f3f3;} /* 리스트 - 학생 */ .member-list.student {min-width: 1260px; background: #fec734 url(../images/student/bg_list.png) top center no-repeat; background-size: contain;} /* .member-list.student {background: #fec734 url(../images/student/bg_list.png) top center no-repeat; background-size: contain;} */ .member-list.student .member-list-header {color: #31325a;} .member-list.student .member-list-header .user .btn {color: #31325a; border: solid 1px #31325a;} .member-list.student .member-list-header .user .btn:hover {background: #31325a; color: #fff; border-color: transparent;} .member-list.student .member-list-body .container {margin-top: 30px;} .member-list.student .member-list-body table thead th:first-child {overflow: hidden; border-top-left-radius: 10px;} .member-list.student .member-list-body table thead th:last-child {overflow: hidden; border-top-right-radius: 10px;} .member-list.student .member-list-body table tbody tr:last-child td:first-child {overflow: hidden; border-bottom-left-radius: 10px;} .member-list.student .member-list-body table tbody tr:last-child td:last-child {overflow: hidden; border-bottom-right-radius: 10px;} /* 로딩 페이지 - 로티 */ .loading-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.5); text-align: center;} .loading-wrap .loading-box {position: absolute; top: 50%; left: 50%; width: 220px; height: auto; background:transparent; transform: translate(-50%, -50%);} .loading-wrap .loading {width: 100%;} .loading-wrap .loading-box .msg {font-size: 20px; letter-spacing: -2px; color: #fff;} /* 화상방 - 헤더 */ .header-sub {line-height: 40px;; height: 40px; padding: 0 12px; background-color: #1f2366; color: #fff; font-size: 14px; position: relative; top: 0;} .header-sub .btn {width: 80px; padding: 6px 0; font-size: 12px; text-align: center; line-height: 1; border: 1px solid #fff; border-radius: 12px; color: #fff;} .header-sub .btn::before {content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; background: #ff0000; border-radius: 50%; vertical-align: middle;} .header-sub .btn:hover, .header-sub .btn:focus, .header-sub .btn.is-active {background: #fff; color: #31325a;} /* 화상방 - 우측상단 */ .content-right {position:relative;} /* .content-top {display: flex; width: 100%; height: calc(100vh - 330px); min-height: 460px;} */ .content-top {display: flex; width: 100%; height: calc(100vh - 270px); min-height: 460px;} .content-top .tab-content {height: calc(100% - 38px);} /* .canvas-area {width: calc(100% - 288px); background-color: #f1f1f1;} */ /* .canvas-area #tutorial {width: 100%; height: 100%;} */ .canvas-area #tutorial {width: auto; height: 100%;} /* .canvas-area.student {width: 100%; display: inline-block; vertical-align: top; height: calc(100vh - 40px);} */ .canvas-area.student {display: inline-block; vertical-align: top; height: 100%;} /* .canvas-area.student {width:calc(100% - 361px); height: calc(100vh - 40px);} */ /* .canvas-area.student {width:calc(100% - 360px); height: calc(100vh - 40px);} */ /* aside - 선생님(좌우 공통) */ .aside.teacher {position:relative; width: 240px; background: #fbfbfb; border-right: 1px solid #ccc;} .aside.teacher .tab-box .nav {display: flex; justify-content: center; align-items: center; background: #dfdfdf;} .aside.teacher .tab-box .nav li {flex: 1; text-align: center;} .aside.teacher .tab-box .nav li a {display: block; position: relative; width: 100%; padding: 12px 0; font-size: 14px; font-weight: 800; color: #404040; line-height: 1.2;} .aside.teacher .tab-box .nav li a.active::after {content:''; display: block; position: absolute; bottom: 0; width: 100%; height: 5px; background-color: #ff8800;} .aside.teacher.right {height: 100%; border-left: 1px solid #dfdfdf; border-right: 0;} .aside.teacher.right .tab-content > .tab-pane {height: 100%;} .aside.student {width: 300px; border-left: 1px solid #dfdfdf; display: inline-block;} /* 수업자료 불러오기 */ .aside.teacher .btn-load {width: 100%; padding: 18px 0; background: #fff; border: 0; font-size: 16px; font-weight: 800; text-align: center; line-height: 1; color: #ff8800; border-radius: 0;} .aside.teacher .btn-load::before {content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 8px; background: url(../images/teacher/ic_import_nor.png) 50% no-repeat; vertical-align: middle;} .aside.teacher .btn-load:hover {color: #f66300;} .aside.teacher .btn-load:hover::before {background: url(../images/teacher/ic_import_press.png) 50% no-repeat;} /* 수업자료 리스트 */ /* .material-list {overflow: hidden; position: relative; height: calc(100vh - 140px);} */ .material-list {overflow: hidden; position: relative; height: calc(100vh - 100px);} .material-list .title {overflow: hidden; width: 100%; padding: 12px 10px; background: #fbfbfb; border-bottom: 1px solid #dfdfdf; font-size: 14px; text-align: center; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1;} /* .material-list-box { position: relative; height: calc(100% - 40px); padding: 16px 0;} */ .material-list-box { position: relative; height: 100%; padding: 16px 0;} .material-list-box .list {height: 100%; padding: 0 50px; text-align: center;} .material-list-box .list li + li {margin-top: 16px;} .material-list-box .list li .btn {padding: 0; border: 0;} .material-list-box .list li .num {display: block; font-size: 14px; text-align: left; line-height: 1; color: #404040;} .material-list-box .list li .img-box {overflow: hidden; position: relative; max-width: 140px; margin-top: 8px; background: #dfdfdf;} .material-list-box .list li .img {width: 100%; min-width: 140px; height: auto; min-height: 100px;} .material-list-box .list li:hover .num, .tab-content .list li.active .num {color: #ff8800;} .material-list-box .list li:hover .img-box::after, .material-list-box .list li.active .img-box::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #ff8800;} /* 수업자료 로딩 */ .loading-box-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 2;} .loading-box-wrap .loading-box {position: absolute; top: 50%; left: 50%; width: auto; height: auto; background: none; transform: translate(-50%, -50%); z-index: 1;} .loading-box-wrap .loading-box .out-box {overflow: hidden; position:relative; width:100%; height:16px; background:#fff; border:1px solid #dfdfdf; border-radius:10px;} .loading-box-wrap .loading-box .in-box {position:absolute; top: 2px; left:0; width:40px; height:10px; background:#ff8800; border-radius:10px; animation:moveBox 1.5s ease-in-out infinite alternate-reverse;} .loading-box-wrap .loading-box .msg{display: inline-block; margin-top: 8px; font-size: 14px; color: #fff;} @keyframes moveBox { from {left: -30px;} to {left: 60px;} } /* 판서 - 공통/선생님 */ .edit-tool-box {max-width: 60px; border-left: 1px solid #dfdfdf; background: #fff; display: inline-block; vertical-align: top; height: 100%;} .edit-tool-box hr {display: block; width: 35px; margin: 10px auto; border-top: solid 1px #dfdfdf;} .edit-tool-box .edit-tool {display: block; width: 48px; padding: 0; margin: 0; border: 0;} .edit-tool-box .edit-tool + .edit-tool {padding-top: 10px; margin-top: 10px; border-top :1px solid #ccc;} .edit-tool-box .edit-tool > li {position: relative; width: 100%; height: 48px; padding: 4px;} .edit-tool-box .edit-tool > li > .btn {overflow: hidden; position: relative; width: 100%; height: 100%; padding: 0; background-size: contain; background-repeat: no-repeat; background-position: 50%; border: 0; border-radius: 50%;} .edit-tool-box .edit-tool > li.is-active > .btn {background-color: #dfdfdf;;} .edit-tool-box .edit-tool > li > .btn:disabled {opacity: .4;} .edit-tool-box .edit-tool .edit01 {background-image: url(../images/edit/ic_draw_teacher_board.png);} .edit-tool-box .edit-tool .edit02 {background-image: url(../images/edit/ic_draw_student_pencil.png);} .edit-tool-box .edit-tool .edit03 {background-image: url(../images/edit/ic_draw_teacher_marker.png);} .edit-tool-box .edit-tool .edit04 {background-image: url(../images/edit/ic_draw_teacher_text.png);} .edit-tool-box .edit-tool .edit05 {background-image: url(../images/edit/ic_draw_teacher_eraser.png);} .edit-tool-box .edit-tool .edit0501 {background-image: url(../images/edit/ic_draw_teacher_eraserall.png);} .edit-tool-box .edit-tool .edit06 {background-image: url(../images/edit/ic_draw_teacher_magnifier.png);} .edit-tool-box .edit-tool .edit-tool-other .edit0601 {background-image: url(../images/edit/ic_draw_teacher_magnifier_m.png); background-size: 24px 24px;} .edit-tool-box .edit-tool .edit-tool-other .edit0602 { background-image: url(../images/edit/ic_draw_teacher_magnifier_p.png); background-size: 24px 24px;} .edit-tool-box .edit-tool .edit07 {background-image: url(../images/edit/ic_draw_teacher_move.png);} .edit-tool-box .edit-tool .edit08 {background-image: url(../images/edit/ic_draw_teacher_thickness.png);} .edit-tool-box .edit-tool .edit09 {background-image: url(../images/edit/ic_draw_teacher_palette.png);} .edit-tool-box .edit-tool-other {display: none; position: absolute; top: 0; right: 49px; width: auto; height: 100%; box-shadow: 0 0 5px rgba(0,0,0,.2) !important;} .edit-tool-box .edit-tool-other .btn {width: 48px; height: 48px; padding: 0; background-color: #fbfbfb; background-position: 50%; background-repeat: no-repeat; border: none; border-radius: 0;} .edit-tool-box li.is-active .edit-tool-other {display: flex; justify-content: flex-end; background-color: #fbfbfb; } .edit-tool-box li.is-active .edit-tool-other .lange-box {width: 100%; display: flex; align-items: center; padding: 20px 16px;} .edit-tool-box li.is-active .edit-tool-other #slider {width: 60px; height: 6px; margin: 0 10px;} .edit-tool-box li.is-active .edit-tool-other .lange-box .btn {width: 20px; height: 20px; background-position: 50%; background-repeat: no-repeat;} .edit-tool-box li.is-active .edit-tool-other .lange-box #decrease {background-image: url(../images/edit/ic_draw_student_thickness_m.png);} .edit-tool-box li.is-active .edit-tool-other .lange-box #increase {background-image: url(../images/edit/ic_draw_student_thickness_p.png);} .edit-tool-box li.is-active .edit-tool-other .btn:focus{box-shadow: 0 0 5px rgba(0,0,0,.2);} .edit-tool-box li.is-active .edit-tool-other .lange-box .ui-slider-horizontal .ui-slider-handle {top: -2px; width: 10px; height: 10px; background: #476eff; border: 0; border-radius: 50%; box-shadow: 0 0 2px 0 rgb(0 0 0 / 50%);} .edit-tool-box li.is-active .edit-tool-other .lange-box .ui-widget.ui-widget-content {background-color: #dfdfdf; border: 0;} .edit-tool-box li.is-active .edit-tool-other.color {width: 120px; height:auto; padding: 5px 9px; flex-wrap: wrap; justify-content: flex-start;} .edit-tool-box li.is-active .edit-tool-other.color li {margin: 4px;} .edit-tool-box li.is-active .edit-tool-other.color .btn-color {overflow: hidden; padding: 0; width: 12px; height: 12px; border: 0; border-radius: 50%; vertical-align: middle;} .edit-tool-box li.is-active .edit-tool-other.color .color01 {background-color: #ff0000;} .edit-tool-box li.is-active .edit-tool-other.color .color02 {background-color: #ff9c00;} .edit-tool-box li.is-active .edit-tool-other.color .color03 {background-color: #fff200;} .edit-tool-box li.is-active .edit-tool-other.color .color04 {background-color: #00a651;} .edit-tool-box li.is-active .edit-tool-other.color .color05 {background-color: #0060ff;} .edit-tool-box li.is-active .edit-tool-other.color .color06 {background-color: #2e3192;} .edit-tool-box li.is-active .edit-tool-other.color .color07 {background-color: #ec008c;} .edit-tool-box li.is-active .edit-tool-other.color .color08 {background-color: #ffffff; border: 1px solid #707070;} .edit-tool-box li.is-active .edit-tool-other.color .color09 {background-color: #000000; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.5);} .edit-tool-box .change-color {position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: inline-block; width: 8px; height: 8px; background-color: #0060ff; border-radius: 50%;} /* 판서 - 학생 */ .edit-tool-box.student {height: 100vh} .edit-tool-box.student .edit-tool {width: 60px;} .edit-tool-box.student .edit-tool-other {right: 62px;} .edit-tool-box.student .edit-tool-other .btn {width: 60px; height: 60px;} .edit-tool-box.student .edit-tool > li {width: 100%; height: 60px; padding: 5px;} .edit-tool-box.student .edit-tool > li .btn {width: 50px; height: 50px; background-repeat: no-repeat; padding: 0;} .edit-tool-box.student .edit-tool > li .btn.edit01 {background-image: url(../images/edit/ic_draw_board.png);} .edit-tool-box.student .edit-tool > li .btn.edit02 {background-image: url(../images/edit/ic_draw_pencil.png);} .edit-tool-box.student .edit-tool > li .btn.edit03 {background-image: url(../images/edit/ic_draw_marker.png);} .edit-tool-box.student .edit-tool > li .btn.edit04 {background-image: url(../images/edit/ic_draw_text.png);} .edit-tool-box.student .edit-tool > li .btn.edit05 {background-image: url(../images/edit/ic_draw_eraser.png);} .edit-tool-box.student .edit-tool > li .btn.edit0501 {background-image: url(../images/edit/ic_draw_student_eraserall.png);} .edit-tool-box.student .edit-tool > li .btn.edit06 {background-image: url(../images/edit/ic_draw_magnifier.png);} .edit-tool-box.student .edit-tool > li .btn.edit0601 {background-image: url(../images/edit/ic_draw_student_thickness_p.png);} .edit-tool-box.student .edit-tool > li .btn.edit0602 {background-image: url(../images/edit/ic_draw_student_thickness_m.png);} .edit-tool-box.student .edit-tool > li .btn.edit07 {background-image: url(../images/edit/ic_draw_move.png);} .edit-tool-box.student .edit-tool > li .btn.edit08 {background-image: url(../images/edit/ic_draw_thickness.png);} .edit-tool-box.student .edit-tool > li .btn.edit09 {background-image: url(../images/edit/ic_draw_palette.png);} .edit-tool-box.student .edit-tool > li.is-active .edit-tool-other .btn {width: 60px; height: 60px;} .edit-tool-box.student .edit-tool li.is-active .edit-tool-other .lange-box .btn {width: 20px; height: 20px;} .edit-tool-box.student .edit-tool li.is-active .edit-tool-other.color li {height: 18px; margin: 6px;} .edit-tool-box.student .edit-tool li.is-active .edit-tool-other.color {width: 178px; padding: 5px 14px;} .edit-tool-box.student .edit-tool li.is-active .edit-tool-other.color .btn-color {width: 18px; height: 18px; vertical-align: middle;} .edit-tool-box.student .edit-tool .change-color {top: 6px; width: 9px; height: 9px;} /* 화상영역 - 공통 */ .screen-box {overflow-x: auto; width: 100%; padding: 4px 7px 5px; background: #fbfbfb; border-top: 1px solid #dfdfdf; box-sizing: border-box;} .screen-box ul {display: flex; justify-content: flex-start; flex-wrap: wrap; margin: -5px;} .screen-box li {overflow: hidden; position: relative; width: calc((100% / 5) - 10px); height: 128px; margin: 3px 5px; background: #f3f3f3 url(../images/common/cam_bg_profile.png) bottom center no-repeat;} .screen-box li .screen {display: flex; overflow: hidden; justify-content: center; align-items: center;} .screen-box li .screen img {width: auto; height: 100%;} .screen-box li .sub-screen-item-box {display: flex; justify-content: center; height: 100%; background-color: rgba(0,0,0,.9);} .screen-box li .sub-screen-item {overflow: hidden; position: relative; width: 178px; max-width: 178px; min-width: 178px; height: 100%; min-height: 128px;} .screen-box li .sub-screen-item:hover::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #31325a;} .screen-box li .sub-screen-item .btn-icon-close {display: none; position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; padding: 5px; background-image: url(../images/common/ic_cam_close.png); background-color: transparent; border: 0; z-index: 1;} .screen-box li:hover .sub-screen-item .btn-icon-close {display: block;} .screen-box li .sub-screen_bg {display: flex; justify-content: space-between; align-items: center; position:absolute; bottom: 0; width: 100%; height: 30px; padding: 0 8px; background-color: rgba(0,0,0,.7);} .screen-box li .sub-screen_bg .name {max-width: 70px; overflow: hidden; font-size: 12px; color: #fff; white-space: nowrap; text-overflow: ellipsis;} .screen-box li .sub-screen_bg .btn-area {position: relative; margin-left: 6px; z-index: 1;} .screen-box li .sub-screen_bg .btn-area button {width: 14px; height: 14px; background-color: transparent; background-repeat: no-repeat; background-position: 50%; vertical-align: middle; border: 0;} .screen-box li .sub-screen_bg .btn-area button:disabled {opacity: .4;} .screen-box li .sub-screen_bg .btn-area button + button {margin-left: 6px;} .screen-box li .sub-screen_bg .btn-area button {opacity: .4;} .screen-box li .sub-screen_bg .btn-area button.active {opacity: 1;} .screen-box li .sub-screen_bg .btn-area .thumb-camera {background-image: url(../images/common/ic_cam_cam_m.png);} .screen-box li .sub-screen_bg .btn-area .thumb-mic {background-image: url(../images/common/ic_cam_mike_m.png);} .screen-box li .sub-screen_bg .btn-area .thumb-mic {background-image: url(../images/common/ic_cam_mike_m.png);} .screen-box li .sub-screen_bg .thumb-pen {background-image: url(../images/common/ic_cam_pencil_m.png);} .screen-box li .sub-screen_bg .btn-presenter {width: 14px; height: 14px; padding: 0; background: url(../images/teacher/ic_cam_crown_dis.png) no-repeat; z-index: 1;} .screen-box li .sub-screen_bg .btn-presenter.active {background: url(../images/teacher/ic_cam_crown.png) no-repeat;} /* 화상영역 - 선생님 */ .screen-box.teacher {padding: 5px;} .screen-box.teacher ul {min-width: 940px;} .screen-box.teacher li {min-width: 178px;} /* 화상영역 - 학생 */ .screen-box.student {position: relative; width: 300px; padding: 0; border: 0;} .screen-box.student ul {display: block; padding: 10px 20px; margin: 0;} .screen-box.student li {width: 100%; height: 186px; margin: 0;} .screen-box.student li + li{margin-top: 8px;} .screen-box.student li.half {display: inline-block; width: 125px; height: 90px;} .screen-box.student li.half + li.half {margin-left: 6px;} .screen-box.student li.half .sub-screen_bg {height: 17px;} .screen-box.student li.half .sub-screen_bg .name {font-size: 8px;} .screen-box.student li.half .sub-screen_bg .btn-area button {width: 8px; height: 8px;} .screen-box.student li.half .sub-screen_bg .btn-area {margin-left: 4px;} .screen-box.student li.half .sub-screen_bg .btn-area button + button {margin-left: 2px;} .screen-box.student li.half .sub-screen_bg .btn-area .thumb-camera {background-image: url(../images/student/ic_cam_cam_s.png);} .screen-box.student li.half .sub-screen_bg .btn-area .thumb-mic {background-image: url(../images/student/ic_cam_mike_s.png);} .screen-box.student li.half .sub-screen_bg .btn-area .thumb-pen {background-image: url(../images/student/ic_cam_pencil_s.png);} /* 채팅 - 공통 */ .chat-wrap .sidebar {background-color: #fff; border-top: 1px solid #dfdfdf;} .chat-wrap .sidebar .btn-group.dropup .side-select-toggle {display: block; position: relative; width: 100%; height: auto; padding: 12px 9px; background-color: #fff; font-size: 14px; font-weight: bold; text-align: left; line-height: 1.2; color: #ababab; border: 0;} .chat-wrap .sidebar .btn-group.dropup .side-select-toggle::before {content: ""; display: block; position: absolute; top: 50%; right: 10px; width: 16px; height: 10px; background-image: url(../images/common/dropdown.png); background-repeat: no-repeat; transform: translateY(-50%);} .chat-wrap .sidebar .btn-group.dropup .side-select-toggle::after {content: ""; display: inline-block; position: absolute; top: 0; right: 44px; height: 100%; border: 0; border-left: 1px solid #e0e0e0;} /* .chat-wrap .sidebar .btn-group.dropup.show .side-select-toggle {background: url(../images/common/dropup.png) 211px 50% no-repeat;} */ .chat-wrap .sidebar .btn-group.dropup.show .side-select-toggle::before {background-image: url(../images/common/dropup.png)} .chat-wrap .sidebar .side-select-toggle + .dropdown-menu {top: -2px; left: 4px !important; width: 100%; padding: 0; margin: 0; margin-top: -2px; background-color: #fff; border: 1px solid #dfdfdf; border-radius: 0; font-size: 15px; color: #404040; text-align: left; list-style: none; box-shadow: 0 0 4px #dfdfdf; z-index: 1;} .chat-wrap .sidebar .side-select-toggle + .dropdown-menu .dropdown-item {display: block; width: 100%; padding: 9px 16px; background-color: transparent; font-size: 14px; font-weight: 400; color: #797979; text-align: inherit; white-space: nowrap; border: 0;} .chat-wrap .sidebar .btn-group.dropup .side-select-toggle::after {right: 39px;} .chat-wrap .sidebar .btn-group {display: block; width: 100%; text-align: left;} .chat-wrap .chat-box > * + * {margin-top: 10px;} .chat-wrap .chat-join {display: block; padding: 10px 20px; margin-left: auto; margin-right: auto; text-align: center; border-bottom: 15px; border: 1px solid transparent; border-radius: 18px;} .chat-wrap .chat-join strong {font-weight: 900;} .chat-wrap .chat-text {margin-top: 20px;} .chat-wrap .chat-text .text-box {display: flex; align-items: flex-end; flex-wrap: wrap;} .chat-wrap .chat-text .text-box > * + * {margin-left: 6px;} .chat-wrap .chat-text.left .text-box {justify-content: flex-start;} .chat-wrap .chat-text.right .text-box {justify-content: flex-end;} .chat-wrap .chat-text .name {display: block; width: 100%; font-size: 14px; font-weight: 900; color: #404040;} .chat-wrap .chat-data {font-size: 10px; color: #ababab;} .chat-wrap .text-box .text {position: relative; width: auto; max-width: 150px; padding: 12px; margin-top: 8px; border-radius: 15px; font-weight: bold; line-height: 20px; word-break: break-all;} .chat-wrap .chat-text .name + .text-box {margin-top: 8px;} .chat-wrap .chat-text.left .text-box .text {background-color: #f3f3f3; color: #404040;} .chat-wrap .chat-text.left .text-box .text::after {content: ''; position: absolute; top: -10px; left: 20px; width: 13px; height: 12px; background-image: url(../images/common/chat_triangle_grey.png);} .chat-wrap .chat-text.right .text-box .text {color: #fff;} .chat-wrap .chat-text.right .text-box .text::after {content: ''; position: absolute; top: -10px; right: 20px; width: 13px; height: 12px; } .chat-wrap .textarea::placeholder {color: #ababab;} /* 채팅 - 선생님 */ .chat-wrap.teacher {width: 100%; height: calc(100vh - 120px); border-top:1px solid #dfdfdf;} /* .chat-wrap.teacher {height: 100%;} */ .chat-wrap.teacher .chat-box {height: calc(100% - 81px); padding: 20px 10px;} .chat-wrap.teacher .chat-join {max-width: 220px; font-size: 14px; color: #ff8800; border-color: #ff8800;} .chat-wrap.teacher .chat-text.right .text-box .text {background-color: #ff8800;} .chat-wrap.teacher .chat-text.right .text-box .text::after {background-image: url(../images/teacher/chat_triangle_orange.png);} .chat-wrap.teacher .chat_textarea {display: flex; justify-content: flex-start; align-items: center; position: relative; height: 40px;} .chat-wrap.teacher .textarea {width: 100%; height: 100%; padding: 12px 9px; text-align: left; border-top: 1px solid #dfdfdf; border-left: 0; border-bottom: 0; font-size: 14px; line-height: 20px; color: #404040; resize: none;} .chat-wrap.teacher .btn {position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; padding: 0; background-color: #476eff; border: 0; border-radius: 0; background-image: url(../images/teacher/btn_chatroom_teacher_send_nor.png);} .chat-wrap.teacher .btn:hover {background-image: url(../images/teacher/btn_chatroom_teacher_send_press.png);} /* 채팅 - 학생 */ /* .chat-wrap.student {width: 300px; height: calc(100vh - 440px); border-top:1px solid #dfdfdf;} */ .chat-wrap.student {width: 300px; border-top:1px solid #dfdfdf; position: relative;} .chat-wrap.student.type2 {height: calc(100vh - 347px);} .chat-wrap.student .chat-box {height: calc(100% - 60px); padding: 20px 16px;} .chat-wrap.student .chat-join {max-width: 220px; font-size: 16px; color: #476eff; border-color:#476eff;} .chat-wrap.student .chat-text.right .text-box .text {background-color: #476eff;} .chat-wrap.student .chat-text.right .text-box .text::after {background-image: url(../images/student/chat_triangle_blue.png);} .chat-wrap.student .chat_textarea {position: absolute; bottom: 0; width: 100%; display: flex; justify-content: flex-start; align-items: center; position: relative; height: 60px;} .chat-wrap.student .textarea {width: calc(100% - 90px); height: 100%; padding: 20px 16px; text-align: left; border-top: 1px solid #dfdfdf; border-left: 0; border-bottom: 0; font-size: 16px; line-height: 24px; color: #404040; resize: none;} .chat-wrap.student .btn {position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; padding: 0; background-color: #476eff; border: 0; border-radius: 0; background-image: url(../images/student/btn_chatroom_student_send_nor.png);} .chat-wrap.student .btn:hover {background-image: url(../images/student/btn_chatroom_student_send_press.png);} /* 모달 재정의 */ .modal-open {padding-right: 0 !important; position: fixed; height: 100%;} .modal-open .modal {padding-right: 0 !important;} .std-plan-modal {min-width: 760px;} .std-plan-modal .modal-content {border: 0; border-radius: 0;} .std-plan-modal .modal-header {display: block; width: 100%; height: 50px; padding: 16px 24px; background-color: #1f2366; border: 0; border-radius: 0;} .std-plan-modal .modal-header .modal-title {margin-bottom: 0; font-size: 18px; line-height: 1; color: #fff;} .std-plan-modal .modal-header .close {float: right; padding: 0; margin: 0; font-size: 1rem; font-weight: 700; line-height: .6; color: #000; text-shadow: 0 1px 0 #fff; opacity: .9;} .std-plan-modal .modal-header .close img {width: 20px; height: 19px;} /* .std-plan-modal .modal-body {overflow-y: auto; width: 100%; height: 100%; padding: 30px 25px; background-color: #f0f1f6; color: #404040;} */ .std-plan-modal .modal-body {overflow-y: auto; width: 100%; padding: 30px 25px; background-color: #f0f1f6; color: #404040;} .std-plan-modal .modal-body::-webkit-scrollbar {width: 4px;} .std-plan-modal .modal-body::-webkit-scrollbar-thumb {height: 109px; background-color: #d2d2d2; border-radius: 2px;} .std-plan-modal .modal-body::-webkit-scrollbar-track {background-color: #f0f1f6;} .std-plan-modal .modal-body .list-title {display: inline-block; padding-bottom: 15px; margin-bottom: 0; font-size: 18px; font-weight: 700; color: #404040;} .std-plan-modal .btn-import, .std-plan-modal .btn-export {width: 140px; height: 40px; background-color: #476eff; border: 0; border-radius: 5px; font-size: 16px; color: #fff;} /* 수업자료 - 에러 */ .modal.error .modal-dialog {max-width: 500px; min-width: auto;} .modal.error .title-box > p {font-size: 18px; font-weight: bold; color: #404040; text-align: center;} .modal.error .modal-body {padding: 50px 0 30px;} .modal.error .btn-area {margin-top: 50px; text-align: center;} /* 모달 - 디바이스체크 */ .device-check .title-box .list-title {padding-bottom: 0;} .device-check .title-box p {display: inline-block; margin-left: 10px; color: #2755ff;} .device-check .device-check-dl {margin-top: 12px; margin-bottom: 20px; background: #fff; border: 1px solid #dfdfdf; border-bottom: 0;} .device-check .device-check-dl > div {display: table; width: 100%;} .device-check .device-check-dl dt, .device-check .device-check-dl dd {display: table-cell; width: calc(100% - 90px); border-bottom: 1px solid #dfdfdf;} .device-check .device-check-dl dt {width: 90px; background: #fbfbfb; border-right: 1px solid #dfdfdf; font-size: 16px; text-align: center; color:#404040; vertical-align: middle;} .device-check .device-check-dl dd {padding: 13px 16px;} .device-check .screen-item {overflow: hidden; display: inline-block; width: 180px; height: 112px; margin-top: 10px; background: #f3f3f6 url(../images/common/cam_bg_profile.png) center bottom no-repeat;} .device-check .msg {margin-top: 10px; font-size: 14px;} .device-check .msg .false {color: #ff0000;} .device-check .msg .false::before {content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 6px; background: url(../images/common/ic_popup_no.png); vertical-align: middle;} .device-check .msg .success {color: #476eff; margin-right: 6px;} .device-check .msg .success::before {content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 6px; background: url(../images/common/ic_popup_ok.png); vertical-align: middle;} .device-check .progress-box {width: 414px; margin-top: 10px;} .device-check .progress-box input[type=range] {overflow: hidden; -webkit-appearance: none; width: 100%; height: 10px; background: #e5e4e3; border-radius: 0; cursor: pointer;} .device-check .progress-box input[type=range]:focus {outline: none;} .device-check .progress-box input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; width: 10px; height: 10px; background: #fff; border: 0.1px solid dodgerblue; box-shadow: -100vw 0 0 100vw dodgerblue; cursor: pointer;} .device-check .progress-box input[type=range]:disabled::-webkit-slider-thumb {border: 0.1px solid #bdbdbd; box-shadow: -100vw 0 0 100vw #bdbdbd;} .device-check .circle {overflow: hidden; display: inline-block; position: relative; width: 32px; height: 32px; margin-left: 10px; background: #bbe6ff; border-radius: 50%; vertical-align: middle;} .device-check .circle::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 17px; background: url(../images/common/ic_miketest.png);} .device-check .circle .wave {position: relative; width: 100%; height: 100%;} .device-check .circle .wave::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/common/ic_miketest_wave.png) no-repeat; background-position: 0% bottom ; animation: animate 3s infinite; animation-timing-function: 3s;} @keyframes animate { 0% {background-position: 0% bottom;} 100% {background-position: 50% bottom;} 100% {background-position: 100% bottom;} } .device-check .circle.disabled {background: #ababab;} .device-check .circle.disabled::after{content: none;} .device-check .select-lg {position: relative; width: 414px; font-size: 14px; color: rgba(64, 64, 64, 0.7);} .device-check .select-lg.show .side-select-toggle {background: url(../images/common/dropup.png) 387px 50% no-repeat;} .device-check .side-select-toggle {display: block; width: 100%; height: 32px; padding: 8px; background: #fff url(../images/common/dropdown.png) 387px 50% no-repeat; border: 1px solid #dfdfdf; font-size: 14px; font-weight: bold; color: rgba(64, 64, 64, 0.7);} .device-check .side-select-toggle + .dropdown-menu {width: 414px;} .device-check .side-select-toggle + .dropdown-menu {top: -2px; width: 100%; padding: 0; margin: 0; margin-top: -1px; background-color: #fff; background-clip: padding-box; border: 1px solid #dfdfdf; border-radius: 0; font-size: 15px; color: #404040; text-align: left; list-style: none; z-index: 1; box-shadow: none;} .device-check .side-select-toggle + .dropdown-menu .dropdown-item {display: block; width: 100%; padding: 9px 16px; background-color: transparent; border: 0; font-size: 14px; font-weight: 400; color: #797979; text-align: inherit; white-space: nowrap;} .device-check .info-line {padding-top: 11px; font-size: 14px; line-height: 20px; color: #797979;} .device-check .toggle-title::after {content: ""; display: inline-block; position: absolute; top: 0; right: 35px; height: 100%; border-left: 1px solid #e0e0e0;} .device-check .volume {overflow: hidden; position: relative; width: 32px; height: 32px; background-color: #e5e5e5; border-radius: 100%;} .device-check .volume .gauge {position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to bottom,rgba(0,150,255,0),#1f2366);} .device-check .volume .icoMic{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(/images/global-mic-white.svg) center no-repeat; background-size: 50%;} /* 모달 - 수업자료 */ .material-modal .modal-dialog {max-width: 550px; min-width: auto;} .material-modal .btn-area {margin-top: 20px; text-align: center;} .material-modal .btn-area .btn:disabled, .material-modal .btn-area .btn:hover:disabled {background-color: #ababab; color: #fff} .material-modal .btn-area .btn {background-color: #2755ff; color: #fff;} /* 모달 수업자료 네비게이션 */ .material-modal .material-nav ul {display: flex; justify-content: flex-start; align-items: center;} .material-modal .material-nav li {background: transparent;} .material-modal .material-nav li button {display: inline-block; position: relative; padding-bottom: 15px; margin-bottom: 0; border: 0; font-size: 18px; font-weight: 700; color: #404040; background: transparent;} .material-modal .material-nav li button::after {content: ">"; display: inline-block; margin-left: 6px; vertical-align: middle;} .material-modal .material-nav li:last-child button::after {display: none;} .material-modal .material-nav li + li {margin-left: 6px;} .material-modal .material-wrap .list-box { border: 1px solid #dfdfdf;} .material-modal .material-wrap .list-box ul {height: 300px;} .material-modal .material-wrap .list-box ul > li button {display: block; width: 100%; padding: 5px 6px 5px 10px; background-color: #fbfbfb; border: 0; border-radius: 0; font-size: 14px; font-weight: bold; color: #797979; line-height: 1; text-decoration: none; text-align: left;} .material-modal .material-wrap .list-box ul > li .folder::before {content: ""; display: inline-block; width: 40px; height: 40px; margin-right: 10px; background: url(../images/teacher/ic_folder.png) 50% 50% no-repeat; vertical-align: middle;} .material-modal .material-wrap .list-box ul > li .file::before {content: ""; display: inline-block; width: 40px; height: 40px; margin-right: 10px; background: url(../images/teacher/ic_doc.png) 50% 50% no-repeat; vertical-align: middle;} .material-modal .material-wrap .list-box ul > li.active .file {color: #476eff;} .material-modal .material-wrap .list-box ul > li.active .file::before {background: url(../images/teacher/ic_doc_active.png) 50% 50% no-repeat;} .material-modal .material-wrap .list-box ul > li {border-bottom: 1px solid #dfdfdf;} .material-modal .material-wrap .list-box ul > li:last-child {border-bottom: none;} .material-modal .material-wrap .list-box .list-back {display: block; width: 100%; padding: 5px 6px 5px 10px; background-color: #fbfbfb; border: 0; border-bottom: 1px solid #dfdfdf; border-radius: 0; font-size: 14px; font-weight: bold; color: #797979; line-height: 1; text-align: left; text-decoration: none;} .material-modal .material-wrap .list-box .list-back::before {content: ""; display: inline-block; width: 40px; height: 40px; margin-right: 10px; background: url(../images/teacher/ic_arrow.png) 50% 50% no-repeat; vertical-align: middle;} /* 210322, 톡톡라이브 */ .member-list.live-talk{background: #fec734 url(../images/student/bg_list.png) top center no-repeat;} .member-list.live-talk .member-list-body {position: relative;} .member-list.live-talk .member-list-body::after {content: ''; position: fixed; bottom: 36px; left: -84px; width: 210px; height: 190px; background-image: url(../images/livetalktalk/img_monster_2.png); animation-name: monster01; animation-duration:2s; animation-duration: leaner; animation-iteration-count:infinite ; animation-direction:alternate; animation-fill-mode: forwards;} @-webkit-keyframes monster01 { 0% {bottom: 36px;} 100% {bottom: 200px;} } .member-list.live-talk .member-list-body .container {position: relative;} .member-list.live-talk .member-list-body .container::before {content: ''; position: absolute; right: 0; transform: translateY(-50%); width: 172px; height: 148px; background-image: url(../images/livetalktalk/img_monster_1.png); z-index: 1; animation-name: monster02; animation-duration: 3s; animation-duration: leaner; animation-iteration-count: 1; animation-direction:alternate; animation-fill-mode: forwards;} @-webkit-keyframes monster02 { 0% {top: -300px;} 100% {top: 220px;} } /* 20210503 톡톡라이브 전용 */ .member-list.live-talk .member-list-body table {overflow: hidden; position: relative; width: calc(100% - 160px); margin:0 auto; border-radius: 10px; z-index: 2;} .section.teacher.live-talk .aside.teacher{width: 18.75vw;} .section.teacher.live-talk .canvas-area{width: calc(100% - 18.75vw - 49px);} /* 20210420 고도화 추가 */ /* 재정의 */ .section.teacher { /* min-width: auto; */ /* min-width: auto; */ height: 100%; width: 100%; /* height: 100vh; */ overflow: hidden; position: relative; } .chat-wrap .text-box .text {border: 0;} .quick-menu {display: inline-block; position: absolute; top: 0; left: 0; width: 48px; height: 100vh; background-color: #fbfbfb; padding: 4px; z-index: 999; border-right: 1px solid #dfdfdf; } .quick-menu ul li .btn {width: 40px; height: 40px;} .quick-menu ul li .btn.btn-quick01 {background-image: url(../images/teacher/ico_nav_facecam_nor.png);} .quick-menu ul li .btn.btn-quick01:hover, .quick-menu ul li .btn.btn-quick01.active {background-image: url(../images/teacher/ico_nav_facecam_press.png);} .quick-menu ul li .btn.btn-quick02 {background-image: url(../images/teacher/ico_nav_material_nor.png);} .quick-menu ul li .btn.btn-quick02:hover, .quick-menu ul li .btn.btn-quick02.active {background-image: url(../images/teacher/ico_nav_material_press.png);} .quick-menu ul li .btn.btn-quick03 {background-image: url(../images/teacher/ico_nav_screenshare_nor.png);} .quick-menu ul li .btn.btn-quick03:hover, .quick-menu ul li .btn.btn-quick03.active {background-image: url(../images/teacher/ico_nav_screenshare_press.png);} .section.teacher .material-wrap {display: inline-block; position: absolute; left: -193px; width: 193px; height: 100%; transition: left 0.2s ease-in-out;} .section.teacher .material-wrap.active {left: 48px;} .material-box {display: inline-block; position: absolute !important; left: -193px; width: 193px; background: #fbfbfb; border-right: 1px solid #dfdfdf; z-index: 2; transition: left 0.2s ease-in-out;} .material-box.active {left: 0;} .material-box h1 {text-align: center; color: #404040; font-size: 14px; font-weight: 800; padding: 12px 0; background-color: #dfdfdf; margin: 0;} .material-box .btn-group {display: flex; justify-content: space-around;} .material-box .btn-group .btn {position: relative; padding: 14px 0; text-align: center; flex: 1; font-size: 0; color: #404040; border: 0;} .material-box .btn-group input {display: none;} .material-box .btn-group label {margin: 0;} .material-box .btn-group .btn + .btn::before {content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #dfdfdf; } .material-box .btn-group .btn .icon {display: inline-block; width: 18px; height: 18px; background-image: url(../images/teacher/ico_plus.png);} .material-box .btn-group .btn span {display: block; font-size: 12px; margin-top: 8px; line-height: 14px;} .material-box .material-list {height: calc(100vh - 120px); border-top: 1px solid #dfdfdf; padding: 16px 0;} .material-box .material-list .material-list-box {height: 100%; padding:0;} .material-box .material-list .material-list-box .list {padding: 0 19px 0 25px; margin-right: 6px;} .material-box .material-list .material-list-box .list li {position: relative;} .material-box .material-list .material-list-box .list li .file-box {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 4px; font-size: 12px; color: #404040;} .material-box .material-list .material-list-box .list li .file-box .name {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .material-box .material-list .material-list-box .list li .img-box {margin: 0; position: relative} .material-box .material-list .material-list-box .list li .img-box .ico {position: absolute; top:0; left: 0; width: 20px; height: 20px; z-index: 1;} .material-box .material-list .material-list-box .list li .img-box .ico.ico-file-pdf {background-image: url(../images/teacher/ico_file_pdf.png);} .material-box .material-list .material-list-box .list li .img-box .ico.ico-file-excel {background-image: url(../images/teacher/ico_file_excel.png);} .material-box .material-list .material-list-box .list li .img-box .ico.ico-file-ppt {background-image: url(../images/teacher/ico_file_ppt.png);} .material-box .material-list .material-list-box .list li .img-box .ico.ico-file-video {background-image: url(../images/teacher/ico_file_video.png);} .material-box .material-list .material-list-box .list li .img-box .ico.ico-file-word {background-image: url(../images/teacher/ico_file_word.png);} .material-box .material-list .material-list-box .list li .btn {width: 100%;} .material-box .material-list .material-list-box .list li .close {position: absolute; top:0; right: 0; width: 20px; height: 20px; background-image: url(../images/teacher/btn_delete_nor.png);} .material-box .material-list .material-list-box .list li .close:hover {background-image: url(../images/teacher/btn_delete_press.png);} .material-detail-box {display: inline-block; position: absolute; left: -193px; width: 193px !important; transition: all 0.2s ease-in-out; background-color: #fbfbfb; z-index: 1;} .material-detail-box.active {left: 0;} .material-detail-box h1 {text-align: center; font-weight: 800; background-color: #dfdfdf; margin: 0; color: #404040; line-height: 40px; position: relative; height: 40px;} .material-detail-box h1 .back {position:absolute; top: 50%; left: 0; transform: translateY(-50%); width: 40px; height: 40px; background-image: url(../images/teacher/ico_material_back.png); background-size: 20px; background-repeat: no-repeat; background-position: center; border: 0; background-color: transparent; vertical-align: middle;} .material-detail-box .material-list {height: 100vh} .material-detail-box .material-detail-close {display:none; position: absolute; top: 8px; right: -16px; width: 16px; height: 40px; background-image: url(../images/teacher/tab_left_collapse.png);} .material-detail-box .material-list-box .list {padding: 0 19px 0 25px; margin-right: 6px} .chat-list .list {border-bottom: 1px solid #dfdfdf;} .chat-list .list > li {padding: 10px 10px 10px 14px; font-size: 0; border-top: 1px solid #dfdfdf;} .chat-list .list > li .list-content-name {display: inline-block;} .chat-list .list > li .list-content-name .btn {width: 78px; font-size: 14px; font-weight: bold; text-align: left; color: #404040; padding: 0; line-height: 1;} .chat-list .list > li .list-content-name .name {width: 78px; overflow: hidden; font-size: 14px; color: #404040; text-align: left; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; display: inline-block;} .chat-list .list li > .btn {padding: 4px 0; text-align: center; width: 32px; line-height: 1; border-radius: 8px; font-size: 10px; font-weight: bold; margin-left: 12px;} .chat-list .list li > .btn[data-this="btn-default"] {background-color: #e9e9ef; color: #31325a;} .chat-list .list li > .btn[data-this="btn-running"] {background-color: #31325a; color: #fff;} .chat-list .list li > .btn[data-this="btn-presenter"] {background-color: #fec734; color: #31325a;} .chat-list .list li .btn-group {font-size: 0; margin-left: 12px;} .chat-list .list li .btn-group .btn {width: 20px; height: 20px; border-radius: 0; padding: 0; position: relative; font-size: 14px} .chat-list .list li .btn-group .btn + .btn {margin-left: 8px;} .chat-list .list li .btn-group .btn.btn-camera {background-image: url(../images/teacher/ico_video_inactive.png);} .chat-list .list li .btn-group .btn.btn-mic {background-image: url(../images/teacher/ico_mike_inactive.png);} .chat-list .list li .btn-group .btn.btn-pen {background-image: url(../images/teacher/ico_pen_inactive.png);} .chat-list .list li .btn-group .btn.btn-camera.active {background-image: url(../images/teacher/ico_video_active.png);} .chat-list .list li .btn-group .btn.btn-mic.active {background-image: url(../images/teacher/ico_mike_active.png);} .chat-list .list li .btn-group .btn.btn-pen.active {background-image: url(../images/teacher/ico_pen_active.png);} .chat-list .list li .btn-group .btn.btn-camera.active {background-image: url(../images/teacher/ico_video_active.png);} .chat-list .list li .btn-group .btn.btn-mic.active {background-image: url(../images/teacher/ico_mike_active.png);} .chat-list .list li .btn-group .btn.btn-embargo::after {content: ''; position: absolute; top: 0; left: 0; width :100%; height: 100%; background-image: url(../images/teacher/ico_x.png);} .chat-list .list li .dropdown-menu {padding: 0;box-shadow: 0 0 5px rgba(32, 32, 32, 0.4); border: 0;} .chat-list .list li .dropdown-menu li .dropdown-item {font-size: 12px; color: #797979; padding: 9px 8px} .chat-list .list li .dropdown-menu li .dropdown-item:hover {color: #ff8800; background-color: #fbfbfb;} .chat-list .chat-list-select-wrap .chat-list-select {display: inline-block;} .chat-list .chat-list-select-wrap .chat-list-select .btn {font-size: 14px;} .chat-list .chat-list-select-wrap .chat-list-select .btn::after {content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background-image: url(../images/teacher/ico_dropdown_nor.png);} .chat-list .chat-list-select-wrap .chat-list-select.show .btn::after {transform: rotate(180deg);} .chat-list .chat-list-select-wrap .dropdown-menu {margin-top: -5px; border-radius: 0; padding: 0; min-width: auto; border: 0; box-shadow: 0 0 5px rgba(32, 32, 32, 0.4);} .chat-list .chat-list-select-wrap .dropdown-menu .dropdown-item {font-size: 12px; color: #797979; padding: 9px 30px 9px 8px;} .chat-list .chat-list-select-wrap .dropdown-menu .dropdown-item:hover {color: #ff8800; background-color:#fbfbfb} .chat-list .chat-list-select-wrap .chat-list-select.control .dropdown-menu li:nth-child(2n) {border-bottom: 1px solid #dfdfdf} .chat-list .over-box-y {height: calc(100vh - 75px);} .edit-chat-box {position: absolute; top: 0; right: -240px; display: flex; height: 100%; transition: all .2s ease-in-out;} .edit-chat-box .btn.btn-close {position: absolute; top:8px; left: -16px; width: 16px; height: 40px; padding: 0; border: 0; background-image: url(../images/teacher/tab_right_open.png);} .edit-chat-box.active {right: 0;} .edit-chat-box.active .btn.btn-close {background-image: url(../images/teacher/tab_right_collapse.png);} .chat-wrap.teacher .text-box .text {max-width: 165px} .chat-wrap.teacher .chat-box {height: calc(100vh - 120px);} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text {position: relative; border: 0;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text::before {content: ''; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; background-image: url(../images/teacher/ico_file_download_teacher.png);} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text {position: relative; width: 100%; text-align: left;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text .file-name {display: block; text-align: left; line-height: 1;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text .file-name .name {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; max-width: calc(100% - 60px); display: inline-block; vertical-align: middle; font-family: "NanumSquareRound", sans-serif;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text .file-name .extension {display: inline-block; vertical-align: middle;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text .file-size {display: block; color: #ababab; font-size: 10px; line-height: 14px; margin-top: 8px;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text .file-name + .file-size {margin-top: 8px;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text .file-date {display: block; color: #ababab; font-size: 10px; line-height: 14px;} .chat-wrap.teacher .chat-box .chat-text.left.download .text-box .text .file-name + .file-date {margin-top: 8px;} .chat-wrap.teacher .chat-box .chat-text.left.download .progress-box {font-size: 0; margin-top:4px;} .chat-wrap.teacher .chat-box .chat-text.left.download .progress-box .percent {font-size: 10px; color: #ababab; font-weight: 900; vertical-align: middle;} .chat-wrap.teacher .chat-box .chat-text.left.download .progress-box .progress-bg {overflow: hidden; position: relative; display: inline-block; width: 50px; height: 4px; background-color: #dfdfdf; vertical-align: middle; margin-left: 4px;} .chat-wrap.teacher .chat-box .chat-text.left.download .progress-box .progress-bar {position: absolute; width: 100%; height: 100%; top: 0; left: -50%; background-color: #476eff; } .chat-wrap.teacher .chat-box .chat-text.left.download .progress-box .btn-close {width: 16px; height: 16px; border: 0; background-color: transparent; background-image: url(../images/teacher/ico_file_cancel.png); vertical-align: middle; margin-left: 8px;} .chat-wrap.teacher .chat-box .chat-text.right.download.complate .progress-box {display: none;} .chat-wrap.teacher .chat-box .chat-text.right.download.complate .btn-close {display: none;} .screen-box.teacher {overflow: visible; position: absolute; left: 48px; bottom: -150px; transition: all .2s ease-in-out; width: calc(100vw - 48px); min-height: 150px;} .screen-box.teacher.active {bottom: 0;} .screen-box.teacher ul {flex-wrap: nowrap; min-width: auto;} .screen-box.teacher .btn-close {display: none; position: absolute; top: -16px; left: 8px; width: 40px; height: 16px; border:0; background: transparent; background-image: url(../images/teacher/tab_bottom_collapse.png); z-index: 999; transition: all .1s ease-in-out;} .screen-box.teacher .btn-open {position: absolute; top: -130px ; left: 16px; border:0; background: transparent; width: 80px; height: 56px; background-image: url(../images/teacher/tab_bottom_open.png); transition: all .1s ease-in-out;} .controller {position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); background-color: #ababab; border-radius: 18px; padding: 8px; display: flex; justify-content: center; align-items: center; color: #fff; vertical-align: -webkit-baseline-middle;} .controller .btn {width: 20px; height: 20px; background-repeat: no-repeat; background-position: center;} .controller .btn.btn-prev {margin-right: 10px; background-image: url(../images/teacher/btn_paging_prev_nor.png);} .controller .btn.btn-prev:hover {background-image: url(../images/teacher/btn_paging_prev_press.png);} .controller .btn.btn-next {margin-left: 10px;background-image: url(../images/teacher/btn_paging_next_nor.png);} .controller .btn.btn-next:hover {background-image: url(../images/teacher/btn_paging_next_press.png);} .controller .number-box {font-size: 12px;} /* .controller .number-box .current {display: inline-block; margin-right: 4px; background-color: #fff; color: #404040; padding: 3px 6px 1px; line-height: 1; min-width: 30px; text-align: right;} .controller .number-box .total {margin-left: 4px;} */ .controller .number-box .current {display: inline-block; margin-right: 4px; background-color: #fff; color: #404040; padding: 3px 6px 1px; line-height: 1; width: 40px; text-align: right;} .controller .number-box .total {display: inline-block; margin-right: 4px; background-color: #ababab; color: #404040; padding: 3px 6px 1px; line-height: 1; width: 40px; border: none;} /* 모달 - 공유 */ .modal.share .modal-dialog {width: 600px; min-width: auto; max-width: 100%; } .modal.share .modal-content {background-color: #f0f1f6;} .modal.share .modal-body {padding: 30px 30px 38px;} .modal.share .tab-box {height: 366px;} .modal.share .tab-box .nav-tabs {background-color: #fff; border: 1px solid #dfdfdf; border-bottom: 0;} .modal.share .tab-box .nav-tabs .nav-item {width: 33.33%;} .modal.share .tab-box .nav-tabs .nav-item a {position: relative; color: #404040; font-size: 14px; font-weight: bold; text-align: center; padding: 18px 0; display: block;} .modal.share .tab-box .nav-tabs .nav-item a.active {color: #476eff;} .modal.share .tab-box .nav-tabs .nav-item a.active::after {content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 5px; background-color: #476eff;} .modal.share .tab-content .list {padding: 16px 8px 16px 16px; background-color: #fff; border: 1px solid #dfdfdf;} .modal.share .tab-content .list .over-box-y {height: 250px; } .modal.share .tab-content .list ul {display: flex; flex-wrap: wrap; margin: -8px 0 -8px -8px;} .modal.share .tab-content .list li {margin: 8px;} .modal.share .tab-content .list li .btn {width: auto; padding: 0;} .modal.share .tab-content .list li .btn:hover .thumb {border: 1px solid #476eff} .modal.share .tab-content .list.list-col-2 li {width:calc(50% - 16px);} .modal.share .tab-content .list.list-col-3 li {width:calc(33.333% - 16px);} .modal.share .tab-content .list.list-row li {width: 100%; background-color: #fff; margin: 0 8px;} .modal.share .tab-content .list li .btn {width: 100%; padding: 0; border-radius: 0;} .modal.share .tab-content .list li .thumb {width: 100%; background-color: #f3f3f3;} .modal.share .tab-content .list li span {margin-top: 8px;text-align: center; display: block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; color: #797979; font-size: 14px;} .modal.share .tab-content .list.list-col-2 li .btn {width: 240px;} .modal.share .tab-content .list.list-col-3 li .btn {width: 154px;} .modal.share .tab-content .list.list-row li:hover{background-color: #dfdfdf;} .modal.share .tab-content .list.list-row li:first-child {margin-top: 8px;} .modal.share .tab-content .list.list-col-2 li .thumb {height: 140px;} .modal.share .tab-content .list.list-col-3 li .thumb {height: 90px;} .modal.share .tab-content .list.list-row .btn {text-align: left; font-size: 14px; color: #797979; padding: 8px 10px;} .modal.share .form-check {display: block; position: relative; padding-left: 32px; margin-top: 8px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 24px;} .modal.share .form-check input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} .modal.share .form-check .checkmark {position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #fff; border: 1px solid #dfdfdf;} .modal.share .form-check input:checked ~ .checkmark {background-image: url(../images/teacher/ico_popup_ok_2.png); background-position: center;} .modal.share .btn-area {margin-top: 12px;} .modal.share .btn-area .btn-import:disabled {background-color: #ccc; cursor: auto;} .sidebar-chat_textarea-box {position: absolute; bottom: 0; width: 100%; left: 0;} .canvas-area.teacher {display: inline-block; position: relative; width: calc(100% - 97px); height: calc(100% - 135px); background-color: #f1f1f1; left: 48px; transition: all 0.2s ease-in-out; text-align: center;} /* .canvas-area.teacher {display: inline-block; position: relative; width: calc(100% - 97px); height: 100vh; background-color: #f1f1f1; left: 48px; transition: all 0.2s ease-in-out; text-align: center;} */ .chat-wrap.student .text-box .text {max-width: 210px; font-size: 16px;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text {position: relative; border: 0;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text::before {content: ''; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; background-image: url(../images/student/ico_file_download_student.png);} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text {position: relative; width: 100%; text-align: left;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text .file-name {display: block; text-align: left; line-height: 1;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text .file-name .name {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; max-width: calc(100% - 60px); display: inline-block; vertical-align: middle; font-family: "NanumSquareRound", sans-serif; color: #fff} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text .file-name .extension {display: inline-block; vertical-align: middle;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text .file-size {display: block; color: #fff; font-size: 10px; line-height: 14px;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text .file-size {margin-top: 8px;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text .file-date {display: block; color: #fff; font-size: 10px; line-height: 14px;} .chat-wrap.student .chat-box .chat-text.right.download .text-box .text .file-name + .file-date {margin-top: 8px;} .chat-wrap.student .chat-box .chat-text.right.download .progress-box {font-size: 0; margin-top:4px;} .chat-wrap.student .chat-box .chat-text.right.download .progress-box .percent {font-size: 10px; color: #ababab; font-weight: 900; vertical-align: middle;} .chat-wrap.student .chat-box .chat-text.right.download .progress-box .progress-bg {overflow: hidden; position: relative; display: inline-block; width: 50px; height: 4px; background-color: #dfdfdf; vertical-align: middle; margin-left: 4px;} .chat-wrap.student .chat-box .chat-text.right.download .progress-box .progress-bar {position: absolute; width: 100%; height: 100%; top: 0; left: -50%; background-color: #476eff; } .chat-wrap.student .chat-box .chat-text.right.download .progress-box .btn-close {width: 16px; height: 16px; border: 0; background-color: transparent; background-image: url(../images/student/ico_file_cancel.png); vertical-align: middle; margin-left: 8px;} .chat-wrap.student .chat-box .chat-text.right.download.complate .text-box .text::before {content: none;} .chat-wrap.student .chat-box .chat-text.right.download.complate .progress-box {display: none;} .chat-wrap.student .chat-box .chat-text.right.download.complate .btn-close {display: none;} .chat-wrap.student .chat_textarea {border-top: 1px solid #dfdfdf;} .chat-wrap.student .textarea {width: calc(100% - 80px); border-top: 0; border: 0;} .chat-wrap.student .chat_textarea .btn-file {width: 40px; height: 40px; margin-left: 8px; margin-bottom: 0; background-color: transparent; background-image: url(../images/student/btn_file_upload_nor.png); border: 0; } .chat-wrap.student .chat_textarea .btn-file:hover {background-image: url(../images/student/btn_file_upload_press.png);} .chat-wrap.student .chat_textarea .btn-file input {display: none;} .chat-wrap.student .btn {top: 0;} .canvas-area {width: calc(100% - 288px); background-color: #f1f1f1;} .doc-layer .doc-view {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #f0f0f0; overflow: hidden;} .doc-layer .doc-view::after {display:inline-block; height:100%; content:""; vertical-align:middle;} /* .doc-layer .doc-view .canvas-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} */ /* .doc-layer .doc-view .canvas-content {vertical-align:middle;} */ .doc-layer .doc-view .canvas-content {object-fit: contain; width: 100%; height: 100%} .doc-view > div {transition: all 0.2s ease-in-out;} /* .quick-menu {background: red;} */ .section.student { width: 100%; height: 100vh; overflow: hidden; position: relative; } .section.student::after { display: inline-block; height: 100%; content: ""; vertical-align: middle; } .aside.student{height: 100%}