@charset "UTF-8";

/* reset css */
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  font-family: 'Lato', 'Noto Sans KR', 'NanumGothic', '나눔고딕', '나눔 고딕',
    sans-serif;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  border: none;
}
a {
  color: #333;
}
a:focus {
  outline: 0 !important;
}
button {
  background: none;
  border: none;
}
img {
  border: none;
}
body {
  font-size: 12px;
}
input[type='checkbox'],
input[type='radio'],
label,
button {
  cursor: pointer;
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ddd;
  height: 50px;
  padding: 0 30px 0 15px;
  background: no-repeat center right 10px/10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/%3E%3C/svg%3E");
}
select::-ms-expand {
  display: none;
}

input[type='text'],
input[type='password'],
input[type='tel'],
input[type='email'],
input[type='number'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ddd;
  border-radius: 65px;
  height: 50px;
  padding: 0 20px;
  background: #fff;
  box-shadow: none;
}

textarea:focus,
select:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='email']:focus,
input[type='number']:focus {
  outline: none;
  border: 1px solid #16cdd6;
}
button:focus {
  outline: none;
}

input[type='text']:focus::placeholder,
input[type='password']:focus::placeholder {
  color: #056a77;
}
input[type='password']::placeholder {
  font-family: 'Lato', 'Noto Sans KR', 'NanumGothic', '나눔고딕', '나눔 고딕',
    sans-serif;
  letter-spacing: 1px;
}
input::-webkit-input-placeholder {
  color: #ccc;
}
input:-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
input::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
input:-ms-input-placeholder {
  color: #ccc;
}
input:placeholder-shown {
  color: #ccc;
}
table {
  border-collapse: collapse;
}
input[type='text']::-ms-clear {
  display: none;
}

.w100p {
  width: 100%;
}
.w95p {
  width: 95%;
}
.w90p {
  width: 90%;
}
.w85p {
  width: 85%;
}
.w80p {
  width: 80%;
}
.w75p {
  width: 75%;
}
.w70p {
  width: 70%;
}
.w65p {
  width: 65%;
}
.w60p {
  width: 60%;
}
.w55p {
  width: 55%;
}
.w50p {
  width: 50%;
}
.w45p {
  width: 45%;
}
.w40p {
  width: 40%;
}
.w35p {
  width: 35%;
}
.w30p {
  width: 30%;
}
.w225p {
  width: 22.5%;
}
.w25p {
  width: 25%;
}
.w20p {
  width: 20%;
}
.w15p {
  width: 15%;
}
.w10p {
  width: 10%;
}
.w05p {
  width: 05%;
}

/* common style */
.tar {
  text-align: right;
}
.layoutArea.inline {
  text-align: center;
}
.layoutArea::after {
  content: '';
  display: block;
  clear: both;
}
.layoutArea .layoutBox {
  float: left;
  padding: 5px;
}
.layoutArea .layoutBox.inline {
  float: none;
  display: inline-block;
  vertical-align: top;
}
.layoutArea .layoutBox .box + .box {
  margin-top: 10px;
}
.layoutArea .layoutBox .box {
  background: #fff;
  border-radius: 15px;
  padding: 15px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
}
.layoutArea .layoutBox .box.hasBgColor1 {
  background: #16cdd6;
}
.layoutArea .layoutBox .box.noPadding {
  padding: 0;
}

.areaBox {
  position: relative;
  padding-top: calc(45px + 10px);
  padding-bottom: 10px;
}
.area-inner {
  padding: 0 15px;
}
.area-inner::after {
  content: '';
  display: block;
  clear: both;
}
.area-header {
  background: #16cdd6;
  color: #fff;
  font-size: 15px;
  border-radius: 15px 15px 0 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  line-height: 45px;
  z-index: 1;
}
.area-header h3 {
  font-weight: 400;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inner {
  width: 1200px;
  margin: 0 auto;
}
.inner2 {
  width: 825px;
  margin: 0 auto;
}
.inner2::after,
.inner::after {
  content: '';
  display: block;
  clear: both;
}

#container {
  min-height: 90vh;
}

.checkBox {
  display: inline-block;
}
.checkBox + .checkBox {
  margin-left: 10px;
}
.checkBox input {
  display: none;
}
.checkBox span::before {
  content: '';
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: #fff no-repeat center center/60%;
  border: 1px solid #ddd;
  transition: all 0.2s;
}
.checkBox input:checked ~ span::before {
  border-color: #018494;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2316cdd6' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
}

/* btn style */
.bBtn {
  display: inline-block;
  transition: all 0.3s;
  text-align: center;
  height: 65px;
  line-height: 65px;
  font-size: 25px;
  border-radius: 65px;
  padding: 0 20px;
}
.bBtn + .bBtn {
  margin-left: 15px;
}
.mBtn {
  display: inline-block;
  transition: all 0.3s;
  text-align: center;
  height: 45px;
  line-height: 45px;
  font-size: 22px;
  border-radius: 65px;
  padding: 0 15px;
}
.mBtn + .mBtn {
  margin-left: 15px;
}
.sBtn {
  display: inline-block;
  transition: all 0.3s;
  text-align: center;
  height: 25px;
  line-height: 25px;
  font-size: 13px;
  border-radius: 65px;
  padding: 0 15px;
}
.sBtn + .sBtn {
  margin-left: 10px;
}
.rBtn {
  display: inline-block;
  transition: all 0.3s;
  width: 42px;
  height: 42px;
  border-radius: 42px;
  background: #ccc;
  border: 2px solid #fff;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 9;
}

