/* @import url(//cdn.jsdelivr.net/font-notosans-kr/1.0.0-v1004/NotoSansKR-2350.css); */
@import url("https://fonts.googleapis.com/css?family=Lato:300i,400,400i,700,700i,900,900i|Noto+Sans+KR:400,500,700,900&display=swap");

/* 본고딕 웹폰트 가져오기 180124 morenvy.com */
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format("woff2"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format("woff"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format("woff2"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format("woff"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format("woff2"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format("woff"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format("woff2"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format("woff"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format("woff2"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format("woff"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format("woff2"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format("woff"),
    url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format("opentype");
}

@font-face {
  font-family: "Bs";
  src: url(../../font/bs/bs.ttf) format("truetype");
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  /* font-family: 'Jua', sans-serif; */
  /* font-family: 'Bs', sans-serif; */
  /* font-family: "Noto Sans KR", sans-serif; */
  font-family: "Noto Sans KR";
}

.ui-active {
  /* transition: background 0.2s, opacity 0.2s, transform 0.2s !important; */
  transform: scale(0.95) !important;
}

.ui-active>* {
  transform: translateY(0px) !important;
  opacity: 1 !important;
  animation: none !important;
  animation-fill-mode: none !important;
}

.font-bs {
  font-family: "Bs", sans-serif;
}

.font-nanum {
  font-family: "Nanum Myeongjo", serif;
}
.app-ctrl {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 9999;
}
.app-ctrl > div {
  padding: 1px 9px;
  border-radius: 5px;
  background-color: #ffffff5e;
  color: black;
  font-size: 12px;  
  border: 1px solid #9c9c9c;
  margin-left: 8px;
}
.app-ctrl .app-qr-test {
  display: none;
}

ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  border: none;
}

a {
  text-decoration: none;
  border: none;
  position: absolute;
  top: 0px;
  font-size: 0px;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
}

html {
  -webkit-text-size-adjust: none;
  overflow: hidden;
}

/*HTML 5 specific*/
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

html,
body {
  -webkit-overflow-scrolling: auto;
}

body {
  overflow: hidden;
  -webkit-touch-callout: none;
  /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;
  /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;
  /* prevent copy paste, to allow, change 'none' to 'text' */
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* font-family: nbgl; */
  font-family: Malgun Gothic, NanumSquare;
  line-height: initial;
  letter-spacing: -0.05em;
  font-size: 20px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  /* padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top); */
}

#app {
  /* background: linear-gradient(135deg, #bd16fb 1%,#6c1cf1 49%,#6c1cf1 100%); */
  /* background: #8a45f6; */
  background: black;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  overflow: hidden;
}

.center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* iPhone-x -> 헤더가 투명화 될때 앱바탕을 같은색으로 채워줌 */
#app.safe-bg-clear {
  background: #8a45f6;
}

select {
  /* width: 200px;
  padding: .8em .5em; */
  /* border: 1px solid #999; */
  /* font-family: inherit; */
  background: url('../../img/i-arrow.jpg') no-repeat 95% 50%;
  /* border-radius: 0px; */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:focus,
select:focus {
  outline: none;
}

.scene {
  display: none;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  /* top: calc(50px + env(safe-area-inset-top)); */
  /* top: 50px; */
  top: 0px;
  top: env(safe-area-inset-top);
  bottom: 0px;
  background-color: white;
  /* padding-bottom: calc(50px + env(safe-area-inset-bottom)); */
  -webkit-overflow-scrolling: touch;
}

/*공통 Toast UI*/
#toast {
  /* min-height: 14px; */
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 80px;
  /* margin: 0 auto; */
  text-align: center;


  display: none;
  z-index: 9999;

}

#toast .inner {
  display: inline-block;
  padding: 25px 46px;
  letter-spacing: 0;
  background: -webkit-linear-gradient(-45deg, #4a4b4e 0%, #2d2d2d 100%);
  color: white;
  font-size: 25px;
  -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 0.62);
  -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 0.62);
  box-shadow: 0px 0px 8px 0px rgba(56, 56, 56, 0.2);
  white-space: pre-line;
}

#dev-alert {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 80px;
  color: white;
  z-index: 9999;
  background: #df5858;
  text-align: center;
  border-radius: 0 0 10px 10px;
  padding: 2px 0;
}

.backbutton-common {
  position: fixed;
  bottom: env(safe-area-inset-top);
  bottom: 10px;
  left: 10px;
  /* width: 200px; */
  padding: 0 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  z-index: 100;
  color: white;
  border: 1px solid white;
  opacity: 0.5;
  border-radius: 35px;
}

.backbutton-common::before {
  content: '\f053';
  font-weight: 100;
  font-family: "Font Awesome 5 Pro";
  margin-right: 10px;
  font-size: 13px;
}

.backbutton-common::after {
  content: '목록으로';
}

/* LOADING */
.content-loader.transp {
  background-color: white;
}

.content-loader.opa {
  opacity: 0.2;
  /* background-color: rgba(255, 255, 255, 0.2); */
}

.content-loader {
  /* display: none; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.8);
}

.content-loader .cont {
  width: 100%;
  height: 100%;
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.content-loader .cont>.text {
  color: black;
  font-size: 20px;
  background: white;
  padding: 20px 26px;
}

.content-loader .cont>img {
  width: 25px;
  height: 25px;
  animation: loading-spin 1.0s linear infinite;
}

@keyframes loading-spin {
  100% {
    transform: rotate(360deg)
  }

  ;
}

.debug-mode {
  display: none;
  position: fixed;
  top: 10px;
  right: 50px;
  /* min-height: 30px; */
  background-color: #bb4141;
  color: white;
  font-size: 10px;
  padding: 4px 16px;
  border-radius: 20px;
  z-index: 999;
  font-weight: 900;
}

.anim-disable-showing {
  transform: translateY(20px);
  opacity: 0;
  animation: disable-showing 0.2s ease;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
}

.anim-showing {
  transform: translateY(20px);
  opacity: 0;
  animation: showing 0.2s ease;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
}

@keyframes disable-showing {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 0.2;
  }
}

@keyframes showing {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}





@media screen and (max-width: 500px) {

  /* HOME */
  #home .set {
    flex-direction: column;
  }

  #home .set .fair-list {
    width: 100%;
    padding: 0;
  }

  #home .set .fair-days {
    width: 100%;
    padding: 0;
  }

  #home .class-list {
    padding: 0 20px;
  }


  #home .i-class .item {
    font-size: 22px !important;
  }

  /* FCLASS */
  #fclass .reservation-content.fitting-content .intro-info .tit {
    font-size: 26px !important;
    padding: 0 16px !important;
  }

  #fclass .reservation-content.fitting-content .intro-info .desc {
    font-size: 20px !important;
  }

  #fclass .reservation-content.fitting-content .bg-image {
    background-size: contain !important;
  }

  #fclass .reservation-content.fitting-content .intro-info .revadd {
    height: 70px !important;
    width: 230px !important;
    font-size: 22px !important;
  }

  #fclass .reservation-content.fitting-content .intro-info .once-info {
    font-size: 15px !important;
  }
  #fclass .i-class .item {
    height: 150px !important;
  }
  #fclass .i-class .item .thumb {
    min-width: 100px !important;
  }
  #fclass .i-class .item .cont .name {
    font-size: 17px !important;
  }
  #fclass .i-class .item .cont .info .desc {
    font-size: 16px !important;
  }

  /* SCANNER */
  #scanner .debug-mode {
    flex-direction: column !important;
    top: 32% !important;
  }

  #scanner .header .title {
    font-size: 14px !important;
  }

  #scanner .header i {
    font-size: 20px !important;
    width: 70px !important;
  }


  /* TIMES */
  #times .head .tit {
    font-size: 20px !important;
  }

  #times .head .tit-sub {
    font-size: 17px !important;
  }

  #times .head .cname {
    margin-bottom: 15px !important;
  }

  #times .cont {
    padding-top: 120px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #times .list {
    margin-top: 35px !important;
  }
  #times .sel-item {
    width: 50% !important;
  }

  #times .sel-item .item {
    padding-left: 16px !important;
    height: 100px !important;
  }
  #times .sel-item .item .name {
    font-size: 26px !important;
  }

  #times .submit {
    height: 70px !important;  
    letter-spacing: 4px !important;
    font-size: 28px !important;
  }

  /* CONFIRM */
  #confirm .content {
    width: 90% !important;
  }
  #confirm .content .inner .class-name {
    font-size: 23px !important;
  }


  /* WAITING */
  #waiting .content {
    width: 90% !important;
  }
  #waiting .content .inner .row .lab {
    min-width: 82px !important;
  }
  #waiting .content .inner .times .i-time-item-mini .time-name {
    font-size: 15px !important;
    height: 35px !important;
  }

  /* Wait success */
  #waitsuccess .content {
    width: 90% !important;
  }
  #waitsuccess .content .inner .sub1 {
    font-size: 20px !important; 
  }
}