@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

@font-face {
  font-family: "TmonMonsori";
  src        : url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff") format("woff");
  font-weight: normal;
  font-style : normal
}

@font-face {
  font-family: "GmarketSansMedium";
  src        : url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
  font-weight: normal;
  font-style : normal
}

@font-face {
  font-family: "GmarketSansLight";
  src        : url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff");
  font-weight: normal;
  font-style : normal
}

.loader {
  width         : 50px;
  height        : 50px;
  border-radius : 50%;
  margin        : 3em;
  display       : inline-block;
  position      : relative;
  vertical-align: middle
}

.loader,
.loader:before,
.loader:after {
  -webkit-animation: 0.75s infinite ease-in-out;
  -moz-animation   : 0.75s infinite ease-in-out;
  -ms-animation    : 0.75s infinite ease-in-out;
  -o-animation     : 0.75s infinite ease-in-out;
  animation        : 0.75s infinite ease-in-out
}

.loader:before,
.loader:after {
  width                : 100%;
  height               : 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius   : 50%;
  -ms-border-radius    : 50%;
  -o-border-radius     : 50%;
  border-radius        : 50%;
  position             : absolute;
  top                  : 0;
  left                 : 0
}

.loader-black {
  background-color: #333
}

.loader-1 {
  -webkit-animation-name: loader1;
  -moz-animation-name   : loader1;
  -ms-animation-name    : loader1;
  -o-animation-name     : loader1;
  animation-name        : loader1
}

@keyframes loader1 {
  from {
    transform: scale(0);
    opacity  : 1
  }

  to {
    transform: scale(1);
    opacity  : 0
  }
}

.loader-2:before,
.loader-2:after {
  content: ""
}

.loader-2:before {
  border                : 1px solid #fff;
  top                   : -1px;
  left                  : -1px;
  opacity               : 0;
  -webkit-animation-name: loader2-1;
  -moz-animation-name   : loader2-1;
  -ms-animation-name    : loader2-1;
  -o-animation-name     : loader2-1;
  animation-name        : loader2-1
}

@-webkit-keyframes loader2-1 {
  0% {
    transform: scale(1);
    opacity  : 1
  }

  50% {
    transform: scale(1.3);
    opacity  : 0
  }

  100% {
    transform: scale(1.3);
    opacity  : 0
  }
}

@keyframes loader2-1 {
  0% {
    transform: scale(1);
    opacity  : 1
  }

  50% {
    transform: scale(1.3);
    opacity  : 0
  }

  100% {
    transform: scale(1.3);
    opacity  : 0
  }
}

.loader-2:after {
  background-color      : #fff;
  -webkit-animation-name: loader2-2;
  -moz-animation-name   : loader2-2;
  -ms-animation-name    : loader2-2;
  -o-animation-name     : loader2-2;
  animation-name        : loader2-2
}

@-webkit-keyframes loader2-2 {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(0.7)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes loader2-2 {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(0.7)
  }

  100% {
    transform: scale(1)
  }
}

.loader-3:before {
  content       : "";
  border        : 10px solid white;
  top           : -10px;
  left          : -10px;
  animation-name: loader3
}

@keyframes loader3 {
  0% {
    transform: scale(0)
  }

  100% {
    transform: scale(1)
  }
}

.loader-4:before {
  content         : "";
  width           : 25px;
  height          : 25px;
  margin          : 0 0 0 -12px;
  background-color: white;
  top             : auto;
  bottom          : 0;
  left            : 50%;
  transform-origin: 50% 0%;
  animation       : loader4 1s infinite linear
}