.bsColorR {
  background: linear-gradient(90deg, #f7201f, #fc3636);
  border: 4px solid #ff8383;
}
.bsColorR:hover {
  background: linear-gradient(90deg, #fc3636, #f7201f);
  border: 4px solid #ffa4a4;
}
.bsColorB {
  background: linear-gradient(90deg, #347eff, #448fff);
  border: 4px solid #83b2ff;
}
.bsColorB:hover {
  background: linear-gradient(90deg, #448fff, #347eff);
  border: 4px solid #a5c7ff;
}
.bWsColor1 {
  background: #16cdd6;
  color: #fff;
  border: 4px solid #fff;
  line-height: 60px;
}
.bWsColor1:hover {
  background: #35e3ec;
}

.sColorG {
  background: #aaa;
  color: #fff;
}
.sColorW {
  background: #fff;
  color: #018494;
  border: 3px solid #fff;
}
.sColorW:hover {
  border-color: #018494;
}
.sColorB {
  background: #000000;
}
.sColorR {
  background: #f26c4f;
}
.sColor1 {
  background: #16cdd6;
  color: #fff;
}
.sColor1:hover {
  background: #35e3ec;
}
.sColor2 {
  background: #018494;
  color: #fff;
}
.sColor2:hover {
  background: #056a77;
}

.bColorw {
  background: none;
  color: #fff;
  border: 1px solid #fff;
}
.bColorw:hover {
  background: #fff;
  color: #018494;
}
.bColorG {
  background: none;
  color: #999;
  border: 1px solid #ccc;
}
.bColorG:hover {
  background: #999;
  color: #fff;
}
.bColor1 {
  background: none;
  color: #16cdd6;
  border: 1px solid #16cdd6;
}
.bColor1 {
  background: none;
  color: #018494;
  border: 1px solid #018494;
}

.mBtn.check {
  background: none;
  color: #16cdd6;
  border: 1px solid #16cdd6;
}
.mBtn.check::before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2316cdd6' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
}

/* header / footer */
#header {
  /* height: 80px; */
}
#header .logo {
  display: table;
  /* height: 80px; */
}
#header .logo i {
  display: table-cell;
  vertical-align: middle;
}
#header .logo i img {
  height: 49px;
}

#footer {
  background: #2b2f40;
  color: #999;
  text-align: center;
  font-size: 12px;
}
#footer .inner {
  padding: 30px 0;
}

/* login */
#container.login {
  background: url('/img/bg_login.jpg') repeat-y;
  background-size: 100%;
  padding: 120px 0;
}
#container.login h2 {
  font-size: 35px;
  color: #333;
  text-align: center;
}
.loginArea {
  text-align: center;
  background: #16cdd6;
  width: 712px;
  margin: 0 auto;
  border-radius: 720px;
  padding: 60px 0;
  position: relative;
  transition: all 0.3s;
}
.loginArea h3 {
  color: #fff;
  font-size: 40px;
  margin-bottom: 25px;
}
.loginArea input[type='text'],
.loginArea input[type='password'] {
  border: none;
  height: 65px;
  font-size: 18px;
}
.loginArea .formList {
  width: 400px;
  margin: 0 auto;
}
.loginArea .formList li {
  padding: 4px 0;
}

.loginArea .bBtn {
  width: 100%;
}
.loginArea .mBtn {
  width: 100%;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}
.loginArea .checkBox {
  margin: 10px 0;
}
.loginArea .checkBox + .checkBox {
  margin-left: 20px;
}
.loginArea .checkBox span {
  font-size: 18px;
  color: #fff;
}
.loginArea input[type='text'],
.loginArea input[type='password'] {
  width: 100%;
}

#container.login.find .inner {
  background: #fff;
  padding: 80px 140px;
  text-align: center;
}
#container.login.find h2 {
  margin-bottom: 85px;
}
#container.login.find .layoutArea article {
  width: 400px;
  float: left;
  position: relative;
}
#container.login.find .layoutArea article + article {
  float: right;
}
#container.login.find .layoutArea article:nth-child(2n)::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 200px;
  background: #ccc;
  position: absolute;
  left: -62px;
  top: calc(50% - (200px / 2));
}
#container.login.find .layoutArea article h3 {
  text-align: left;
  color: #16cdd6;
  margin-bottom: 25px;
  font-size: 16px;
}
#container.login.find .layoutArea article .formBox {
  min-height: 105px;
}
#container.login.find .layoutArea article .formBox input {
  font-size: 18px;
  width: 100%;
}
#container.login.find .layoutArea article .formBox input + input {
  margin-top: 5px;
}
#container.login.find .layoutArea article .btnArea {
  margin-top: 35px;
}
#container.login.find .layoutArea article .btnArea .mBtn {
  width: 100%;
}
#container.login.find .layoutArea ~ .btnArea {
  margin-top: 75px;
}
#container.login.find .layoutArea ~ .btnArea .mBtn {
  min-width: 130px;
}

#container.login.signUp .inner2 {
  background: #fff;
  padding: 80px;
}
#container.login.signUp h3 {
  font-size: 20px;
  text-align: center;
  color: #16cdd6;
}
#container.login.signUp h3::before {
  content: '';
  display: block;
  margin: 20px auto 13px auto;
  width: 30px;
  height: 4px;
  background: #16cdd6;
}
.signUpArea {
  margin-top: 45px;
}
.signUpArea .confirmInput {
  background: #f4f4f4 !important;
}
.signUpArea .policyBox {
  margin: 50px 0;
}
.signUpArea .policyBox .checkArea {
  margin-bottom: 20px;
  font-size: 14px;
}
.signUpArea .policyBox .txt {
  border: 1px solid #ddd;
  padding: 20px 15px;
  height: 145px;
  overflow-y: auto;
  color: #666;
  font-size: 13px;
}
.signUpArea ~ .btnArea {
  margin-top: 45px;
  text-align: center;
}
.signUpArea ~ .btnArea .mBtn {
  min-width: 150px;
}

