@charset "UTF-8";
body {
  color: #34495E;
}
body .container {
  width: 980px;
  min-height: auto;
  margin-bottom: 20px;
}

.info-stage {
  padding-bottom: 10px;
}

html {
  line-height: normal;
}

.eh-list > li > .title > .action {
  width: auto;
  top: 2px;
  padding: 15px;
}

.eh-list.level-2 > li > .title > .info > .type > .icon {
  margin-right: 5px;
}

.eh-list.level-0 > li > .title > .info {
  width: 590px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.stage [class^=flaticon-]:before, .stage [class*=" flaticon-"]:before {
  margin-left: 0;
}

input {
  cursor: pointer;
}

label {
  cursor: pointer;
}

.navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 6px;
  background-color: #009ac9;
  border: solid 3px #fff;
  -webkit-box-shadow: 1px 1px 4px 1px #ccc;
          box-shadow: 1px 1px 4px 1px #ccc;
  margin: 10px auto;
  font-family: "微軟正黑體", Arial, sans-serif;
  list-style: none;
}
.navbar li {
  color: #ecf0f1;
  font-size: 18px;
  cursor: pointer;
  padding: 10px 0;
  border-left: #fff dashed 1px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
}
.navbar li:first-child {
  border-left: none;
}
.navbar a {
  text-decoration: none;
  color: #ecf0f1;
  padding-left: 5px;
}

.img-banner {
  width: 100%;
  margin-bottom: 6px;
}

.title-bar {
  padding: 10px;
  background-color: #0b243b;
  font-size: 15pt;
  color: #fff;
  border-radius: 6px 6px 0px 0px;
  text-align: left;
}

.container-banner {
  position: relative;
  padding-top: 0;
}
.container-banner .banner {
  width: 100%;
}

.info-stage {
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #FFFFFF;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 2px #a7a7a7;
          box-shadow: 1px 1px 2px #a7a7a7;
}

.stage hr {
  display: block;
  margin: 5px 30px;
  border: 0.5px solid #d1d1d1;
}

.option-row {
  text-align: left;
  padding: 15px 30px;
}
.option-row .option-title {
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.option-row span {
  padding-right: 5px;
  font-size: 14px;
}
.option-row span:nth-child(4) {
  padding-left: 20px;
}
.option-row select {
  cursor: pointer;
  width: 100%;
  font-size: 14px;
  height: 24px;
}

.title .status {
  font-size: 14px;
  border-radius: 6px;
  color: #fff;
  font-weight: normal;
}
.title .wait {
  background-color: #999999;
  padding: 5px 23px;
  margin: 5px;
}
.title .fail {
  background-color: #F04615;
  padding: 5px 10px;
  margin: 5px;
}
.title .pass {
  background-color: #6AC94A;
  padding: 5px 17px;
  margin: 5px;
}
.title .class-notes {
  background-color: #ffb545;
  padding: 5px 10px;
  margin: 5px;
}
.title .class-notes-disabled {
  background-color: #999999;
  padding: 5px 10px;
  margin: 5px;
}
.title .course-diary {
  background-color: #4e9af2;
  padding: 5px 10px;
  margin: 5px;
}
.title .course-diary-disabled {
  background-color: #999999;
  padding: 5px 10px;
  margin: 5px;
}
.title .detail {
  font-size: 16px;
  margin-left: 20px;
  width: 200px;
}
.title .row-feedback {
  width: 900px;
  display: block;
  font-size: 13px;
  font-weight: normal;
  color: #999999;
  padding-top: 5px;
}

#histories .level-0 .group .level-2 .TEACH span.info.duration {
  margin-left: 20px;
  font-size: 15px;
  width: 200px;
}

#histories .class-hr {
  margin-top: -10px;
  border: 1px solid #8f8f8f;
}

.modal {
  z-index: 1000;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity 0.2s linear;
  transition: visibility 0s, opacity 0.2s linear;
}
.modal.visible {
  opacity: 1;
  visibility: visible;
}

.modal-con {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 200px auto;
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  max-width: 400px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s, visibility 0s, opacity 0.2s linear;
  transition: 0.3s, visibility 0s, opacity 0.2s linear;
}
.modal-con.slideDown {
  visibility: visible;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  opacity: 1;
}
.modal-con .content-gift {
  padding: 30px 0px;
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
  color: #000;
}
.modal-con .js-close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  cursor: pointer;
}
.modal-con .js-close-modal:before {
  font-size: 15px;
}
.modal-con .js-close-modal:hover {
  color: #757575;
}

