.area-print-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-popup-background {
  width: 100%;
  height: 130%;
  background-color: #000000;
  opacity: 0.7;
}

.area-print-popup-content {
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
  position: relative;
  width: 100%;
  max-width: 690px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  max-height: 470px;
}

.area-print-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-close-print-popup-btn {
  width: 16px;
  height: 16px;
  padding: 20px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 0px;
}

.area-print-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-print-popup-body {
  box-sizing: border-box;
  max-height: calc(100% - 58px);
  overflow-y: auto;
}

.area-print-popup-body-top {
  text-align: center;
  border-bottom: 2px solid #C6D5D9;
  margin: 0px 20px;
}

.area-print-popup-body-top-txt1 {
  padding-top: 40px;
  padding-bottom: 30px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #555555;
  line-height: 1.4;
}

.print-seven-txt {
  font-weight: 700;
}

.area-print-popup-body-top-txt2 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.72px;
  color: #000000;
}

.area-print-popup-body-bottom {
  text-align: center;
  margin: 0px 20px;
}

.area-print-popup-body-bottom-txt1 {
  padding-top: 30px;
  font-size: 21px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.42px;
  color: #242424;
  line-height: 1.8;
  word-break: keep-all;
}

.area-print-popup-body-bottom-txt2 {
  font-weight: 400;
}

.area-print-pupup-btn {
  display: flex;
  margin: 30px auto 40px;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 68px;
  background-color: #FFE957;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-preshare-popup .img-print-popup-check {
  display: none;
}

.img-print-popup-check {
  margin-right: 15px;
  width: 16px;
  height: 12px;
}

.img-print-popup-check-disabled {
  margin-right: 15px;
  width: 16px;
  height: 12px;
}

.area-preshare-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-preshare-popup-content {
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
  position: relative;
  width: calc(100% - 20px);
  max-width: 700px;
  height: calc(100% - 20px);
  max-height: 660px;
}

.area-preshare-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-preshare-popup-body {
  box-sizing: border-box;
  max-height: calc(100% - 58px);
  overflow-y: auto;
}

.area-close-preshare-popup-btn {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 20px;
  cursor: pointer;
}

.area-preshare-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-preshare-popup-body-top {
  text-align: center;
  border-bottom: 2px solid #C6D5D9;
  margin: 0px 20px;
}

.area-preshare-popup-body-top-txt3 {
  padding-top: 40px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #555555;
}

.area-preshare-popup-body-top-txt4 {
  margin-top: 4px;
  font-size: 36px;
  height: 50px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.72px;
  color: #000000;
  text-align: center;
  border: 0px;
  outline: 0px;
  width: calc(100% - 40px);
}

.area-preshare-popup-body-top-txt1 {
  padding-top: 20px;
  padding-bottom: 30px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #555555;
  line-height: 1.4;
}

.area-preshare-popup-body-top-txt2 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.72px;
  color: #000000;
}

.area-preshare-popup-body-bottom {
  text-align: center;
  margin: 0px 20px;
}

.area-preshare-popup-body-bottom-txt1 {
  padding-top: 30px;
  padding-bottom: 40px;
  font-size: 21px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.42px;
  color: #242424;
  line-height: 1.6;
  word-break: keep-all;
}

.area-preshare-popup-body-bottom-txt2-bold {
  font-weight: 700;
  background-color: #FFF700;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  word-break: keep-all;
}

.area-preshare-popup-body-bottom-txt1-mobile {
  display: none;
  padding-top: 40px;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.42px;
  color: #242424;
  line-height: 1.8;
}

.area-preshare-popup-body-bottom-txt2-mobile {
  display: none;
  padding-top: 8px;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.42px;
  color: #242424;
}

.area-preshare-popup-body-bottom-txt3-mobile {
  display: none;
  padding-top: 8px;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.42px;
  color: #242424;
}

.area-preshare-copy-code {
  margin: 0px auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 68px;
  background-color: #1EB3C8;
  color: #FFFFFF;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  cursor: pointer;
}

.area-preshare-pupup-btn {
  display: flex;
  margin: 0px auto 40px;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 68px;
  background: #EDEDED 0% 0% no-repeat padding-box;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #BEBEBE;
}

.preshare-btn-block {
  position: absolute;
  width: 310px;
  height: 68px;
  left: 0;
  right: 0;
  margin: 0px auto;
}

.img-preshare-popup-check {
  margin-right: 15px;
  width: 16px;
  height: 12px;
}

.area-answer-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
}

.area-answer-popup-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 440px;
  height: 456px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation: bounceIn;
  animation-duration: 1s;
}

.area-answer-popup-content img {
  width: 100%;
}

.area-wrong-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
}

.area-wrong-popup-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 440px;
  height: 456px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation: wobble;
  animation-duration: 1s;
}

.area-wrong-popup-content img {
  width: 100%;
}

.area-enter-popup {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 40;
  min-height: 680px;
  justify-content: center;
  align-items: center;
  background-color: #F2F6F7;
  margin-top: -55px;
}

.area-enter-popup-background {
  width: 100%;
  height: 100%;
  background-color: #F2F6F7;
}

.area-enter-popup-content {
  width: 100%;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #C6D5D9;
  text-align: center;
  position: relative;
  padding: 35px 40px 40px 40px;
  box-sizing: border-box;
  max-width: 480px;
  min-height: 640px;
}

.area-enter-popup-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.area-enter-popup-logo img {
  /* width: 155px; */
  height: 50px;
}

.area-enter-popup-grade {
  margin: 0px auto;
  border-top: 1px solid #E2E2E2;
  display: flex;
  justify-content: center;
  /* margin-right: 15px; */
}

.enter-popup-unit {
  margin-left: 15px;
  font-weight: 700;
}

.area-enter-popup-title {
  margin: 10px auto 0px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E2E2E2;
  display: flex;
  justify-content: center;
}

.enter-popup-round-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  margin-top: 20px;
  padding: 0px 25px;
  border: 1px solid #707070;
  border-radius: 28px;
  font-family: 'Noto Sans KR';
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.44px;
  color: #000000;
}

.enter-popup-title {
  font-size: 27px;
  padding: 0px 20px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.44px;
  color: #000000;
  line-height: 1.2;
  word-break:keep-all;
}

.area-enter-popup-date {
  margin-top: 20px;
  margin-bottom: 45px;
}

.enter-popup-date-title {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #707070;
  margin-bottom: 10px;
}

.enter-popup-date {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #707070;
}

.enter-popup-date-seven-txt {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.28px;
  color: #000000;
}

.area-enter-popup-code {
  display: none;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  width: 335px;
  height: 62px;
  margin: 20px auto;
  background-color: #F2F6F7;
  border-radius: 5px;
}

.area-enter-popup-input-student-seq {
  visibility: hidden;
}

.enter-popup-class-number {
  width: 335px;
  height: 62px;
  border-top: 1px solid #CECECE;
  border-left: 1px solid #CECECE;
  border-right: 1px solid #CECECE;
  border-bottom: 0px;
  text-align: center;
  outline: 0;
  font-size: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-sizing: border-box;
}

.enter-popup-class-number::placeholder {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #7c7c7c;
}

.enter-popup-input-name {
  width: 335px;
  height: 62px;
  border: 1px solid #CECECE;
  text-align: center;
  outline: 0;
  font-size: 16px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.enter-popup-input-name::placeholder {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #7c7c7c;
}

.enter-popup-input-pw {
  width: 335px;
  height: 62px;
  border: 1px solid #CECECE;
  text-align: center;
  outline: 0;
  font-size: 16px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.enter-popup-input-pw::placeholder {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #7c7c7c;
}

.area-enter-popup-input-pw-f {
  margin: 0px auto;
  display: none;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 335px;
  height: 62px;
  background-color: #E2E2E2;
  border: 1px solid #CECECE;
  box-sizing: border-box;
  margin-bottom: 20px;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.9px;
  color: #242424;
}

.area-enter-popup-validate-msg-pw-f {
  display: none;
}

.area-enter-popup-validate-msg {
  margin: 0 auto;
  max-width: 335px;
}

.area-my-quiz-delete-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-my-quiz-delete-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 650px;
  max-height: 394px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

#groupReportDeletePopup .area-my-quiz-delete-popup-content {
  max-height: 448px;
}

#reportDataDeletePopup .area-my-quiz-delete-popup-content {
  max-height: 448px;
}

#reportUnitedDeletePopup .area-my-quiz-delete-popup-content {
  max-height: 568px;
}

.area-my-quiz-delete-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-my-quiz-delete-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-close-my-quiz-delete-popup-btn {
  width: 16px;
  height: 16px;
  padding: 20px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 0px;
}

.area-my-quiz-delete-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-my-quiz-delete-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-united-delete-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.area-united-delete-txt1 {
  margin-top: 40px;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.4px;
  color: #242424;
}

.area-united-delete-txt2 {
  margin-top: 12px;
  margin-bottom: 30px;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.4px;
  color: #242424;
}

.area-united-delete-body {
  background-color: #F5F5F5;
  border-radius: 10px;
  margin-left: 40px;
  margin-right: 40px;
}

.area-united-delete-body-mobile {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% - 40px);
  margin: 0px auto;
  background-color: #F5F5F5;
  border-radius: 10px;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -1px;
  color: #242424;
  padding: 20px 0px;
}