.signUpRow h4 {
  font-size: 16px;
  color: #666;
  margin-bottom: 6px;
}
.signUpRow .guide {
  font-size: 14px;
  padding: 10px 20px 0 20px;
  color: #999;
}
.signUpRow .guide.pass {
  color: #16cdd6;
  font-weight: 600;
}
.signUpRow .guide.pass::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2316cdd6' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
}
.signUpRow .guide.fail {
  color: #e2224b;
  font-weight: 600;
}
.signUpRow .guide.fail::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e2224b' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z'/%3E%3C/svg%3E");
}
.signUpRow + .signUpRow {
  margin-top: 25px;
}
.signUpRow select,
.signUpRow input[type='text'],
.signUpRow input[type='email'],
.signUpRow input[type='tel'],
.signUpRow input[type='number'],
.signUpRow input[type='password'] {
  width: 73%;
  display: inline-block;
  font-size: 18px;
}

.signUpRow.half select,
.signUpRow.half input[type='text'],
.signUpRow.half input[type='email'],
.signUpRow.half input[type='tel'],
.signUpRow.half input[type='number'],
.signUpRow.half input[type='password'] {
  width: 49%;
}
.signUpRow.half input + input {
  float: right;
}

.signUpRow > span + span {
  display: block;
  margin-top: 5px;
}
.signUpRow > span::after {
  content: '';
  display: block;
  clear: both;
}
.signUpRow > span .mBtn {
  width: 25%;
  float: right;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
}

/* 컨텐츠화면 */
#container.contnet {
  background: url('/img/bg_content.jpg') repeat-y;
  background-size: 100%;
  padding: 100px 0;
}
.contentBox h2 {
  text-align: center;
}
.contentBox h2 span {
  display: inline-block;
  border: 8px solid #16cdd6;
  font-size: 45px;
  background: #fff;
  border-radius: 100px;
  color: #16cdd6;
  padding: 15px 30px;
  font-weight: 800;
  min-width: 465px;
  max-width: 100%;
}

/* 강의 리스트 */
.classList li {
  border: 1px solid #ddd;
  border-radius: 50px;
}
.classList li + li {
  margin-top: 9px;
}
.classList li::after {
  content: '';
  display: block;
  clear: both;
}
.classList li .subject {
  display: inline-block;
  padding: 0 10px 0 25px;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  max-width: 79%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 58px;
}
.classList li.hasGuide .subject {
  max-width: 63%;
}
.classList li .btnArea {
  float: right;
  padding: 5px;
  font-size: 15px;
  width: 20%;
  text-align: right;
  line-height: 1;
}
.classList li.hasGuide .btnArea {
  width: 36%;
}
.classList li .btnArea .guide {
  color: #16cdd6;
  margin-right: 5px;
}
.classList li .btnArea .mBtn {
  font-size: 15px;
  min-width: 100%;
  height: 50px;
  line-height: 50px;
}
.classList li.hasGuide .btnArea .mBtn {
  min-width: 30%;
}

.classList.type2::after {
  content: '';
  display: block;
  clear: both;
}
.classList.type2 li {
  width: 32.66%;
  float: left;
  margin-bottom: 9px;
  background: #f4f4f4;
  height: 48px;
  border: none;
}
.classList.type2 li + li {
  margin-top: 0;
}
.classList.type2 li:nth-child(3n-1) {
  margin: 0 1%;
}
.classList.type2 li .subject {
  font-size: 18px;
  font-weight: 400;
  line-height: 48px;
}
.classList.type2 li .btnArea .mBtn {
  height: 100%;
  line-height: 37px;
}

.listLayout {
  margin-top: 50px;
  position: relative;
}
.listLayout h3 {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 35px;
}
.listLayout h4 {
  text-align: center;
  margin-bottom: 25px;
}
.listLayout h4 span {
  display: inline-block;
  border: 1px solid #ccc;
  font-size: 22px;
  min-width: 300px;
  border-radius: 50px;
  padding: 20px;
  color: #999;
}
.listLayout.active h4 span {
  color: #333;
}
.listLayout h5 {
  font-size: 18px;
  margin-bottom: 15px;
  margin-top: 25px;
}
.listLayout .depth + .depth {
  margin-top: 50px;
}
.listLayout .box {
  padding: 40px 30px;
  background: #fff;
  border-radius: 15px;
}

.listLayout .rightBox .paymentBtn {
  background: #16cdd6;
  color: #fff;
  border-radius: 100px;
  padding: 13px 30px;
}
.listLayout .rightBox .paymentBtn::after {
  content: '';
  display: inline-block;
  width: 33px;
  height: 23px;
  vertical-align: middle;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M22 4h-20c-1.104 0-2 .896-2 2v12c0 1.104.896 2 2 2h20c1.104 0 2-.896 2-2v-12c0-1.104-.896-2-2-2zm0 13.5c0 .276-.224.5-.5.5h-19c-.276 0-.5-.224-.5-.5v-6.5h20v6.5zm0-9.5h-20v-1.5c0-.276.224-.5.5-.5h19c.276 0 .5.224.5.5v1.5zm-9 6h-9v-1h9v1zm-3 2h-6v-1h6v1zm10-2h-3v-1h3v1z'/%3E%3C/svg%3E");
}
.listLayout.active .paymentBtn {
  background: none;
  padding: 0;
  color: #333;
}
.listLayout.active .paymentBtn::after {
  display: none;
}
.listLayout .rightBox .classList li .subject {
  color: #999;
}
.listLayout .rightBox .classList li .btnArea {
  display: none;
}
.listLayout.active .rightBox .classList li .subject {
  color: #333;
}
.listLayout.active .rightBox .classList li .btnArea {
  display: inline-block;
}