.title-choose {
  width: 280px;
  margin-right: auto;
  margin-left: auto;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
.title-choose img {
  width: 100%;
  display: block;
}

.wrap-gift {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.wrap-gift .gift {
  width: 100px;
  margin-right: 16px;
}
.wrap-gift .gift img {
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.wrap-gift .gift img:hover {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.wrap-gift .gift:last-child {
  margin-right: 0px;
}
.wrap-gift .gift1 {
  -webkit-animation: switch1 1s forwards cubic-bezier(0, 0.55, 0.45, 1);
          animation: switch1 1s forwards cubic-bezier(0, 0.55, 0.45, 1);
}
.wrap-gift .gift2 {
  -webkit-animation: switch2 1s forwards cubic-bezier(0.85, 0, 0.15, 1);
          animation: switch2 1s forwards cubic-bezier(0.85, 0, 0.15, 1);
}
.wrap-gift .gift3 {
  -webkit-animation: switch3 1s forwards cubic-bezier(0, 0.55, 0.45, 1);
          animation: switch3 1s forwards cubic-bezier(0, 0.55, 0.45, 1);
}

@-webkit-keyframes switch1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  25% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  75% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
}

@keyframes switch1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  25% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  75% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
}
@-webkit-keyframes switch2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  25% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  50% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  75% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
}
@keyframes switch2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  25% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  50% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(-10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  75% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
}
@-webkit-keyframes switch3 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  25% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  75% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
}
@keyframes switch3 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  25% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
  75% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
            filter: drop-shadow(10px 0px 2px rgba(142, 42, 144, 0.3));
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
            filter: drop-shadow(0px 0px 0px rgba(142, 42, 144, 0));
  }
}
.modal-body-award {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.title-congrats {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.title-congrats .congrats-glow {
  width: 80%;
  position: absolute;
  top: -110px;
  -webkit-animation: congrats-glow 6s linear infinite;
          animation: congrats-glow 6s linear infinite;
}
.title-congrats .congrats-deco {
  width: 65%;
  position: absolute;
  top: -90px;
  -webkit-animation: congrats-bounce 1s 0.1s ease forwards;
          animation: congrats-bounce 1s 0.1s ease forwards;
  opacity: 0;
}
.title-congrats .congrats-title {
  width: 50%;
  position: absolute;
  top: -40px;
  -webkit-animation: congrats-bounce 1s 1 ease;
          animation: congrats-bounce 1s 1 ease;
}

.wrap-award {
  width: 100px;
  margin-top: 32px;
  margin-bottom: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 10;
}
.wrap-award .item-award {
  margin-top: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.wrap-award .img-award {
  display: block;
  width: 40px;
}
.wrap-award .coin-name-award, .wrap-award .gem-name-award, .wrap-award .chest-name-award {
  letter-spacing: 1px;
  font-size: 20px;
  color: #E94840;
  font-weight: bold;
  margin-left: 8px;
}
.wrap-award .coin-number-award, .wrap-award .gem-number-award, .wrap-award .chest-number-award {
  letter-spacing: 1px;
  font-size: 20px;
  color: #E94840;
  font-weight: bold;
}

@-webkit-keyframes congrats-glow {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@keyframes congrats-glow {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@-webkit-keyframes congrats-bounce {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2, 0.9);
            transform: scale(1.2, 0.9);
  }
  20% {
    opacity: 1;
    -webkit-transform: scale(1, 1.2);
            transform: scale(1, 1.2);
  }
  30% {
    -webkit-transform: scale(1.1, 1);
            transform: scale(1.1, 1);
  }
  50% {
    -webkit-transform: scale(1, 1.1);
            transform: scale(1, 1.1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes congrats-bounce {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2, 0.9);
            transform: scale(1.2, 0.9);
  }
  20% {
    opacity: 1;
    -webkit-transform: scale(1, 1.2);
            transform: scale(1, 1.2);
  }
  30% {
    -webkit-transform: scale(1.1, 1);
            transform: scale(1.1, 1);
  }
  50% {
    -webkit-transform: scale(1, 1.1);
            transform: scale(1, 1.1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.modal-body-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.modal-body-result hr {
  width: 80%;
  margin: 12px 0px 16px;
  border: 1px solid #EAEAEA;
}

.wrap-result {
  font-size: 16px;
  color: #454545;
  margin-top: 12px;
}
.wrap-result .item-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
}
.wrap-result .title {
  margin-right: 8px;
}
.wrap-result .time, .wrap-result .serious, .wrap-result .achievement, .wrap-result .tutorTime, .wrap-result .concentrate, .wrap-result .interactive {
  padding: 4px 16px;
  background-color: #B27524;
  border-radius: 5px;
  color: #ffffff;
}

.reward-detail {
  width: 100%;
  display: contents;
}
.reward-detail .wrap-result-award {
  margin: 0px 0px;
}
.reward-detail .wrap-result-award .coin-item-award, .reward-detail .wrap-result-award .gem-item-award, .reward-detail .wrap-result-award .chest-item-award {
  margin-top: 8px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.reward-detail .wrap-result-award .img-award {
  width: 30px;
}
.reward-detail .wrap-result-award .coin-name-award, .reward-detail .wrap-result-award .gem-name-award, .reward-detail .wrap-result-award .chest-name-award {
  font-size: 16px;
  color: #454545;
  font-weight: normal;
  margin-left: 8px;
}
.reward-detail .wrap-result-award .coin-number-award, .reward-detail .wrap-result-award .gem-number-award, .reward-detail .wrap-result-award .chest-number-award {
  font-size: 16px;
  color: #454545;
  font-weight: normal;
}

.title-result {
  font-size: 20px;
  font-weight: bold;
  color: #744C28;
}

.popup-unlogin {
  z-index: 1100;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup-con {
  margin: 70px auto;
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 400px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
.popup-con .popup-title {
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #282828;
}
.popup-con a {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  display: block;
  width: 50%;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.popup-con .btn-login {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9BD93F), to(#6AC94A));
  background-image: linear-gradient(to bottom, #9BD93F, #6AC94A);
  margin-bottom: 10px;
}
.popup-con .btn-login:hover {
  text-decoration: none;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6AC94A), to(#6AC94A));
  background-image: linear-gradient(to bottom, #6AC94A, #6AC94A);
}
.popup-con .btn-intro {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#42DFFF), to(#29ABE2));
  background-image: linear-gradient(to bottom, #42DFFF, #29ABE2);
}
.popup-con .btn-intro:hover {
  text-decoration: none;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#29ABE2), to(#29ABE2));
  background-image: linear-gradient(to bottom, #29ABE2, #29ABE2);
}

.hide {
  display: none;
}

.class-expired {
  display: block;
  background-color: #FD4949;
  color: #ffffff;
  padding: 6px;
  font-size: 14px;
  border-radius: 5px;
  margin-top: 30px;
}

@media screen and (max-width: 700px) {
  .modal-con {
    width: 70%;
  }
}