@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
body > div {
  height: 100vh;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}
body > div > div {
  margin-top: 80px;
}
body .content_wrapper {
  box-sizing: border-box;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  body .content_wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media only screen and (max-width: 639px) {
  body .content_wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
body article {
  box-sizing: border-box;
  overflow: auto;
  margin: auto;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  body article {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
@media only screen and (max-width: 639px) {
  body article {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
body article:last-of-type {
  padding-bottom: 15rem;
}
@media only screen and (max-width: 639px) {
  body article:last-of-type {
    padding-bottom: 8rem;
  }
}
body > div[id^='admin_'],
body > div[id^="mySnaphy_"]:not(#mySnaphy_login_wrapper) {
  min-height: 100vh;
}
body > div[id^='admin_'] article,
body > div[id^="mySnaphy_"]:not(#mySnaphy_login_wrapper) article {
  padding-top: 5rem !important;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  body > div[id^='admin_'] article,
  body > div[id^="mySnaphy_"]:not(#mySnaphy_login_wrapper) article {
    padding-top: 3rem !important;
  }
}
@media only screen and (max-width: 639px) {
  body > div[id^='admin_'] article,
  body > div[id^="mySnaphy_"]:not(#mySnaphy_login_wrapper) article {
    padding-top: 2rem !important;
  }
}
.content_wrapper {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: auto;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .content_wrapper[id^='admin_'] {
    text-align: center;
  }
  .content_wrapper[id^='admin_'] form,
  .content_wrapper[id^='admin_'] h2 {
    text-align: start;
  }
}
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 100;
  src: url('/fonts/notosanskr/NotoSansKR-Thin.woff') format('woff');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 300;
  src: url('/fonts/notosanskr/NotoSansKR-Light.woff') format('woff');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 500;
  src: url('/fonts/notosanskr/NotoSansKR-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 700;
  src: url('/fonts/notosanskr/NotoSansKR-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 700;
  src: url('/fonts/notosanskr/NotoSansKR-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 900;
  src: url('/fonts/notosanskr/NotoSansKR-Black.woff') format('woff');
}
@font-face {
  font-family: 'franklin_gothic';
  font-weight: 300;
  src: url('/fonts/franklin_gothic/franklin_gothic_medium.woff') format('woff');
}
@font-face {
  font-family: 'franklin_gothic';
  font-weight: 500;
  src: url('/fonts/franklin_gothic/franklin_gothic_demi.woff') format('woff');
}
@font-face {
  font-family: 'franklin_gothic';
  font-weight: 700;
  src: url('/fonts/franklin_gothic/franklin_gothic_heavy.woff') format('woff');
}
@font-face {
  font-family: 'nanumsquare';
  font-weight: 300;
  src: url('/fonts/nanumsquare/NanumSquareL.woff') format('woff');
}
@font-face {
  font-family: 'nanumsquare';
  font-weight: 500;
  src: url('/fonts/nanumsquare/NanumSquareR.woff') format('woff');
}
@font-face {
  font-family: 'nanumsquare';
  font-weight: 700;
  src: url('/fonts/nanumsquare/NanumSquareB.woff') format('woff');
}
@font-face {
  font-family: 'nanumsquare';
  font-weight: 900;
  src: url('/fonts/nanumsquare/NanumSquareEB.woff') format('woff');
}
@font-face {
  font-family: 'Kosugi';
  font-weight: 500;
  src: url('/fonts/kosugi/kosugi_regular.woff') format('woff');
}
.common_font_style {
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
}
.kiosk_font_style {
  font-family: 'nanumsquare' !important;
  letter-spacing: -0.035em !important;
  transform: none;
}
.btn_default,
.btn_naked,
.btn_solid {
  font-family: 'Noto Sans KR';
}
html,
body {
  font-size: 1rem;
  color: #0d0d0d;
  word-break: keep-all;
}
html n,
body n {
  display: inline-block;
  word-break: keep-all;
}
@media only screen and (min-width: 1200px) {
  html,
  body {
    font-size: 1.125rem;
  }
}
html p,
body p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
}
@media only screen and (max-width: 639px) {
  html p,
  body p {
    font-size: 0.85rem;
  }
}
html p[lang="en"],
body p[lang="en"] {
  transform: scaleX(0.9);
}
html[lang="jp"] *:not([lang="en"]),
body[lang="jp"] *:not([lang="en"]) {
  font-family: 'Noto Sans KR', 'Kosugi' !important;
  letter-spacing: -0.01em;
  line-height: 150%;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}
h2 p[lang="en"],
h3 p[lang="en"] {
  font-family: 'Franklin_gothic', 'sans-serif';
}
@media only screen and (max-width: 639px) {
  p[br] span {
    display: block;
  }
}
p[br="reverse"] span {
  display: block;
}
@media only screen and (max-width: 639px) {
  p[br="reverse"] span {
    display: inline;
  }
}
h2 p[lang="en"] {
  display: inline-block;
  font-weight: 700;
  font-size: 4rem;
  margin-bottom: 0.25em;
  line-height: 75%;
  text-align: left;
}
@media only screen and (max-width: 639px) {
  h2 p[lang="en"] {
    font-size: 2rem;
    line-height: 100%;
  }
}
h2.img p[lang="en"] {
  font-size: 6rem;
  color: #000;
  background: #FFF;
  mix-blend-mode: lighten;
  position: relative;
  display: block;
  width: 115%;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  h2.img p[lang="en"] {
    background: none;
    mix-blend-mode: initial;
  }
}
@supports (-ms-ime-align:auto) {
  background: none;
  mix-blend-mode: initial;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  h2.img p[lang="en"] {
    font-size: 4.5rem;
  }
}
@media only screen and (max-width: 639px) {
  h2.img p[lang="en"] {
    font-size: 2.25rem;
  }
}
h2.img p[lang="en"]:after {
  content: '';
  width: 2em;
  height: 100%;
  top: 0;
  position: absolute;
  background-color: #fff;
  display: none;
}
h2.admin p {
  font-size: 0.75em;
}
h2.admin p[lang="en"] {
  font-size: 3rem;
  margin-bottom: 0.15em;
}
@media only screen and (max-width: 639px) {
  h2.admin p[lang="en"] {
    font-size: 1.5rem;
  }
}
h3 p {
  font-size: 1em;
  font-weight: 700;
}
h3 p:first-of-type {
  position: relative;
  display: inline-block;
}
h3 p[lang="en"] {
  font-family: 'Franklin_gothic', 'sans-serif';
  font-size: 4rem;
  line-height: 85%;
}
@media only screen and (max-width: 639px) {
  h3 p[lang="en"] {
    font-size: 2rem;
  }
}
h3 p[lang="en"]:before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  background-color: #0d0d0d;
  margin-bottom: 0.35em;
}
h3 p[lang="en"]:after {
  content: '';
  width: 1.75rem;
  height: 1.75rem;
  background-color: #f5b116;
  display: block;
  position: absolute;
  right: -1rem;
  bottom: 1.5rem;
  z-index: -1;
}
@media only screen and (max-width: 639px) {
  h3 p[lang="en"]:after {
    width: 1.5rem;
    height: 1.5rem;
    bottom: 0.5rem;
  }
}
h4 p {
  font-weight: 700;
  font-size: 2rem;
}
@media only screen and (max-width: 639px) {
  h4 p {
    font-size: 1.25rem;
  }
}
h5 {
  padding: 0.75em 0;
}
h5 > * {
  display: inline-block;
  vertical-align: middle;
}
h5 img {
  width: 1rem;
  height: 1rem;
  margin-right: 1em;
  margin-top: 0.1em;
}
h5 p {
  font-weight: 700;
  font-size: 1rem;
  line-height: 100%;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  h5 p {
    font-size: 1.15rem;
  }
}
@media only screen and (max-width: 639px) {
  h5 p {
    font-size: 0.75rem;
  }
}
label {
  padding-top: 4px;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  font-size: 0.8rem;
}
label.label {
  font-weight: 400;
  font-size: 0.7rem;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  label.label {
    font-size: 0.9rem;
  }
}
.item_wrapper {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding-right: 0.35rem;
}
.item_wrapper.box {
  border: 1px solid #f3f3f3;
  padding: 1em !important;
}
.item_wrapper.box > label,
.item_wrapper.box > p {
  margin-bottom: 1em;
}
.item_wrapper.add {
  vertical-align: inherit;
  margin-top: 3px;
}
.item_wrapper select ~ .item_wrapper {
  margin-top: 0.5em;
}
.item_wrapper p.notice {
  padding-left: 0;
}
.item_wrapper > * {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.item_wrapper:last-of-type {
  padding-right: 0;
}
.item_wrapper.col_1 {
  width: 10%;
}
.item_wrapper.col_2 {
  width: 20%;
}
.item_wrapper.col_3 {
  width: 30%;
}
.item_wrapper.col_4 {
  width: 40%;
}
.item_wrapper.col_5 {
  width: 50%;
}
.item_wrapper.col_6 {
  width: 60%;
}
.item_wrapper.col_7 {
  width: 70%;
}
.item_wrapper.col_8 {
  width: 80%;
}
.item_wrapper.col_9 {
  width: 90%;
}
.item_wrapper.col_10 {
  width: 100%;
}
form > p {
  width: 105%;
  color: #5a5a5a;
  font-size: 0.7em;
}
form > div {
  clear: both;
  margin-bottom: 1em;
}
form > div:last-of-type {
  margin-bottom: 3em;
}
form > div p.notice {
  float: none;
  clear: both;
  font-size: 0.65em;
  font-weight: 300;
  color: #808080;
  padding-top: 0.5em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  form > div p.notice {
    padding-left: 0;
  }
}
form img {
  vertical-align: middle;
}
.input_style {
  box-sizing: border-box;
  border: 1px solid #ececec;
  font-size: 0.65em;
  font-weight: 400;
  padding: 0.65em;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.05em;
  background-color: #fafafa;
  color: #0d0d0d;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .input_style {
    font-size: 0.85em;
    padding: 0.85em;
  }
}
@media only screen and (max-width: 639px) {
  .input_style {
    padding: 0.8em 0.65em;
  }
}
.input_style::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}
.timepicker {
  position: relative;
  margin: 0 !important;
}
.timepicker input {
  width: 100%;
  margin: 0;
}
.timepicker .select_time {
  overflow: auto;
  padding: 0.5em 0;
  background-color: #fff;
  display: none;
  border: 1px solid #cdcdcd;
  margin-top: -1px;
  position: absolute;
  z-index: 1;
  width: 100%;
}
.timepicker .select_time > div {
  width: 33.33333333%;
  float: left;
  text-align: center;
  padding: 0.25em;
  box-sizing: border-box;
}
.timepicker .select_time > div .up,
.timepicker .select_time > div .down {
  width: 2em;
  margin: auto;
  height: 1em;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.25em;
  background-size: 50%;
}
.timepicker .select_time > div .up {
  background-image: url("/images/icon/up.svg");
}
.timepicker .select_time > div .down {
  background-image: url("/images/icon/down.svg");
}
.timepicker .select_time > div .time {
  margin: 1em 0;
  background-color: #f3f3f3;
  padding: 0.25em;
}
.timepicker.active .select_time {
  display: block;
}
input[type="time"]::-ms-clear {
  width: 0;
  height: 0;
  display: none;
}
select {
  -webkit-appearance: none;
  background-image: url("/images/icon/down.svg");
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 0.85em;
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="file"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
select,
textarea {
  box-sizing: border-box;
  border: 1px solid #ececec;
  font-size: 0.65em;
  font-weight: 400;
  padding: 0.65em;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.05em;
  background-color: #fafafa;
  color: #0d0d0d;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="email"],
  input[type="file"],
  input[type="time"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  select,
  textarea {
    font-size: 0.85em;
    padding: 0.85em;
  }
}
@media only screen and (max-width: 639px) {
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="email"],
  input[type="file"],
  input[type="time"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  select,
  textarea {
    padding: 0.8em 0.65em;
  }
}
input[type="text"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="password"]::-webkit-inner-spin-button,
input[type="tel"]::-webkit-inner-spin-button,
input[type="email"]::-webkit-inner-spin-button,
input[type="file"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-inner-spin-button,
select::-webkit-inner-spin-button,
textarea::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}
input[type="text"].needToFill,
input[type="number"].needToFill,
input[type="password"].needToFill,
input[type="tel"].needToFill,
input[type="email"].needToFill,
input[type="file"].needToFill,
input[type="time"].needToFill,
input[type="date"].needToFill,
input[type="datetime-local"].needToFill,
input[type="month"].needToFill,
select.needToFill,
textarea.needToFill {
  background-color: #ffd6d6 !important;
  border: 1px solid #ff8989 !important;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="file"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
select:focus,
textarea:focus {
  border-color: #f5b116;
}
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
input[type="file"]::placeholder,
input[type="time"]::placeholder,
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="month"]::placeholder,
select::placeholder,
textarea::placeholder {
  color: #cdcdcd;
}
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="email"]:disabled,
input[type="file"]:disabled,
input[type="time"]:disabled,
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
select:disabled,
textarea:disabled {
  color: #cdcdcd;
}
input[type="text"]::-webkit-clear-button,
input[type="number"]::-webkit-clear-button,
input[type="password"]::-webkit-clear-button,
input[type="tel"]::-webkit-clear-button,
input[type="email"]::-webkit-clear-button,
input[type="file"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button,
input[type="date"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
select::-webkit-clear-button,
textarea::-webkit-clear-button {
  display: none;
}
.style_naked {
  background: none !important;
  border: none !important;
}
input[type="checkbox"] {
  margin-right: 0.5em;
  width: 0;
  height: 0;
  margin: 0;
}
input[type="checkbox"] ~ span {
  display: inline-flex;
  align-items: center;
}
input[type="checkbox"] ~ span:before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  background-color: white;
  border: 1px solid #00baff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5em;
  margin-top: 0.25em;
}
input[type="checkbox"]:checked ~ span:before {
  content: "✔";
  color: white;
  background-color: #00baff;
}
.input_label_wrapper {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #ececec;
  font-size: 0.65em;
  font-weight: 400;
  padding: 0.65em;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.05em;
  background-color: #fafafa;
  color: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 2em;
}
.input_label_wrapper select {
  text-align-last: left;
}
.input_label_wrapper ~ .reset_file {
  margin-right: 0.5em;
}
.input_label_wrapper > * {
  padding-top: 0;
}
.input_label_wrapper > *:first-child {
  margin-right: 1em;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .input_label_wrapper {
    font-size: 0.85em;
    padding: 0.85em;
  }
}
@media only screen and (max-width: 639px) {
  .input_label_wrapper {
    padding: 0.8em 0.65em;
  }
}
.input_label_wrapper::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}
.input_label_wrapper > * {
  font-size: 1em;
}
.input_label_wrapper p.notice {
  font-size: 0.85em;
  padding-top: 0;
}
.input_label_wrapper span {
  display: inline-block;
}
.input_label_wrapper input {
  background: none;
}
.input_label_wrapper input,
.input_label_wrapper select {
  border: 0;
  border-bottom: 1px solid #cdcdcd;
  font-size: 1em;
  padding: 0.25em;
  text-align: center;
  margin: 0 0.5em;
  height: 1.85em;
}
.input_label_wrapper input[type="number"],
.input_label_wrapper select[type="number"] {
  width: 3em;
}
.input_label_wrapper input:disabled,
.input_label_wrapper select:disabled {
  border-color: #cdcdcd;
}
.input_label_wrapper select {
  padding-right: 1.35em;
  margin-left: 1em;
}
.input_label_wrapper select:first-child {
  margin-left: 0;
}
.input_label_wrapper input[type="number"] {
  -moz-appearance: textfield;
}
.input_label_wrapper input[type="number"]::-webkit-outer-spin-button,
.input_label_wrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input_file_wrapper {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #ececec;
}
.input_file_wrapper input[type="file"] {
  border: 0;
  outline: none;
  width: 100%;
  opacity: 0;
}
.input_file_wrapper input[type="file"].needToFill:before {
  background-color: #ffd6d6;
}
.input_file_wrapper .file_status {
  background-image: url("/images/icon/file.svg");
  background-repeat: no-repeat;
  background-position: 0.625em;
  background-size: 1.25em;
  background-color: #f8f8f8;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.65em;
  z-index: -1;
  font-family: 'Noto Sans KR';
  font-size: 0.65em;
  letter-spacing: -0.03em;
  padding-left: 2.55em;
  line-height: 175%;
}
.input_file_wrapper .file_status.needToFill {
  background-color: #ffd6d6 !important;
  opacity: 1 !important;
  border: 1px solid #ff8989 !important;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .input_file_wrapper .file_status {
    font-size: 0.85em;
    padding: 0.85em;
    padding-left: 2.95em;
  }
}
@media only screen and (max-width: 639px) {
  .input_file_wrapper .file_status {
    padding: 0.8em 0.65em;
    padding-left: 2.85em;
  }
}
.reset_file {
  position: absolute;
  top: 0;
  right: 3px;
  color: #f5b116;
  font-weight: 500;
  cursor: pointer;
  padding: 0 0.7em;
  font-size: 0.7rem;
  height: 100%;
  align-items: center;
  display: flex;
  width: auto;
  transform: scale(1.15, 0.85);
  trnasform-origin: right center;
  font-family: 'Noto Sans KR';
  background-color: #fafafa;
}
.input_radio_wrapper {
  position: relative;
  padding: 0.7em;
  padding-right: 0;
  transform: none;
}
.input_radio_wrapper.needToFill {
  background-color: #ffd6d6;
}
.input_radio_wrapper input[type="radio"] {
  text-align: center;
}
.input_radio_wrapper input[type="radio"]:after {
  content: attr(title);
  background-color: #f8f8f8;
  background-color: #fafafa;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0.7em;
  font-weight: 500;
  color: #5a5a5a;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  font-size: 0.75rem;
  border: 1px solid #ececec;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .input_radio_wrapper input[type="radio"]:after {
    font-size: 1rem;
  }
}
.input_radio_wrapper input[type="radio"]:checked:after {
  background-color: #fff;
  border-color: #f5b116;
  background-color: #fff08a;
  color: #f5b116;
  font-weight: 700;
}
select option:disabled {
  color: #a6a6a6;
}
label {
  font-size: 0.85em;
  font-weight: 300;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.05em;
}
label > * {
  display: inline-block;
  vertical-align: middle;
}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  margin: 5.6px 0;
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 9.8px;
  cursor: pointer;
  box-shadow: 0.8px 0.8px 1px rgba(0, 0, 0, 0), 0px 0px 0.8px rgba(13, 13, 13, 0);
  background: #ececec;
  border-radius: 0px;
  border: 0px solid rgba(1, 1, 1, 0);
}
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 0px solid #000000;
  height: 21px;
  width: 15px;
  border-radius: 0px;
  background: #f5b116;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.6px;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: #f9f9f9;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 9.8px;
  cursor: pointer;
  box-shadow: 0.8px 0.8px 1px rgba(0, 0, 0, 0), 0px 0px 0.8px rgba(13, 13, 13, 0);
  background: #ececec;
  border-radius: 0px;
  border: 0px solid rgba(1, 1, 1, 0);
}
input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 0px solid #000000;
  height: 21px;
  width: 15px;
  border-radius: 0px;
  background: #f5b116;
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 9.8px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #dfdfdf;
  border: 0px solid rgba(1, 1, 1, 0);
  border-radius: 0px;
  box-shadow: 0.8px 0.8px 1px rgba(0, 0, 0, 0), 0px 0px 0.8px rgba(13, 13, 13, 0);
}
input[type="range"]::-ms-fill-upper {
  background: #ececec;
  border: 0px solid rgba(1, 1, 1, 0);
  border-radius: 0px;
  box-shadow: 0.8px 0.8px 1px rgba(0, 0, 0, 0), 0px 0px 0.8px rgba(13, 13, 13, 0);
}
input[type="range"]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 0px solid #000000;
  height: 21px;
  width: 15px;
  border-radius: 0px;
  background: #f5b116;
  cursor: pointer;
  height: 9.8px;
}
input[type="range"]:focus::-ms-fill-lower {
  background: #ececec;
}
input[type="range"]:focus::-ms-fill-upper {
  background: #f9f9f9;
}
table.list {
  position: relative;
  width: 105%;
  transform-origin: center;
  border-collapse: collapse;
  margin-bottom: 5em;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  word-break: keep-all;
  text-align: center;
  font-size: 0.65em;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  table.list {
    border: 0;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  table.list {
    font-size: 0.95em;
  }
}
table.list * {
  transform: none;
}
table.list caption {
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  font-size: 1.5em;
  text-align: left;
  width: 105%;
  margin-bottom: 1em;
}
table.list caption select,
table.list caption input {
  padding: 0.7em;
  font-size: 0.7em;
}
@media only screen and (max-width: 639px) {
  table.list caption {
    margin-bottom: 0.75em;
  }
}
table.list caption > * {
  display: inline-block;
}
table.list caption > span {
  font-size: 0.75em;
  margin-right: 1em;
}
table.list caption > span span {
  vertical-align: middle;
  display: inline-block;
  line-height: 100%;
  margin-right: 0.35em;
}
table.list caption > span span:first-child {
  font-weight: 700;
}
table.list caption form {
  float: right;
  margin-left: 0.5em;
}
table.list thead tr.sort {
  display: none;
}
table.list thead th {
  border: 0;
  background-color: #fff08a;
  font-size: 1em;
  font-weight: 700;
}
table.list thead th * {
  font-size: 1em;
  font-weight: 700;
}
table.list tbody tr:hover {
  background-color: #fffdf0;
}
table.list tr {
  position: relative;
  background-color: #fff;
  border: 0 solid transparent;
}
table.list tr:nth-of-type(2n) {
  background-color: #fafafa;
}
table.list tr:nth-of-type(2n) input,
table.list tr:nth-of-type(2n) textarea,
table.list tr:nth-of-type(2n) select,
table.list tr:nth-of-type(2n) input[type="radio"]:after,
table.list tr:nth-of-type(2n) input[type="file"]:before {
  background-color: #fff;
}
table.list tr th,
table.list tr td {
  padding: 1.5em 1em;
  text-align-last: center;
  word-break: break-all;
  border: 1px solid #f3f3f3;
}
table.list tr th input,
table.list tr td input,
table.list tr th select,
table.list tr td select {
  width: 100%;
}
table.list tr tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
table.list tr td.img img {
  width: 6em;
}
table.list tr td.img img:last-child {
  margin-right: 0;
}
table.list tr .menu_popup_wrapper img {
  padding: 0.5em;
}
table.list .btn_sm {
  padding: 0.5em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  table.list {
    border: 1px solid transparent;
    z-index: 3;
  }
  table.list thead {
    margin-bottom: 1em;
    display: block;
    float: right;
    width: 10em;
    height: 2em;
    position: relative;
    z-index: 1;
  }
  table.list thead tr {
    width: 100%;
    position: absolute;
    display: grid;
    border: 1px solid #cdcdcd;
    display: none;
  }
  table.list thead tr th {
    background-color: #fff;
    padding: 0.6em;
    border: 1px solid #f3f3f3;
  }
  table.list thead tr th.new,
  table.list thead tr th.menu {
    display: none;
  }
  table.list thead tr.sort {
    display: block;
    border: 0;
    border-bottom: 1px solid #5a5a5a;
    opacity: 0.5;
  }
  table.list thead tr.sort th {
    display: block;
    background: none;
    padding: 0;
    margin-bottom: 0.5em;
    background-image: url("/images/icon/arrow_bottom_short.svg");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 1em;
    border: 0;
  }
  table.list thead.visible tr:not(.sort) {
    display: grid !important;
    top: 100%;
  }
  table.list caption {
    float: left;
    width: auto;
    color: #808080;
  }
  table.list tbody {
    display: block;
    margin-top: 3em;
    clear: both;
  }
  table.list tbody tr {
    margin-bottom: 1.5em;
    background: #fafafa !important;
    display: block;
    box-sizing: border-box;
    padding: 1em;
  }
  table.list tbody tr:last-of-type {
    padding-right: 0;
  }
  table.list tbody tr.visible td {
    display: flex;
  }
  table.list tbody tr td {
    min-height: 1em;
    line-height: 1em;
    text-align-last: left;
    justify-content: flex-start;
    align-items: center;
    padding: 0.35em;
    display: none;
  }
  table.list tbody tr td:nth-of-type(1),
  table.list tbody tr td:nth-of-type(2),
  table.list tbody tr td:nth-of-type(3),
  table.list tbody tr td:nth-of-type(4),
  table.list tbody tr td.toggle_menu_popup {
    display: flex;
  }
  table.list tbody tr td form {
    margin-right: 0.5em;
  }
  table.list tbody tr td form:last-child {
    margin-right: 0;
  }
  table.list tbody tr td .btn_default:not(.solid) {
    padding: 0;
    border: 0;
    border-bottom: 2px solid #5a5a5a;
  }
  table.list tbody tr td.toggle_menu_popup {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.65rem;
    border: 0;
    margin-bottom: 0.5em;
  }
  table.list tbody tr td.list_created {
    position: absolute;
    top: 0;
    right: 0;
  }
  table.list tbody tr td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    width: 5em;
    text-align-last: left;
    margin-right: 1em;
  }
  table.list tbody tr td.list_created::before,
  table.list tbody tr td.toggle_menu_popup::before {
    width: auto;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  table.list#contacts caption,
  table.list#caseStudies_list caption {
    width: 105%;
    float: none;
  }
  table.list#contacts caption span,
  table.list#caseStudies_list caption span {
    width: 30%;
    margin-right: 0;
  }
  table.list#contacts caption form,
  table.list#caseStudies_list caption form {
    width: 35%;
    padding-left: 0.5em;
    box-sizing: border-box;
    float: right;
    margin-left: 0;
  }
  table.list#contacts caption form:last-of-type,
  table.list#caseStudies_list caption form:last-of-type {
    padding-left: 0;
  }
  table.list#contacts caption form select,
  table.list#caseStudies_list caption form select,
  table.list#contacts caption form input,
  table.list#caseStudies_list caption form input {
    width: 100%;
  }
}
.slide {
  position: relative;
  clear: both;
  overflow: visible;
}
.slide li {
  width: 100%;
  height: 100%;
  list-style: none;
  display: none;
  opacity: 0;
  z-index: 1;
  position: absolute;
}
.slide li.prev {
  opacity: 1;
  display: block;
}
.slide li.active {
  z-index: 2;
  display: block;
}
.slide li img {
  width: 100%;
  display: block;
}
.slide .btns {
  z-index: 3;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: -1em !important;
  display: flex;
  justify-content: center;
}
.slide .btns button {
  width: 3rem;
  height: 3rem;
  font-family: 'Noto Sans KR';
  background-color: #fff;
  border: 1px solid #0d0d0d;
  background-color: rgba(255, 255, 255, 0.75);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
}
@media only screen and (max-width: 639px) {
  .slide .btns button {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  .slide .btns button {
    transition: 0.2s;
    transform-origin: center;
  }
  .slide .btns button:hover {
    transform: translateY(-0.5em);
  }
}
.slide .btns button.light {
  background: none;
  color: #fff;
  border: 1px solid #fff;
}
.slide .btns button.solid {
  background-color: #f3f3f3;
  border-color: #cdcdcd;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .slide .btns button {
    background-color: #fff !important;
  }
}
.slide .btns button:first-of-type {
  margin-right: 0.5em;
}
.slide .btns button.prev {
  background-image: url('/images/icon/arrow_left_short.svg');
}
.slide .btns button.next {
  background-image: url('/images/icon/arrow_right_short.svg');
}
.btn_sm {
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  padding: 0.85rem 2rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.05em;
  line-height: 100%;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .btn_sm {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 639px) {
  .btn_sm {
    font-size: 0.75rem;
    padding: 0.65rem 1.25rem;
  }
}
.btn_xs {
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  padding: 0.4rem;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: -0.05em;
  line-height: 100%;
  vertical-align: middle;
  vertical-align: -webkit-baseline-middle;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .btn_xs {
    font-size: 0.9rem;
    padding: 0.65rem;
  }
}
@media only screen and (max-width: 639px) {
  .btn_xs {
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
  }
}
.btn_md {
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  padding: 0.85rem 2rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.05em;
  line-height: 100%;
  min-width: 11rem;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .btn_md {
    font-size: 1.1rem;
    min-width: 10rem;
  }
}
@media only screen and (max-width: 639px) {
  .btn_md {
    font-size: 0.75rem;
    padding: 0.65rem 1rem;
    min-width: 9rem;
  }
}
.btn_md:after {
  background-image: url('/images/icon/arrow_right_short.svg');
  background-repeat: no-repeat;
  width: 0.75em;
  height: 0.75em;
  content: '';
  position: absolute;
  right: 2em;
  height: 100%;
  top: 0;
  background-position: center;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .btn_md:after {
    right: 1.25em;
  }
}
@media only screen and (max-width: 639px) {
  .btn_md:after {
    right: 1.5em;
  }
}
.btn_md span {
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
}
.btn_default {
  background-color: #fff;
  border: 1px solid #0d0d0d;
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  .btn_default {
    transition: 0.2s;
    transform-origin: center;
  }
  .btn_default:hover {
    transform: translateY(-0.5em);
  }
}
.btn_default.light {
  background: none;
  color: #fff;
  border: 1px solid #fff;
}
.btn_default.solid {
  background-color: #f3f3f3;
  border-color: #cdcdcd;
}
.btn_solid {
  background-color: #f5b116;
  border: 1px solid #f5b116;
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  .btn_solid {
    transition: 0.2s;
    transform-origin: center;
  }
  .btn_solid:hover {
    transform: translateY(-0.5em);
  }
}
.btn_warning {
  background-color: #fff;
  border: 1px solid #ff0000;
  color: #ff0000;
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  .btn_warning {
    transition: 0.2s;
    transform-origin: center;
  }
  .btn_warning:hover {
    transform: translateY(-0.5em);
  }
}
.select_lg {
  padding: 0.5em 1em;
  font-size: 1.5em;
}
.select_solid {
  text-align-last: center;
  border: 0;
  border-bottom: 1px solid #000;
}
.popup {
  position: absolute;
  background-color: #fff;
  z-index: 5;
  max-width: 25rem;
  text-align: center;
  border: 1px solid black;
  padding: 2.5rem;
  box-sizing: border-box;
  right: 1rem;
  top: 0;
}
@media only screen and (max-width: 639px) {
  .popup {
    padding: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .popup {
    padding: 2rem;
    right: 2rem;
  }
}
.popup h4 {
  margin-bottom: 1.5em;
  width: 105%;
}
.popup h4 p {
  font-size: 1.75rem;
}
@media only screen and (max-width: 639px) {
  .popup h4 p {
    font-size: 1.25rem;
  }
}
.popup > p {
  width: 105%;
  display: flex;
  flex-direction: column;
}
.popup > p > span {
  margin-bottom: 1.5em;
}
.popup > p > span:last-child {
  margin-bottom: 0;
}
.popup > p > span em,
.popup > p > span span {
  display: inline-block;
  white-space: nowrap;
}
@media only screen and (max-width: 639px) {
  .popup > p > span em,
  .popup > p > span span {
    white-space: normal;
    display: inline;
  }
}
.popup em {
  font-weight: 600;
  font-style: normal;
  margin-left: 0.25em;
}
.menu_popup_wrapper {
  position: relative;
  text-align: left !important;
}
.menu_popup_wrapper p {
  display: block !important;
}
.menu_popup_wrapper p span {
  display: inline-block;
  line-height: 100%;
}
.menu_popup_wrapper p span:first-of-type {
  padding-right: 0.5em;
  border-right: 1px solid #a6a6a6;
  margin-right: 0.5em;
}
.menu_popup_wrapper .item_wrapper span {
  width: auto;
}
.menu_popup_wrapper a[href='.menu_popup'] img {
  width: 1em;
  height: 1em;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .menu_popup_wrapper a[href='.menu_popup'] img {
    width: 1rem;
    height: 1rem;
  }
}
.menu_popup_wrapper .menu_popup {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 2px 2px 4px 1px #cdcdcd;
  right: 0;
  top: 135%;
  width: 15em;
  z-index: 1;
  text-align-last: left;
  padding: 1.5em;
  word-break: break-all;
}
.menu_popup_wrapper .menu_popup .list_id {
  color: #f5b116;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .menu_popup_wrapper .menu_popup {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 639px) {
  .menu_popup_wrapper .menu_popup select {
    font-size: 1em;
    padding: 0.35em;
  }
}
.menu_popup_wrapper .menu_popup .menu span,
.menu_popup_wrapper .menu_popup a,
.menu_popup_wrapper .menu_popup button {
  cursor: pointer;
}
.menu_popup_wrapper .menu_popup *[img] {
  padding-left: 1.5em !important;
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: left 0.3em;
  margin-bottom: 0.5em;
  line-height: 150%;
}
.menu_popup_wrapper .menu_popup *[img]:last-of-type {
  margin-bottom: 0;
}
.menu_popup_wrapper .menu_popup .info {
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid #cdcdcd;
}
.menu_popup_wrapper .menu_popup .info p {
  font-size: 0.975em;
  margin: 0.5em 0;
}
.menu_popup_wrapper .menu_popup .info > div {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ececec;
}
.menu_popup_wrapper .menu_popup .info > div:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.menu_popup_wrapper .menu_popup .menu {
  margin-top: 1.5em;
}
.menu_popup_wrapper .menu_popup .menu .item_wrapper {
  vertical-align: middle;
}
.menu_popup_wrapper .menu_popup .menu:first-child {
  margin-top: 0;
}
.menu_popup_wrapper .menu_popup .menu > * {
  display: block;
  margin: 1.5em 0;
}
.menu_popup_wrapper .menu_popup .menu > *:first-child {
  margin-top: 0;
}
.menu_popup_wrapper .menu_popup .menu > *:last-child {
  margin-bottom: 0;
  padding-top: 1.5em;
  border-top: 1px solid #cdcdcd;
}
.menu_popup_wrapper .menu_popup .menu button {
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  transform: none;
  padding: 0;
  font-size: 1em;
}
body.modal_active {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: none;
}
.modal .modal_bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.modal .modal_wrapper {
  top: 5%;
  height: 90%;
  position: relative;
  z-index: 1;
  background-color: #fff;
  box-sizing: border-box;
  padding: 2em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .modal .modal_wrapper {
    padding: 2em;
    width: 95%;
  }
}
.modal .modal_wrapper .scroll_div {
  overflow-y: auto;
  height: 100%;
}
.modal .modal_wrapper .scroll_div > div {
  margin-top: 4em;
}
.modal .modal_wrapper .scroll_div > div:first-of-type {
  margin-top: 0;
}
.modal .modal_wrapper .scroll_div > div > *:not(h5) {
  box-sizing: border-box;
  padding-bottom: 3em;
  border-bottom: 1px solid #ececec;
}
@media only screen and (max-width: 639px) {
  .modal .modal_wrapper .scroll_div > div > *:not(h5) {
    padding-bottom: 2em;
  }
}
.modal .modal_wrapper .scroll_div > div h5 {
  margin-bottom: 3em;
}
@media only screen and (max-width: 639px) {
  .modal .modal_wrapper .scroll_div > div h5 {
    margin-bottom: 1em;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .modal .modal_wrapper .scroll_div > div form .item_wrapper {
    width: 100%;
    margin-top: 0.35em;
    padding-right: 0;
  }
  .modal .modal_wrapper .scroll_div > div form > div {
    margin-bottom: 0.75em;
  }
  .modal .modal_wrapper .scroll_div > div form > div:last-of-type {
    margin-bottom: 3em;
  }
}
.modal .modal_wrapper .scroll_div p.notice {
  margin-top: 1em;
  text-align: left;
  font-size: 0.7em;
}
.modal .modal_wrapper .close {
  position: absolute;
  top: 3em;
  right: 3em;
}
.modal .modal_wrapper .close:before {
  content: 'X';
  font-size: 1.5rem;
  font-weight: 500;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .modal .modal_wrapper .close {
    top: 2em;
    right: 2em;
  }
}
@media only screen and (max-width: 639px) {
  .modal .modal_wrapper .close {
    top: 1em;
    right: 1em;
  }
  .modal .modal_wrapper .close:before {
    font-size: 1rem;
  }
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  ::-webkit-scrollbar {
    display: none;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  body {
    -ms-overflow-style: none;
    overflow: auto;
  }
}
::-webkit-scrollbar-thumb {
  background: #cdcdcd;
  box-sizing: border-box;
  border: 0;
  border-radius: 0px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0;
  border-radius: 0px;
}
.dropdown_menu {
  position: relative;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.dropdown_menu span {
  width: 1.75em;
  height: 1.75em;
  display: block;
  opacity: 0.65;
}
.dropdown_menu span img {
  display: block;
}
.dropdown_menu ul {
  position: absolute;
  margin-top: 1.75em;
  display: none;
}
.dropdown_menu ul li {
  list-style: none;
  padding: 1em 2em;
  text-align: center;
  background-color: #f8f8f8;
  font-weight: 700;
}
.dropdown_menu ul li:first-of-type {
  margin-top: 1em;
}
.dropdown_menu ul li:nth-of-type(2n) {
  background-color: #ececec;
}
.dropdown_menu ul li.active {
  background-color: #f5b116;
}
.dropdown_menu.active ul {
  display: block;
}
body.print {
  font-size: 1.75vw;
}
body.print .estimate .content {
  margin-top: 0;
  background-color: #fff;
}
body.print .estimate .content:after {
  background-image: url("/images/ci/snaphy_pattern.png");
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.05;
  content: "";
  z-index: 1;
}
body.print .estimate .btns_wrapper,
body.print .estimate .datas {
  display: none !important;
}
body.print .estimate .data_render {
  display: block !important;
}
.estimate {
  text-align: left;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .modal_wrapper {
    padding: 1em;
  }
}
.estimate .btns_wrapper {
  padding-top: 0.5em;
}
.estimate h5 {
  background: none;
  padding: 0;
  border: 0;
}
.estimate h5 p {
  margin: 0;
}
.estimate .content {
  position: relative;
  overflow: auto;
  background-color: #f3f3f3;
}
.estimate .content table {
  border-collapse: collapse;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  font-size: 0.75em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content table {
    width: 105% !important;
    font-size: 0.6em;
  }
}
.estimate .content table thead th {
  padding: 0.5em 0;
}
.estimate .content table td:first-of-type {
  font-weight: 700;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content table td:first-of-type {
    padding-right: 1em;
  }
}
.estimate .content table caption,
.estimate .content table small {
  font-size: 0.8em;
  font-weight: 400;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content table caption,
  .estimate .content table small {
    font-size: 1em;
  }
}
.estimate .content table small {
  margin-top: 0.25em;
}
.estimate .content table caption {
  margin-bottom: 1em;
}
.estimate .content table small {
  display: block;
}
.estimate .content table.info_items {
  font-size: 0.9em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content table.info_items {
    font-size: 0.65em;
  }
}
.estimate .content table.info_items thead {
  border-bottom: 4px solid #000;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content table.info_items thead {
    border-width: 2px;
  }
}
.estimate .content table.info_items tbody td {
  padding: 0.5em 0;
}
.estimate .content table.info_items tbody td:nth-of-type(2),
.estimate .content table.info_items tbody td:nth-of-type(3) {
  font-weight: 800;
}
.estimate .content .datas {
  background-color: #f3f3f3;
}
.estimate .content .datas > div {
  overflow: auto;
}
.estimate .content > * {
  clear: both;
  padding-left: 4em;
  padding-right: 4em;
  overflow: auto;
  transform-origin: center;
}
.estimate .content > *:first-child {
  padding-top: 4em;
  padding-bottom: 4em;
}
.estimate .content > *:last-child {
  padding-top: 2em;
  padding-bottom: 2em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content > * {
    padding-left: 1em;
    padding-right: 1em;
  }
  .estimate .content > *:first-child {
    padding-top: 2em;
    padding-bottom: 2em;
  }
  .estimate .content > *:last-child {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}
.estimate .content > * > div {
  overflow: auto;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .item_wrapper {
    padding-right: 0.15em;
  }
  .estimate .content .item_wrapper input,
  .estimate .content .item_wrapper select,
  .estimate .content .item_wrapper textarea {
    font-size: 0.6rem;
    padding: 0.65em;
  }
}
.estimate .content .doongio {
  margin-bottom: 3em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .doongio {
    margin-bottom: 1em;
  }
  .estimate .content .doongio ~ .datas .item_wrapper.col_2 {
    display: block;
    width: 100%;
  }
}
.estimate .content .doongio > * {
  float: left;
}
.estimate .content .doongio > *:first-child {
  width: 60%;
}
.estimate .content .doongio > *:last-child {
  width: 40%;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .doongio > * {
    width: 100% !important;
  }
  .estimate .content .doongio > *:last-child {
    margin-top: 2em;
  }
}
.estimate .content .doongio h4 p[lang="en"] {
  display: block;
  font-family: 'Franklin_gothic';
  font-weight: 900;
  margin-bottom: 0.5em;
  line-height: 75%;
  font-size: 2.35em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .doongio h4 p[lang="en"] {
    font-size: 1.5em;
  }
}
.estimate .content .doongio h4 > * {
  vertical-align: middle;
  display: inline-block;
}
.estimate .content .doongio h4 img {
  margin-right: 0.5em;
  width: 5em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .doongio h4 img {
    width: 4em;
  }
}
.estimate .content .doongio h4 > p {
  font-size: 1em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .doongio h4 > p {
    font-size: 0.75em;
  }
}
.estimate .content .service {
  margin-top: 2em;
  text-align: left;
  text-align-last: left;
  overflow: hidden;
}
.estimate .content .service .info_client {
  width: 30%;
  float: left;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .service .info_client {
    float: none;
  }
}
.estimate .content .service .info_items {
  width: 70%;
  float: right;
  transform-origin: right center;
}
.estimate .content .service .info_items span.schedule {
  margin-right: 0.75em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .service .info_items {
    margin-top: 3em;
    float: none;
    transform-origin: left top;
  }
}
@supports (-ms-ime-align: auto) {
  .info_items {
    width: 68% !important;
  }
}
.estimate .content .service .info_cost_total {
  clear: both;
  text-align: right;
  background-image: url("/images/ci/doongio_stamp.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 5em;
  margin-bottom: 5em;
  padding: 4em 0;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .service .info_cost_total {
    padding: 2em 0;
  }
}
.estimate .content .service .info_cost_total p {
  float: right;
  font-weight: 900;
  font-size: 2em;
}
.estimate .content .service .info_cost_total p small {
  font-size: 0.75em;
  margin-right: 1em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .service .info_cost_total p small {
    font-size: 0.65em;
  }
}
.estimate .content .service .info_cost_total p .total_sum {
  float: right;
}
.estimate .content .service .info_etc {
  width: 105%;
  border-top: 1px solid black;
}
.estimate .content .service .info_etc td:first-of-type {
  width: 15%;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  .estimate .content .service .info_etc td:first-of-type {
    width: 20%;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  .estimate .content .service .info_etc td:first-of-type {
    width: 30%;
  }
}
.estimate .content .service .info_etc tr:first-of-type td {
  padding-top: 1em;
}
#mySnaphy_templates_wrapper header #toggle_preview {
  display: none;
  margin-right: 1em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_templates_wrapper header #toggle_preview {
    display: block;
  }
}
#mySnaphy_templates_wrapper header #toggle_preview * {
  display: inline-block;
  vertical-align: middle;
  line-height: 100%;
  font-weight: bold;
}
#mySnaphy_templates_wrapper header #toggle_preview img {
  margin-right: 0.25em;
  width: 1.5em;
}
header {
  z-index: 10;
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.95);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  font-size: 0.75em;
  padding: 0 1em;
}
header .dropdown_menu {
  margin-left: 1em;
}
@media only screen and (min-width: 960px) and (max-width: 1199px), only screen and (min-width: 1200px) {
  header {
    padding: 0 2em;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  header {
    padding: 0 2em;
    height: 64px;
  }
}
@media only screen and (max-width: 639px) {
  header {
    border-bottom: 1px solid #f3f3f3;
    height: 48px;
    font-size: 0.65em;
  }
}
header h1 {
  width: 6rem;
  display: inline-block;
}
@media only screen and (max-width: 639px) {
  header h1 {
    width: 4.5rem;
  }
}
header h1 a,
header h1 img {
  display: block;
}
header h1 a {
  margin-top: -1.5px;
}
header a {
  line-height: 100%;
}
header .content_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
}
header .content_wrapper > div {
  display: flex;
  align-items: center;
}
header .content_wrapper > a,
header .menu a {
  color: #343434;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  padding: 0.5rem 1.5rem;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  header .content_wrapper > a,
  header .menu a {
    padding: 0.5rem 1rem;
  }
}
@media only screen and (max-width: 639px) {
  header .content_wrapper > a,
  header .menu a {
    padding: 0.5rem;
  }
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  header .content_wrapper > a,
  header .menu a {
    transition: 0.2s;
    transform-origin: center;
  }
  header .content_wrapper > a:hover,
  header .menu a:hover {
    transform: translateY(-0.5em);
  }
}
header a.icon {
  position: fixed;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  padding: 1rem;
  background-color: #f3f3f3;
  transition: 0.25s;
}
@media only screen and (max-width: 639px) {
  header a.icon {
    width: 1rem;
    height: 1rem;
    padding: 0.85rem;
  }
}
header a.icon:hover {
  background-color: #cdcdcd;
}
header a.icon:first-of-type {
  top: 11em;
}
@media only screen and (max-width: 639px) {
  header a.icon:first-of-type {
    bottom: 8.7rem;
    top: auto;
  }
}
header a.icon:nth-of-type(2) {
  top: 14em;
}
@media only screen and (max-width: 639px) {
  header a.icon:nth-of-type(2) {
    bottom: 6rem;
    top: auto;
  }
}
@media only screen and (max-width: 639px) {
  header .menu.toggle_display.visible a#doc_aboutSnaphy {
    background-position: 13.5em center !important;
    background-size: 1em !important;
    padding-left: 0 !important;
  }
}
header .menu a:last-of-type {
  padding-right: 0;
}
header .menu a#doc_aboutSnaphy {
  color: #f5b116;
  font-weight: 600;
  padding-left: 1.125em;
  background-image: url('/images/icon/download_brandColor.svg');
  background-repeat: no-repeat;
  background-size: 0.75em 0.75em;
  background-position: left 0.875em;
}
@media only screen and (max-width: 639px) {
  header .menu a#doc_aboutSnaphy {
    padding-left: 0.975em;
  }
}
@media only screen and (max-width: 639px) {
  header .menu a#doc_aboutSnaphy {
    background-position: left 0.825em;
  }
}
body > div > section {
  margin-top: 80px;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  body > div > section {
    margin-top: 64px;
  }
}
@media only screen and (max-width: 639px) {
  body > div > section {
    margin-top: 48px;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  div[id^='admin_'] header .menu,
  div[id^='mySnaphy_'] header .menu {
    width: 2em;
    height: 2em;
  }
  div[id^='admin_'] header .menu.visible > div,
  div[id^='mySnaphy_'] header .menu.visible > div {
    top: 64px;
  }
}
@media only screen and (max-width: 639px) {
  div[id^='admin_'] header .menu,
  div[id^='mySnaphy_'] header .menu {
    width: 2em;
    height: 2em;
  }
  div[id^='admin_'] header .menu.visible > div,
  div[id^='mySnaphy_'] header .menu.visible > div {
    top: 48px;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  div[id^='admin_'] header .menu,
  div[id^='mySnaphy_'] header .menu {
    background-image: url('/images/icon/hamburger.svg');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
  }
  div[id^='admin_'] header .menu > div,
  div[id^='mySnaphy_'] header .menu > div {
    display: none;
  }
  div[id^='admin_'] header .menu.visible,
  div[id^='mySnaphy_'] header .menu.visible {
    pointer-events: all;
  }
  div[id^='admin_'] header .menu.visible > div,
  div[id^='mySnaphy_'] header .menu.visible > div {
    display: block;
    position: fixed;
    left: 0;
    width: 100vw;
    background-color: #f3f3f3;
    box-shadow: 0 10px 7px 0 rgba(0, 0, 0, 0.1);
  }
  div[id^='admin_'] header .menu.visible > div > a,
  div[id^='mySnaphy_'] header .menu.visible > div > a {
    display: block;
    text-align: center;
    margin-right: 0;
    width: 105%;
    padding: 1rem 0;
  }
  div[id^='admin_'] header .menu.visible > div > a:nth-of-type(2n),
  div[id^='mySnaphy_'] header .menu.visible > div > a:nth-of-type(2n) {
    background-color: #fff;
  }
}
footer {
  background-color: #0d0d0d;
  font-family: 'Noto Sans KR';
}
footer > .content_wrapper {
  overflow: auto;
  padding: 2em 0;
}
@media only screen and (min-width: 960px) and (max-width: 1199px), only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  footer > .content_wrapper {
    padding: 2em;
  }
}
footer > .content_wrapper > * {
  float: left;
}
footer > .content_wrapper img {
  width: 5em;
  margin-right: 4em;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  footer > .content_wrapper img {
    width: 6em;
  }
}
footer > .content_wrapper > ul {
  font-size: 0.6rem;
  color: #cdcdcd;
  display: flex;
  flex-wrap: wrap;
  width: 55%;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  footer > .content_wrapper > ul {
    width: 65%;
    font-size: 0.75em;
    max-width: 25rem;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  footer > .content_wrapper > ul {
    clear: both;
    margin-top: 3rem;
    width: 100%;
  }
}
footer > .content_wrapper > ul li {
  list-style: none;
  display: inline-block;
  margin-right: 2em;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  footer > .content_wrapper > ul li {
    display: block;
  }
}
footer > .content_wrapper a[href="/privacyPolicy"] {
  float: right;
}
@media only screen and (max-width: 639px) {
  footer > .content_wrapper a[href="/privacyPolicy"] {
    float: left;
    margin-top: 3rem;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  footer > .content_wrapper a[href="/privacyPolicy"] {
    margin-top: 3rem;
  }
}
footer .copyright {
  background-color: #f5b116;
  font-size: 0.75em;
  padding: 1em 0;
  text-align: center;
}
footer .copyright p {
  font-size: 1em;
  font-weight: 800;
  transform-origin: center;
}
#page_loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 3;
  justify-content: center;
  background-color: #f3f3f3;
  flex-direction: column;
  display: none;
}
#page_loader p {
  font-weight: 600;
  letter-spacing: 0.03em;
}
#page_flip {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}
em {
  font-style: normal;
  background-color: #fff5b3;
}
* {
  outline: none;
}
.hidden {
  display: none !important;
}
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.input_color_wrapper .colorPicker {
  position: absolute;
  z-index: 1;
}
.input_color_wrapper input[type="text"] {
  width: 100%;
  padding-left: 2.5em;
}
.input_color_wrapper .preview_color {
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.img_xs {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}
.img_sm {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  display: inline-block;
}
.img_md {
  width: 1.85em;
  height: 1.85em;
  vertical-align: middle;
  display: inline-block;
}
.new:after {
  content: "N";
  color: #f5b116;
  line-height: 0.75em;
  padding: 0.375em;
  animation: blink infinite 1s;
  margin: 0 0.5em;
}
@keyframes blink {
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
ul,
ol {
  margin: 0;
  padding: 0;
}
ul.list,
ol.list {
  list-style: none;
}
ul.list > li,
ol.list > li {
  padding-left: 3em;
  background-image: url("/images/icon/arrow_right.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 2em 2em;
  margin-bottom: 1.25em;
  word-break: keep-all;
}
@media only screen and (max-width: 639px) {
  ul.list > li,
  ol.list > li {
    margin-bottom: 1em;
  }
}
ul.list > li:last-of-type,
ol.list > li:last-of-type {
  margin-bottom: 0;
}
ul.list > li p,
ol.list > li p {
  font-size: 1.05rem;
  font-weight: 300;
}
@media only screen and (max-width: 639px) {
  ul.list > li p,
  ol.list > li p {
    font-size: 0.9rem;
    font-weight: 400;
  }
}
ul.list > li p:first-of-type,
ol.list > li p:first-of-type {
  font-size: 1.05rem;
  font-weight: 700;
  color: #343434;
}
ul.list > li p:first-of-type[lang="en"],
ol.list > li p:first-of-type[lang="en"] {
  font-size: 1.35rem;
}
@media only screen and (max-width: 639px) {
  ul.list > li p:first-of-type,
  ol.list > li p:first-of-type,
  ul.list > li p:first-of-type[lang="en"],
  ol.list > li p:first-of-type[lang="en"] {
    font-size: 1rem;
    font-weight: 600;
    color: #f5b116;
  }
}
#btn_top {
  position: fixed;
  width: 2em;
  height: 2em;
  padding: 0.5em;
  opacity: 0.8;
  bottom: 2em;
  right: 10em;
  font-family: 'Noto Sans KR';
  background-color: #fff;
  border: 1px solid #0d0d0d;
  cursor: pointer;
  background-image: url("/images/icon/arrow_top.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  z-index: 3;
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  #btn_top {
    transition: 0.2s;
    transform-origin: center;
  }
  #btn_top:hover {
    transform: translateY(-0.5em);
  }
}
#btn_top.light {
  background: none;
  color: #fff;
  border: 1px solid #fff;
}
#btn_top.solid {
  background-color: #f3f3f3;
  border-color: #cdcdcd;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  #btn_top {
    right: 4em;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  #btn_top {
    right: 2em;
  }
}
@media only screen and (max-width: 639px) {
  #btn_top {
    right: 1em;
  }
}
form .data_render {
  display: none;
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  .animation_translate {
    transition: 0.2s;
    transform-origin: center;
  }
  .animation_translate:hover {
    transform: translateY(-0.5em);
  }
}
.animation_scale {
  transform-origin: center;
  transition: 0.25s;
}
.animation_scale:hover {
  transform: scale(1.05);
}
html,
body {
  user-select: none;
}
html img,
body img {
  pointer-events: none;
}
a.img {
  width: 0.75em;
  height: 0.75em;
  padding: 0.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  border-radius: 100%;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  a.img {
    width: 1.5em;
    height: 1.5em;
  }
}
a.img.naverBlog {
  background-image: url("/images/ci/naverBlog.svg");
}
a.img.instagram {
  background-image: url("/images/ci/instagram.svg");
}
a.img.link_etc {
  background-image: url("/images/icon/arrow_right_short.svg");
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
}
button.close {
  position: absolute;
  top: 2em;
  right: 2em;
  transform: scale(1.15, 0.85);
  transform-origin: right center;
  font-family: 'Noto Sans KR';
  z-index: 1;
}
@media only screen and (max-width: 639px) {
  button.close {
    top: 0.75em;
    right: 1em;
    transform: scale(1, 0.75);
  }
}
button.close:before {
  content: "X";
  font-size: 2em;
  font-weight: 500;
}
ul.notice,
ol.notice {
  background-color: #ffde00;
  margin-top: 4em;
}
ul.notice h5,
ol.notice h5 {
  margin-bottom: 1em;
}
ul.notice li,
ol.notice li {
  font-size: 0.85em;
  list-style: inherit;
  margin-left: 1em;
  margin-bottom: 0.5em;
}
ul.notice li p,
ol.notice li p {
  font-size: 0.85em;
}
ul.notice em,
ol.notice em {
  font-weight: 700;
  font-style: normal;
}
a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  border: none;
  outline: none;
}
img {
  outline: none;
  border: none;
}
::selection {
  background: #ffde00;
}
#mySnaphy_login_wrapper section {
  display: flex;
  height: 100%;
}
#mySnaphy_login {
  text-align: center;
}
#mySnaphy_login h2 {
  margin-bottom: 3em;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_login h2 {
    margin-bottom: 1.5em;
  }
}
#mySnaphy_login h2 p {
  transform-origin: center;
}
#mySnaphy_login form {
  width: 40%;
  margin: auto;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  #mySnaphy_login form {
    width: 60%;
  }
}
@media only screen and (max-width: 639px) {
  #mySnaphy_login form {
    width: 100%;
  }
}
#mySnaphy_login form .item_wrapper {
  text-align: left;
}
#mySnaphy_login form > div:last-of-type {
  margin-bottom: 1em;
}
#mySnaphy_login form button {
  margin-top: 3em;
}
body[lang="jp"] .description li > span > span {
  word-break: break-all !important;
}
body[lang="jp"] #templatePack_intro {
  padding-top: 0 !important;
}
#mySnaphy_guide h2 {
  margin-bottom: 0;
}
#mySnaphy_guide #download_templatePack {
  text-align: center;
  margin-bottom: 1em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_guide #download_templatePack {
    margin: 0;
  }
}
#mySnaphy_guide #download_templatePack a {
  margin: 0 0.5em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_guide #download_templatePack a {
    margin: 0.5em 0;
    width: 80%;
  }
}
#mySnaphy_guide > p {
  text-align: center;
  font-weight: 600;
  line-height: 175%;
  margin-top: 3em;
}
#mySnaphy_guide > div:not(#download_templatePack) {
  padding: 3em 0;
}
#mySnaphy_guide > div:not(#download_templatePack) h3 {
  text-align: center;
  margin-bottom: 1em;
}
#mySnaphy_guide > div:not(#download_templatePack) h3 p {
  transform-origin: center;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack) h3 p {
    font-size: 0.85em;
  }
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_intro ul {
  background-color: #fbfbfb;
  text-align: center;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_intro ul > li {
  width: 20%;
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack)#templatePack_intro ul > li {
    width: 50%;
    padding: 0.5em;
    margin-bottom: 1em;
  }
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_intro ul > li img {
  display: block;
  border: 1px solid #ececec;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details {
  box-sizing: border-box;
  border: 1px solid #ececec;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li {
  border-top: 1px dashed #cdcdcd;
  padding: 2.5em 0;
  overflow: auto;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li:last-child {
  padding-bottom: 0;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li:first-of-type {
  margin-top: 0;
  border: 0;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li > img {
  margin-right: 2em;
  float: left;
  width: 14em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li > img {
    float: none;
    margin-bottom: 2em;
    width: 100%;
    margin-right: 0;
  }
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description {
  text-align: left;
  font-size: 0.85em;
  overflow: auto;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description p {
  font-weight: 600;
  margin-bottom: 1em;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li {
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  padding: 0.5em 0;
  overflow: auto;
  clear: both;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li:first-of-type > span:first-of-type {
  background-color: #fff08a;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li:nth-of-type(2) > span:first-of-type {
  background-color: #d7f2d1;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li:nth-of-type(3) > span:first-of-type {
  background-color: #b3eaff;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span {
  font-size: 0.9em;
  float: left;
  width: 85%;
  padding-left: 1em;
  box-sizing: border-box;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span {
    width: 100%;
  }
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span img {
  display: inline-block;
  width: 12em;
  margin-right: 0.5em;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span img:last-child {
  margin-right: 0;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span img:after {
  content: "ddd";
  display: block;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span a {
  margin-top: 0.25em;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span:first-of-type {
  padding: 0.35em;
  border-radius: 0.25em;
  font-size: 0.85em;
  width: 15%;
  text-align: center;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span:first-of-type {
    width: 100%;
    margin-bottom: 0.5em;
  }
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span > span {
  display: block;
  box-sizing: border-box;
  padding-left: 1em;
  position: relative;
  margin-bottom: 0.75em;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span > span {
    margin-bottom: 1em;
  }
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span > span:last-child {
  margin-bottom: 0;
}
#mySnaphy_guide > div:not(#download_templatePack)#templatePack_details > ul > li .description li > span > span:before {
  content: "▶";
  font-weight: bold;
  font-size: 0.75em;
  margin-right: 1em;
  position: absolute;
  left: 0;
  top: 0.25em;
}
#mySnaphy_guide > div:not(#download_templatePack) > ul {
  overflow: auto;
  padding: 2em;
  margin-top: 1em;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack) > ul {
    padding: 1em;
  }
}
#mySnaphy_guide > div:not(#download_templatePack) > ul p.notice {
  font-size: 0.75em;
  margin-bottom: 3em;
  color: #808080;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_guide > div:not(#download_templatePack) > ul p.notice {
    margin-bottom: 2em;
  }
}
#mySnaphy_guide > div:not(#download_templatePack) > ul > li {
  list-style: none;
  box-sizing: border-box;
}
#mySnaphy_guide > div:not(#download_templatePack) > ul > li li {
  list-style: none;
}
#mySnaphy_guide > div:not(#download_templatePack) > ul > li > p {
  text-align: center;
  margin-top: 0.5em;
  font-size: 0.7em;
}
#mySnaphy_guide > div:not(#download_templatePack) > ul > li img {
  width: 100%;
}
.hidden {
  display: none !important;
}
#mySnaphy_templates {
  overflow: visible;
  /* .uploaded {
  display: inline-block;
  font-weight: 900;
  color: @primaryColor02-lighten;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  background-image: url('/images/icon/check.svg');
  background-repeat: no-repeat;
  background-size: contain;
 }*/
}
#mySnaphy_templates > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#mySnaphy_templates .add_rank {
  position: relative;
  margin-bottom: 0.25em;
}
#mySnaphy_templates .sm_modal {
  display: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  padding: 1em;
  background-color: #fff;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%;
}
#mySnaphy_templates .sm_modal > * {
  margin-bottom: 0.25em;
}
#mySnaphy_templates .sm_modal .view_file {
  width: auto;
  height: 2.5em;
  display: inline-block;
  padding: 0.25em 0;
  box-sizing: border-box;
  margin-top: -0.25em;
}
#mySnaphy_templates .sm_modal.set_photo_pos {
  box-sizing: inherit;
  padding: 2em;
}
#mySnaphy_templates .settings {
  width: 51%;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_templates .settings {
    width: 100%;
  }
}
#mySnaphy_templates .settings.admin,
#mySnaphy_templates .settings.eventnow {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_templates .settings.admin,
  #mySnaphy_templates .settings.eventnow {
    width: 100%;
  }
}
#mySnaphy_templates .settings.admin button,
#mySnaphy_templates .settings.eventnow button {
  margin-left: 0.5em;
}
#mySnaphy_templates .settings.eventnow > form > p {
  text-align: center;
  font-size: 1em;
}
#mySnaphy_templates .settings.eventnow #couponNumber_list {
  height: 10em;
  overflow-y: scroll;
}
#mySnaphy_templates .settings.eventnow #couponNumber_list .input_label_wrapper p span.notice {
  margin-left: 1em;
  color: red;
}
#mySnaphy_templates .settings.eventnow #prints > div:first-of-type {
  vertical-align: top;
}
#mySnaphy_templates .settings.eventnow #prints > div > div {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: start;
}
#mySnaphy_templates .settings.eventnow #prints > div > div p {
  font-size: 0.75em;
  width: 100%;
  margin-bottom: 0.5em;
}
#mySnaphy_templates .settings.eventnow #prints a {
  width: auto;
  float: right;
}
#mySnaphy_templates .settings.etc #couponNumber_list_wrapper {
  position: relative;
}
#mySnaphy_templates .settings.etc #couponNumber_list_wrapper > input.init {
  display: none;
}
#mySnaphy_templates .settings.etc #couponNumber_list_wrapper #couponNumber_list {
  max-height: 10em;
  overflow-y: scroll;
}
#mySnaphy_templates .settings.etc #couponNumber_list_wrapper #couponNumber_list input {
  background: none !important;
  border: none !important;
}
#mySnaphy_templates .settings.etc #couponNumber_list_wrapper .notice {
  text-align-last: right;
  position: absolute;
  right: 2em;
  top: 1em;
}
#mySnaphy_templates .settings.etc #couponNumber_list_wrapper .btns_wrapper {
  margin-top: 1em;
}
#mySnaphy_templates .settings.etc #couponNumber_list_wrapper .btns_wrapper > *:last-child {
  float: right;
}
#mySnaphy_templates .settings .tabs {
  text-align: right;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_templates .settings .tabs {
    text-align: center;
  }
}
#mySnaphy_templates .settings .tabs .active {
  border: 0;
  font-family: 'Noto Sans KR';
  background-color: #f5b116;
  border: 1px solid #f5b116;
}
@media only screen and (min-width: 1200px), only screen and (min-width: 960px) and (max-width: 1199px) {
  #mySnaphy_templates .settings .tabs .active {
    transition: 0.2s;
    transform-origin: center;
  }
  #mySnaphy_templates .settings .tabs .active:hover {
    transform: translateY(-0.5em);
  }
}
#mySnaphy_templates .settings .tabs > * {
  margin-right: 0.5em;
  display: inline-block;
  overflow: visible;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_templates .settings .tabs > * {
    box-sizing: border-box;
    padding: 0.65rem;
    margin-right: 0;
    width: 33.33333333%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
}
#mySnaphy_templates .settings .tabs > *:last-child {
  margin-right: 0;
}
#mySnaphy_templates .settings > p.notice {
  margin-bottom: 2em;
  font-size: 0.7em;
  text-align: center;
  color: #808080;
  text-align: right;
  width: 105%;
}
#mySnaphy_templates .settings form {
  overflow: visible;
}
#mySnaphy_templates .settings form > p {
  text-align: right;
  margin-bottom: 4em;
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #mySnaphy_templates .settings form > p {
    margin-top: 2em;
    text-align: center;
  }
}
#mySnaphy_templates .settings form > div:last-of-type {
  margin-bottom: 4em;
}
@media only screen and (max-width: 639px) {
  #mySnaphy_templates .settings form > div > .item_wrapper {
    width: 100%;
    display: block;
  }
}
#mySnaphy_templates .settings form > div > .item_wrapper:first-of-type {
  margin-bottom: 0.5em;
}
#mySnaphy_templates .settings form .item_wrapper > div {
  margin-bottom: 0.25em;
  position: relative;
}
#mySnaphy_templates .settings form button {
  float: right;
}
#mySnaphy_templates .settings form .add.item_wrapper {
  padding-right: 0;
  cursor: pointer;
}
#mySnaphy_templates .settings form .add.item_wrapper p {
  box-sizing: border-box;
  padding: 0.55em;
  text-align: center;
  line-height: 100%;
  background-color: #b3eaff;
  font-weight: 500;
  width: 103%;
  font-size: 1em;
  color: #fff;
  margin-top: -0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25em;
  margin-top: -0.2em;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  #mySnaphy_templates .settings form .add.item_wrapper p {
    height: 3.1em;
  }
}
@media only screen and (max-width: 639px) {
  #mySnaphy_templates .settings form .add.item_wrapper p {
    height: 2.45em;
    margin-top: -0.2em;
  }
}
#mySnaphy_templates .settings form table td:nth-child(2) {
  width: 75%;
  font-size: 1.35em;
}
#mySnaphy_templates .settings form table .item_wrapper {
  margin-bottom: 0.25em;
}
#mySnaphy_templates .settings.options .set_photo_pos {
  overflow: hidden;
  transform-origin: left top;
}
#mySnaphy_templates .settings.options .set_photo_pos .photoTemplate_wrapper {
  background-color: #e23833;
}
#mySnaphy_templates .settings.options .set_photo_pos .photoTemplate_wrapper .canvas-container {
  position: absolute !important;
  z-index: 1;
}
#mySnaphy_templates .settings.options .set_photo_pos .photoTemplate_wrapper .photoTemplate {
  visibility: hidden;
}
#preview_steps #photoWall_posts {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}
#preview_steps[theme="light"][printmode="베이직"] #photoWall_posts,
#preview_steps[theme="light"][printmode="한컷끼리"] #photoWall_posts {
  background-image: url("/images/service/kiosk/theme_light_photoWall.png");
}
#preview_steps[theme="light"][printmode="미니"] #photoWall_posts,
#preview_steps[theme="light"][printmode="한장에네컷A"] #photoWall_posts,
#preview_steps[theme="light"][printmode="한장에네컷B"] #photoWall_posts,
#preview_steps[theme="light"][printmode="두컷나눔"] #photoWall_posts,
#preview_steps[theme="light"][printmode="세컷끼리"] #photoWall_posts {
  background-image: url("/images/service/kiosk/theme_light_photoWall_select_multiple.png");
}
#preview_steps[theme="dark"][printmode="베이직"] #photoWall_posts,
#preview_steps[theme="dark"][printmode="한컷끼리"] #photoWall_posts {
  background-image: url("/images/service/kiosk/theme_dark_photoWall.png");
}
#preview_steps[theme="dark"][printmode="미니"] #photoWall_posts,
#preview_steps[theme="dark"][printmode="한장에네컷A"] #photoWall_posts,
#preview_steps[theme="dark"][printmode="한장에네컷B"] #photoWall_posts,
#preview_steps[theme="dark"][printmode="세컷끼리"] #photoWall_posts,
#preview_steps[theme="dark"][printmode="두컷나눔"] #photoWall_posts {
  background-image: url("/images/service/kiosk/theme_dark_photoWall_select_multiple.png");
}
#preview_steps #selected_multiple_posts {
  display: none;
  position: absolute;
  top: 600px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 1em;
}
#preview_steps #selected_multiple_posts > div:not(.button_wrapper) {
  width: 160px;
  height: 160px;
  display: inline-block;
  margin-right: 1em;
  position: relative;
}
#preview_steps #selected_multiple_posts > div:not(.button_wrapper):last-of-type {
  margin-right: 0;
}
#preview_steps #selected_multiple_posts > div:not(.button_wrapper) button {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1.5em;
  height: 1.5em;
  text-align-last: center;
  color: #fff;
  border-radius: 100%;
  line-height: 1.5em;
  font-weight: 900;
  font-size: 1.25em;
}
#preview_steps[printmode="미니"] #selected_multiple_posts,
#preview_steps[printmode="한장에네컷A"] #selected_multiple_posts,
#preview_steps[printmode="한장에네컷B"] #selected_multiple_posts,
#preview_steps[printmode="세컷끼리"] #selected_multiple_posts,
#preview_steps[printmode="두컷나눔"] #selected_multiple_posts {
  display: flex;
  justify-content: center;
  align-content: center;
}
#preview_steps[theme="light"] #preview_photoTemplate img {
  box-shadow: 5px 5px 5px 0 rgba(200, 200, 200, 0.75);
}
#preview_steps[theme="light"] .fabric_wrapper {
  background-color: #fff;
}
#preview_steps[theme="light"] .fabric_wrapper #label_stickers {
  color: #808080;
}
#preview_steps[theme="dark"] #preview_photoTemplate img {
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.35);
}
#preview_steps[theme="dark"] .fabric_wrapper {
  background-color: #444;
}
#preview_steps[theme="dark"] .fabric_wrapper #label_stickers {
  color: #808080;
}
#preview_steps #preview_selectPhotoTemplate > .btns_wrapper {
  width: 100%;
  text-align: center;
  margin-top: 4em;
}
#preview_steps #preview_selectPhotoTemplate > .btns_wrapper button {
  padding: 1.25em;
  border-radius: 10em;
  font-size: 2em;
  margin: 0 0.25em;
  width: 10em;
}
#preview_steps #preview_selectPhotoTemplate #photoTemplates_wrapper {
  position: relative;
}
#preview_steps #preview_selectPhotoTemplate #preview_photoTemplate {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  padding-bottom: 0.5em;
}
#preview_steps #preview_selectPhotoTemplate #preview_photoTemplate img {
  margin: 0 16px;
  background-image: url("/images/service/kiosk/photoTemplate_photo_thumbnail.jpg");
  background-size: cover;
  background-position: center;
}
#preview_steps #preview_selectPhotoTemplate #preview_photoTemplate img[data-status="error"] {
  background: #f3f3f3;
}
#preview_steps .fabric_wrapper {
  padding: 32px 48px;
  margin-top: 48px;
  overflow-x: hidden;
  display: flex;
  align-items: center;
}
#preview_steps .fabric_wrapper #preview_sticker {
  display: table;
  white-space: nowrap;
  margin: auto;
}
#preview_steps .fabric_wrapper #preview_sticker img {
  display: inline-block;
  height: 56px;
  width: auto;
  padding: 0 32px;
}
#preview_steps[sticker="false"] #preview_sticker,
#preview_steps[sticker="false"] #label_stickers {
  display: none;
}
#preview_steps[sticker="false"][drawing="false"] .fabric_wrapper {
  display: none;
}
#preview_steps[drawing="true"][sticker="false"] .fabric_wrapper {
  padding: 64px !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}