.listLayout1 .leftBox {
  width: 50%;
  border-radius: 0 0 15px 0;
  padding: 0 15px 10px 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.listLayout1 .leftBox .box {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
}
.listLayout1 .rightBox {
  text-align: right;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
  border-radius: 15px;
}
.listLayout1 .rightBox::after {
  content: '';
  display: block;
  clear: both;
}

.listLayout1 .rightBox .top {
  width: 50%;
  padding-left: 15px;
  display: inline-block;
  text-align: left;
}
.listLayout1 .rightBox .top .box {
  border-radius: 15px 15px 0 0;
  position: relative;
  min-height: calc(274px + 30px);
}
.listLayout1 .rightBox .top .box .classList {
  margin-top: 70px;
}
.listLayout1 .rightBox .top .box::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  left: -40px;
  bottom: 0;
  background: #fff no-repeat left top;
  background-image: radial-gradient(20px circle, #e4e6e8 100%, transparent);
  border-radius: 20px 20px 0 20px;
}
.listLayout1 .rightBox .bottom {
  text-align: left;
}
.listLayout1 .rightBox .bottom .box {
  border-radius: 15px 0 15px 15px;
}

.listLayout2 .leftBox {
  width: 50%;
  padding-right: 15px;
  float: left;
}
.listLayout2 .rightBox {
  width: 50%;
  padding-left: 15px;
  float: right;
}

/* 서브페이지 */
#container.subContnet {
  background: url('/img/bg_content.jpg') repeat-y;
  background-size: 100%;
  padding-bottom: 100px;
}

.subheader {
  background: #16cdd6;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 45px;
  padding: 50px 0 30px 0;
  position: relative;
  margin-bottom: calc(22px + 50px);
}
.subheader::after {
  content: '';
  display: block;
  height: 22px;
  width: 100%;
  background-image: url('/img/bg_wave.png');
  background-repeat: repeat-x !important;
  background-size: auto 105%;
  position: absolute;
  bottom: -21px;
  left: 0;
}

.lnbArea {
  text-align: center;
  margin-bottom: 50px;
}
.lnbArea .depth {
  display: inline-block;
  position: relative;
}
.lnbArea .depth + .depth {
  margin-left: 20px;
}
.lnbArea .depth .top {
  display: block;
  background: #fff;
  padding: 20px 40px;
  font-size: 30px;
  font-weight: 800;
  border-radius: 100px;
  color: #16cdd6;
  border: 6px solid #16cdd6;
}
.lnbArea .depth .top::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 14px;
  margin-left: 20px;
  background: no-repeat center center/100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2316cdd6' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/%3E%3C/svg%3E");
}
.lnbArea .depth .selectList {
  display: none;
  position: absolute;
  z-index: 9;
  top: 100px;
  left: 0;
  width: 100%;
  background: #fff;
  border: 4px solid #16cdd6;
  border-radius: 20px;
  overflow-y: auto !important;
  max-height: 280px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}
.lnbArea .depth .selectList li a {
  display: block;
  padding: 15px 10px;
  font-size: 16px;
  font-weight: 600;
  color: #666;
}
.lnbArea .depth .selectList li a:hover {
  background: #f1feff;
}
.lnbArea .depth .selectList li + li {
  border-top: 1px solid #ccc;
}

.bottomBtn {
  text-align: right;
  margin-top: 25px;
}
.bottomBtn .bBtn {
  font-size: 18px;
  height: 55px;
  line-height: 51px;
  min-width: 130px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
}

/******** 주판 화면 */
.profile .profileImg {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: #fff no-repeat center center/50%;
  border: 3px solid #16cdd6;
}
.profile .profileImg i {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  font-size: 0;
  overflow: hidden;
  line-height: 9;
  border-radius: 40px;
  background: no-repeat center center/cover;
}
.profile .profileImg + .profileTxt {
  margin-left: 5px;
}
.profile .profileTxt {
  width: 100%;
  border: 2px solid #16cdd6;
  border-radius: 10px;
  line-height: 35px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}