.area-united-delete-body {
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.6px;
  color: #000000;
  width: 570px;
  padding: 30px 0px;
}

.area-united-delete-body-txt1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}

.area-united-delete-body-char {
  margin-right: 10px;
  margin-top: -6px;
}

.area-united-delete-body-mobile-txt1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.area-united-delete-body-mobile-txt2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 12px;
  margin-top: 10px;
}

.area-united-delete-body-mobile-txt3 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20px;
}

.area-united-delete-body-mobile-txt4 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 12px;
  margin-top: 10px;
}

.area-united-delete-body-mobile-char {
  margin-right: 5px;
  margin-top: -5px;
}

.area-united-delete-body-txt2 {
  margin-top: 10px;
  margin-left: 43px;
  margin-bottom: 20px;
}

.area-united-delete-body-txt3 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}

.area-united-delete-body2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.6px;
  margin-top: 30px;
  margin-bottom: 40px;
}

#btnUnitedDeletePopupCancel {
  margin-bottom: 40px;
}

#btnUnitedDeletePopup {
  margin-bottom: 40px;
}

.area-my-quiz-delete-txt1 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  line-height: 1.5;
  margin-top: 60px;
  margin-bottom: 40px;
  word-break: keep-all;
  text-align: center;
}

.area-my-quiz-delete-txt1-red {
  color: #D2190D;
}

.area-my-quiz-delete-bottom {
  display: flex;
  justify-content: center;
}

.area-my-quiz-delete-pupup-btn {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 60px;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 68px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-my-quiz-delete-pupup-btn-check {
  background-color: #FFE957;
}

.area-my-quiz-delete-pupup-btn-cancel {
  background-color: #E2E2E2;
}

.img-my-quiz-delete-popup-check {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}

.img-my-quiz-delete-popup-cancel {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}


.area-submitter-delete-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-submitter-delete-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 650px;
  max-height: 380px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-submitter-delete-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-submitter-delete-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-close-submitter-delete-popup-btn {
  width: 16px;
  height: 16px;
  padding: 20px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 0px;
}

.area-submitter-delete-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-submitter-delete-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-submitter-delete-txt1 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  line-height: 1.3;
  margin-top: 60px;
  margin-bottom: 40px;
  word-break: keep-all;
  text-align: center;
}

.area-submitter-delete-bottom {
  display: flex;
  justify-content: center;
}

.area-submitter-delete-pupup-btn {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 60px;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 68px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-submitter-delete-pupup-btn-check {
  background-color: #FFE957;
}

.area-submitter-delete-pupup-btn-cancel {
  background-color: #E2E2E2;
}

.img-submitter-delete-popup-check {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}

.img-submitter-delete-popup-cancel {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}


.area-move-archive-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-move-archive-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 650px;
  max-height: 380px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-move-archive-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-move-archive-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-close-move-archive-popup-btn {
  width: 16px;
  height: 16px;
  padding: 20px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 0px;
}

.area-move-archive-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-move-archive-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-move-archive-txt1 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  line-height: 1.3;
  margin-top: 60px;
  margin-bottom: 40px;
  word-break: keep-all;
}

.area-move-archive-bottom {
  display: flex;
  justify-content: center;
}

.area-move-archive-pupup-btn {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 60px;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 68px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-move-archive-pupup-btn-check {
  background-color: #FFE957;
}

.area-move-archive-pupup-btn-cancel {
  background-color: #E2E2E2;
}


.area-save-toast-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -35px;
  margin-left: -160px;
  width: 320px;
  height: 60px;
  background-color: #303030;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 10;
  border-radius: 5px;
  box-shadow: 1px 1px 2px #00000033;
  transition: 0.3s;
}

.area-save-toast-popup-txt {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #FFF700;
}



.area-limit-archive-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-limit-archive-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 650px;
  max-height: 426px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-limit-archive-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-limit-archive-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-close-limit-archive-popup-btn {
  width: 16px;
  height: 16px;
  padding: 20px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 0px;
}

.area-limit-archive-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-limit-archive-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-limit-archive-txt1 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  line-height: 1.3;
  margin-top: 60px;
  margin-bottom: 40px;
  word-break: keep-all;
  text-align: center;
}

.area-limit-archive-bottom {
  display: flex;
  justify-content: center;
}

.area-limit-archive-pupup-btn {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 60px;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 68px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-limit-archive-pupup-btn-check {
  background-color: #FFE957;
}

.area-limit-archive-pupup-btn-cancel {
  background-color: #E2E2E2;
}

.area-empty-archive-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-empty-archive-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 650px;
  max-height: 401px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-empty-archive-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-empty-archive-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-close-empty-archive-popup-btn {
  width: 16px;
  height: 16px;
  padding: 20px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 0px;
}

.area-empty-archive-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-empty-archive-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-empty-archive-txt1 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  line-height: 1.3;
  margin-top: 60px;
  margin-bottom: 40px;
  word-break: keep-all;
  text-align: center;
  line-height: 1.6;
}
.area-empty-archive-txt1-color {
  color: #D2190D;
}

.area-empty-archive-bottom {
  display: flex;
  justify-content: center;
}

.area-empty-archive-pupup-btn {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 60px;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 68px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-empty-archive-pupup-btn-check {
  background-color: #FFE957;
  margin-right: 0px;
}

.area-empty-archive-pupup-btn-cancel {
  background-color: #E2E2E2;
}

.area-login-guide-popup {
  display: none;
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 70;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-diable-notice-popup {
  display: none;
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 70;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-login-guide-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  /* max-width: 1120px;
  max-height: 690px; */
  /* max-width: 920px;
  max-height: 530px; */
  /* max-width: 960px; */
  max-width: 860px;
  max-height: 620px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
  /* margin-top: 76px; */
}

.area-disable-noti-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 846px;
  max-height: 518px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
  border-radius: 15px;
  padding: 10px;
}

.area-class-guide-popup-content {
  max-width: 1120px;
  max-height: 690px;
}

.area-login-guide-popup-content-body {
  width: 100%;
  height: 100%;

}

.swiper3 {
  overflow-y: auto;
}

.area-login-guide-popup-info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 76px;
  font-size: 46px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.92px;
  margin-top: -76px;
  color: #FFFFFF;
}

.area-login-guide-popup-info-mobile {
  font-size: 26px;
  display: none;
  text-align: center;
  line-height: 1.3;
}

.swiper-slide-bottom-inner-mobile {
  display: none;
}


.swiper-slide-title {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 4px solid #1EB3C8;
  height: 81px;
  position: relative;
}

.swiper-slide-inner-title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* .area-login-guide-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 4px solid #1EB3C8;
  height: 81px;
  position: relative;
} */

.area-login-guide-new {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 57px;
  height: 30px;
  background-color: #FFE7E5;
  border-radius: 15px;
  margin-right: 10px;
}

.area-login-guide-new-txt {
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.4px;
  color: #FF3529;
}

.area-login-guide-popup-header-txt {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.6px;
  color: #242424;
  z-index: 2;
}

.area-class-guide-popup-header-txt {
  font-size: 30px;
}

.area-close-login-guide-popup-btn {
  width: 23px;
  height: 23px;
  padding: 29px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 4px;
  z-index: 2;
}

.area-close-login-guide-popup-btn-mobile {
  display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -70px;
  right: 0px;
  cursor: pointer;
}

.area-close-class-guide-popup-btn-mobile {
  top: -40px;
}

.area-close-notice-pw-mobile {
  display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -40px;
  right: 0px;
  cursor: pointer;
}

.area-login-guide-popup-header-bar {
  width: calc(100% - 40px);
  height: 1px;
  background-color: #E2E2E2;
  margin: 0px auto;
}

.swiper-silde-login-guide-top {
  /* height: 472px; */
  height: 312px;
}

.swiper-silde-class-guide-top {
  height: 472px;
}

.pw-guide-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  height: 352px;
}

.img-pw-giude-popup {
  width: 736px;
  height: 352px;
  pointer-events: none;
}

.img-pw-giude-popup-mobile {
  display: none;
  margin: 0px auto;
  width: 315px;
}

.pw-guide-link-btn {
  width: 360px;
  height: 58px;
  margin: 25px auto;
  background-color: #3E3E40;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.72px;
  color: #FFFFFF;
}


.area-my-quiz-cnt-content {
  max-width: 860px;
  max-height: 487px;
}

.my-quiz-cnt-header-txt {
  color: #17809C;
}

.my-quiz-cnt-guide-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.4px;
  color: #242424;
}

.my-quiz-cnt-guide-top-txt1 {
  margin-bottom: 10px;
}

.my-quiz-cnt-guide-top-txt-color {
  color: #D2190D;
  font-weight: 700;
}

.mobile-my-quiz-cnt-guide-top {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 14px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #242424;
}

.mobile-my-quiz-cnt-guide-top-txt-bold {
  font-weight: 700;
  color: #D2190D;
}

.mobile-my-quiz-cnt-guide-top-txt1 {
  margin-bottom: 10px;
}

.mobile-my-quiz-cnt-guide-top-txt2 {
  margin-bottom: 10px;
}

.my-quiz-cnt-guide-body {
  width: 740px;
  height: 188px;
  background-color: #F5F5F5;
  border-radius: 10px;
  margin: 22px auto;
}