@keyframes loader4 {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.loader-5 {
  animation: loader5 1s infinite linear
}

@keyframes loader5 {
  0% {
    transform    : rotate(0deg);
    border-radius: 50%
  }

  50% {
    transform    : rotate(90deg);
    border-radius: 0%
  }

  100% {
    transform    : rotate(180deg);
    border-radius: 50%
  }
}

.loader-6 {
  animation: loader6-1 1.5s infinite linear
}

.loader-6:before,
.loader-6:after {
  content         : "";
  margin          : -25px 0 0 -25px;
  top             : 50%;
  left            : 50%;
  background-color: rgba(30, 30, 30, 0.7);
  animation-name  : loader6-2
}

.loader-6:after {
  animation-direction: reverse
}

@keyframes loader6-1 {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes loader6-2 {
  0% {
    transform: scale(0.2);
    left     : 0%
  }

  50% {
    transform: scale(1);
    left     : 50%
  }

  100% {
    transform: scale(0.2);
    left     : 100%
  }
}

.loader-7 {
  animation: loader7-1 1s infinite linear
}

.loader-7:before,
.loader-7:after {
  content         : "";
  width           : 80%;
  height          : 80%;
  background-color: #333;
  top             : 5%
}

.loader-7:before {
  left            : -5%;
  animation       : loader7-2 1s infinite alternate ease-in-out;
  transform-origin: 10% 50%
}

.loader-7:after {
  left            : auto;
  right           : -5%;
  animation       : loader7-2 1s 1s infinite alternate ease-in-out;
  transform       : scale(0);
  transform-origin: 90% 50%
}

@keyframes loader7-1 {
  0% {
    transform: rotate(20deg)
  }

  100% {
    transform: rotate(380deg)
  }
}

@keyframes loader7-2 {
  0% {
    transform: scale(0)
  }

  100% {
    transform: scale(1)
  }
}

.loader-8:before,
.loader-8:after {
  content         : "";
  background-color: #333;
  transform       : scale(0);
  animation       : loader8 1.5s infinite ease-in-out
}

.loader-8:after {
  animation-delay: 0.75s
}

@keyframes loader8 {
  0% {
    transform: translateX(-100%) scale(0)
  }

  50% {
    transform: translateX(0%) scale(1)
  }

  100% {
    transform: translateX(100%) scale(0)
  }
}

.loader-9,
.loader-10 {
  background-color: white;
  animation       : loader9 0.4s infinite linear
}

.loader-10 {
  animation: loader10 60s infinite ease-in-out
}

.loader-9:before,
.loader-10:before {
  content         : "";
  width           : 80%;
  height          : 80%;
  background-color: white;
  top             : 10%;
  left            : 10%;
  box-shadow      : 5px -3px 0 rgba(255, 100, 100, 0.7), 5px 5px 0 rgba(100, 255, 100, 0.7), -3px 5px 0 rgba(100, 100, 255, 0.7), -5px -5px 0 rgba(240, 240, 120, 0.7)
}

.loader-9:after,
.loader-10:after {
  content: "";
  border : 3px solid white;
  z-index: 2;
  top    : -3px;
  left   : -3px
}

@keyframes loader9 {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes loader10 {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360000deg)
  }
}

.loader-bg {
  position  : fixed;
  top       : 0;
  left      : 0;
  width     : calc(100vw);
  height    : calc(100vh);
  background: #1e2128;
  text-align: center;
  z-index   : 10000
}

.loader-bg-inner {
  position         : fixed;
  top              : 50%;
  left             : 50%;
  right            : 50%;
  margin           : 0 auto;
  border-radius    : 100%;
  -webkit-animation: 2.6s loader-bg-inner linear;
  -moz-animation   : 2.6s loader-bg-inner linear;
  -ms-animation    : 2.6s loader-bg-inner linear;
  -o-animation     : 2.6s loader-bg-inner linear;
  animation        : 2.6s loader-bg-inner linear;
  background       : #fff
}

@-webkit-keyframes loader-bg-inner {
  0% {
    opacity: 0;
    top    : 50%;
    left   : 50%;
    height : 0;
    width  : 0
  }

  74.99% {
    opacity: 0;
    top    : 50%;
    left   : 50%;
    height : 0;
    width  : 0
  }

  75% {
    opacity: 1;
    top    : 50%;
    left   : 50%;
    height : 0;
    width  : 0
  }

  80% {
    opacity: 0.6;
    top    : 0;
    left   : 0;
    height : calc(100vh);
    width  : calc(100vw)
  }

  95% {
    opacity: 0.3;
    top    : calc(-25vh);
    left   : calc(-25vw);
    height : calc(150vh);
    width  : calc(150vw)
  }

  97% {
    opacity: 0.1;
    top    : calc(-50vh);
    left   : calc(-50vw);
    height : calc(200vh);
    width  : calc(200vw)
  }

  100% {
    opacity: 0;
    top    : calc(-50vh);
    left   : calc(-50vw);
    height : calc(200vh);
    width  : calc(200vw)
  }
}

@keyframes loader-bg-inner {
  0% {
    opacity: 0;
    top    : 50%;
    left   : 50%;
    height : 0;
    width  : 0
  }

  74.99% {
    opacity: 0;
    top    : 50%;
    left   : 50%;
    height : 0;
    width  : 0
  }

  75% {
    opacity: 1;
    top    : 50%;
    left   : 50%;
    height : 0;
    width  : 0
  }

  80% {
    opacity: 0.6;
    top    : 0;
    left   : 0;
    height : calc(100vh);
    width  : calc(100vw)
  }

  95% {
    opacity: 0.3;
    top    : calc(-25vh);
    left   : calc(-25vw);
    height : calc(150vh);
    width  : calc(150vw)
  }

  97% {
    opacity: 0.1;
    top    : calc(-50vh);
    left   : calc(-50vw);
    height : calc(200vh);
    width  : calc(200vw)
  }

  100% {
    opacity: 0;
    top    : calc(-50vh);
    left   : calc(-50vw);
    height : calc(200vh);
    width  : calc(200vw)
  }
}

.loader-2 {
  margin-top: calc(48.4vh);
  z-index   : -1
}

.mb-main {
  position             : static;
  display              : grid;
  top                  : 0;
  left                 : 0;
  background-image     : url("/static/dev/images/mb-bg.png");
  background-size      : contain;
  background-repeat    : repeat-y;
  grid-template-rows   : repeat(6, minmax(80px, auto));
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas  : "header        header        header        header        header""title         title         title         title         title""     .        content1      content1      content1           .     ""cntpeople     cntpeople     cntpeople     cntpeople     cntpeople""startbutton   startbutton   startbutton   startbutton   startbutton""footer        footer        footer        footer        footer"
}

.mb-header {
  grid-area : header;
  text-align: center;
  max-width : calc(100vw)
}

.mb-header img {
  margin-top: 1em;
  width     : 100%
}

.mb-title {
  grid-area : title;
  text-align: center;
  margin-top: -0.6em
}

.mb-title img {
  object-fit: contain;
  width     : 70%;
  margin    : 20px auto
}

.mb-content1 {
  grid-area    : content1;
  margin-bottom: 16px
}

.mb-content1 img {
  object-fit: contain;
  width     : 100%
}

.mb-cntpeople {
  grid-area : cntpeople;
  text-align: center;
  height    : 130px
}

.mb-cntpeople::before {
  content       : " ";
  display       : inline-block;
  vertical-align: middle
}

.mb-cntpeople>span {
  font-size      : 18px;
  line-height    : 1.3;
  display        : inline-block;
  text-align     : center;
  height         : 70%;
  width          : 68%;
  font-family    : "Noto sans KR";
  font-weight    : 500;
  text-decoration: none;
  color          : #fff;
  border         : 3px solid #fff
}

@media screen and (min-width: 480px) {
  .mb-cntpeople>span {
    font-size: 24px
  }
}

@media screen and (min-width: 700px) {
  .mb-cntpeople>span {
    font-size  : 28px;
    line-height: 1.4
  }
}

@media screen and (min-width: 900px) {
  .mb-cntpeople>span {
    font-size: 30px
  }
}

@media screen and (min-width: 1024px) {
  .mb-cntpeople>span {
    font-size  : 32px;
    line-height: 80px
  }
}

@media screen and (min-width: 1440px) {
  .mb-cntpeople>span {
    font-size: 38px
  }
}

.mb-cntpeople>span>span {
  color      : #ead391;
  font-size  : 22px;
  font-weight: 500
}

@media screen and (min-width: 480px) {
  .mb-cntpeople>span>span {
    font-size: 28px
  }
}

@media screen and (min-width: 700px) {
  .mb-cntpeople>span>span {
    font-size: 32px
  }
}

@media screen and (min-width: 900px) {
  .mb-cntpeople>span>span {
    font-size: 34px
  }
}

@media screen and (min-width: 1024px) {
  .mb-cntpeople>span>span {
    font-size: 36px
  }
}

@media screen and (min-width: 1440px) {
  .mb-cntpeople>span>span {
    font-size: 38px
  }
}

.mb-cntpeople>span::before {
  content       : " ";
  display       : inline-block;
  vertical-align: middle;
  height        : 100%;
  margin-top    : -3%
}

.mb-cntpeople>span::after {
  content       : "하루 30명 한정으로 무료 상담 및 플랜설정을 해드리고 있습니다.";
  display       : block;
  margin-top    : -25px;
  font-size     : 11px;
  line-height   : 10px;
  letter-spacing: -1.5px;
  font-weight   : 200
}

@media screen and (min-width: 480px) {
  .mb-cntpeople>span::after {
    font-size: 13px
  }
}

@media screen and (min-width: 700px) {
  .mb-cntpeople>span::after {
    font-size: 15px
  }
}

@media screen and (min-width: 900px) {
  .mb-cntpeople>span::after {
    font-size: 16px
  }
}

@media screen and (min-width: 1024px) {
  .mb-cntpeople>span::after {
    font-size: 17px
  }
}

@media screen and (min-width: 1440px) {
  .mb-cntpeople>span::after {
    font-size: 19px
  }
}

.mb-startbutton {
  grid-area        : startbutton;
  grid-column      : 2/5;
  height           : 80px;
  -webkit-animation: startBtnAniMobilePosition 0.6s infinite alternate
}
.mb-startbutton-katalk {
  grid-area        : startbutton-katalk;
  grid-column      : 2/5;
  height           : 80px;
  -webkit-animation: startBtnAniMobilePosition 0.6s infinite alternate
}

.mb-startbutton::before {
  content       : " ";
  display       : inline-block;
  vertical-align: middle
}
.mb-startbutton-katalk::before {
  content       : " ";
  display       : inline-block;
  vertical-align: middle
}

.mb-startbutton a {
  margin-top: 0.2em;
  font-size       : 18px;
  display         : inline-block;
  text-align      : center;
  height          : 60%;
  width           : 100%;
  font-weight     : 500;
  font-family     : "Noto sans KR";
  letter-spacing  : -1px;
  text-decoration : none;
  color           : #fff;
  background-color: #fcbe56;
  border          : 1px solid #fccf82
}
.mb-startbutton-katalk a.mb-katalk {
  margin-top: 0.2em;
  font-size       : 18px;
  display         : inline-block;
  text-align      : center;
  height          : 60%;
  width           : 100%;
  font-weight     : 500;
  font-family     : "Noto sans KR";
  letter-spacing  : -1px;
  text-decoration : none;
  color           : #211714;
  background-color: #FCE301;
  /* border          : 1px solid #fccf82; */
  border          : 1px solid #211714;
}

@media screen and (min-width: 480px) {
  .mb-startbutton a {
    font-size: 20px
  }
  .mb-startbutton-katalk a {
    font-size: 20px
  }
}

@media screen and (min-width: 700px) {
  .mb-startbutton a {
    font-size: 28px
  }
}

@media screen and (min-width: 900px) {
  .mb-startbutton a {
    font-size: 32px
  }
  .mb-startbutton-katalk a {
    font-size: 28px
  }
}

@media screen and (min-width: 1024px) {
  .mb-startbutton a {
    font-size: 36px
  }
  .mb-startbutton-katalk a {
    font-size: 36px
  }
}

@media screen and (min-width: 1440px) {
  .mb-startbutton a {
    font-size: 38px
  }
  .mb-startbutton-katalk a {
    font-size: 38px
  }
}

.mb-startbutton-katalk a:visited {
  text-decoration: none
}
.mb-startbutton-katalk a:hover {
  text-decoration : none;
  background-color: #fff;
  color           : #1e2128
}
.mb-startbutton-katalk a:active {
  text-decoration : none;
  background-color: #fff;
  color           : #1e2128
}
.mb-startbutton-katalk a::before {
  content       : " ";
  display       : inline-block;
  vertical-align: middle;
  height        : 100%
}
.mb-startbutton-katalk::after {
  z-index          : 10;
  content          : " ";
  position         : relative;
  bottom           : 15%;
  left             : 96%;
  display          : inline-block;
  width            : 36px;
  height           : 36px;
  background-image : url("/static/dev/images/mb-main-cursor.png");
  background-size  : contain;
  background-repeat: no-repeat
}

.mb-startbutton a:visited {
  text-decoration: none
}
.mb-startbutton a:hover {
  text-decoration : none;
  background-color: #fff;
  color           : #1e2128
}
.mb-startbutton a:active {
  text-decoration : none;
  background-color: #fff;
  color           : #1e2128
}
.mb-startbutton a::before {
  content       : " ";
  display       : inline-block;
  vertical-align: middle;
  height        : 100%
}
.mb-startbutton::after {
  z-index          : 10;
  content          : " ";
  position         : relative;
  bottom           : 15%;
  left             : 96%;
  display          : inline-block;
  width            : 36px;
  height           : 36px;
  background-image : url("/static/dev/images/mb-main-cursor.png");
  background-size  : contain;
  background-repeat: no-repeat
}







@-webkit-keyframes startBtnAniMobilePosition {
  0% {
    margin-top   : 0em;
    margin-bottom: 0
  }

  60% {
    margin-top   : 0em;
    margin-bottom: 0
  }

  100% {
    margin-top   : 0.25em;
    margin-bottom: -0.25em
  }
}

.mb-footer {
  margin-top:35px;
  grid-area : footer;
  text-align: center
}

.mb-footer p {
  font-family: "Noto Sans KR"
}

.mb-footer p:first-child {
  font-weight: 200;
  color      : #fff3c8
}

.mb-footer p:not(:first-child) {
  font-weight   : 100;
  letter-spacing: -1px;
  color         : #fff
}

.mb-footer>p {
  font-size  : 10px;
  line-height: 1.3
}

@media screen and (min-width: 480px) {
  .mb-footer>p {
    font-size: 11px
  }
}

@media screen and (min-width: 700px) {
  .mb-footer>p {
    font-size  : 12px;
    line-height: 1.4
  }
}

@media screen and (min-width: 900px) {
  .mb-footer>p {
    font-size: 13px
  }
}

@media screen and (min-width: 1024px) {
  .mb-footer>p {
    font-size  : 14px;
    line-height: 1.45
  }
}

@media screen and (min-width: 1440px) {
  .mb-footer>p {
    font-size: 15px
  }
}

.fontpreload {
  font-family: "GmarketSansMedium";
  font-family: "GmarketSansLight";
  display    : none
}

.mb-container {
  width            : 100vw;
  height           : 100vh;
  background-image : url("/static/dev/images/mb-stepbg.png");
  background-size  : contain;
  background-repeat: repeat-y
}

.mb-steplogo {
  width: 100%
}

.mb-steplogo img {
  width : 100%;
  height: auto
}

.mb-stepheader {
  width: 100%
}

.mb-stepheader img {
  width : 100%;
  height: auto
}

.mb-stepheader .mb-stepheader-txt {
  margin        : 40px 0;
  text-align    : center;
  letter-spacing: -1px
}

.mb-stepheader .mb-stepheader-txt span {
  font-family  : "GmarketSansMedium";
  color        : #fff;
  border-bottom: 2px solid #fff;
  font-size    : 17px;
  line-height  : 1.3
}

@media screen and (min-width: 480px) {
  .mb-stepheader .mb-stepheader-txt span {
    font-size: 22px
  }
}

@media screen and (min-width: 700px) {
  .mb-stepheader .mb-stepheader-txt span {
    font-size  : 26px;
    line-height: 1.4
  }
}

@media screen and (min-width: 900px) {
  .mb-stepheader .mb-stepheader-txt span {
    font-size: 36px
  }
}

@media screen and (min-width: 1024px) {
  .mb-stepheader .mb-stepheader-txt span {
    font-size  : 42px;
    line-height: 1.45
  }
}

@media screen and (min-width: 1440px) {
  .mb-stepheader .mb-stepheader-txt span {
    font-size: 56px
  }
}

.mb-stepanswers,
.mb-stepanswers-step1,
.mb-stepanswers-step2,
.mb-stepanswers-step3 {
  position     : relative;
  top          : 0;
  left         : 0;
  padding      : 0 9vw;
  text-align   : center;
  margin-top   : 2em;
  margin-bottom: 10vh
}

@media screen and (min-aspect-ratio: 17 / 9) {

  .mb-stepanswers div.mb-stepanswer,
  .mb-stepanswers-step1 div.mb-stepanswer,
  .mb-stepanswers-step2 div.mb-stepanswer,
  .mb-stepanswers-step3 div.mb-stepanswer {
    width: 360vw
  }
}

.mb-stepanswers div.mb-stepanswer,
.mb-stepanswers-step1 div.mb-stepanswer,
.mb-stepanswers-step2 div.mb-stepanswer,
.mb-stepanswers-step3 div.mb-stepanswer {
  position        : relative;
  display         : inline-block;
  width           : 37vw;
  margin-top      : -1vw;
  margin-bottom   : 4vw;
  overflow-y      : hidden;
  color           : #fff3c8;
  border          : 2px dotted #fff3c8;
  border-radius   : 5%;
  background-color: #272424;
  word-break      : keep-all;
  padding         : 0;
  opacity         : 0
}

.mb-stepanswers div.mb-stepanswer span.mb-stepanswer-md,
.mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-md,
.mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-md,
.mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-md {
  display       : block;
  margin        : 14px 6px 0 6px;
  font-family   : "GmarketSansMedium";
  letter-spacing: -1px;
  font-size     : 20px;
  line-height   : 1.3
}

@media screen and (min-width: 480px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-md {
    font-size: 20px
  }
}

@media screen and (min-width: 700px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-md {
    font-size  : 30px;
    line-height: 1.4
  }
}

@media screen and (min-width: 900px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-md {
    font-size: 40px
  }
}

@media screen and (min-width: 1024px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-md {
    font-size  : 46px;
    line-height: 1.45
  }
}

@media screen and (min-width: 1440px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-md,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-md {
    font-size: 52px
  }
}

.mb-stepanswers div.mb-stepanswer span.mb-stepanswer-sm,
.mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-sm,
.mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-sm,
.mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-sm {
  display       : block;
  margin-bottom : 32px;
  font-family   : "GmarketSansLight";
  letter-spacing: -1px;
  font-size     : 12px;
  line-height   : 1.3
}

@media screen and (min-width: 480px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-sm {
    font-size: 13px
  }
}

@media screen and (min-width: 700px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-sm {
    font-size  : 18px;
    line-height: 1.4
  }
}

@media screen and (min-width: 900px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-sm {
    font-size: 24px
  }
}

@media screen and (min-width: 1024px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-sm {
    font-size  : 27px;
    line-height: 1.45
  }
}

@media screen and (min-width: 1440px) {

  .mb-stepanswers div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step1 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step2 div.mb-stepanswer span.mb-stepanswer-sm,
  .mb-stepanswers-step3 div.mb-stepanswer span.mb-stepanswer-sm {
    font-size: 34px
  }
}

.mb-stepanswers div.mb-stepanswer:nth-child(odd),
.mb-stepanswers-step1 div.mb-stepanswer:nth-child(odd),
.mb-stepanswers-step2 div.mb-stepanswer:nth-child(odd),
.mb-stepanswers-step3 div.mb-stepanswer:nth-child(odd) {
  margin-right: 2.7vw
}

.mb-stepanswers-step1 .mb-stepanswer {
  height: 21vw
}

@media screen and (min-width: 480px) {
  .mb-stepanswers-step1 .mb-stepanswer {
    height           : 18vw;
    -webkit-transform: translateY(0%);
    transform        : translateY(0%)
  }
}

@media screen and (min-width: 700px) {
  .mb-stepanswers-step1 .mb-stepanswer {
    height: 16vw
  }
}

@media screen and (min-width: 900px) {
  .mb-stepanswers-step1 .mb-stepanswer {
    height: 18vw
  }
}

@media screen and (min-width: 1024px) {
  .mb-stepanswers-step1 .mb-stepanswer {
    height: 17vw
  }
}

@media screen and (min-width: 1440px) {
  .mb-stepanswers-step1 .mb-stepanswer {
    height           : 16vw;
    -webkit-transform: translateY(50%);
    transform        : translateY(50%)
  }
}

.mb-stepanswers-step1 .mb-stepanswer:nth-child(1) {
  transform: translateY(-9%)
}

.mb-stepanswers-step1 .mb-stepanswer:nth-child(1) span {
  transform: translateY(20%)
}

.mb-stepanswers-step1 .mb-stepanswer:nth-child(3) {
  transform: translateY(-31%)
}

.mb-stepanswers-step1 .mb-stepanswer:nth-child(3) span {
  transform: translateY(20%)
}

.mb-stepanswers-step1 .mb-stepanswer:nth-child(4)>span {
  transform: translateY(-15%)
}

.mb-stepanswers-step1 .mb-stepanswer:nth-child(5) {
  transform: translateY(-31%)
}

.mb-stepanswers-step1 .mb-stepanswer:nth-child(5) span {
  transform: translateY(20%)
}

.mb-stepanswers-step2 .mb-stepanswer {
  height: 21vw
}

@media screen and (min-width: 480px) {
  .mb-stepanswers-step2 .mb-stepanswer {
    height           : 18vw;
    -webkit-transform: translateY(50%);
    transform        : translateY(50%)
  }
}

@media screen and (min-width: 700px) {
  .mb-stepanswers-step2 .mb-stepanswer {
    height: 13vw
  }
}

@media screen and (min-width: 900px) {
  .mb-stepanswers-step2 .mb-stepanswer {
    height: 16vw
  }
}

@media screen and (min-width: 1024px) {
  .mb-stepanswers-step2 .mb-stepanswer {
    height: 15vw
  }
}

@media screen and (min-width: 1440px) {
  .mb-stepanswers-step2 .mb-stepanswer {
    height           : 13.3vw;
    -webkit-transform: translateY(50%);
    transform        : translateY(50%)
  }
}

.mb-stepanswers-step2 .mb-stepanswer:nth-child(1) {
  transform: translateY(30%)
}

.mb-stepanswers-step2 .mb-stepanswer:nth-child(1) span {
  transform: translateY(5%)
}

.mb-stepanswers-step2 .mb-stepanswer:nth-child(2)>span {
  transform: translateY(50%)
}

.mb-stepanswers-step2 .mb-stepanswer:nth-child(3)>span {
  transform: translateY(50%)
}

.mb-stepanswers-step2 .mb-stepanswer:nth-child(4)>span {
  transform: translateY(50%)
}

.mb-stepanswers-step2 .mb-stepanswer:nth-child(5)>span {
  transform: translateY(20%)
}

.mb-stepanswers-step3 .mb-stepanswer {
  height: 23vw
}

@media screen and (min-width: 480px) {
  .mb-stepanswers-step3 .mb-stepanswer {
    height           : 15vw;
    -webkit-transform: translateY(50%);
    transform        : translateY(50%)
  }
}

@media screen and (min-width: 700px) {
  .mb-stepanswers-step3 .mb-stepanswer {
    height: 12vw
  }
}

@media screen and (min-width: 900px) {
  .mb-stepanswers-step3 .mb-stepanswer {
    height: 13vw
  }
}

@media screen and (min-width: 1024px) {
  .mb-stepanswers-step3 .mb-stepanswer {
    height: 13vw
  }
}

@media screen and (min-width: 1440px) {
  .mb-stepanswers-step3 .mb-stepanswer {
    height           : 12vw;
    -webkit-transform: translateY(50%);
    transform        : translateY(50%)
  }
}

.mb-stepanswers-step3 .mb-stepanswer:nth-child(1)>span {
  transform: translateY(40%)
}

.mb-stepanswers-step3 .mb-stepanswer:nth-child(2)>span {
  transform: translateY(40%)
}

.mb-stepanswers-step3 .mb-stepanswer:nth-child(3)>span {
  transform: translateY(50%)
}

.mb-stepanswers-step3 .mb-stepanswer:nth-child(4)>span {
  transform: translateY(50%)
}

.mb-rccontainer {
  width            : 100vw;
  height           : 100vh;
  background-image : url("/static/dev/images/mb-receipt-bg.png");
  background-size  : contain;
  background-repeat: repeat-y;
  text-align       : center;
  padding-bottom   : 30vw
}

.mb-rccontainer .mb-rctop {
  width: 100%
}

.mb-rccontainer .mb-rctop img {
  z-index: 1;
  width  : 100%;
  height : auto
}

.mb-rccontainer .mb-rctop img:nth-child(2) {
  -webkit-animation: receiptArrowAni 0.6s infinite alternate
}

@-webkit-keyframes receiptArrowAni {
  0% {
    background-color: #fcbe56;
    margin-top      : -0.5em;
    margin-bottom   : 0.5em
  }

  60% {
    background-color: #fcbe56;
    margin-top      : -0.5em;
    margin-bottom   : 0.5em
  }

  100% {
    background-color: #c08319;
    margin-top      : 0;
    margin-bottom   : 0
  }
}

.mb-rccontainer input,
.mb-rccontainer input::placeholder,
.mb-rccontainer textarea,
.mb-rccontainer textarea::placeholder {
  position      : relative;
  display       : inline-block;
  color         : #fff3c8;
  letter-spacing: -1px;
  word-break    : keep-all
}

.mb-rccontainer #mb-rcname {
  top             : 0;
  border          : none;
  width           : 64vw;
  height          : 10vw;
  background-image: url("/static/dev/images/mb-receipt-name.png");
  background-size : 100% 100%;
  padding-top     : 1vw;
  padding-left    : 16vw
}