#preview_steps[drawing="true"][sticker="false"][theme="light"] .fabric_wrapper {
  background-image: url("/images/service/kiosk/brush_palette_light.svg");
}
#preview_steps[drawing="true"][sticker="false"][theme="dark"] .fabric_wrapper {
  background-image: url("/images/service/kiosk/brush_palette_dark.svg");
}
#preview_steps[drawing="true"][sticker="true"] .fabric_wrapper {
  padding-left: 160px;
  background-position: 48px center;
  background-repeat: no-repeat;
  background-size: 64px;
}
#preview_steps[drawing="true"][sticker="true"] .fabric_wrapper #label_stickers {
  padding-left: 64px;
  border-left-style: solid;
  border-left-width: 1px;
}
#preview_steps[drawing="true"][sticker="true"][theme="light"] .fabric_wrapper {
  background-image: url("/images/service/kiosk/brush_light.svg");
}
#preview_steps[drawing="true"][sticker="true"][theme="light"] #label_stickers {
  border-left-color: #d4d4d4;
}
#preview_steps[drawing="true"][sticker="true"][theme="dark"] .fabric_wrapper {
  background-image: url("/images/service/kiosk/brush_dark.svg");
}
#preview_steps[drawing="true"][sticker="true"][theme="dark"] #label_stickers {
  border-left-color: #555;
}
#preview_steps #label_stickers {
  margin-right: 16px;
  font-size: 1.25em;
  transform: scale(0.85);
}
@media only screen and (max-width: 639px), only screen and (min-width: 640px) and (max-width: 959px) {
  #preview_steps #label_stickers {
    transform: none;
  }
}
#preview_steps[photoTemplate="2"] img:first-of-type {
  z-index: 1;
}
#preview_steps #preview_photoTemplate {
  justify-content: flex-start;
}
#preview_steps #preview_photoTemplate > img:first-of-type {
  order: 1 !important;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(2) {
  order: 2;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(3) {
  order: 3;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(4) {
  order: 4;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(5) {
  order: 5;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(6) {
  order: 6;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(7) {
  order: 7;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(8) {
  order: 8;
}
#preview_steps #preview_photoTemplate > img:nth-of-type(9) {
  order: 9;
}
#preview_steps #preview_photoTemplate > img:last-of-type {
  order: 0;
  margin-left: -30% !important;
}
#preview_steps[photoTemplate="1"] #preview_photoTemplate,
#preview_steps[photoTemplate="2"] #preview_photoTemplate {
  justify-content: space-around;
}
#preview_steps[photoTemplate="1"] #preview_photoTemplate > img:last-of-type,
#preview_steps[photoTemplate="2"] #preview_photoTemplate > img:last-of-type {
  margin-left: 0 !important;
}
#preview_steps[printmode="베이직"] #preview_photoTemplate,
#preview_steps[printmode="한장에네컷A"] #preview_photoTemplate,
#preview_steps[printmode="한장에네컷B"] #preview_photoTemplate,
#preview_steps[printmode="미니"] #preview_photoTemplate,
#preview_steps[printmode="세컷끼리"] #preview_photoTemplate {
  margin-top: 32px;
}
#preview_steps[printmode="베이직"] #preview_photoTemplate img,
#preview_steps[printmode="한장에네컷A"] #preview_photoTemplate img,
#preview_steps[printmode="한장에네컷B"] #preview_photoTemplate img,
#preview_steps[printmode="미니"] #preview_photoTemplate img,
#preview_steps[printmode="세컷끼리"] #preview_photoTemplate img {
  width: 540px;
  height: 810px;
}
#preview_steps[printmode="베이직"][photoTemplate="2"] #preview_photoTemplate,
#preview_steps[printmode="한장에네컷A"][photoTemplate="2"] #preview_photoTemplate,
#preview_steps[printmode="한장에네컷B"][photoTemplate="2"] #preview_photoTemplate,
#preview_steps[printmode="미니"][photoTemplate="2"] #preview_photoTemplate,
#preview_steps[printmode="세컷끼리"][photoTemplate="2"] #preview_photoTemplate {
  justify-content: center;
}
#preview_steps[printmode="베이직"][photoTemplate="2"] #preview_photoTemplate img:first-of-type,
#preview_steps[printmode="한장에네컷A"][photoTemplate="2"] #preview_photoTemplate img:first-of-type,
#preview_steps[printmode="한장에네컷B"][photoTemplate="2"] #preview_photoTemplate img:first-of-type,
#preview_steps[printmode="미니"][photoTemplate="2"] #preview_photoTemplate img:first-of-type,
#preview_steps[printmode="세컷끼리"][photoTemplate="2"] #preview_photoTemplate img:first-of-type {
  margin-left: -14em !important;
}
#preview_steps[printmode="베이직"][photoTemplate="2"] #preview_photoTemplate img:last-of-type,
#preview_steps[printmode="한장에네컷A"][photoTemplate="2"] #preview_photoTemplate img:last-of-type,
#preview_steps[printmode="한장에네컷B"][photoTemplate="2"] #preview_photoTemplate img:last-of-type,
#preview_steps[printmode="미니"][photoTemplate="2"] #preview_photoTemplate img:last-of-type,
#preview_steps[printmode="세컷끼리"][photoTemplate="2"] #preview_photoTemplate img:last-of-type {
  opacity: 0.75;
  transform: scale(0.85);
  margin-left: -0.5em !important;
}
#preview_steps[printmode="한컷끼리"] .fabric_wrapper,
#preview_steps[printmode="두컷나눔"] .fabric_wrapper {
  margin-top: 64px;
}
#preview_steps[printmode="한컷끼리"] .btns_wrapper,
#preview_steps[printmode="두컷나눔"] .btns_wrapper {
  margin-top: 120px !important;
}
#preview_steps[printmode="한컷끼리"] #preview_photoTemplate,
#preview_steps[printmode="두컷나눔"] #preview_photoTemplate {
  justify-content: center;
  margin-top: 80px;
}
#preview_steps[printmode="한컷끼리"] #preview_photoTemplate > img:last-of-type,
#preview_steps[printmode="두컷나눔"] #preview_photoTemplate > img:last-of-type {
  margin-left: 0 !important;
}
#preview_steps[printmode="한컷끼리"] #preview_photoTemplate img,
#preview_steps[printmode="두컷나눔"] #preview_photoTemplate img {
  width: 720px;
  height: 480px;
}
#preview_steps[printmode="한컷끼리"][photoTemplate="1"] #preview_photoTemplate img:last-of-type,
#preview_steps[printmode="두컷나눔"][photoTemplate="1"] #preview_photoTemplate img:last-of-type {
  margin-left: 0 !important;
}
#preview_steps[printmode="한컷끼리"][photoTemplate="2"],
#preview_steps[printmode="두컷나눔"][photoTemplate="2"] {
  margin-top: 1em;
}
#preview_steps[printmode="한컷끼리"][photoTemplate="2"] #preview_photoTemplate,
#preview_steps[printmode="두컷나눔"][photoTemplate="2"] #preview_photoTemplate {
  justify-content: space-around;
}
#preview_steps[printmode="한컷끼리"][photoTemplate="2"] #preview_photoTemplate img:first-of-type,
#preview_steps[printmode="두컷나눔"][photoTemplate="2"] #preview_photoTemplate img:first-of-type {
  margin-left: -700px !important;
}
#preview_steps[printmode="한컷끼리"][photoTemplate="2"] #preview_photoTemplate img:last-of-type,
#preview_steps[printmode="두컷나눔"][photoTemplate="2"] #preview_photoTemplate img:last-of-type {
  opacity: 0.65;
  transform: scale(0.85);
  margin-left: -48px !important;
}
#preview_steps[theme="light"] #eventData_form {
  background-color: #fff;
}
#preview_steps[theme="light"] #preview_collectEventData_item > * {
  background-image: url("/images/service/kiosk/eventData_light.svg");
}
#preview_steps[theme="light"] #agree {
  border-color: #ececec;
}
#preview_steps[theme="light"] #preview_assignments {
  background-color: #f3f3f3;
}
#preview_steps[theme="dark"] #eventData_form {
  background-color: #111;
}
#preview_steps[theme="dark"] #preview_collectEventData_item > * {
  background-image: url("/images/service/kiosk/eventData_dark.svg");
}
#preview_steps[theme="dark"] #agree {
  border-color: #555;
}
#preview_steps[theme="dark"] #preview_assignments {
  background-color: #555;
}
#preview_steps #eventData .img_wrapper {
  width: 30%;
}
#preview_steps #eventData .img_wrapper img {
  width: 100%;
}
#preview_steps[printmode="미니"] #eventData .img_wrapper,
#preview_steps[printmode="세컷끼리"] #eventData .img_wrapper {
  width: 5em;
  display: flex;
  flex-direction: column;
  margin: auto;
}
#preview_steps[printmode="미니"] #eventData .img_wrapper img,
#preview_steps[printmode="세컷끼리"] #eventData .img_wrapper img {
  width: 100%;
  margin: 0.25em 0.1em;
}
#preview_steps[printmode="두컷나눔"] #eventData .img_wrapper {
  width: 7em;
  display: flex;
  flex-direction: column;
  margin: auto;
}
#preview_steps[printmode="두컷나눔"] #eventData .img_wrapper img {
  width: 100%;
  margin: 0.25em 0.1em;
}
#preview_steps[printmode="한장에네컷A"] #eventData .img_wrapper,
#preview_steps[printmode="한장에네컷B"] #eventData .img_wrapper {
  width: 11em;
  margin: auto;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.25em;
}
#preview_steps #preview_collectEventData > .btns_wrapper {
  width: 100%;
  text-align: center;
  margin-top: 64px;
}
#preview_steps #preview_collectEventData > .btns_wrapper button {
  padding: 1.25em;
  border-radius: 10em;
  font-size: 2em;
  margin: 0 0.25em;
  width: 10em;
}
#preview_steps #preview_collectEventData #preview_collectEventData_title {
  margin-top: 100px;
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 48px;
}
#preview_steps #preview_collectEventData #preview_collectEventData_title img {
  width: 100%;
  display: block;
  max-width: 600px;
  margin: auto;
}
#preview_steps #preview_collectEventData #eventData_form {
  padding: 48px;
  width: 85%;
  margin: auto;
  border-radius: 0.25em;
  box-sizing: border-box;
  border-top-width: 0.15em;
  border-top-style: solid;
  max-height: 750px;
}
#preview_steps #preview_collectEventData #eventData {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: scale(0.95);
  transform-origin: center;
}
#preview_steps #preview_collectEventData #eventData #preview_collectEventData_item {
  font-size: 1em;
  width: 70%;
  padding-left: 64px;
}
#preview_steps #preview_collectEventData #eventData #preview_collectEventData_item > * {
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 65%;
  width: 100%;
  padding: 0.75em;
}
#preview_steps #preview_collectEventData #eventData #preview_collectEventData_item > *:last-child {
  margin-bottom: 0;
}
#preview_steps #preview_collectEventData #agree {
  margin-top: 48px;
  margin-bottom: 32px;
  display: flex;
  padding-top: 1.5em;
  font-size: 1.5em;
  align-items: center;
  border-top-width: 1px;
  border-top-style: dashed;
}
#preview_steps #preview_collectEventData #agree label {
  font-size: 0.35em;
  display: flex;
  align-items: center;
  padding: 0;
}
#preview_steps #preview_collectEventData #agree label input[type="checkbox"] {
  transform: scale(2.5);
  margin-top: 0.5em;
  margin-right: 1.5em;
}
#preview_steps #preview_collectEventData #agree,
#preview_steps #preview_collectEventData #preview_assignments {
  margin-left: 0.5em;
}
#preview_steps #preview_collectEventData #preview_assignments {
  padding: 2em;
  border-radius: 1em;
  height: 200px;
  overflow: hidden;
  transform: scale(0.65);
  transform-origin: left top;
  width: 145%;
  display: flex;
  align-items: center;
  word-break: break-all;
}
#preview_steps #preview_printingBanner {
  box-sizing: border-box;
  margin: 32px auto 2.5em;
  position: relative;
  width: 1024px;
  height: 576px;
}
#preview_steps #preview_printingBanner > * {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#preview_steps #preview_printingBanner video {
  width: 100%;
  height: 100%;
}
#preview_steps[printingBanner="full"] #preview_printingBanner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  z-index: 1;
}
#preview_steps[printingBanner="full"] #preview_printingBanner ~ .loader {
  bottom: 43em;
}
#preview_steps .loader {
  text-align: center;
  margin-top: 80px;
  z-index: 2;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 30%;
}
#preview_steps .loader span {
  display: inline-block;
  width: 24px;
  height: 24px;
  opacity: 1;
  border-radius: 100%;
  margin: 0 0.015em;
  animation: loader 0.75s infinite ease-in-out;
}
#preview_steps .loader span:nth-child(2) {
  animation-delay: 0.2s;
}
#preview_steps .loader span:nth-child(3) {
  animation-delay: 0.4s;
}
#preview_steps .loader span:nth-child(4) {
  animation-delay: 0.6s;
}
#preview_steps .loader span:nth-child(5) {
  animation-delay: 0.8s;
}
#preview_steps #nowPrinting_bottom {
  text-align: center;
  position: absolute;
  bottom: 7em;
  width: 100%;
}
#preview_steps #nowPrinting_bottom #preview_nowPrinting_bottomImg {
  width: 4em;
  margin: auto;
}
#preview_steps #nowPrinting_bottom #preview_nowPrinting_bottomText {
  font-size: 2em;
}
@keyframes loader {
  0% {
    opacity: 0.1;
    transform: translateY(0px);
    box-shadow: 0px 0px 3px rgba(200, 200, 200, 0.3);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px);
    box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);
  }
  100% {
    opacity: 0.1;
    transform: translateY(0px);
    box-shadow: 0px 0px 3px rgba(200, 200, 200, 0.3);
  }
}
img[data-status="error"] {
  background-color: #f3f3f3;
}
#preview_steps {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  width: 1080px;
  height: 1920px;
  float: left;
  font-size: 16px;
  zoom: 0.35;
  overflow: visible;
}
@media only screen and (min-width: 640px) and (max-width: 959px) {
  #preview_steps {
    zoom: 0.5;
  }
}
@media only screen and (max-width: 639px) {
  #preview_steps {
    zoom: 0.25;
  }
}
@media only screen and (min-width: 640px) and (max-width: 959px), only screen and (max-width: 639px) {
  #preview_steps {
    display: none;
  }
  #preview_steps.visible {
    display: block;
    margin: auto;
    margin-top: 1em;
    float: none;
  }
}
#preview_steps .navigation {
  text-align: center;
  top: 460px;
  position: absolute;
  left: 0;
  width: 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 32px;
  background-size: 64px;
}
#preview_steps .navigation span {
  font-size: 32px;
  border-radius: 40px;
  padding: 16px 32px;
  display: inline-block;
}
#preview_steps button[text_color="black"] {
  color: black;
}
#preview_steps button[text_color="white"] {
  color: white;
}
#preview_steps[collectEventData="false"] #preview_collectEventData {
  display: none;
}
#preview_steps[nowPrinting_bottom="img"] #preview_nowPrinting_bottomText {
  display: none;
}
#preview_steps[nowPrinting_bottom="text"] #preview_nowPrinting_bottomImg {
  display: none;
}
#preview_steps[navigation="false"] .navigation {
  display: none;
}
#preview_steps *:not(.page_name) {
  font-family: 'nanumsquare' !important;
  letter-spacing: -0.035em !important;
  transform: none;
}
#preview_steps[navigation="light"] .navigation span {
  background-color: #f0f0f0;
}
#preview_steps[navigation="light"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_light_3_1.png");
}
#preview_steps[navigation="light"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_light_3_2.png");
}
#preview_steps[navigation="light"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_light_3_3.png");
}
#preview_steps[navigation="light"][collectEventData="true"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_light_4_1.png");
}
#preview_steps[navigation="light"][collectEventData="true"] #preview_collectEventData .navigation {
  background-image: url("/images/service/kiosk/navigation_light_4_2.png");
}
#preview_steps[navigation="light"][collectEventData="true"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_light_4_3.png");
}
#preview_steps[navigation="light"][collectEventData="true"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_light_4_4.png");
}
#preview_steps[navigation="dark"] .navigation span {
  color: #fff;
  background-color: #4d4d4d;
}
#preview_steps[navigation="dark"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_dark_3_1.png");
}
#preview_steps[navigation="dark"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_dark_3_2.png");
}
#preview_steps[navigation="dark"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_dark_3_3.png");
}
#preview_steps[navigation="dark"][collectEventData="true"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_dark_4_1.png");
}
#preview_steps[navigation="dark"][collectEventData="true"] #preview_collectEventData .navigation {
  background-image: url("/images/service/kiosk/navigation_dark_4_2.png");
}
#preview_steps[navigation="dark"][collectEventData="true"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_dark_4_3.png");
}
#preview_steps[navigation="dark"][collectEventData="true"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_dark_4_4.png");
}
#preview_steps[navigation="white"] .navigation span {
  color: black;
  background-color: rgba(255, 255, 255, 0.9);
}
#preview_steps[navigation="white"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_white_3_1.png");
}
#preview_steps[navigation="white"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_white_3_2.png");
}
#preview_steps[navigation="white"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_white_3_3.png");
}
#preview_steps[navigation="white"][collectEventData="true"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_white_4_1.png");
}
#preview_steps[navigation="white"][collectEventData="true"] #preview_collectEventData .navigation {
  background-image: url("/images/service/kiosk/navigation_white_4_2.png");
}
#preview_steps[navigation="white"][collectEventData="true"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_white_4_3.png");
}
#preview_steps[navigation="white"][collectEventData="true"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_white_4_4.png");
}
#preview_steps[navigation="transparent"] .navigation span {
  color: #fff;
  background-color: rgba(235, 235, 235, 0.35);
}
#preview_steps[navigation="transparent"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_transparent_3_1.png");
}
#preview_steps[navigation="transparent"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_transparent_3_2.png");
}
#preview_steps[navigation="transparent"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_transparent_3_3.png");
}
#preview_steps[navigation="transparent"][collectEventData="true"] #preview_photoWall .navigation {
  background-image: url("/images/service/kiosk/navigation_transparent_4_1.png");
}
#preview_steps[navigation="transparent"][collectEventData="true"] #preview_collectEventData .navigation {
  background-image: url("/images/service/kiosk/navigation_transparent_4_2.png");
}
#preview_steps[navigation="transparent"][collectEventData="true"] #preview_selectPhotoTemplate .navigation {
  background-image: url("/images/service/kiosk/navigation_transparent_4_3.png");
}
#preview_steps[navigation="transparent"][collectEventData="true"] #preview_nowPrinting .navigation {
  background-image: url("/images/service/kiosk/navigation_transparent_4_4.png");
}
#preview_steps[navigation="text_black"] .navigation span {
  color: black;
}
#preview_steps[navigation="text_white"] .navigation span {
  color: white;
}
#preview_steps > li {
  transform: none;
  left: 0;
  opacity: 0;
  position: absolute;
  padding-top: 600px;
  top: 0;
  width: 1080px;
  height: 1320px;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}