.my-quiz-cnt-guide-body1 {
  display: flex;
  padding-top: 20px;
  justify-content: center;
}

.my-quiz-cnt-guide-body2 {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #242424;
}

.my-quiz-cnt-guide-body2-txt1 {
  margin-bottom: 5px;
}

.mobile-my-quiz-cnt-guide-body2 {
  display: none;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.26px;
  color: #242424;
}

.mobile-my-quiz-cnt-guide-body2-txt1 {
  margin-bottom: 5px;
}

.mobile-my-quiz-cnt-guide-body2-txt2 {
  margin-bottom: 5px;
}

.my-quiz-cnt-guide-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.4px;
  color: #242424;
}

.mobile-my-quiz-cnt-guide-bottom {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #242424;
  padding-bottom: 40px;
}

.img-my-quiz-cnt-popup-emoji {
  margin-left: 5px;
}

.mobile-img-my-quiz-cnt-popup-emoji {
  width: 20px;
  margin-left: 5px;
}

.mobile-my-quiz-cnt-guide-bottom-txt1 {
  margin-bottom: 8px;
}

.mobile-my-quiz-cnt-guide-bottom-txt2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-quiz-all-delete-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}

.img-my-quiz-all-delete {
  width: 740px;
  border: 1px solid #E2E2E2;
  border-radius: 10px;
}

.img-my-quiz-all-delete-mobile {
  display: none;
  border: 1px solid #E2E2E2;
}

.area-all-delete-confirm {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 66px;
  background-color: #F3FEFF;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.72px;
  color: #242424;
}

.area-confirm-check {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.bg-all-delete-check1 {
  display: none;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #1EB3C8;
  border: 1px solid #1EB3C8;
  border-radius: 100%;
  cursor: pointer;
  margin-right: 8px;
}

.bg-all-delete-check2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #FFFFFF;
  border: 1px solid #CECECE;
  border-radius: 100%;
  cursor: pointer;
  margin-right: 8px;
}

.my-quiz-all-delete-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.my-quiz-all-delete-bottom-mobile {
  display: none;
  margin-top: 22px;
}

.my-quiz-all-delete-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.4px;
  color: #242424;
}

.my-quiz-all-delete-txt2 {
  margin-top: 10px;
}

.my-quiz-all-delete-txt3 {
  margin-top: 10px;
}

.my-quiz-all-delete-txt4 {
  margin-top: 10px;
}

.my-quiz-all-delete-txt5 {
  margin-top: 10px;
}

.my-quiz-all-delete-txt6 {
  margin-top: 10px;
}

.my-quiz-all-delete-txt-color {
  color: #D2190D;
  font-weight: 700;
  margin-left: 7px;
  margin-right: 7px;
}

.btn-report-down-guide {
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 142px;
  height: 27px;
  border-radius: 100px;
  background-color: #242424;
  font-size: 15px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.6px;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 1px 1px 2px #00000033;
}

.btn-all-delete-link-area-mobile {
  width: 142px;
  margin: 15px auto 20px;
  display: flex;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 20px;
}

.btn-report-down-guide-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 142px;
  height: 27px;
  border-radius: 100px;
  background-color: #242424;
  font-size: 15px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.6px;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 1px 1px 2px #00000033;
}

.btn-all-delete-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 360px;
  height: 58px;
  background-color: #3E3E40;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.72px;
  color: #FFFFFF;
}

.area-all-delete-content {
  height: 510px;
}

.area-all-delete-report-content {
  height: 503px;
}

.swiper3-slide-img {
  /* margin-top: 60px; */
  margin-top: 12px;
  /* width: 736px; */
  width: 600px;
}

.swiper3-slide-img-mobile {
  display: none;
  margin: 0px auto;
  width: 284px;
  padding-top: 30px;
}

.swiper3-slide-mobile-img3 {
  width: 284px;
  padding-top: 30px;
}

.swiper5-slide-img {
  margin-top: 40px;
  width: 696px;
}

.swiper5-slide-img-mobile {
  display: none;
  margin: 30px auto 0px;
  width: 284px;
}

.area-login-guide-popup-bottom-txt-color {
  color: #4AA0B9;
  font-weight: 700;
}

.ico-login-guide-popup-slide3 {
  margin-right: 10px;
}

.login-guide-underline {
  position: absolute;
  top: 22px;
  left: unset;
  right: 0px;
  z-index: 1;
  width: 147px;
  height: 18px;
  background-color: #FFE957;
}

.pw-guide-underline {
  position: absolute;
  top: 19px;
  left: 213px;
  z-index: 1;
  width: 123px;
  height: 18px;
  background-color: #FFE957;
}

.login-guide-underline-slide1 {
  position: absolute;
  top: 19px;
  left: 0px;
  z-index: 1;
  width: 142px;
  height: 18px;
  background-color: #FFE957;
}

.login-guide-underline-slide2 {
  position: absolute;
  top: 19px;
  left: 0px;
  z-index: 1;
  width: 232px;
  height: 18px;
  background-color: #FFE957;
}

.login-guide-underline-slide3 {
  position: absolute;
  top: 19px;
  left: 0px;
  z-index: 1;
  width: 208px;
  height: 18px;
  background-color: #FFE957;
}

.class-guide-underline-slide1 {
  position: absolute;
  top: 20px;
  left: 232px;
  z-index: 1;
  width: 84px;
  height: 18px;
  background-color: #FFE957;
}

.class-guide-underline-slide2 {
  position: absolute;
  top: 20px;
  left: 0px;
  z-index: 1;
  width: 232px;
  height: 18px;
  background-color: #FFE957;
}

.class-guide-underline-slide3 {
  position: absolute;
  top: 20px;
  left: 0px;
  z-index: 1;
  width: 84px;
  height: 18px;
  background-color: #FFE957;
}

.class-guide-underline-slide4 {
  position: absolute;
  top: 20px;
  left: 0px;
  z-index: 1;
  width: 290px;
  height: 18px;
  background-color: #FFE957;
}

.area-login-guide-popup-check {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding-top: 11px; */
  right: 0px;
  bottom: -30px;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
  z-index: 40;
}

.area-diable-notice-popup-check {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  right: 0px;
  bottom: -30px;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
  z-index: 40;
  width: 100%;
}

.area-login-guide-check {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 30px;
}

.area-diable-notice-check {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.img-login-guide-popup-check-close {
  margin-left: 8px;
}

/* #loginGuideTodayClose {
  display: none;
}

input[id="loginGuideTodayClose"] + label {
	width: 20px;
	height: 20px;
	border: 1px solid #CECECE;
  background-color: #FFFFFF;
	cursor: pointer;
  margin-right: 8px;
}

input[id="loginGuideTodayClose"]:checked + label {
  border: 1px solid #CECECE;
	background-color: #FFFFFF;
  color: black;
  border: 1px solid #1EB3C8;
  background-image: url('../image/ico_login_guide_popup_checkbox_bg.svg');
  background-repeat: no-repeat;
  background-position: center;
} */

.validate-txt {
  display: inline-block;
  text-align: left;
  width: 335px;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  color: #555555;
}

.validate-txt1 {
  margin-bottom: 8px;
}

.validate-char-txt {
  display: none;
  margin-bottom: 8px;
}

.validate-bold {
  font-weight: 700;
}

.enter-popup-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 335px;
  height: 58px;
  margin: 20px auto 0;
  background-color: #1EB3C8;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.64px;
  color: #FFFFFF;
  cursor: pointer;
}

.img_enter_deco_left {
  position: absolute;
  bottom: 0;
  left: -140px;
}

.img_enter_deco_right {
  position: absolute;
  right: -135px;
  top: 0;
}

.area-share-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-share-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background-color: #1EB3C8;
}

.area-login-code {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.area-login-code-title {
  margin-top: 40px;
  margin-bottom: 8px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #555555;
}

.area-login-code-txt {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.72px;
  color: #000000;
}

.area-share-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-share-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 500px;
  max-height: 439px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-share-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-share-api {
  margin-top: 30px;
}

.area-share-popup-body-top-txt1 {
  padding-top: 60px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #555555;
}

.preshare-seven-txt {
  font-weight: 700;
}

.area-share-popup-body-top-txt2 {
  padding-top: 20px;
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.72px;
  color: #000000;
}

.area-share-student-link {
  display: none;
  justify-content: center;
  align-items: center;
  height: 46px;
  background-color: #F5F5F5;
  padding: 0px 30px;
}

.btn-share-student-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 26px;
  background-color: #ffffff;
  border: 1px solid #00000033;
  border-radius: 5px;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.52px;
  color: #242424;
  cursor: pointer;
}

.area-share-student-link-txt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.52px;
  color: #242424;
  width: calc(100% - 92px);
  padding-right: 10px;
}

.img-btn-share-student-link {
  width: 16px;
  margin-top: 2px;
}

.area-share-url-input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 40px;
}

.input-share-url {
  width: 330px;
  height: 43px;
  box-sizing: border-box;
  border: 1px solid #CECECE;
  background-color: #F2F6F7;
  outline: 0px;
}

