* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #222222;
}
body * {
  font-family: "SpoqaHanSansNeo";
  font-weight: 400;
}
body.fixed {
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.con-box {
  width: calc(100% - 4rem);
  max-width: 1364px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hide {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
          clip-path: polygon(0 0, 0 0, 0 0);
}

.d-pc {
  display: block;
}

.d-mb {
  display: none;
}

/* flex-item */
.flex-wrap {
  gap: 0.4rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.flex-wrap.center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
.flex-wrap.end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-wrap.between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-wrap.column-type {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* input-group */
.list-wrap.w-450 {
  width: 100%;
  max-width: 45rem;
}

.input-list {
  gap: 2rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.input-list.type01 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.input-list.type01 > li {
  width: 100%;
}
.input-list li.w-100 {
  width: 100%;
}
.input-list li.row-type {
  gap: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.input-list li.row-type .input-cont {
  width: 100%;
}
.input-list li > .input-tit {
  margin-bottom: 0.8rem;
}
.input-list li > .input-tit span {
  font-size: 1.4rem;
  font-weight: 500;
  color: #666666;
}
.input-list li > .input-tit span b {
  font-size: 1.4rem;
  font-weight: 500;
  color: #8BACE2;
}
.input-list li > .input-cont {
  gap: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* input-wrap */
.input-wrap {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
  position: relative;
}
.input-wrap.column-type {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.input-wrap input[type=text], .input-wrap input[type=search], .input-wrap input[type=number], .input-wrap input[type=password], .input-wrap input[type=email], .input-wrap textarea {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  width: 100%;
  max-width: 30.5rem;
  max-height: 3.6rem;
  font-size: 1.4rem;
  padding: 0.8rem 1.2rem;
  border-radius: 0.8rem;
  background: #ffffff;
  border: 1px solid #E5E5E5;
}
.input-wrap input[type=text]:disabled, .input-wrap input[type=search]:disabled, .input-wrap input[type=number]:disabled, .input-wrap input[type=password]:disabled, .input-wrap input[type=email]:disabled, .input-wrap textarea:disabled {
  border-color: #E5E5E5;
  background-color: #F5F5F5;
  pointer-events: none;
}
.input-wrap input[type=text]:focus, .input-wrap input[type=text]:active, .input-wrap input[type=text].on, .input-wrap input[type=search]:focus, .input-wrap input[type=search]:active, .input-wrap input[type=search].on, .input-wrap input[type=number]:focus, .input-wrap input[type=number]:active, .input-wrap input[type=number].on, .input-wrap input[type=password]:focus, .input-wrap input[type=password]:active, .input-wrap input[type=password].on, .input-wrap input[type=email]:focus, .input-wrap input[type=email]:active, .input-wrap input[type=email].on, .input-wrap textarea:focus, .input-wrap textarea:active, .input-wrap textarea.on {
  border-color: #8BACE2;
}
.input-wrap.w-100 input[type=text], .input-wrap.w-100 input[type=search], .input-wrap.w-100 input[type=number], .input-wrap.w-100 input[type=password], .input-wrap.w-100 input[type=email], .input-wrap.w-100 textarea, .input-wrap.w-100 select {
  width: 100% !important;
  max-width: 100% !important;
}
.input-wrap.w-120 {
  max-width: 12rem;
}
.input-wrap.w-120 input[type=text], .input-wrap.w-120 input[type=search], .input-wrap.w-120 input[type=number], .input-wrap.w-120 input[type=password], .input-wrap.w-120 input[type=email], .input-wrap.w-120 textarea, .input-wrap.w-120 select {
  width: 12rem !important;
}
.input-wrap.select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 30.5rem;
  max-height: 3.6rem;
  font-size: 1.4rem;
  color: #222222;
  padding: 0.8rem 2.4rem 0.8rem 1.2rem;
  border-radius: 0.8rem;
  background: #ffffff;
  outline: none;
  border: 1px solid #E5E5E5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: url(../images/common/select_arrow_icon.png);
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: right 1.2rem center;
}
.input-wrap.select select::-ms-expand {
  display: none;
}
.input-wrap.select select:disabled {
  border-color: #E5E5E5;
  background-color: #969696;
}
.input-wrap.select select option[value=""][disabled] {
  display: none;
}
.input-wrap.radio, .input-wrap.checkbox {
  min-height: 2rem;
}
.input-wrap.radio input[type=radio], .input-wrap.radio input[type=checkbox], .input-wrap.checkbox input[type=radio], .input-wrap.checkbox input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
}
.input-wrap.radio input[type=radio]:disabled, .input-wrap.radio input[type=checkbox]:disabled, .input-wrap.checkbox input[type=radio]:disabled, .input-wrap.checkbox input[type=checkbox]:disabled {
  pointer-events: none;
}
.input-wrap.radio input[type=radio] + label, .input-wrap.radio input[type=checkbox] + label, .input-wrap.checkbox input[type=radio] + label, .input-wrap.checkbox input[type=checkbox] + label {
  position: relative;
  padding-left: 2.4rem;
  line-height: 1;
  font-size: 1.4rem;
  white-space: nowrap;
  cursor: pointer;
}
.input-wrap.radio input[type=radio] + label.emphasis, .input-wrap.radio input[type=checkbox] + label.emphasis, .input-wrap.checkbox input[type=radio] + label.emphasis, .input-wrap.checkbox input[type=checkbox] + label.emphasis {
  color: #8BACE2;
  font-weight: 600;
}
.input-wrap.radio input[type=radio] + label::before, .input-wrap.radio input[type=radio] + label::after, .input-wrap.radio input[type=checkbox] + label::before, .input-wrap.radio input[type=checkbox] + label::after, .input-wrap.checkbox input[type=radio] + label::before, .input-wrap.checkbox input[type=radio] + label::after, .input-wrap.checkbox input[type=checkbox] + label::before, .input-wrap.checkbox input[type=checkbox] + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.input-wrap.radio input[type=radio] + label::before, .input-wrap.radio input[type=checkbox] + label::before, .input-wrap.checkbox input[type=radio] + label::before, .input-wrap.checkbox input[type=checkbox] + label::before {
  width: 1.8rem;
  height: 1.8rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid #E5E5E5;
}
.input-wrap.radio input[type=radio]:checked + label::before {
  border-color: #8BACE2;
}
.input-wrap.radio input[type=radio]:checked + label::after {
  -webkit-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
}
.input-wrap.radio input[type=radio]:disabled + label::before {
  background: #F5F5F5;
  border-color: #969696;
}
.input-wrap.radio input[type=radio]:disabled + label::after {
  background: #969696;
}
.input-wrap.radio input[type=radio] + label::before, .input-wrap.radio input[type=radio] + label::after {
  border-radius: 50%;
}
.input-wrap.radio input[type=radio] + label::before {
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
}
.input-wrap.radio input[type=radio] + label::after {
  width: 0.8rem;
  height: 0.8rem;
  left: 0.5rem;
  -webkit-transform: translateY(-50%) scale(0);
          transform: translateY(-50%) scale(0);
  background: #8BACE2;
}
.input-wrap.checkbox input[type=checkbox]:checked + label::before {
  border-color: #8BACE2;
}
.input-wrap.checkbox input[type=checkbox]:checked + label::after {
  opacity: 1;
}
.input-wrap.checkbox input[type=checkbox]:disabled + label::before {
  border-color: #969696;
  background: #EFEFEF;
}
.input-wrap.checkbox input[type=checkbox]:disabled + label::after {
  -webkit-filter: invert(72%) sepia(0%) saturate(280%) hue-rotate(210deg) brightness(86%) contrast(77%);
          filter: invert(72%) sepia(0%) saturate(280%) hue-rotate(210deg) brightness(86%) contrast(77%);
}
.input-wrap.checkbox input[type=checkbox] + label {
  min-height: 1.8rem;
  line-height: 2rem;
}
.input-wrap.checkbox input[type=checkbox] + label::before {
  border-radius: 0.5rem;
}
.input-wrap.checkbox input[type=checkbox] + label::after {
  width: 1.8rem;
  height: 1.8rem;
  opacity: 0;
  -webkit-filter: invert(43%) sepia(72%) saturate(4676%) hue-rotate(214deg) brightness(92%) contrast(87%);
          filter: invert(43%) sepia(72%) saturate(4676%) hue-rotate(214deg) brightness(92%) contrast(87%);
  background-image: url(../images/common/check_icon.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
}
.input-wrap button {
  min-width: 8rem;
  max-height: 3.6rem;
  padding: 1rem;
  font-size: 1.4rem;
}
.input-wrap button.size02 {
  width: 12rem;
}

/* popup */
.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgba(34, 34, 34, 0.2);
}
.popup.on {
  z-index: 10;
  display: block;
}
.popup-cont {
  width: calc(100% - 4rem);
  max-width: 45.2rem;
  min-height: 19.8rem;
  max-height: calc(100vh - 4rem);
  position: absolute;
  top: 50%;
  left: 64%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 2.4rem 0 4rem;
  border-radius: 2rem;
  display: none;
}
.popup-cont:not(.no-bg) {
  background-image: url(../images/common/pop_logo.png);
  background-repeat: no-repeat;
  background-size: 17.4rem;
  background-position: left 2rem top 2.4rem;
}
.popup-cont.no-bg {
  padding: 2rem;
}
.popup-cont::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.popup-cont::-webkit-scrollbar-thumb {
  background: #8BACE2;
  border-radius: 0.4rem;
}
.popup-cont::-webkit-scrollbar-track {
  background: #3E6ADD;
  border-radius: 0.4rem;
}
.popup-cont.on {
  display: block;
}
.popup-cont.w-540 {
  max-width: 54rem;
}
.popup-cont .closed-btn {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  border-radius: 50%;
  background-color: #F5F5F5;
  background-image: url(../images/common/closed_icon.png);
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center center;
}
.popup-cont .pop-tit {
  text-align: center;
  margin-top: 5.2rem;
}
.popup-cont .pop-tit strong {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: bold;
}
.popup-cont .pop-tit p {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.4;
}
.popup-cont .pop-inner {
  margin-top: 2.4rem;
  padding: 0 2rem;
}
.popup-cont .pop-inner .pop-inner-cont {
  width: 100%;
  max-height: 70rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.4rem;
}
.popup-cont .pop-inner .pop-inner-cont::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.popup-cont .pop-inner .pop-inner-cont::-webkit-scrollbar-thumb {
  background: #8BACE2;
}
.popup-cont .pop-inner .pop-inner-cont::-webkit-scrollbar-track {
  background: #3E6ADD;
}
.popup-cont .pop-inner .pop-inner-cont + .btn-wrap {
  margin-top: 4rem;
}
.popup-cont .pop-inner .notifi-wrap {
  text-align: center;
  border-radius: 1.2rem;
  padding: 2rem;
  border: 1px solid #E5E5E5;
}
.popup-cont .pop-inner .notifi-wrap strong {
  font-weight: bold;
}
.popup-cont .pop-inner .notifi-wrap strong + p {
  margin-top: 1.2rem;
}
.popup-cont .pop-inner .notifi-wrap p {
  display: block;
  color: #666666;
  line-height: 1.4;
  font-size: 1.2rem;
}
.popup-cont .pop-inner .notice {
  background: #F5F5F5;
  padding: 2rem;
  border-radius: 1.2rem;
}
.popup-cont .pop-inner .notice > strong {
  font-weight: 500;
}
.popup-cont .pop-inner .notice .notice-list {
  margin-top: 1.2rem;
}
.popup-cont .pop-inner .notice .notice-list > li {
  font-size: 1.2rem;
  line-height: 1.4;
}
.popup-cont .pop-inner .notice + .list-wrap {
  margin-top: 2rem;
}
.popup-cont .pop-inner .txt-info {
  text-align: center;
}
.popup-cont .pop-inner .txt-info strong {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: bold;
  display: block;
  margin-bottom: 1.2rem;
}
.popup-cont .pop-inner .txt-info p {
  font-size: 1.4rem;
  line-height: 1.4;
}
.popup-cont .pop-inner .txt-info p span {
  font-weight: 500;
}
.popup-cont .pop-inner .txt-info span {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #666666;
}
.popup-cont .pop-inner .txt-info span.notifi-txt {
  margin-top: 0;
  font-size: 1.2rem;
}
.popup-cont .pop-inner .txt-info span + p {
  display: block;
  margin-top: 2rem;
}
.popup-cont .pop-inner .txt-info .icon {
  width: 4.8rem;
  height: 4.8rem;
  margin: 0 auto 2.2rem;
}
.popup-cont .pop-inner .list-wrap + .txt-info {
  margin-top: 2rem;
}
.popup-cont .pop-inner .list-wrap + .txt-wrap {
  margin-top: 2rem;
}
.popup-cont .pop-inner .txt-wrap {
  max-height: 13rem;
  overflow-y: auto;
  padding: 1.2rem;
  border-radius: 1.2rem;
  border: 1px solid #E5E5E5;
}
.popup-cont .pop-inner .txt-wrap::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.popup-cont .pop-inner .txt-wrap::-webkit-scrollbar-thumb {
  background: #8BACE2;
}
.popup-cont .pop-inner .txt-wrap::-webkit-scrollbar-track {
  background: #3E6ADD;
}
.popup-cont .pop-inner .txt-wrap > strong {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  display: block;
  margin-bottom: 1.2rem;
}
.popup-cont .pop-inner .txt-wrap P {
  font-size: 1.2rem;
  line-height: 1.4;
}
.popup-cont .pop-inner .txt-wrap + .input-wrap {
  margin-top: 0.8rem;
}
.popup-cont .pop-inner .input-list {
  gap: 1.2rem;
}
.popup-cont .pop-inner .input-list li.row-type {
  gap: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.popup-cont .pop-inner .input-list li .input-cont {
  width: 100%;
  gap: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.popup-cont .pop-inner .input-list li .input-cont button {
  min-width: 12rem;
}
.popup-cont .pop-inner .input-list li .input-cont-bottom {
  margin-top: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.popup-cont .pop-inner .input-list li .input-cont-bottom > a {
  font-size: 1.4rem;
  color: #666666;
  text-decoration: underline;
}
.popup-cont .pop-inner .input-list li .alert {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  position: relative;
  cursor: pointer;
  background-image: url(../images/common/alert_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.popup-cont .pop-inner .input-list li .alert:hover .alert-info {
  display: block;
}
.popup-cont .pop-inner .input-list li .alert .alert-info {
  background-color: #ffffff;
  position: absolute;
  top: calc(100% + 3rem);
  left: 50%;
  z-index: 1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 42.4rem;
  padding: 2rem;
  text-align: center;
  border-radius: 1.2rem;
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  display: none;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border: 1px solid #E5E5E5;
}
.popup-cont .pop-inner .input-list li .alert .alert-info > strong {
  font-weight: bold;
}
.popup-cont .pop-inner .input-list li .alert .alert-info::before, .popup-cont .pop-inner .input-list li .alert .alert-info::after {
  content: "";
  width: 2.8rem;
  height: 2.8rem;
  position: absolute;
  left: 50%;
  bottom: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #E5E5E5;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: 1px solid #E5E5E5;
}
.popup-cont .pop-inner .input-list li .alert .alert-info::after {
  content: "";
  width: 2.7rem;
  height: 2.7rem;
  background: #ffffff;
  border: 0;
}
.popup-cont .pop-inner .input-list li .alert .alert-info ul {
  margin-top: 1.2rem;
  -moz-text-align-last: left;
       text-align-last: left;
}
.popup-cont .pop-inner .input-list li .alert .alert-info ul > li {
  font-size: 1.4rem;
  line-height: 1.4;
  color: #666666;
  padding-left: 1.2rem;
  position: relative;
}
.popup-cont .pop-inner .input-list li .alert .alert-info ul > li::before {
  content: "-";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.6rem;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.popup-cont .pop-inner .input-list + .btn-wrap {
  margin-top: 2rem;
}
.popup-cont .pop-inner .input-list + .btn-wrap + .input-list {
  margin-top: 2rem;
}
.popup-cont .pop-inner .input-list + .btn-wrap + .input-list .notice-txt {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color: #666666;
}
.popup-cont .pop-inner .btn-wrap {
  margin-top: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.popup-cont .pop-inner .btn-wrap + .txt-info {
  margin-top: 2rem;
}
.popup-cont .pop-inner .btn-wrap + .txt-info.mt-12 {
  margin-top: 1.2rem;
}

/* button */
.btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
}

button {
  width: 12rem;
  max-height: 4.4rem;
  padding: 1.2rem 0.8rem;
  gap: 0.8rem;
  border-radius: 0.8rem;
  background: #222222;
  color: #ffffff;
  font-weight: 500;
  font-size: 1.6rem;
  white-space: nowrap;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border: 1px solid #222222;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
button.type01 {
  background: #ffffff;
  color: #969696;
}
button:disabled {
  background: #F5F5F5;
  border-color: #F5F5F5;
  color: #969696;
  pointer-events: none;
}
button.size01 {
  width: auto;
}
button.w-100 {
  width: 100%;
}
button.w-50 {
  width: calc(50% - 0.6rem);
}

#wrap.login {
  height: 100vh;
}
#wrap.login .login-info .info-wrap .list-cont > .cont-tit {
  text-align: center;
}
#wrap.login .login-info .info-wrap .list-cont > .cont-tit strong {
  font-size: 2rem;
  font-weight: bold;
}
#wrap.login .login-info .info-wrap .list-wrap .input-list li .input-wrap input {
  max-width: 100%;
  max-height: 6rem;
  padding: 2rem;
  background: #F7F7F7;
}
#wrap.login .login-info .info-wrap .list-wrap .input-list + .input-wrap {
  margin-top: 1.2rem;
}
#wrap.login .login-info .info-wrap .list-wrap .login-btn {
  width: 100%;
  max-height: 6rem;
  border: 0;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  padding: 1.8rem 1rem;
  border-radius: 0.8rem;
  margin-top: 4rem;
  background-image: url(../images/common/btn_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#wrap.login .login-info .info-wrap .login-info-list {
  margin-top: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#wrap.login .login-info .info-wrap .login-info-list > a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  color: #666666;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
#wrap.login .login-info .info-wrap .login-info-list > a:not(:last-child) {
  border-right: 1px solid #E5E5E5;
}
#wrap.login .login-info .info-wrap .login-info-list > a:hover, #wrap.login .login-info .info-wrap .login-info-list > a.on {
  color: #3E6ADD;
}
#wrap.join .alert {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  position: relative;
  cursor: pointer;
  background-image: url(../images/common/alert_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
#wrap.join .alert:hover .alert-info {
  display: block;
}
#wrap.join .alert .alert-info {
  background-color: #ffffff;
  position: absolute;
  top: calc(100% + 3rem);
  right: -1.6rem;
  z-index: 1;
  width: 42.4rem;
  padding: 2rem;
  text-align: center;
  border-radius: 1.2rem;
  -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  display: none;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border: 1px solid #E5E5E5;
}
#wrap.join .alert .alert-info > strong {
  font-weight: bold;
}
#wrap.join .alert .alert-info > ul {
  margin-top: 1.2rem;
  -moz-text-align-last: left;
       text-align-last: left;
}
#wrap.join .alert .alert-info > ul > li {
  font-size: 1.4rem;
  line-height: 1.4;
  color: #666666;
  padding-left: 1.2rem;
  position: relative;
}
#wrap.join .alert .alert-info > ul > li::before {
  content: "-";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.6rem;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#wrap.join .alert .alert-info::before, #wrap.join .alert .alert-info::after {
  content: "";
  width: 2.8rem;
  height: 2.8rem;
  position: absolute;
  right: 1rem;
  z-index: -1;
  bottom: calc(100% - 1px);
  background: #E5E5E5;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: 1px solid #E5E5E5;
}
#wrap.join .alert .alert-info::after {
  content: "";
  width: 2.7rem;
  height: 2.7rem;
  background: #ffffff;
  border: 0;
  right: 1.1rem;
}
#wrap.join .input-list > li .input-cont-bottom {
  margin-top: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#wrap.join .input-list > li .input-cont-bottom > a {
  font-size: 1.4rem;
  color: #666666;
  text-decoration: underline;
}
#wrap.join .twenty-cont {
  margin-top: 2rem;
}
#wrap.join .twenty-cont .txt-wrap {
  max-height: 17rem;
  overflow: auto;
  padding: 1.2rem;
  border-radius: 1.2rem;
  border: 1px solid #E5E5E5;
}
#wrap.join .twenty-cont .txt-wrap::-webkit-scrollbar {
  width: 4px;
}
#wrap.join .twenty-cont .txt-wrap::-webkit-scrollbar-thumb {
  background: #222222;
}
#wrap.join .twenty-cont .txt-wrap::-webkit-scrollbar-track {
  background: #E5E5E5;
}
#wrap.join .twenty-cont .txt-wrap > strong {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  display: block;
  margin-bottom: 1.2rem;
}
#wrap.join .twenty-cont .txt-wrap P {
  font-size: 1.2rem;
  line-height: 1.4;
}
#wrap.join .twenty-cont .txt-wrap + .input-wrap {
  margin-top: 0.8rem;
}
#wrap.join .twenty-cont + .btn-wrap {
  margin-top: 2rem;
}
#wrap .wrap-inner {
  height: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-image: url(../images/common/intro_img.png);
  background-repeat: no-repeat;
  background-size: 75.6rem 100%;
  background-position: top left;
}
@media (max-width: 1120px) {
  #wrap .wrap-inner {
    min-width: 1120px;
  }
}
#wrap .wrap-inner > div {
  min-height: 100vh;
}
#wrap .wrap-inner .login-intro {
  height: 100vh;
  width: 35%;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#wrap .wrap-inner .login-intro .tit-wrap * {
  color: #ffffff;
}
#wrap .wrap-inner .login-intro .tit-wrap > p {
  font-size: 1.8rem;
}
#wrap .wrap-inner .login-intro .tit-wrap > strong {
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.4;
  display: block;
  margin-top: 2rem;
  word-break: keep-all;
}
#wrap .wrap-inner .login-info {
  width: 65%;
  padding: 2rem;
  background: #ffffff;
  border-radius: 6rem 0 0 6rem;
  background-image: url(../images/common/path_img.png);
  background-repeat: no-repeat;
  background-size: 64rem;
  background-position: right bottom;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#wrap .wrap-inner .login-info .info-wrap {
  max-width: 60rem;
  width: calc(100% - 4rem);
}
#wrap .wrap-inner .login-info .info-wrap > .tit-wrap {
  gap: 2rem;
  margin-bottom: 6.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#wrap .wrap-inner .login-info .info-wrap > .tit-wrap strong {
  font-size: 8rem;
  font-weight: bold;
  color: #8BACE2;
}
#wrap .wrap-inner .login-info .info-wrap > .tit-wrap span {
  font-size: 1.4rem;
  color: #989898;
}