#preview_steps > li > .page_name {
  position: absolute;
  left: 0;
  top: 1920px;
  text-align: center;
  width: 100%;
  font-family: 'Noto Sans KR';
  letter-spacing: -0.035em;
  transform: scaleX(0.95);
  transform-origin: left;
  background-color: #fff;
  width: 105%;
  font-size: 2.25em;
  height: 150px !important;
  line-height: 150px !important;
}
#preview_steps > .btns {
  position: absolute;
  top: 1920px;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 150px !important;
}
#preview_steps > .btns button {
  background-color: transparent !important;
  width: 150px !important;
  height: 150px !important;
  border: 0;
}
#preview_steps button {
  line-height: 100%;
}
#preview_steps[theme="light"] > li {
  background-image: url("/images/service/kiosk/theme_light.png");
}
#preview_steps[theme="light"] button.default {
  background-color: #cdcdcd;
  color: #fff;
}
#preview_steps[theme="dark"] > li {
  background-image: url("/images/service/kiosk/theme_dark.png");
}
#preview_steps[theme="dark"] li > *:not(.navigation):not(.page_name) {
  color: #fff;
}
#preview_steps[theme="dark"] button.default {
  background-color: #5a5a5a;
  color: #fff;
}
#preview_steps .bgKeyColor {
  color: #fff;
}
#preview_steps #preview_selectPhotoTemplate > .btns_wrapper,
#preview_steps #preview_collectEventData > .btns_wrapper {
  transform: scale(0.8);
}
#preview_steps #preview_commercialBanner {
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
#preview_steps #preview_commercialBanner video,
#preview_steps #preview_commercialBanner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#preview_steps #preview_header,
#preview_steps #preview_printingBanner,
#preview_steps #preview_commercialBanner {
  background-color: #f3f3f3;
}
#preview_steps #preview_header img,
#preview_steps #preview_commercialBanner img {
  transition: 0.5s;
}
#preview_steps #preview_header img.active,
#preview_steps #preview_commercialBanner img.active {
  opacity: 1 !important;
}
#preview_steps #preview_header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 1080px;
  height: 600px;
}
#preview_steps #preview_header img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#mySnaphy_templates_wrapper #page_loader {
  display: flex;
}
#mySnaphy_templates_wrapper .printingBanner_type ~ div .input_label_wrapper {
  display: flex;
}
article[id^="mySnaphy_"]:not(#mySnaphy_login) h2 {
  display: none;
}