.btn-share-url-copy {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #1EB3C8;
  width: 110px;
  height: 43px;
  border-top: 1px solid #CECECE;
  border-bottom: 1px solid #CECECE;
  border-right: 1px solid #CECECE;
  cursor: pointer;
}

.btn-share-url-copy span {
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.52px;
  color: #ffffff;
}

.share-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 50px;
}

.share-btn-list {
  /* margin: 0px 25px; */
  margin-right: 40px;
  text-align: center;
  cursor: pointer;
}

.share-btn-list:nth-child(4) {
  margin-right: 0px;
}

.btn-link-ico {
  width: 70px;
  height: 70px;
}

.area-share-btn-txt {
  font-size: 13px;
  color: #242424;
  font-weight: 500;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.26px;
  margin-top: 8px;
  display: inline-block;
}

/* #공유 옵션 */
.share-option-area {
  margin: 32px 30px 0px;
  padding: 0px 30px;
  border-bottom: 2px solid #C6D5D9;
}

.share-option-line {
  display: flex;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.32px;
  height: 20px;
}

.share-option-line:nth-child(3) {
  margin-bottom: 32px;
}

.share-option-area input[type='radio'] {
  -webkit-appearance:none;
  border: 1px solid #CECECE;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 10px #fff;
  margin: 0px 10px 0px 0px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  cursor: pointer;
}

.share-option-area label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.share-option-area input[type='radio']:checked {
  background-color: #1EB3C8;
  border: 3px solid white;
  outline: none;
  box-shadow: 0 0 0 1px #1EB3C8;
}

.area-new-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  /* width: 54px; */
  height: 20px;
  border-radius: 20px;
  display: flex;
  color: #FF3529;
  /* background-color: #FFE7E5; */
  font-size: 14px;
  font-weight: 500;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.28px;
  margin-left: 5px;
  cursor: pointer;
  line-height: 14.5px;
}

.share-new0-btn {
  width: 67px;
  color: #FFFFFF;
  background-color: #2063FF;
}

.share-new0-btn .area-new-btn-img-bg {
  margin-left: 3px;
  background-color: #FFFFFF;
}

.area-new-btn-img-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: #BEBEBE;
  margin-left: 2px;
}

.area-login-option-pw {
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 58px);
  height: 44px;
  background-color: #F5F5F5;
  border: 1px solid #E2E2E2;
  border-radius: 5px;
  box-sizing: border-box;
}

.area-login-option-pw-left {
  display: flex;
}

.area-login-option-pw-txt {
  margin-left: 20px;
  margin-right: 5px;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.64px;
  color: #242424;
}

.area-new-btn-img-bg-blue {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: #2063FF;
  margin-left: 2px;
  cursor: pointer;
}

.area-login-option-pw-outer {
  display: none;
  margin-top: 26px;
}

.area-toggle-option-pw {
  display: flex;
  align-items: center;
  width: 56px;
  height: 32px;
  border-radius: 50px;
  background-color: #1EB3C8;
  margin-right: 6px;
  cursor: pointer;
}

.btn-toggle-option-pw {
  margin-left: 4px;
  width: 24px;
  height: 24px;
  background-color: #FFFFFF;
  border-radius: 100%;
  box-shadow: 0px 2px 5px #00000029;
  transition: 0.3s;
}

.toggle-option-pw-on {
  margin-left: 28px;
}

.area-new-btn-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  color: #FF3529;
  background-color: #FFE7E5;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.26px;
  margin-left: 5px;
  cursor: pointer;
  line-height: 14.5px;
  box-shadow: 0px 1px 2px #00000029;
}

.area-new-btn-img-bg-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: #FF3529;
  margin-left: 2px;
}

.area-mobile-mixed-tooltip {
  display: none;
  z-index: 20;
  position: absolute;
  width: 390px;
  height: 35px;
  background-color: #1EB3C8;
  padding: 10px;
  box-shadow: 1px 1px 2px #00000033;
  border-radius: 5px;
  right: 0px;
  margin-right: -100px;
  top: 28px;
}

.area-mobile-mixed-tooltip::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 5px;
  top: 0%;
  right: 106px;
  margin-top: -15px;
  border-top: 8px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #1EB3C8;
  border-left: 6px solid transparent;
}

.area-mobile-mixed {
  display: none;
}

.area-mobile-mixed-tooltip-txt {
  color: #FFFFFF;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.26px;
  margin-top: 1px;
  margin-bottom: 5px;
}

.area-mobile-mixed-tooltip-txt-bold {
  color: #FFF700;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.26px;
  margin-bottom: 5px;
}

.area-share-option-tooltip-txt-bold-span {
  color: #FFF700;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.26px;
  margin-right: 5px;
}

.area-share-option-tooltip3 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 470px;
  background-color: #1EB3C8;
  padding: 10px;
  box-shadow: 1px 1px 2px #00000033;
  border-radius: 5px;
  left: 5px;
  top: 127px;
}

.area-share-option-tooltip3::after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 76%;
  right: 63%;
  margin-right: -1px;
  margin-top: 16px;
  border-top: 10px solid #1EB3C8;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}

.area-share-option-tooltip3-mobile {
  display: none;
}

.area-share-option-tooltip-line {
  display: flex;
}

.area-share-option-tooltip-txt3 {
  margin-bottom: 0px !important;
}

.share-option-tooltip-txt-margin-right {
  margin-right: 4px;
}

.share-option-tooltip-txt-margin-left {
  margin-left: 10px;
}

.share-option-tooltip-txt-margin-bottom-no {
  margin-bottom: 0px !important;
}

.area-share-option-tooltip-txt3-indent {
  margin-left: 11px;
}

.area-share-option-tooltip-mark {
  margin-top: 5px;
  margin-right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: #FFFFFF;
}

.area-share-option-tooltip0 {
  display: none;
  position: absolute;
  width: 260px;
  /* height: 38px; */
  background-color: #1EB3C8;
  padding: 10px;
  box-shadow: 1px 1px 2px #00000033;
  border-radius: 5px;
  left: 226px;
  top: 232px;
}

.area-share-option-tooltip0 .area-share-option-tooltip-txt-bold  {
  margin-bottom: 10px;
}

.area-share-option-tooltip0-sub {
  display: none;
  border-top: 1px solid #FFFFFF;
  margin-top: 10px;
  padding-top: 8px;
}

.img-share-tooltip-arrow {
  margin-left: 5px;
  cursor: pointer;
}

.area-share-option-tooltip-txt-indent {
  text-indent: 16px;
}

.area-share-option-tooltip-txt-margin-top {
  margin-top: 25px;
}

.area-share-option-tooltip0::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 5px;
  top: 62px;
  right: 100%;
  margin-top: -17px;
  border-top: 6px solid transparent;
  border-right: 8px solid #1EB3C8;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}

.area-share-option-tooltip1 {
  display: none;
  position: absolute;
  width: 316px;
  height: 50px;
  background-color: #1EB3C8;
  padding: 10px;
  box-shadow: 1px 1px 2px #00000033;
  border-radius: 5px;
  left: 339px;
  top: 112px;
}

.area-share-option-tooltip1::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 5px;
  top: 50%;
  right: 100%;
  margin-top: -17px;
  border-top: 6px solid transparent;
  border-right: 8px solid #1EB3C8;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}

.area-share-option-tooltip2 {
  display: none;
  position: absolute;
  width: 302px;
  height: 68px;
  background-color: #1EB3C8;
  padding: 10px;
  box-shadow: 1px 1px 2px #00000033;
  border-radius: 5px;
  left: 382px;
  top: 142px;
}

.area-share-option-tooltip2::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 5px;
  top: 50%;
  right: 100%;
  margin-top: -24px;
  border-top: 6px solid transparent;
  border-right: 8px solid #1EB3C8;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}

.area-share-option-tooltip-txt {
  color: #FFFFFF;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.26px;
  margin-bottom: 5px;
}

.area-share-option-tooltip-txt-bold {
  color: #FFF700;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.26px;
  margin-bottom: 5px;
}

.area-mobile-mixed-tooltip-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.area-share-tooltip-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.area-submit-result-tooltip {
  display: none;
  position: absolute;
  width: 375px;
  height: 31px;
  padding: 10px;
  border-radius: 5px;
  background-color: #1EB3C8;
  box-shadow: 1px 1px 2px #00000033;
  top: -51px;
  right: -26px;
  line-height: 13px;
  text-align: left;
}

.area-submit-result-tooltip::after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 50%;
  right: 32%;
  margin-top: 24px;
  border-top: 10px solid #1EB3C8;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}

.area-submit-result-tooltip-mobile {
  display: none;
  position: absolute;
  width: 375px;
  height: 31px;
  padding: 10px;
  border-radius: 5px;
  background-color: #1EB3C8;
  box-shadow: 1px 1px 2px #00000033;
  top: -51px;
  right: -26px;
  line-height: 13px;
  text-align: left;
}

.area-submit-result-tooltip-mobile::after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 50%;
  right: 32%;
  margin-top: 24px;
  border-top: 10px solid #1EB3C8;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}

.area-submit-result-tooltip-txt {
  color: #FFFFFF;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.26px;
  margin-bottom: 5px;
}

.area-submit-result-tooltip-txt-color {
  color: #FFF700;
}