.profile .profileTxt::after {
  content: '';
  display: block;
  clear: both;
}
.profile .profileTxt .state {
  float: left;
  background: #16cdd6;
  text-align: center;
  padding: 0 10px;
  width: 35%;
  color: #fff;
}
.profile .profileTxt .name {
  float: left;
  text-align: left;
  padding: 0 10px;
  width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abacus-header::after {
  content: '';
  display: block;
  clear: both;
}
.abacus-header .profile {
  float: left;
  width: 45%;
  position: relative;
  padding-left: 40px;
}
.abacus-header .profile .profileImg {
  position: absolute;
  left: 0;
  top: 0;
}
.abacus-header .abacus-top {
  float: right;
  width: 40%;
  text-align: right;
  background: #16cdd6;
  border-radius: 0 40px 0 0;
  padding: 15px 15px 0 0;
  position: relative;
}
.abacus-header .abacus-top::before {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 84px;
  left: -83px;
  bottom: 0;
  background: url('/img/abacus_radius_color1.png') no-repeat center center/100%
    100%;
}
.abacus-header .abacus-top .monitor {
  width: 160px;
  height: 40px;
  background: #00071a;
  border: none;
  color: #ffe776;
  text-align: right;
  font-weight: 700;
  font-size: 20px;
  vertical-align: middle;
  border-radius: 10px;
}
.abacus-header .abacus-top .rBtn {
  vertical-align: middle;
  margin-left: 5px;
}
.abacus-header .abacus-top .rBtn.active {
  background: #a1ff25;
}

.abacus-body {
  background: #16cdd6;
  border-radius: 10px 0 10px 10px;
  padding: 12px;
}
.abacus-wrapper {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}
.abacusBox {
  background: #00071a;
  margin: 0 auto;
}
.abacusBox::after {
  content: '';
  display: block;
  clear: both;
}
.abacusBox .abacus-col {
  width: 50px;
  float: left;
  position: relative;
  background-position: center;
  background-size: 8px;
  background-repeat: repeat-y;
  background-image: url('/img/bg_bar.jpg');
}

.abacus-conatiner.col11 .abacus-col {
  width: 9.09%;
}
.abacus-conatiner.col10 .abacus-col {
  width: 10%;
}
.abacus-conatiner.col9 .abacus-col {
  width: 11.11%;
}
.abacus-conatiner.col8 .abacus-col {
  width: 12.5%;
}
.abacus-conatiner.col7 .abacus-col {
  width: 14.28%;
}
.abacus-conatiner.col6 .abacus-col {
  width: 16.66%;
}
.abacus-conatiner.col5 .abacus-col {
  width: 20%;
}
.abacus-conatiner.col4 .abacus-col {
  width: 25%;
}
.abacus-conatiner.col3 .abacus-col {
  width: 33.33%;
}

.abacus-conatiner.col7 .abacus-header .abacus-top {
  width: 56%;
}
.abacus-conatiner.col7 .abacus-header .abacus-top .monitor {
  width: 70%;
}

.abacus-conatiner.col3 .abacus-header .abacus-top {
  padding: 15px 15px 0 0;
  width: auto;
}
.abacus-conatiner.col3 .abacus-header .abacus-top::before {
  width: 60px;
  left: -59px;
}

.abacusBox .abacus-col .bar {
  width: 100%;
  height: 15px;
  background: #fff;
  display: block;
  overflow: hidden;
  color: #fff;
  line-height: 99;
  border: 3px solid #666;
  border-width: 3px 0;
  position: relative;
}
.abacusBox .abacus-col .bar.dot::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #000;
  position: absolute;
  left: calc(50% - (6px / 2));
  top: calc(50% - (6px / 2));
}
.abacusBox .abacus-col .bar.dot.red::before {
  background-color: #ed1c24;
}
.abacusBox .abacus-col .aBtn {
  display: block; /*width: 45px;*/
  width: 90%;
  margin: 0 auto;
  height: 26px;
  overflow: hidden;
  font-size: 1px;
  line-height: 99;
  color: transparent;
  background: url('/img/abacus_btn_white.png') no-repeat center center/contain;
  transition: all 0.2s;
  position: relative;
}
.abacusBox .abacus-col .aBtn.none {
  background-image: none;
}
.abacusBox .abacus-col .aBtn-green {
  background-image: url('/img/abacus_btn_green.png');
}
.abacusBox .abacus-col .aBtn-red {
  background-image: url('/img/abacus_btn_red.png');
}
.abacusBox .abacus-col .aBtn-yellow {
  background-image: url('/img/abacus_btn_yellow.png');
}
.abacusBox .abacus-col .aBtn-white {
  background-image: url('/img/abacus_btn_white.png');
}
.abacusBox .abacus-col .aBtn-blue {
  background-image: url('/img/abacus_btn_blue.png');
}

/* 주판 색상 변경 */
.abacus-conatiner.teacher .abacus-header .abacus-top {
  background-color: #a6b5ed;
}
.abacus-conatiner.teacher .abacus-header .abacus-top::before {
  background-image: url('/img/abacus_radius_color2.png');
}
.abacus-conatiner.teacher .abacus-header .profile .profileImg {
  border-color: #a6b5ed;
}
.abacus-conatiner.teacher .abacus-header .profile .profileTxt {
  border-color: #a6b5ed;
}
.abacus-conatiner.teacher .abacus-header .profile .profileTxt .state {
  background-color: #a6b5ed;
}
.abacus-conatiner.teacher .abacus-body {
  background-color: #a6b5ed;
}

/* Study with teacher - 비디오영역 */
.textBookArea > * {
  max-width: 100%;
}
.subContnet.withStudent .layoutBox.textbook .box {
  height: 328px;
}
.textBookArea {
  background: #fff;
  height: 100%;
  border-radius: 20px;
}

/******** 채팅창 */
.subContnet.withStudent .layoutBox.chat .box {
  height: 328px;
}
.chatArea {
  padding-bottom: calc(60px + 10px);
  height: 100%;
}
.chatArea .chat-body {
  padding: 10px 0;
  height: 100%;
  overflow-y: auto;
}
.chatArea .chat-box + .chat-box {
  margin-top: 10px;
}
.chatArea .chat-box.back {
  padding-left: 37px;
  position: relative;
}
.chatArea .chat-box.send {
  text-align: right;
}
.chatArea .chat-box .profile {
  position: absolute;
  left: 0;
  top: 5px;
}
.chatArea .chat-box .profile .profileImg {
  border: none;
  width: 28px;
  height: 28px;
}
.chatArea .chat-box .msg_cotainer .msg_box {
  display: inline-block;
  background: #ebebeb;
  max-width: 90%;
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 300;
}
.chatArea .chat-box.back .msg_cotainer .msg_box {
  background: #d6defb;
}
.chatArea .chat-box .msg_cotainer .msg_time {
  color: #999;
}
.chatArea .area-header {
  background: #7187ea;
}
.chatArea .chat-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 10px;
  background: #fff;
  border-radius: 0 0 20px 20px;
}
.chatArea .chat-footer .type_msg {
  height: 50px;
  width: 80%;
  resize: none;
  font-size: 13px;
  background: #f4f4f4;
  border: none;
  float: left;
  padding: 8px;
}
.chatArea .chat-footer .chat-submint {
  width: 20%;
  float: right;
  height: 50px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 9;
  background: #7187ea no-repeat center center/15px;
  border-radius: 0 10px 10px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.99 16.99'%3E%3Cpath fill='%23ffffff' d='M10.45,16.11l6.2-13.55A5.91,5.91,0,0,0,17,1.33,1.11,1.11,0,0,0,15.66,0a5.91,5.91,0,0,0-1.23.32L.87,6.54a1.37,1.37,0,0,0,.21,2.62l5.61.93a.24.24,0,0,1,.2.2l.93,5.61A1.37,1.37,0,0,0,10.45,16.11Z'/%3E%3C/svg%3E");
}

