@charset "UTF-8";
@charset "UTF-8";
/* Original file: layouts/yos10_home/assets/css/base.scss */
:root {
  --unsplash-images: https://source.unsplash.com/user/dodomaru/likes;
  /**  data-image-src="https://source.unsplash.com/random?autumn/2560x1280"  **/
  --color1:#FCB6D0;
  /** 텍스트1 **/
  --color2:#FBEDC9;
  /** 가장넓은 배경 **/
  --color3:#D2E9E1;
  /** 두번째 넓은 배경 **/
  --color4:#b6dcb6b9;
  /** 메뉴 배경 **/
  --color5:#F8DDA9;
  --color6:#FFDEE1;
  --color7:#5A6B5A;
  /** 텍스트2 **/
  --color8:#FAF3ED;
  /** 테스트1 **/
  --color-text1:var(--color8);
  --color-text2:var(--color7);
  --color-menu1: var(--color4);
  --color-menu2: var(--color2);
  --color-bg1:var(--color2);
  --color-bg2:var(--color3);
  --color-point1:var(--color6);
  --color-point2:var(--color7);
  --color-primary: #247bff;
  --color-secondary: #ff3a4e;
  --color-success: #13ce66;
  --color-warning: #f7ba2a;
  --color-danger: #ff5a57;
  --color-info: #2957ff;
  --color-white: white;
  --color-black: black;
  --color-gray-050: #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #606060;
  --color-gray-600: #868e96;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --color-background: #E3DED1;
  --color-background-menubar: var(--color-menu1);
  --color-background-contents: #f2f2f2;
  --color-text-primary: white;
  --color-submenu-bg: var(-color-menu2);
  --color-pagetitle:#bdd5e7;
  --color-pagetitle_outline:#fff;
  --color-1:var(--color1);
  --color-2:var(--color2);
  --color-3:var(--color3);
  --color-4:var(--color4);
  --color-5:var(--color5);
  --color-6:#var(--color6);
  --color-7:var(--color7);
  --color-8:#var(--color8);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color1:#494A42;
    --color2:#5B5D52;
    --color3:#6D6F63;
    --color4:#92835F;
    --color5:#CC776E;
    --color6:#D6BDAD;
    --color7:#F8F4F1;
    --color8:#829d96;
    --color-text1:var(--color8);
    --color-text2:var(--color7);
    --color-menu1: var(--color1);
    --color-menu2: var(--color2);
    --color-bg1:var(--color2);
    --color-bg2:var(--color3);
    --color-point1:var(--color7);
    --color-point2:var(--color1);
    --color-white: black;
    --color-black: white;
    --color-gray-050: #21252a;
    --color-gray-100: #262b30;
    --color-gray-200: #343a40;
    --color-gray-300: #383f45;
    --color-gray-400: #495057;
    --color-gray-500: #a5adb5;
    --color-gray-600: #adb5bd;
    --color-gray-700: #ced4da;
    --color-gray-800: #dee2e6;
    --color-gray-900: #e9ecef;
    --color-background: var(--color-bg1);
    --color-background-menubar: var(--color-menu1);
    --color-submenu-bg: var(-color-menu2);
    --color-pagetitle:#222;
    --color-pagetitle_outline:rgb(178, 180, 184);
    --color-1:#E3DED1;
    --color-2:#C1B59F;
    --color-3:#969286;
    --color-4:#908471;
    --color-5:#9D8161;
    --color-6:#7B5037;
    --color-7:#5F5A4D;
    --color-8:#4F493F;
  }
  .color_scheme_light {
    --color1:#FCB6D0;
    /** 텍스트1 **/
    --color2:#FBEDC9;
    /** 가장넓은 배경 **/
    --color3:#D2E9E1;
    /** 두번째 넓은 배경 **/
    --color4:#b6dcb6b9;
    /** 메뉴 배경 **/
    --color5:#F8DDA9;
    --color6:#FFDEE1;
    --color7:#5A6B5A;
    /** 텍스트2 **/
    --color8:#FAF3ED;
    /** 테스트1 **/
    --color-text1:var(--color8);
    --color-text2:var(--color7);
    --color-menu1: var(--color4);
    --color-menu2: var(--color2);
    --color-bg1:var(--color2);
    --color-bg2:var(--color3);
    --color-point1:var(--color6);
    --color-point2:var(--color7);
    --color-primary: #247bff;
    --color-secondary: #ff3a4e;
    --color-success: #13ce66;
    --color-warning: #f7ba2a;
    --color-danger: #ff5a57;
    --color-info: #2957ff;
    --color-white: white;
    --color-black: black;
    --color-gray-050: #f8f9fa;
    --color-gray-100: #f1f3f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #606060;
    --color-gray-600: #868e96;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    --color-background: #E3DED1;
    --color-background-menubar: var(--color-menu1);
    --color-background-contents: #f2f2f2;
    --color-text-primary: white;
    --color-submenu-bg: var(-color-menu2);
    --color-pagetitle:#bdd5e7;
    --color-pagetitle_outline:#fff;
    --color-1:var(--color1);
    --color-2:var(--color2);
    --color-3:var(--color3);
    --color-4:var(--color4);
    --color-5:var(--color5);
    --color-6:#var(--color6);
    --color-7:var(--color7);
    --color-8:#var(--color8);
  }
}
.color_scheme_dark {
  --color1:#494A42;
  --color2:#5B5D52;
  --color3:#6D6F63;
  --color4:#92835F;
  --color5:#CC776E;
  --color6:#D6BDAD;
  --color7:#F8F4F1;
  --color8:#829d96;
  --color-text1:var(--color8);
  --color-text2:var(--color7);
  --color-menu1: var(--color1);
  --color-menu2: var(--color2);
  --color-bg1:var(--color2);
  --color-bg2:var(--color3);
  --color-point1:var(--color7);
  --color-point2:var(--color1);
  --color-white: black;
  --color-black: white;
  --color-gray-050: #21252a;
  --color-gray-100: #262b30;
  --color-gray-200: #343a40;
  --color-gray-300: #383f45;
  --color-gray-400: #495057;
  --color-gray-500: #a5adb5;
  --color-gray-600: #adb5bd;
  --color-gray-700: #ced4da;
  --color-gray-800: #dee2e6;
  --color-gray-900: #e9ecef;
  --color-background: var(--color-bg1);
  --color-background-menubar: var(--color-menu1);
  --color-submenu-bg: var(-color-menu2);
  --color-pagetitle:#222;
  --color-pagetitle_outline:rgb(178, 180, 184);
  --color-1:#E3DED1;
  --color-2:#C1B59F;
  --color-3:#969286;
  --color-4:#908471;
  --color-5:#9D8161;
  --color-6:#7B5037;
  --color-7:#5F5A4D;
  --color-8:#4F493F;
}
.color_scheme_light {
  --color1:#FCB6D0;
  /** 텍스트1 **/
  --color2:#FBEDC9;
  /** 가장넓은 배경 **/
  --color3:#D2E9E1;
  /** 두번째 넓은 배경 **/
  --color4:#b6dcb6b9;
  /** 메뉴 배경 **/
  --color5:#F8DDA9;
  --color6:#FFDEE1;
  --color7:#5A6B5A;
  /** 텍스트2 **/
  --color8:#FAF3ED;
  /** 테스트1 **/
  --color-text1:var(--color8);
  --color-text2:var(--color7);
  --color-menu1: var(--color4);
  --color-menu2: var(--color2);
  --color-bg1:var(--color2);
  --color-bg2:var(--color3);
  --color-point1:var(--color6);
  --color-point2:var(--color7);
  --color-primary: #247bff;
  --color-secondary: #ff3a4e;
  --color-success: #13ce66;
  --color-warning: #f7ba2a;
  --color-danger: #ff5a57;
  --color-info: #2957ff;
  --color-white: white;
  --color-black: black;
  --color-gray-050: #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #606060;
  --color-gray-600: #868e96;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --color-background: #E3DED1;
  --color-background-menubar: var(--color-menu1);
  --color-background-contents: #f2f2f2;
  --color-text-primary: white;
  --color-submenu-bg: var(-color-menu2);
  --color-pagetitle:#bdd5e7;
  --color-pagetitle_outline:#fff;
  --color-1:var(--color1);
  --color-2:var(--color2);
  --color-3:var(--color3);
  --color-4:var(--color4);
  --color-5:var(--color5);
  --color-6:#var(--color6);
  --color-7:var(--color7);
  --color-8:#var(--color8);
}
html {
  overflow-x: hidden;
  overflow-y: overlay;
}
html::-webkit-scrollbar, .custom-scroll::-webkit-scrollbar {
  width: 12px;
  /* transition: 250ms; */
  overflow: overlay;
}
html::-webkit-scrollbar-track, .custom-scroll::-webkit-scrollbar-track {
  background: transparent;
  background: var(--color-menu1);
  /* transition: 250ms; */
}
html::-webkit-scrollbar-thumb, .custom-scroll::-webkit-scrollbar-thumb {
  background: green;
  background: var(--color-menu2);
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: padding-box;
  /* transition: 250ms; */
}
body {
  font-size: 16px;
  color: var(--color-text1);
  background-color: var(--color-background);
  transition: color 0.2s ease;
  transition: background-color 0.2s ease;
}
html {
  box-sizing: border-box;
}
body {
  margin: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: border-box;
}
html, body, table, input, textarea, select, button {
  font-family: 'Noto Sans KR', 'Noto Sans Korean', -apple-system, 'SF Pro Display', 'Helvetica Neue', 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
textarea {
  background-color: var(--color-background-contents);
}
fieldset {
  padding: 0;
  margin: 0;
  border: none;
}
ion-icon {
  vertical-align: middle;
}
.btn {
  height: 26px !important;
}
.app-container {
  width: 100%;
  /* max-width: $base-container; */
  padding-left: 0rem;
  padding-right: 0rem;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 0px 0px 30px 30px;
  zoom: 1;
}
@media (max-width: 1024px) {
  .app-container {
    padding-left: 0rem;
    padding-right: 0rem;
    border-radius: 0px 0px 0px 0px;
  }
}
.app-container:before, .app-container:after {
  content: "";
  /* display: table; */
}
.app-container::after {
  clear: both;
}
.sub-menubar {
  width: 100%;
  /* max-width: $base-container; */
  padding-left: 2rem;
  padding-right: 2rem;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 0px 0px 30px 30px;
  background-color: var(--color-submenu-bg);
  zoom: 1;
}
@media (max-width: 1024px) {
  .sub-menubar {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-radius: 0px 0px 0px 0px;
  }
}
.sub-menubar:before, .sub-menubar:after {
  content: "";
  /* display: table; */
}
.sub-menubar::after {
  clear: both;
}
.app-content > * {
  box-sizing: content-box;
}
.app--overflow-hidden {
  overflow: hidden;
}