.area-submit-result-tooltip-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.area-submit-result-tooltip-close-mobile {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* #수업도구 */
.tipbox-area-tab {
  display: flex;
  width: 200px;
  height: 54px;
  border-radius: 37px;
  border: 1px solid #CECECE;
  background-color: #FFF;
  margin-top: 100px;
  margin-bottom: 45px;
}

.tipbox-tab-active {
  background-color: #FFE957;
}

.tipbox-tab-left {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 54px;
  cursor: pointer;
  border-radius: 37px;
}

.tipbox-tab-right {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 54px;
  cursor: pointer;
  border-radius: 37px;
}

.tipbox-area-view-cube {
  display: none;
  margin-top: 45px;
}

.tipbox-cube-detail {
  display: none;
  margin-top: -24px !important;
}

.tipbox-view-btn {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height : 68px;
  border: 1px solid #CECECE;
  background-color: #FFF;
  margin-bottom: 10px;
  cursor: pointer;
  box-sizing: border-box;
}

.view-active {
  background-color: #FFE957;
  border: 1px solid #FFE957;
}

.img-tipbox-view-up {
  margin-left: -2px;
  margin-right: 14px;
}

.img-tipbox-view-front {
  margin-left: -16px;
  margin-right: 14px;
}

.img-tipbox-view-side {
  margin-right: 2px;
}

.tipbox-area-create-cube {
  position: relative;
}

.tipbox-btn-add-area {
  background-color: #EDEDED;
  width: 97px;
  height: 134px;
  position: absolute;
  left: 52px;
  border-radius: 20px;
  cursor: pointer;
}

.tipbox-btn-add-area-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.cube-btn-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
}

.tipbox-btn-delete-area {
  background-color: #EDEDED;
  width: 97px;
  height: 134px;
  position: absolute;
  left: 52px;
  border-radius: 20px;
  cursor: pointer;
  top: 132px;
  display: flex;
  flex-direction: column-reverse;
}

.tipbox-btn-delete-area-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.tipbox-arrow-area {
  display: flex;
  flex-direction: column;
  width: 180px;
  height: 180px;
  justify-content: center;
  align-items: center;
  margin: 36px auto;
  border: 7px solid #EDEDED;
  border-radius: 100%;
  overflow: hidden;
}

.tipbox-arrow-top-area {
  display: flex;
}

.tipbox-arrow-center-area {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  top: 103px;
  left: 67px;
  z-index: 5;
  background-color: white;
  box-shadow: 0px 0px 3px #00000029;
}

.tipbox-arrow-bottom-area {
  display: flex;
}

.tipbox-arrow-btn {
  cursor: pointer;
  border: 1px solid red;
}

.tipbox-arrow-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 88px;
  cursor: pointer;
}

.img-tipbox-arrow-inner {
  pointer-events: none;
}

.img-tipbox-arrow-inner-top-left-active {
  display: none;
}

.img-tipbox-arrow-inner-top-right-active {
  display: none;
}

.img-tipbox-arrow-inner-bottom-left-active {
  display: none;
}

.img-tipbox-arrow-inner-bottom-right-active {
  display: none;
}

.tipbox-arrow-inner-top-left {
  border-right: 2px solid #EDEDED;
  border-bottom: 2px solid #EDEDED;
}

.tipbox-arrow-inner-top-right {
  border-left: 2px solid #EDEDED;
  border-bottom: 2px solid #EDEDED;
}

.tipbox-arrow-inner-bottom-left {
  border-right: 2px solid #EDEDED;
  border-top: 2px solid #EDEDED;
}

.tipbox-arrow-inner-bottom-right {
  border-left: 2px solid #EDEDED;
  border-top: 2px solid #EDEDED;
}

.tipbox-cube-btn-area {
  display: flex;
  margin-top: 30px;
}

.img-tipbox-add-cube {
  margin-right: 8px;
  pointer-events: none;
}

.img-tipbox-delete-cube {
  margin-right: 8px;
  pointer-events: none;
}

#addBlock {
  margin-right: 10px;
}

.tipbox-cube-btn {
  width: 95px;
  height: 68px;
  border: 1px solid #CECECE;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  background-color: white;
  cursor: pointer;
  box-sizing: border-box;
}

.tipbox-cube-area {
  display: flex;
  width: 100%;
  height: 100%;
}

.tipbox-left-arrow-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 48px;
  height: 37px;
  top: 305px;
  left: 80px;
  cursor: pointer;
}

.tipbox-right-arrow-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 48px;
  height: 37px;
  top: 305px;
  right: 80px;
  cursor: pointer;
}

.tipbox-shape-area {
  display: flex;
  width: 100%;
  height: 100%;
}

.tipbox-left-area {
  position: relative;
  width: 840px;
  height: 100%;
}

.tipbox-area-canvas {
  padding-left: 40px;
}

.area-point-cursor {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 205px;
  left: 295px;
  box-sizing: border-box;
  transform: rotateX(1.05rad) rotateZ(0.7853rad);
}

.point-cursor-line {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  display: flex;
}

.point-cursor-box {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.tipbox-description-bottom-area {
  margin-top: 11px;
  text-align: center;
  height: 21px;
  line-height: 21px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.42px;
  color: #334347;
}

.tipbox-description-bottom-area span {
  display: inline-block;
}

.tipbox-scroll-area {
  position: absolute;
  top: 164px;
  right: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 302px;
  border-radius: 28px;
  border: 1px solid #CECECE;
}

.tipbox-plus-icon {
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.4px;
  position: absolute;
  top: 20px;
}

.tipbox-minus-icon {
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.4px;
  position: absolute;
  bottom: 20px;
}



input[type=range] {
  -webkit-appearance: none;
  outline: 0px;
  transform: rotate(-90deg);
  position: absolute;
  cursor: pointer;
  margin: 8px 0px 0px 0px;
  width: 212px !important;
  width: 210px !important;
  height: 16px !important;
  border: 1px solid #DCDCDC;
  border-radius: 100px;
  background: linear-gradient(to right, #1EB3C8 0%, #1EB3C8 50%, #E9E9E9 50%, #E9E9E9 100%);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid #098597;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: white;
}

.tipbox-right-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 280px;
  height: 100%;
  background-color: #F2F6F7;
}

.tipbox-right-cube-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 280px;
  height: 100%;
}

.tipbox-shape-btn:first-child {
  margin-top: 164px;
}

.tipbox-shape-btn {
  margin-top: 10px;
  width: 200px;
  height: 68px;
  border: 1px solid #CECECE;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  background-color: white;
  cursor: pointer;
}

.shape-btn-txt2 {
  margin-right: 67px;
}

.shape-btn-txt3 {
  margin-right: 51px;
}

.shape-btn-active {
  background-color: #FFE957;
  border: 1px solid #FFE957;
}

.shape-btn-active span:nth-child(2) {
  display: none;
}

.shape-btn-active span:nth-child(3) {
  display: flex;
}

.area-tipbox-check {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: #CECECE;
  border-radius: 20px;
}

.area-tipbox-check-active {
  display: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: #0D596D;
  border-radius: 20px;
}

.tipbox-shape-reset {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  width: 200px;
  height: 63px;
  background-color: #1EB3C8;
  color: white;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  cursor: pointer;
}

.tipbox-cube-reset {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 65px;
  width: 200px;
  height: 63px;
  background-color: #1EB3C8;
  color: white;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  cursor: pointer;
}

.tipbox-view-shape-reset {
  margin-top: 26px;
}

.area-tipbox-hide-btn {
  display: none;
}




.tipbox-outer-area {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1000px;
}

.tipbox-title-area {
  padding-top: 40px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  height: 30px;
  line-height: 30px;
  letter-spacing: -0.6px;
  text-align: center;
  min-width: 1000px;
}

.tipbox-description-area {
  position: absolute;
  left: 40px;
  text-align: right;
  height: 21px;
  line-height: 21px;
  top: 161px;
  right: 40px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.42px;
  color: #334347;
  min-width: 1000px;
}

.tipbox-description-area-calc {
  position: absolute;
  left: 40px;
  text-align: right;
  height: 21px;
  line-height: 21px;
  top: 100px;
  right: 40px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.42px;
  color: #334347;
  min-width: 1000px;
}

.tipbox-description-area span {
  display: inline-block;
}

.img-tipbox-description {
  vertical-align: bottom;
  margin-right: 2px;
}

.container-tipbox-clock {
  width: 1000px;
  margin: 0px auto;
}

.area-tipbox-clock {
  margin: 32px auto 30px;
}

.tipbox-text-bg {
  width: 1040px;
  min-width: 1000px;
  height: 76px;
  background-color: #F2F2F2;
  margin: 0px auto;
  border-radius: 5px;
}

.tipbox-canvas-area {
  position: relative;
  margin: 73px auto 70px;
}

.canvas-tip-24clock {
  display: block;
  margin: 0px auto;
}

.tipbox-area-timeTop {
  position: absolute;
  top: 3px;
  left: 43px;
  display: flex;
}

.tipbox-area-timeBottom {
  position: absolute;
  top: 93px;
  right: 30px;
  display: flex;
}

.time-bloc {
  display: inline-block;
  width: 32px;
  height: 28px;
  font-size: 28px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.56px;
  text-align: center;
  margin-right: 10px;
  background-color: white;
}


