#app {
  background-color: white;
}

body {
  overscroll-behavior-y: contain !important;
  min-height: calc(100% + env(safe-area-inset-top));
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    sans-serif !important;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    sans-serif !important;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smooth: always;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
}

.scrolldiv {
  width: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch !important;
  padding-top: 0px;
  height: 100%;
}

.scrolldiv .ios {
  padding-top: 60px;
}

.clickable {
  cursor: pointer;
}

.center {
  text-align: center;
}

.underline {
  text-decoration: underline;
}

.underline-div {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 10px;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: 100px;
}

.font-7 {
  font-size: 7px;
}

.font-8 {
  font-size: 8px;
}

.font-9 {
  font-size: 9px;
}

.font-10 {
  font-size: 10px;
}

.font-11 {
  font-size: 11px;
}

.font-12 {
  font-size: 12px;
}

.font-13 {
  font-size: 13px;
}

.font-14 {
  font-size: 14px;
}

.font-15 {
  font-size: 15px;
}

.font-16 {
  font-size: 16px;
}

.font-17 {
  font-size: 17px;
}

.font-18 {
  font-size: 18px;
}

.font-20 {
  font-size: 20px;
}

.font-22 {
  font-size: 22px;
}

.font-24 {
  font-size: 24px;
}

.font-25 {
  font-size: 25px;
}

.font-26 {
  font-size: 26px;
}

.font-27 {
  font-size: 27px;
}

.font-28 {
  font-size: 28px;
}

.font-30 {
  font-size: 30px;
}

.font-32 {
  font-size: 32px;
}

.font-33 {
  font-size: 33px;
}

.font-35 {
  font-size: 35px;
}

.font-36 {
  font-size: 36px;
}

.font-40 {
  font-size: 40px;
}

.font-45 {
  font-size: 45px;
}

.font-48 {
  font-size: 48px;
}

.font-50 {
  font-size: 50px;
}

.font-100 {
  font-weight: 100;
}

.font-200 {
  font-weight: 200;
}

.font-300 {
  font-weight: 300;
}

.font-400 {
  font-weight: 400;
}

.font-500 {
  font-weight: 500;
}

.font-600 {
  font-weight: 600;
}

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

.font-800 {
  font-weight: 800;
}

.font-900 {
  font-weight: 900;
}

.d-flex {
  display: flex;
}

.d-wrap {
  flex-wrap: wrap;
}

.d-fit {
  justify-content: space-between;
}

.d-end {
  justify-content: flex-end;
}

.d-start {
  justify-content: flex-start;
}

.d-center {
  justify-content: center;
}

.d-even {
  justify-content: space-evenly;
}

.d-around {
  justify-content: space-around;
}

.c-white {
  color: white;
}

.c-black0 {
  color: #000000;
}

.c-black1 {
  color: #8d95a1;
}
.c-black2 {
  color: #6d7684;
}
.c-gray1 {
  color: #858585;
}

.c-gray2 {
  color: #c2c2c2;
}

.c-gray3 {
  color: #636363;
}

.c-gray4 {
  color: #8e8e8e;
}

.c-gray4 {
  color: #656565;
}
.c-gray5 {
  color: #dfdfdf;
}

.c-purple {
  color: #7a58e0;
}

.c-blue {
  color: #437ef7;
}

.center-center {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/*======*/
/*Custom*/
/*======*/
.max-width {
  width: 100%;
  max-width: 1208px;
  margin: 0 auto;
  padding-left: 50px;
  padding-right: 50px;
}

.swiper-container-horizontal > * > .slider-pagination-bullet {
  background: white none repeat scroll 0 0 !important;
  opacity: 0.5 !important;
  width: 13px !important;
  height: 13px !important;
}

.swiper-container-vertical .slider-pagination-bullet-active,
.swiper-container-horizontal .slider-pagination-bullet-active {
  opacity: 1 !important;
}

.bg-img {
  width: 100%;
  height: 908px;
  max-height: 908px;
  -webkit-background-size: cover !important; /* For WebKit*/
  -moz-background-size: cover !important; /* Mozilla*/
  -o-background-size: cover !important; /* Opera*/
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.m-tag {
  text-align: center;
  border-radius: 100px;
  background: #f1ff50;
  color: #48a300;
  font-size: 15px;
  font-weight: 500;
  padding-top: 6px;
  width: 85px;
  height: 35px;
}

.m-tag2 {
  text-align: center;
  border-radius: 100px;
  background: #e8f3ff;
  color: #2f80ed;
  font-size: 15px;
  font-weight: 500;
  padding-top: 6px;
  width: 85px;
  height: 35px;
}

.min-width {
  min-width: 1190px;
}

.scroll-margin {
  scroll-margin: 60px;
}

.custom-bar {
  width: 2px;
  height: 120px;
  background-color: #e7e7e7;
  margin: -10px auto 0;
}

.border-width.en {
  width: 450px;
}

.border-width.ko {
  width: 311px;
}