/******** 사용자 목록 */
.userListArea {
  height: 328px;
  background: #f4f4f4;
  border-radius: 15px;
}
.userListArea .userList-body {
  height: 100%;
  overflow-y: auto;
}
.userListArea .list-row {
  padding: 5px 0;
}
.userListArea .list-row + .list-row {
  border-top: 1px solid #ccc;
}
.userListArea .user-info {
  position: relative;
  padding-left: 50px;
}
.userListArea .user-info .profile {
  position: absolute;
  left: 0;
  top: 3px;
}
.userListArea .user-info .profile .profileImg {
  border: none;
  width: 44px;
  height: 44px;
}
.userListArea .user-info .user-box .name {
  font-size: 13px;
}
.userListArea .user-info .user-box .time {
  font-size: 12px;
  color: #666;
}
.userListArea .user-info .user-box .time::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  width: 10px;
  height: 10px;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23999999' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 12v-6h-2v8h7v-2h-5z'/%3E%3C/svg%3E");
}
.userListArea .user-info .user-box .score {
  font-size: 12px;
  color: #16cdd6;
  font-weight: 600;
}
.userListArea .user-info .user-box .score::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  width: 10px;
  height: 10px;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2316cdd6' viewBox='0 0 24 24'%3E%3Cpath d='M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm3 7h-3v2h3v6h-6v2h6v2c0 1.654-1.346 3-3 3h-14c-1.654 0-3-1.346-3-3v-2h2v-2h-2v-6h8v-2h-8v-2c0-1.654 1.346-3 3-3h14c1.654 0 3 1.346 3 3v2zm-8 3c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm3 0c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm-9 8c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm3 0c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm3 0c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4z'/%3E%3C/svg%3E");
}

/*** added ***/
.userListArea .userList-body .rBtn.active {
  background: #a1ff25;
}

.userListArea .user-record {
  display: none;
  background: #fff;
  margin-top: 10px;
}
.userListArea .user-record li {
  padding: 5px 10px;
}
.userListArea .user-record li + li {
  border-top: 1px solid #999;
}
.userListArea .user-record li .time {
  font-size: 12px;
  color: #666;
}
.userListArea .user-record li .time::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  width: 10px;
  height: 10px;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23999999' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 12v-6h-2v8h7v-2h-5z'/%3E%3C/svg%3E");
}
.userListArea .user-record li .score {
  font-size: 12px;
  color: #333;
  font-weight: 600;
}
.userListArea .user-record li .score::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  width: 10px;
  height: 10px;
  background: no-repeat center center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm3 7h-3v2h3v6h-6v2h6v2c0 1.654-1.346 3-3 3h-14c-1.654 0-3-1.346-3-3v-2h2v-2h-2v-6h8v-2h-8v-2c0-1.654 1.346-3 3-3h14c1.654 0 3 1.346 3 3v2zm-8 3c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm3 0c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm-9 8c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm3 0c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4zm3 0c0 .552-.447 1-1 1s-1-.448-1-1v-4c0-.552.447-1 1-1s1 .448 1 1v4z'/%3E%3C/svg%3E");
}

/* selfStudy */
.layoutBox.video {
  clear: both;
  float: none;
}
.layoutBox.video .box {
  padding: 32px;
  height: calc(300px + 32px);
  width: calc(555px + 32px);
  margin: 0 auto;
}
.layoutBox.video .videoArea {
  background: #222;
  border-radius: 15px;
  width: 100%;
  height: 100%;
}
.subContnet.selfStudy .layoutBox.abacus {
  min-width: 400px;
}

/******** 주산 문제 세트 */
.subContnet.textbook .layoutBox.abacus .box {
  height: 364px;
  padding: 30px 15px;
}

.quiz-box {
  background: #16cdd6;
  border-radius: 20px;
  display: inline-block;
  vertical-align: top;
  padding: 15px 9px;
}