.tipbox-area-timetxt {
  font-size: 28px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.56px;
  height: 40px;
  color: #FFFFFF;
  background-color: #555555;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tipbox-area-timetxt1 {
  width: 187px;
  position: absolute;
  top: 140px;
  left: 215px;
}

.tipbox-area-timetxt2 {
  width: 187px;
  position: absolute;
  top: 140px;
  left: 715px;
}

.tipbox-area-timetxt3 {
  width: 177px;
  position: absolute;
  top: 195px;
  left: 475px;
}

.tipbox-detail-area {
  margin: 0px auto;
  width: 618px;
  height: 114px;
}

.tipbox-detail-line1 {
  display: flex;
  align-items: center;
}

.tipbox-detail-line2 {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.tipbox-detail-morning {
  font-size: 42px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.84px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 52px;
  background-color: #F1E2FF;
  margin-right: 10px;
}

.tipbox-detail-afternoon {
  font-size: 42px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.84px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 52px;
  background-color: #FFEFCD;
  margin-right: 10px;
}

.tipbox-detail-txt {
  font-size: 42px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.84px;
}

.btn-tipbox-next-active-24 {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 68px;
  background-color: #FFE957;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #000000;
  cursor: pointer;
}






.area-tipbox-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-tipbox-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background-color: #1EB3C8;
}

.area-tipbox-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-tipbox-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 1120px;
  max-height: 662px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-share-tipbox-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}


.tipbox-top-area {
  min-width: 1000px;
  height: 392px;
  margin: 0px 40px;
  border-bottom: 2px solid #C6D5D9;
  text-align: center;
}

.tipbox-bottom-area {
  min-width: 1000px;
  height: calc(100% - 394px);
  margin: 0px 40px;
}

.tipbox-text-title {
  padding-top: 40px;
  padding-bottom: 30px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.6px;
  text-align: center;
}

.tipbox-text-subTitle {
  padding-top: 42px;
  font-size: 30px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.6px;
}

.tipbox-number {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #3E3E40;
  border-radius: 100%;
  color: #FFFFFF;
  text-align: center;
  font-size: 26px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.52px;
}

.area-tipbox-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}

.btn-tipbox-check {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 68px;
  background-color: #1EB3C8;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #FFFFFF;
  cursor: pointer;
}

.btn-tipbox-prev {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 68px;
  background-color: #EDEDED;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #BEBEBE;
  margin-left: 10px;
}

.btn-tipbox-prev-active {
  display: none;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 68px;
  background-color: #FFE957;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #000000;
  cursor: pointer;
  margin-left: 10px;
}

.btn-tipbox-next {
  display: none;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 68px;
  background-color: #EDEDED;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #BEBEBE;
  margin-left: 10px;
}

.btn-tipbox-next-active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 68px;
  background-color: #FFE957;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #000000;
  cursor: pointer;
  margin-left: 10px;
}

.area-tipbox-result-outer {
  display: flex;
  margin-top: 30px;
}

.area-tipbox-result {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  width: 830px;
  height: 68px;
  background-color: #F2F2F2;
  border-radius: 5px;
}

.tipbox-result-txt {
  font-size: 28px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.56px;
}

.tipbox-result-txt1 {
  font-weight: 700;
  color: #1453FF;
}

.tipbox-result-txt2 {
  font-weight: 700;
  color: #EF1010;
}

.tipbox-result-txt3 {
  font-weight: 700;
  color: #1BAF0E;
}

.tipbox-result-operator {
  margin: 0px 10px;
  width: 28px;
  text-align: center;
}

.tipbox-result-operator2 {
  margin-right: 10px;
  width: 10px;
  text-align: center;
}

.tipbox-result-operator3 {
  margin-left: 10px;
  width: 10px;
  text-align: center;
}









.tipbox-btn {
  -webkit-appearance: auto;
  cursor: pointer;
}

.tipbox-btn-label {
  cursor: pointer;
}

.area-tipbox-string {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  display: none;
  text-align: center;
  margin-top: 20px;
}

.copy-canvas {
  position: absolute !important;
  transition: 0.5s;
  top: 30px !important;
  left: 30px !important;
}





.area-tipbox-clock-calculate {
  margin: 10px auto;
}

/* #수업도구 계산기 */
.clock-ani-line {
  display: flex;
}

.clock-ani-answer-line {
  display: flex;
}

.clock-time-bg {
  display: flex;
  background-color: rgba(27, 175, 14, 0.12);
  padding: 10px 10px 0px;
  margin-right: 15px;
  position: relative;
}

.clock-ani-line2 .clock-time-bg {
  padding-bottom: 10px;
}

.clock-minute-bg {
  display: flex;
  background-color: rgba(9, 69, 232, 0.1);
  padding: 10px 10px 0px;
  margin-right: 15px;
  position: relative;
}

.clock-second-bg {
  display: flex;
  background-color: rgba(239, 16, 16, 0.1);
  padding: 10px 10px 0px;
}

.clock-ani-plus-number {
  width: 114px !important;
}

.clock-ani-minus-number {
  width: 114px !important;
}

.clock-ani-number {
  border: 2px solid rgba(0, 0, 0, 1);
  transition: border-color 0.8s;
  width: 82px;
  height: 66px;
  line-height: 65px;
  font-size: 56px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: 0px;
  color: #000000;
  text-align: right;
  box-sizing: border-box;
  outline: 0px;
  margin-right: 5px;
  padding-right: 7px;
  padding-bottom: 5px;
}

.clock-ani-number1, .clock-ani-number4 {
  color: #1BAF0E;
}

.clock-ani-number2, .clock-ani-number5 {
  color: #0945E8;
}

.clock-ani-number3, .clock-ani-number6 {
  color: #EF1010;
}

.clock-ani-answer {
  width: 82px;
  height: 66px;
  line-height: 60px;
  font-size: 56px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: 0px;
  color: #000000;
  text-align: right;
  box-sizing: border-box;
  outline: 0px;
  background-color: white;
  margin-right: 5px;
  padding-right: 7px;
}

.clock-ani-plus-answer {
  width: 114px;
}

.clock-ani-minus-answer {
  width: 114px;
}

.clock-ani-answer1 {
  color: #1BAF0E;
}

.ani-answer1-value {
  transition: 0.8s;
  opacity: 0;
}

.clock-ani-answer2 {
  color: #0945E8;
  transition: border-color 0.8s;
  border: 2px solid rgba(255, 255, 255, 0);
}

.ani-answer2-value {
  transition: 0.8s;
  opacity: 0;
}

.clock-ani-answer3 {
  color: #EF1010;
  transition: border-color 0.8s;
  border: 2px solid rgba(255, 255, 255, 0);
}

.ani-answer3-value {
  transition: 0.8s;
  opacity: 0;
}

.sub-ani-number {
  transition: 0.8s;
  font-size: 42px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
}

.sub-ani-number1 {
  color: #1BAF0E;
  opacity: 0;
}

.sub-ani-number2 {
  /* color: #EF1010; */
  color: #0945E8;
  opacity: 0;
  margin: 0px 25px !important;
}

.sub-ani-number3 {
  color: #0945E8;
  opacity: 0;
}

.sub-ani-number4 {
  color: #1BAF0E;
  opacity: 0;
}

.sub-ani-number5 {
  color: #0945E8;
  opacity: 0;
  margin: 0px 25px !important;
}

.sub-ani-number6 {
  color: #EF1010;
  opacity: 0;
}

.area-clock-ani-calculate {
  width: 680px;
  margin: 76px auto;
  padding-right: 66px;
}

.area-clock-ani-minus-calculate {
  width: 680px;
  margin: 29px auto;
  padding-right: 66px;
}

.clock-ani-dline {
  width: 127px;
  height: 4px;
  background-color: #FB3199;
  position: absolute;
  transform: rotate(-29deg);
  top: 41px;
  left: 4px;
  border-radius: 50px;
  transition: 0.8s;
  opacity: 0;
}

.time-dline {
  width: 100px;
  transform: rotate(-38deg);
  left: 1px;
}

.area-clock-ani-calculate .clock-text {
  display: flex;
  align-items: center;
  font-size: 56px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: 0px;
  color: #000000;
  line-height: 65px;
}

.area-clock-ani-calculate .clock-text1 {
  width: 105px;
  height: 66px;
}

.area-clock-ani-calculate .clock-text2 {
  width: 52px;
  height: 66px;
}

.area-clock-ani-calculate .clock-text3 {
  width: 52px;
  height: 66px;
}

.clock-ani-answer-line .clock-text {
  display: flex;
  align-items: center;
  font-size: 56px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: 0px;
  color: #000000;
  line-height: 65px;
}

.clock-ani-answer-line .clock-text1 {
  width: 105px;
  height: 66px;
}

.clock-ani-answer-line .clock-time-bg {
  padding-bottom: 10px;
}

.area-clock-ani-calculate .operator {
  width: 66px;
  height: 66px;
  line-height: 65px;
  font-size: 56px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: 0px;
  color: #000000;
  margin: 0px;
  margin: 10px 0px;
}

.area-clock-ani-calculate .blank {
  width: 66px;
  height: 66px;
  line-height: 65px;
  text-align: center;
  box-sizing: border-box;
  margin: 10px 0px;
}

.area-clock-ani-calculate .bold-border-up {
  border-top: 3px solid black;
}