.mb-rccontainer #mb-rcphone {
  top             : 3vw;
  border          : none;
  width           : 61vw;
  height          : 10vw;
  background-image: url("/static/dev/images/mb-receipt-phone.png");
  background-size : 100% 100%;
  padding-top     : 1vw;
  padding-left    : 19vw
}

.mb-rccontainer #mb-rccourse {
  top             : 6vw;
  border          : none;
  width           : 56vw;
  height          : 10vw;
  background-image: url("/static/dev/images/mb-receipt-course.png");
  background-size : 100% 100%;
  padding-top     : 1vw;
  padding-left    : 24vw
}

.mb-rccontainer #mb-rctime {
  top             : 9vw;
  border          : none;
  width           : 49vw;
  height          : 10vw;
  background-image: url("/static/dev/images/mb-receipt-time.png");
  background-size : 100% 100%;
  padding-top     : 1vw;
  padding-left    : 31vw
}

.mb-rccontainer #mb-rctalk {
  top             : 12vw;
  border          : none;
  width           : 77vw;
  min-height      : 15vw;
  background-image: url("/static/dev/images/mb-receipt-talk.png");
  background-size : 100% 100%;
  padding-top     : 10vw;
  padding-left    : 3vw;
  resize          : none
}

.mb-rccontainer p {
  position : relative;
  top      : 15vw;
  color    : #fff;
  font-size: 0.9em
}