.quiz-monitor {
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
.quiz-monitor .quiz-box {
  width: 165px;
}
.quiz-monitor .question {
  background: #fff;
  border-radius: 20px;
  font-size: 45px;
  font-weight: 800;
  width: 100%;
  height: 95px;
  line-height: 95px;
}
.quiz-monitor .sum {
  background: #fff;
  border-radius: 20px;
  font-size: 45px;
  font-weight: 800;
  width: 100%;
  height: 95px;
  background: #f4f4f4;
  margin-top: 10px;
  padding-top: 10px;
}
.quiz-monitor .sum .txt {
  font-size: 16px;
  color: #999;
}
.quiz-monitor .sum .num {
  color: #666;
}
.quiz-monitor .quiz-btns {
  margin-top: 10px;
}
.quiz-monitor .quiz-btns .rBtn {
  width: 78px;
  height: 78px;
  border-radius: 78px;
  color: #fff;
  line-height: 72px;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}

.quiz-box h5 {
  text-align: center;
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}

.quiz-box.question {
  position: relative;
  padding-bottom: 35px;
}
.quiz-box.question .swiper-button-next:focus,
.quiz-box.question .swiper-button-prev:focus {
  outline: none;
}
.quiz-box.question .swiper-button-next,
.quiz-box.question .swiper-button-prev {
  top: auto;
  bottom: 8px;
  background: no-repeat center center/contain;
  width: 20px;
  height: 20px;
  opacity: 1;
  left: calc(50% - 10px);
  margin: 0;
}
.quiz-box.question .swiper-button-next.swiper-button-disabled,
.quiz-box.question .swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
}
.quiz-box.question .swiper-button-next {
  margin-left: 15px;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm5.247 8l-5.247 6.44-5.263-6.44-.737.678 6 7.322 6-7.335-.753-.665z'/%3E%3C/svg%3E");
}
.quiz-box.question .swiper-button-prev {
  margin-left: -15px;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm5.247 15l-5.247-6.44-5.263 6.44-.737-.678 6-7.322 6 7.335-.753.665z'/%3E%3C/svg%3E");
}
.questionBox {
  height: 250px;
}
.questionBox .swiper-slide {
  background: #fff;
  border-radius: 10px;
  padding: 5px;
}
.questionBox .swiper-slide .num {
  display: inline-block;
  vertical-align: middle;
  width: 95px;
  height: 70px;
  line-height: 65px;
  border: 3px solid #ccc;
  border-radius: 10px;
  font-size: 25px;
  font-weight: 600;
  color: #888;
}
.questionBox .swiper-slide .pf {
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
  margin-right: 15px;
  width: 45px;
  height: 45px;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  line-height: 9;
  background: url('/img/pass_or_fail.png') no-repeat center center/contain;
}
.questionBox .swiper-slide .pf.pass {
  background-image: url('/img/pass.png');
}
.questionBox .swiper-slide .pf.fail {
  background-image: url('/img/fail.png');
}
.questionBox .swiper-slide.swiper-slide-active .num {
  border-color: #16cdd6;
  color: #333;
}

.quiz-box.achieve {
  margin-left: 10px;
}
.achieveList li {
  padding-left: 22px;
  position: relative;
}
.achieveList li + li {
  margin-top: 8px;
}
.achieveList .num {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  left: 0;
  width: 20px;
}
.achieveList .bar {
  display: inline-block;
  height: 17px;
  width: 100%;
  border-radius: 5px;
  background: #fff;
  width: 140px;
  text-align: left;
  overflow: hidden;
}
.achieveList .bar .barIn {
  display: inline-block;
  vertical-align: top;
  color: transparent;
  font-size: 0;
  display: inline-block;
  width: 60%;
  background-color: #ffdc8a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23ffca4b' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23ffca4b' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 10%;
  height: 100%;
  border-radius: 5px;
}

/******** advanced 게임 */
.advancedArea {
  padding: 0 200px;
  position: relative;
}
.rules {
  text-align: left;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.2;
  margin: 10px 0;
  padding-left: 70px;
  position: relative;
}
.rules span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 10px;
  border: 1px solid #666;
  font-size: 14px;
  margin-right: 10px;
  font-weight: 600;
}