.btn-tipbox-check-absolute {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 496px;
  right: 40px;
  width: 200px;
  height: 68px;
  background-color: #1EB3C8;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #FFFFFF;
  cursor: pointer;
}

.btn-tipbox-retry-absolute {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 200px;
  height: 68px;
  background-color: #1EB3C8;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #FFFFFF;
  cursor: pointer;
}

.btn-tipbox-time-msg {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 496px;
  right: 251px;
  width: 626px;
  height: 68px;
  border: 3px solid #17809C;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 42px;
  color: #242424;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -2px;
}

.btn-tipbox-time-msg-minus {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 496px;
  right: 251px;
  width: 626px;
  height: 68px;
  border: 3px solid #17809C;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 42px;
  color: #242424;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.84px;
}

.btn-tipbox-second-msg-arrow {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  margin-top: -94px;
  right: 31%;
  border-top: 20px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #17809C;
  border-left: 15px solid transparent;
}

.btn-tipbox-minute-msg-arrow-minus {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  margin-top: -47px;
  right: 50%;
  border-top: 20px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #17809C;
  border-left: 15px solid transparent;
}

.btn-tipbox-minute-msg-arrow {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  margin-top: -94px;
  right: 50%;
  border-top: 20px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #17809C;
  border-left: 15px solid transparent;
}

.btn-tipbox-hour-msg-arrow-minus {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  margin-top: -47px;
  right: 72%;
  border-top: 20px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #17809C;
  border-left: 15px solid transparent;
}

@keyframes blink {
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}

.pointer-blink {
  animation: blink .8s;
  animation-iteration-count: 2;
}

.btn-second-point {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  top: 390px;
  right: 420px;
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #0D596D;
  cursor: pointer;
}

.btn-minute-point-minus {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  top: 216px;
  right: 618px;
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #0D596D;
  cursor: pointer;
}

.btn-hour-point-minus {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  top: 215px;
  right: 853px;
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #0D596D;
  cursor: pointer;
}

.second-svg-area {
  display: none;
  transition: 0.8s;
  width: 100px;
  height: 245px;
  position: absolute;
  top: 167px;
  left: 588px;
}

.second-svg-path {
  stroke: #EF1010;
  stroke-width: 2;
  stroke-dasharray: 1;
}

.btn-minute-point {
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  top: 390px;
  right: 627px;
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #0D596D;
  cursor: pointer;
}

.minute-svg-area {
  display: none;
  transition: 0.8s;
  width: 145px;
  height: 245px;
  position: absolute;
  top: 167px;
  left: 335px;
}

.minute-svg-path {
  stroke: #0945E8;
  stroke-width: 2;
  stroke-dasharray: 1;
}

.time-arrow-animation-start {
  animation: time-arrow-animation 2s cubic-bezier(0.6, 0, 0.2, 1);
}

@keyframes time-arrow-animation {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.sub-narrow-blank {
  width: 55px !important;
}

.sub-blank {
  width: 66px;
  height: 47px;
  line-height: 47px;
  text-align: center;
  box-sizing: border-box;
  margin: 0px;
}

.sub-blank2 {
  width: 122px;
}

.sub-blank3 {
  width: 57px;
}

.sub-ani-number {
  height: 47px;
  line-height: 47px;
  text-align: right;
  margin: 0px 10px;
}

.sub-narrow-number {
  width: 70px;
}

.sub-wide-number {
  width: 100px !important;
}

.minus-sub-ani-number2 {
  width: 114px;
  margin: 0px 12px !important;
  color: #0945E8;
  text-align: center;
  text-indent: 38px;
}

.minus-sub-ani-number4 {
  width: 70px;
  text-align: center;
  text-indent: 26px;
}

.minus-sub-ani-number-two {
  text-indent: -7px;
}

.minus-line01-sub-blank2 {
  width: 190px;
}

.minus-sub-blank2 {
  width: 121px;
}

.minus-sub-blank3 {
  width: 68px;
}

.minus-sub-ani-number5 {
  width: 114px;
  margin: 0px 12px !important;
  text-align: center;
  text-indent: 38px;
}

.minus-sub-ani-number-one {
  text-indent: 64px;
}

.minus-sub-ani-number6 {
  width: 114px;
  margin: 0px 12px !important;
  text-align: center;
  text-indent: 38px;
}

.area-qr-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  border: 10px solid #1EB3C8;
  box-sizing: border-box;
}

.area-qr-popup-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.area-qr-popup-header {
  position: absolute;
  right: -10px;
  top: -10px;
  z-index: 40;
  height: 90px;
}

.area-qr-close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1EB3C8;
  width: 90px;
  height: 90px;
  border-radius: 0px 0px 0px 20px;
  cursor: pointer;
}

.area-close-qr-popup-img {
  width: 40px;
  height: 40px;
}

.area-qr-popup-body {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.area-qr-popup-mark {
  display: block;
  margin: auto;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  width: auto !important;
  height: auto !important;
  position: absolute;
}



.area-submit-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-submit-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-submit-popup-body {
  box-sizing: border-box;
  max-height: calc(100% - 58px);
  overflow-y: auto;
}

.area-submit-popup-content {
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
  position: relative;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  max-height: 390px;
  max-width: 650px;
  margin: 0 10px;
}

#loginSubmitPopup .area-submit-popup-content {
  max-height: 437px;
}

.area-submit-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-close-submit-popup-btn {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  padding: 20px;
  top: 0px;
}

.area-submit-txt1 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  text-align: center;
  line-height: 1.4;
  margin-top: 60px;
  margin-bottom: 40px;
  word-break: keep-all;
}

.area-submit-txt2 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  text-align: center;
  margin-top: 20px;
}

.btn-submit-block {
  width: 287px;
  height: 86px;
}

.area-submit-pupup-btn {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 60px;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 68px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-submit-pupup-btn-check {
  background-color: #FFE957;
}

.area-submit-pupup-btn-cancel {
  background-color: #E2E2E2;
}

.area-submit-bottom {
  display: flex;
  justify-content: center;
}

.img-submit-popup-check {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}

.img-submit-popup-cancel {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}

/* #DB 중복 제출자 수정 */
.area-duplicate-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-duplicate-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1EB3C8;
  padding: 20px 0;
  position: relative;
}

.area-duplicate-popup-body {
  box-sizing: border-box;
  max-height: calc(100% - 58px);
  overflow-y: auto;
}

.area-duplicate-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-duplicate-popup-icon {
  width: 80px;
  height: 80px;
  margin-top: 22px;
  margin-right: 20px;
}

.area-duplicate-popup-content {
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
  position: relative;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  max-height: 390px;
  max-width: 650px;
  margin: 0 10px;
}

.area-duplicate-popup-header-txt {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-close-duplicate-popup-btn {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  padding: 20px;
  top: 0px;
}

.area-duplicate-txt1 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  line-height: 1.4;
  margin-top: 60px;
  margin-bottom: 40px;
  word-break: keep-all;
}

.area-duplicate-txt2 {
  font-size: 36px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.72px;
  text-align: center;
  margin-top: 20px;
}

.btn-duplicate-block {
  width: 287px;
  height: 86px;
}

.area-duplicate-pupup-btn {
  display: flex;
  flex-direction: row;
  margin: 0px 5px 60px;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 68px;
  cursor: pointer;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #242424;
}

.area-duplicate-pupup-btn-check {
  background-color: #FFE957;
}

.area-duplicate-pupup-btn-cancel {
  background-color: #E2E2E2;
}

.area-duplicate-bottom {
  display: flex;
  justify-content: center;
}

.img-duplicate-popup-check {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}

.img-duplicate-popup-cancel {
  margin-right: 15px;
  width: 20px;
  height: 20px;
}

.area-duplicate-complete {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}


.area-submit-complete {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.area-inner-submit-complete {
  position: absolute;
  margin: auto;
  width: 700px;
  height: 672px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.success_ani {
  width: 466px;
  height: 350px;
  margin: 0px auto;
}

.img_submit_complete_txt {
  margin-top: 20px;
}

.area-noti-list1-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.area-noti-list2-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.area-noti-list3-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.area-noti-list4-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.area-noti-list5-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.area-noti-list6-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.area-noti-list1-popup-content {
  position: absolute;
  width: 860px;
  height: calc(100% - 90px);
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-noti-list1-popup-header-outer {
  background-color: #4AA0B9;
}

.area-noti-list1-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 81px;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #FFFFFF;
}

.area-noti-list1-popup-header-left {
  display: flex;
  align-items: center;
}

.img_popup_noti_list_back {
  width: 36px;
  height: 36px;
  cursor: pointer;
  padding: 22px;
}

.img_popup_noti_list_close_sub {
  width: 36px;
  height: 36px;
  cursor: pointer;
  padding: 22px;
}

.area-noti-list1-popup-body {
  margin: 40px 20px 40px 40px;
  padding-right: 20px;
  overflow-y: auto;
  height: calc(100% - 162px);
}

.area-noti-list-popup-body-top {
  text-align: center;
  border-bottom: 1px solid #EAEAEA;
}

.area-noti-list1-top-sub1 {
  margin-bottom: 20px;
  font-size: 26px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.52px;
  color: #242424;
}

.area-noti-list1-top-sub-txt {
  margin-bottom: 12px;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #242424;
}

.area-noti-list1-top-sub-last {
  margin-bottom: 20px;
}

.area-noti-list1-top-round {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px auto 40px;
  width: 250px;
  height: 48px;
  border-radius: 28px;
  background-color: #4AA0B9;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-noti-list1-bottom-sub1 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #242424;
}

.area-noti-list1-bottom-sub2 {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #242424;
}

.area-noti-bottom-sub-in {
  margin-bottom: 10px;
}

.area-noti-list1-bottom-sub3 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #242424;
}

.area-noti-list1-table {
  border: 1px solid #E2E2E2;
}

.area-noti-list1-table-line1 {
  display: flex;
  text-align: center;
  height: 30px;
  border-bottom: 1px solid #E2E2E2;
  background-color: #F5F5F5;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #242424;
}

.area-noti-list1-table-line1-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  border-right: 1px solid #E2E2E2;
}