.mb-rccontainer p img {
  position: relative;
  top     : 1.3vw;
  left    : 0.5vw;
  width   : 15vw;
  height  : 5vw
}

.mb-rccontainer input[type="checkbox"] {
  display: none
}

.mb-rccontainer input[type="checkbox"]+label {
  position    : relative;
  top         : 14vw;
  display     : inline-block;
  cursor      : pointer;
  line-height : 6vw;
  padding-left: 22px;
  background  : url("/static/dev/images/mb-receipt-chkoff.png") left/22px no-repeat;
  color       : #fff3c8
}

.mb-rccontainer input[type="checkbox"]:checked+label {
  background-image: url("/static/dev/images/mb-receipt-chkon.png")
}

.mb-rccontainer .mb-rcsend {
  position: relative;
  display : block;
  top     : 18vw
}

.mb-rccontainer .mb-rcsend .mb-rcsend-btn {
  display      : inline-block;
  border       : 1px solid #fff3c8;
  border-radius: 3.5vw;
  width        : 60vw;
  height       : 10vw;
  line-height  : 10vw
}

.mb-rccontainer .mb-rcsend .mb-rcsend-btn:hover,
.mb-rccontainer .mb-rcsend .mb-rcsend-btn:active,
.mb-rccontainer .mb-rcsend .mb-rcsend-btn:focus {
  background-color: #fcbe56
}