.ad-user .userBox {
  position: relative;
  display: inline-block;
}
.ad-user .userBox .profile {
  width: 120px;
  height: 145px;
  border-radius: 15px;
  border: 4px solid #ccc;
  background: linear-gradient(-45deg, #fff 50%, #ddd 50%);
}
.ad-user .userBox .profile .profileImg {
  width: 60px;
  height: 60px;
  margin-top: 15px;
}
.ad-user .userBox .profile .profileTxt {
  width: 60px;
  height: 60px;
  margin: 13px 0 0 0;
  border: none;
  background: #ccc;
  border-radius: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: #fff;
  padding: 0 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ad-user .userBox .start {
  position: absolute;
  top: 0;
  right: -60px;
  font-size: 14px;
  font-weight: 600;
}
.ad-user .userBox .start::after {
  content: '';
  display: block;
  height: 26px;
  width: 100%;
  background: no-repeat center right/contain;
}

.ad-user {
  position: absolute;
}
.ad-user.user01 {
  left: 0;
  top: 10px;
}
.ad-user.user02 {
  right: 0;
  top: 10px;
}
.ad-user.user03 {
  left: 0;
  bottom: 10px;
}
.ad-user.user04 {
  right: 0;
  bottom: 10px;
}

.ad-user.user01 .profile {
  background: linear-gradient(-45deg, #fffaf3 50%, #ffeeda 50%);
  border-color: #fe8f00;
}
.ad-user.user01 .profile .profileImg {
  border-color: #fe8f00;
}
.ad-user.user01 .profile .profileTxt {
  background-color: #fe8f00;
}
.ad-user.user01 .userBox .start {
  color: #fe8f00;
}
.ad-user.user01 .userBox .start::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fe8f00' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 2h-7.229l7.014 7h-13.785v6h13.785l-7.014 7h7.229l10-10z'/%3E%3C/svg%3E");
}

.ad-user.user02 .profile {
  background: linear-gradient(-45deg, #f7fbf1 50%, #e5f3d3 50%);
  border-color: #8dc63f;
}
.ad-user.user02 .profile .profileImg {
  border-color: #8dc63f;
}
.ad-user.user02 .profile .profileTxt {
  background-color: #8dc63f;
}
.ad-user.user02 .userBox .start {
  right: auto;
  left: -60px;
  color: #8dc63f;
}
.ad-user.user02 .userBox .start::after {
  transform: rotateY(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238dc63f' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 2h-7.229l7.014 7h-13.785v6h13.785l-7.014 7h7.229l10-10z'/%3E%3C/svg%3E");
}

.ad-user.user03 .profile {
  background: linear-gradient(-45deg, #fffaf3 50%, #ffdada 50%);
  border-color: #fe1e00;
}
.ad-user.user03 .profile .profileImg {
  border-color: #fe1e00;
}
.ad-user.user03 .profile .profileTxt {
  background-color: #fe1e00;
}
.ad-user.user03 .userBox .start {
  top: auto;
  bottom: 10px;
  color: #fe1e00;
}
.ad-user.user03 .userBox .start::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fe1e00' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 2h-7.229l7.014 7h-13.785v6h13.785l-7.014 7h7.229l10-10z'/%3E%3C/svg%3E");
}

.ad-user.user04 .profile {
  background: linear-gradient(-45deg, #f1f9fa 50%, #d3ebf1 50%);
  border-color: #00bff3;
}
.ad-user.user04 .profile .profileImg {
  border-color: #00bff3;
}
.ad-user.user04 .profile .profileTxt {
  background-color: #00bff3;
}
.ad-user.user04 .userBox .start {
  top: auto;
  bottom: 10px;
  right: auto;
  left: -60px;
  color: #00bff3;
}
.ad-user.user04 .userBox .start::after {
  transform: rotateY(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300bff3' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 2h-7.229l7.014 7h-13.785v6h13.785l-7.014 7h7.229l10-10z'/%3E%3C/svg%3E");
}

.ad-table {
  background: #16cdd6;
  padding: 15px;
  border-radius: 20px;
}
.ad-table .ad-table-inner {
  background: #fff;
  border-radius: 10px;
}
.ad-table .ad-board {
  width: 100%;
}
.ad-table .ad-board tr td {
  height: 62px;
  padding: 1px;
  font-size: 14px;
  border-radius: 10px;
}
.ad-table .ad-board tr:nth-child(2n-1) td:nth-child(2n) {
  background: #ebf4f4;
}
.ad-table .ad-board tr:nth-child(2n) td:nth-child(2n-1) {
  background: #ebf4f4;
}
.ad-table .ad-board tr td span {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 62px;
  text-align: center;
  border-radius: 10px;
}

.ad-table .ad-board tr td.user01 span {
  background: #fe8f00;
  color: #fff;
}
.ad-table .ad-board tr td.user02 span {
  background: #8dc63f;
  color: #fff;
}
.ad-table .ad-board tr td.user03 span {
  background: #fe1e00;
  color: #fff;
}
.ad-table .ad-board tr td.user04 span {
  background: #00bff3;
  color: #fff;
}

/******** 학생리스트 studentList */
.subContnet.studentList .layoutArea {
  position: relative;
}
.subContnet.studentList .layoutBox.abacus {
  position: absolute;
  top: calc(362px + 10px);
}
.subContnet.studentList .layoutBox.abacus .box::after {
  content: '';
  display: block;
  clear: both;
}
.subContnet.studentList .layoutBox.abacus .abacus-conatiner {
  width: 50%;
  float: left;
}
.subContnet.studentList .layoutBox.abacus .abacus-conatiner.teacher {
  padding-right: 5px;
}
.subContnet.studentList .layoutBox.abacus .abacus-conatiner.student {
  padding-left: 5px;
}

.subContnet.studentList .layoutBox.abacus .abacus-header .profile {
  padding-left: 0;
  margin-top: 10px;
}
.subContnet.studentList .layoutBox.abacus .profile .profileTxt {
  border: none;
}
.subContnet.studentList .layoutBox.abacus .profile .profileTxt .state {
  width: auto;
  border-radius: 10px;
}
.subContnet.studentList .layoutBox.abacus .profile .profileTxt .name {
  display: none;
}

.layoutBox.studentList .box {
  border-radius: 20px 0 20px 20px;
}
.student-list-top::after {
  content: '';
  display: block;
  clear: both;
}

.student-list-top .lnbArea {
  display: inline-block;
  margin-bottom: 0;
  float: left;
  max-width: 60%;
}
.student-list-top .lnbArea .depth {
  max-width: 100%;
}
.student-list-top .lnbArea .depth .top {
  border-width: 4px;
  font-size: 16px;
  padding: 10px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.student-list-top .lnbArea .depth .top::after {
  width: 15px;
}
.student-list-top .lnbArea .depth .selectList {
  top: 58px;
}

.student-list-top .topBtn {
  float: right;
  background: #fff;
  padding: 10px 10px 0 0;
  position: relative;
  border-radius: 0 20px 0 0;
  box-shadow: 2px -1px 2px rgba(0, 0, 0, 0.15);
}
.student-list-top .topBtn::before {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 84px;
  left: -84px;
  bottom: 0;
  background: url('/img/abacus_radius_w.png') no-repeat center center/100% 100%;
}
.student-list-top .topBtn .mBtn {
  padding: 0 30px;
}

.student-list ul::after {
  content: '';
  display: block;
  clear: both;
}
.student-list ul li {
  width: 25%;
  float: left;
  padding: 4px 10px;
  text-align: center;
}
.student-list .studentBox {
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid transparent;
}
.student-list .studentBox .txt {
  background: #999;
  color: #fff;
  font-size: 16px;
  padding: 7px;
}
.student-list .studentBox .txt a {
  color: #fff;
}
.student-list .studentBox .num {
  background: #f0f0f0;
  color: #666;
  padding: 7px;
}
.student-list .studentBox .num input {
  width: 100%;
  height: 100%;
  text-align: center;
  border: none;
  background: none;
  font-size: 22px;
  font-weight: 800;
}

.student-list ul li.active .studentBox {
  border-color: #16cdd6;
}
.student-list ul li.active .studentBox .txt {
  background: #16cdd6;
}
.student-list ul li.active .studentBox .num {
  background: #fff;
  color: #333;
}