@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
.error-container {
  text-align: center;
  font-size: 180px;
  font-family: 'Catamaran', sans-serif;
  font-weight: 800;
  margin: 20px 15px;
}
.error-container > span {
  display: inline-block;
  position: relative;
  color: #FFB485;
}
.error-container > span {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.error-container > span:nth-of-type(1) {
  color: #D1F2A5;
  animation: colordancing 4s infinite;
}
.error-container > span:nth-of-type(3) {
  color: #F56991;
  animation: colordancing2 4s infinite;
}
.error-container > span:nth-of-type(2) {
  width: 120px;
  height: 120px;
  border-radius: 999px;
}
.error-container > span:nth-of-type(2):before,
.error-container > span:nth-of-type(2):after {
	border-radius: 0%;
	content:"";
	position: absolute;
	top: 0; left: 0;
	width: inherit; height: inherit;
  border-radius: 999px;
	box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
				inset 0 30px 0 rgba(239, 250, 180, 0.4),
				inset -30px 0 0 rgba(255, 196, 140, 0.4),
				inset 0 -30px 0 rgba(245, 105, 145, 0.4);
  animation: shadowsdancing 4s infinite;
}
.error-container > span:nth-of-type(2):before {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
			transform: rotate(45deg);
}

.screen-reader-text {
    position: absolute;
    top: -9999em;
    left: -9999em;
}
@keyframes shadowsdancing {
  0% {
    box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
				inset 0 30px 0 rgba(239, 250, 180, 0.4),
				inset -30px 0 0 rgba(255, 196, 140, 0.4),
				inset 0 -30px 0 rgba(245, 105, 145, 0.4);
  }
  25% {
    box-shadow: inset 30px 0 0 rgba(245, 105, 145, 0.4),
				inset 0 30px 0 rgba(209, 242, 165, 0.4),
				inset -30px 0 0 rgba(239, 250, 180, 0.4),
				inset 0 -30px 0 rgba(255, 196, 140, 0.4);
  }
  50% {
     box-shadow: inset 30px 0 0 rgba(255, 196, 140, 0.4),
				inset 0 30px 0 rgba(245, 105, 145, 0.4),
				inset -30px 0 0 rgba(209, 242, 165, 0.4),
				inset 0 -30px 0 rgba(239, 250, 180, 0.4);
  }
  75% {
   box-shadow: inset 30px 0 0 rgba(239, 250, 180, 0.4),
				inset 0 30px 0 rgba(255, 196, 140, 0.4),
				inset -30px 0 0 rgba(245, 105, 145, 0.4),
				inset 0 -30px 0 rgba(209, 242, 165, 0.4);
  }
  100% {
    box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
				inset 0 30px 0 rgba(239, 250, 180, 0.4),
				inset -30px 0 0 rgba(255, 196, 140, 0.4),
				inset 0 -30px 0 rgba(245, 105, 145, 0.4);
  }
}
@keyframes colordancing {
  0% {
    color: #D1F2A5;
  }
  25% {
    color: #F56991;
  }
  50% {
    color: #3E6ADD; /* porfessor color */
  }
  75% {
    color: #EFFAB4;
  }
  100% {
    color: #D1F2A5;
  }
}
@keyframes colordancing2 {
  0% {
    color: #6159E1; /* student color */
  }
  25% {
    color: #EFFAB4;
  }
  50% {
    color: #4DC468; /* admin color */
  }
  75% {
    color: #F56991;
  }
  100% {
    color: #FFC48C;
  }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h1 {
  text-align: center;
  margin: 30px 15px;
}
.zoom-area {
  max-width: 490px;
  margin: 30px auto 30px;
  font-size: 19px;
  text-align: center;
}
.zoom-area1 {
  max-width: 800px;
  margin: 30px auto 30px;
  font-size: 25px;
  text-align: center;
}
.link-container {
  text-align: center;
}