.mb-rccontainer .mb-rcsend span {
  color         : #fff3c8;
  font-size     : 1.2em;
  font-family   : "NanumSquare";
  font-weight   : 600;
  letter-spacing: -1px
}

.mb-rccontainer .mb-rc-popup {
  display         : none;
  z-index         : 100;
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 300%;
  background-color: rgba(136, 136, 136, 0.4);
  text-align      : center
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow {
  position        : fixed;
  top             : 20%;
  left            : 50%;
  transform       : translateX(-50%);
  display         : inline-block;
  background-color: #1e2128;
  border          : 5px solid #fff3c8;
  width           : 85vw;
  height          : 95vw;
  padding         : 16px
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow table {
  margin    : 0 auto;
  margin-top: 7%
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow table th,
.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow table td {
  border: 2px solid transparent
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow table thead {
  font-family   : "GmarketSansMedium";
  color         : #bf9d74;
  line-height   : 50px;
  font-size     : 19px;
  letter-spacing: -1px
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow table td {
  color      : #fff;
  line-height: 30px;
  font-size  : 13px;
  padding    : 0 16px;
  border-top : 2.3px solid #fff
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow table tr.subth {
  font-size  : 14px;
  font-weight: 700
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow table tr:last-child td {
  line-height     : 24px;
  vertical-align  : middle;
  border          : none;
  color           : #fff;
  background-color: transparent
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow span {
  display         : inline-block;
  width           : 100px;
  height          : 50px;
  line-height     : 50px;
  background-color: #bf9d74;
  border          : 3px solid #bf9d74;
  border-radius   : 30px;
  color           : #fff;
  margin-top      : 20px;
  font-size       : 16px;
  font-family     : "GmarketSansMedium"
}

.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow span:hover,
.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow span:active,
.mb-rccontainer .mb-rc-popup .mb-rc-popupwindow span:focus {
  cursor          : pointer;
  background-color: #fff;
  color           : #bf9d74
}

.mb-rvcontainer .tab-row {
  margin-top    : 30px;
  font-family   : "Noto sans KR";
  font-weight   : 300;
  letter-spacing: -1px
}

.mb-rvcontainer .tab-row a.nav-link {
  padding: 0.5rem 0.65rem;
  color  : #fff
}

.mb-rvcontainer .tab-row a.nav-link.active {
  background-color: #fff3c8;
  color           : #1e2128
}

.mb-rvcontainer .tab-row .tab-content {
  color           : #fff;
  font-weight     : 200;
  padding         : 15px;
  background-color: #23232f;
  text-align      : center
}

.mb-rvcontainer .tab-row .tab-content img {
  width : 30%;
  margin: 0 1% 2% 1%
}

.mb-rvcontainer .rolling_box {
  width     : 100%;
  margin    : 0 auto;
  height    : 50px;
  text-align: center
}

.mb-rvcontainer .rolling_box ul {
  width   : 100%;
  height  : 100%;
  overflow: hidden;
  position: relative
}

.mb-rvcontainer .rolling_box ul li {
  width           : 100%;
  height          : 100%;
  transition      : 0.5s;
  position        : absolute;
  transition      : top 0.75s;
  top             : 100%;
  z-index         : 1;
  background-color: #1e2128
}

.mb-rvcontainer .card_sliding {
  top    : 0 !important;
  z-index: 100 !important
}

.mb-rvcontainer .card_sliding_after {
  top    : -100% !important;
  z-index: 10 !important
}

.mb-rvcontainer .rolling_box ul li p {
  font-size     : 14px;
  font-family   : "Nanumsquare";
  letter-spacing: -0.5px;
  line-height   : 50px;
  color         : #fff
}

.mb-rvcontainer .before_slide {
  transform: translateY(100%)
}

.mb-rvcontainer .after_slide {
  transform: translateY(0)
}

/*# sourceMappingURL=ms-mobile.css.map */