.area-noti-list1-table-line1-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}

.area-noti-list1-table-line2 {
  display: flex;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.32px;
  color: #242424;
}

.area-noti-list-border-bottom {
  border-bottom: 1px solid #E2E2E2;
}

.area-noti-list1-table-line2-left {
  padding: 12px;
  width: 50%;
  border-right: 1px solid #E2E2E2;
}

.flex-align-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.area-noti-list1-table-line2-right {
  padding: 12px;
  width: 50%;
}

.area-noti-list1-line2-table-txt-bold {
  font-weight: 700;
}

.area-noti-list1-line2-table-txt-regular {
  margin-top: 10px;
  font-weight: 400;
  line-height: 25px;
}

.area-noti-list-txt-regular-blue {
  color: blue;
}

.area-noti-line-through {
  text-decoration: line-through;
}

.noti-list-left-margin {
  margin-left: 10px;
}

.area-noti-list-popup-body-top-mobile {
  display: none;
  text-align: center;
  border-bottom: 1px solid #EAEAEA;
}

.area-noti-list-popup-body-top-mobile .area-noti-list1-top-sub1 {
  font-size: 22px;
  margin-bottom: 15px;
  line-height: 37px;
}

.area-noti-list1-top-sub1-mobile-top {
  margin-bottom: 3px !important;
}

.area-noti-list-popup-body-top-mobile .area-noti-list1-top-sub-txt {
  font-size: 14px;
  line-height: 26px;
}

.area-noti-list-popup-body-top-mobile .area-noti-list1-top-round {
  font-size: 17px;
}

.area-noti-list-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
}

.area-noti-list-popup-content {
  position: absolute;
  width: 860px;
  height: calc(100% - 90px);
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-noti-list-popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 81px;
  margin-left: 20px;
  margin-right: 20px;
  border-bottom: 1px solid #E2E2E2;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #242424;
}

.img_popup_noti_list_close {
  position: absolute;
  top: 30px;
  right: 28px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.area-noti-list-popup-body {
  margin: 40px;
  overflow-y: auto;
  height: calc(100% - 162px);
  border-top: 1px solid #000000;
}

.area-noti-list-popup-body-mobile {
  display: none;
  margin: 40px 20px;
  overflow-y: auto;
  height: calc(100% - 162px);
  border-top: 1px solid #000000;
}

.area-noti-list-popup-body-header {
  height: 66px;
  display: flex;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #E7E8E8;
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: 0px;
  color: #242424;
  background-color: #F5F5F5;
}

.area-noti-list-popup-body-title {
  width: 620px;
}

.area-noti-list-popup-body-date {
  width: 160px;
}

.area-noti-list-popup-body-list {
  height: 66px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E7E8E8;
  cursor: pointer;
}

.area-noti-list-popup-body-list-mobile {
  min-height: 68px;
  border-bottom: 1px solid #E7E8E8;
  cursor: pointer;
}

.area-noti-list-sub-title-mobile {
  margin-top: 16px;
  font-size: 14px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #242424;
  line-height: 20px;
}

.area-noti-list-sub-date-mobile {
  margin-top: 8px;
  font-size: 13px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.26px;
  color: #555555;
  margin-bottom: 16px;
}

.area-noti-list-popup-body-list:hover {
  background-color: #F3FEFF;
}

.area-noti-list-sub-title {
  width: 620px;
  padding-left: 25px;
  letter-spacing: -0.32px;
}

.area-noti-list-sub-date {
  width: 160px;
  text-align: center;
}

.area-terms-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
}

.area-terms-popup-content {
  position: absolute;
  width: 860px;
  height: calc(100% - 90px);
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-terms-popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 81px;
  margin-left: 20px;
  margin-right: 20px;
  border-bottom: 1px solid #E2E2E2;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #242424;
}

.img_popup_terms_close {
  position: absolute;
  top: 30px;
  right: 28px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.area-terms-popup-body {
  margin: 40px 20px 40px 40px;
  padding-right: 20px;
  overflow-y: auto;
  height: calc(100% - 162px);
}

.area-terms-popup-line {
  margin-bottom: 40px;
}

.area-terms-popup-title {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #242424;
  margin-bottom: 22px;
}

.move-current-terms {
  font-size: 16px;
  /* margin-bottom: 0px; */
}

.area-terms-popup-txt {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #242424;
  line-height: 30px;
}

.area-terms-popup-pointer {
  cursor: pointer;
}

.area-terms-popup-hover:hover {
  text-decoration: underline;
  color: #000000;
  cursor: pointer;
}

.area-terms-popup-sub-txt {
  font-size: 16px;
  padding-left: 10px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #242424;
  line-height: 30px;
}

.area-policy-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
}

.area-policy-popup-content {
  position: absolute;
  width: 860px;
  height: calc(100% - 90px);
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-policy-popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 81px;
  margin-left: 20px;
  margin-right: 20px;
  border-bottom: 1px solid #E2E2E2;
  font-size: 20px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #242424;
}

.img_popup_policy_close {
  position: absolute;
  right: 28px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.area-policy-popup-body {
  margin: 20px 20px 40px 40px;
  padding-right: 20px;
  overflow-y: auto;
  height: calc(100% - 162px);
}

.outer-btn-policy-inform {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.btn-policy-inform {
  width: 195px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #00000033;
  cursor: pointer;
  font-size: 15px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.6px;
  color: #242424;
}

.area-policy-popup-line {
  margin-bottom: 40px;
}

.area-policy-popup-title {
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #242424;
  margin-bottom: 10px;
  line-height: 24px;
}

.area-policy-popup-sub-title {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #242424;
  margin-bottom: 12px;
}

.move-current-policy {
  font-size: 16px;
  /* margin-bottom: 0px; */
}

.area-policy-popup-pointer {
  cursor: pointer;
}

.area-policy-popup-hover:hover {
  text-decoration: underline;
  color: #000000;
  cursor: pointer;
}

.area-policy-popup-txt {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #242424;
  line-height: 30px;
}

.policy-popup-margin {
  margin-left: 10px;
}

.policy-popup-center {
  text-align: center;
}

.area-policy-popup-sub-txt {
  font-size: 16px;
  padding-left: 10px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #242424;
  line-height: 30px;
}

.area-policy-popup-txt-bold {
  font-weight: 700;
}

.img-policy-guide {
  width: 100%;
}

.area-policy-popup-number-menu {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.area-policy-popup-number-menu-border {
  border: 1px solid #E2E2E2;
  border-radius: 5px;
  padding: 20px 20px 0px;
  width: calc(100% - 40px);
}

.area-policy-popup-number-menu-left {
  width: 50%;
}

.area-policy-popup-number-menu-right {
  width: 50%;
}

.area-policy-popup-number {
  display: flex;
  font-size: 15px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  height: 32px;
  letter-spacing: -1px;
  cursor: pointer;
}

.area-policy-popup-number:hover {
  text-decoration: underline;
}

.policy-table {
  width: 100%;
}

.policy-table-title {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.32px;
  text-align: center;
  background-color: #F5F5F5;
}

.table-magin-30 {
  width: 30%;
}

.table-magin-40 {
  width: 40%;
}

.table-magin-20 {
  width: 20%;
}

.policy-table td {
  font-size: 16px;
  font-family: 'Noto Sans KR';
  font-weight: 400;
  letter-spacing: -0.32px;
  border: 1px solid #E2E2E2;
  padding: 8px;
  line-height: 24px;
  vertical-align: middle;
}

.policy-table-first-cols {
  vertical-align: middle;
  text-align: center;
  width: 150px;
}

#audioAnswer {
  display: none;
}

#audioWrong {
  display: none;
}


.area-alert-popup {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.area-alert-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background-color: #1EB3C8;
}

.area-close-alert-popup-btn {
  width: 16px;
  height: 16px;
  padding: 20px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 0px;
}

.area-alert-popup-body {
  box-sizing: border-box;
  height: calc(100% - 58px);
  overflow-y: auto;
}

.area-alert-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 590px;
  max-height: 526px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: #FFFFFF;
  box-shadow: 12px 13px 25px #00000017;
}

.area-alert-popup-header-txt {
  font-size: 25px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #FFFFFF;
}

.area-alert-txt1 {
  padding: 45px;
  font-size: 18px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #000000;
  line-height: 1.5;
}

.area-alert-txt-color {
  color: #0000CC;
}