@charset "UTF-8";
/* 리셋 */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: theme("borderColor.DEFAULT", "currentColor"); /* 2 */
}

::before,
::after {
  --tw-content: "";
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: theme("fontFamily.sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: theme("fontFamily.mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
  font-size: 1em; /* 2 */
}

/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: theme("colors.gray.400", #9ca3af); /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: theme("colors.gray.400", #9ca3af); /* 2 */
}

/*
Set the default cursor for buttons.
*/
button,
[role=button] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}

/*
Ensure the default browser behavior of the `hidden` attribute.
*/
[hidden] {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: auto;
  font-smooth: never;
  font-smooth: always;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

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

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table, th, td {
  border-collapse: collapse;
  border-spacing: 0;
}

hr, caption {
  display: none;
}

a:link, a:hover, a:active, a:focus, a:visited {
  text-decoration: none;
}

/* Common */
:root {
  --onmakers-primary: #D0121B;
}

html, body {
  font-size: 16px;
  scrollbar-width: thin;
}
@media only screen and (min-width: 1081px) and (max-width: 1279px) {
  html, body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  html, body {
    font-size: 15px;
  }
}
@media only screen and (max-width: 767px) {
  html, body {
    font-size: 14px;
  }
}

.a11y-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .mobile-none {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-none {
    display: none !important;
  }
}

.mobile-only {
  display: none;
}
@media only screen and (max-width: 767px) {
  .mobile-only {
    display: inherit;
  }
}

.common-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  letter-spacing: -0.01875rem;
}
.common-wrap a:hover, .common-wrap a:focus, .common-wrap button:hover, .common-wrap button:focus {
  color: inherit;
}

/* 헤더 */
.common-header {
  position: relative;
  z-index: 2;
  position: sticky;
  top: 0;
}
.common-header .header-main {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 5.9375rem;
  background-color: #fff;
  transition: all 0.2s ease;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-main {
    height: 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-main {
    height: 5rem;
  }
}
.common-header .header-inner {
  display: flex;
  align-items: center;
  gap: 4.375rem;
  width: 103.5rem;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1.75rem;
  margin: 0 auto;
}
.common-header .header-logo {
  display: inline-flex;
  width: 12.5rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-logo {
    width: 11.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-logo {
    width: 8.75rem;
  }
}
.common-header .header-logo a {
  display: inline-flex;
}
.common-header .header-logo img {
  max-width: 100%;
}
.common-header .header-logo .logo-image {
  width: 100%;
  aspect-ratio: 21/9;
  text-indent: -9999px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url("../../img/common/logo.svg");
  background-size: 100% auto;
  background-position: center;
}
.common-header .header-menu {
  position: relative;
  z-index: 1;
  height: inherit;
  margin-left: auto;
}
.common-header .header-menu [class^=menu-] {
  height: inherit;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-menu {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-menu {
    display: none;
  }
}
.common-header .header-menu .menu-list {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.common-header .header-menu .menu-item {
  position: relative;
}
.common-header .header-menu .menu-item:hover .menu-depths, .common-header .header-menu .menu-item:focus-within .menu-depths {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -20%);
}
.common-header .header-menu .menu-item:hover .menu-name .name-txt:after, .common-header .header-menu .menu-item:focus-within .menu-name .name-txt:after {
  opacity: 1;
  transform: rotateZ(0deg);
}
.common-header .header-menu .menu-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
  box-sizing: border-box;
  padding: 0 1.875rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.01875rem;
  line-height: 1.4;
  word-break: keep-all;
}
.common-header .header-menu .menu-name .name-txt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-header .header-menu .menu-name .name-txt:after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.75rem;
  transform: rotateZ(-90deg);
  display: flex;
  width: 0.75rem;
  height: 0.75rem;
  background-repeat: no-repeat;
  background-image: url("../../img/common/mark-idt.svg");
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: all 0.3s ease;
}
.common-header .header-menu .menu-name.is-active {
  color: var(--onmakers-primary);
}
.common-header .header-menu .menu-depths {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 0%);
  transition: all 0.3s ease;
}
.common-header .header-menu .menu-depths .depths-frame {
  display: flex;
  justify-content: center;
  min-width: 10rem;
  padding: 1.25rem 1.75rem;
  border-radius: 0 0 1.25rem 1.25rem;
  background-color: var(--onmakers-primary, #D0121B);
  color: rgba(255, 255, 255, 0.95);
}
.common-header .header-menu .menu-depths .depths-list {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}
.common-header .header-menu .menu-depths .depths-link {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1;
}
.common-header .header-menu .menu-depths .depths-link .link-txt {
  white-space: nowrap;
}
.common-header .header-menu .menu-depths .depths-link:hover {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  color: #fff;
}
.common-header .header-aside {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-aside {
    margin-left: auto;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-aside {
    margin-left: auto;
  }
}
.common-header .header-aside .aside-buttons {
  display: flex;
  gap: 0.625rem;
}
.common-header .header-aside .aside-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.1875Rem;
}
.common-header .header-aside .aside-button:hover, .common-header .header-aside .aside-button:focus {
  background-color: var(--onmakers-primary);
  color: #fff;
}
.common-header .header-aside .aside-button .button-ico {
  display: inline-flex;
  vertical-align: middle;
}
.common-header .header-aside .aside-button .button-ico img {
  width: 1.5625rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-aside .aside-button.sitemap-toggle {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-aside .aside-button.sitemap-toggle {
    display: none;
  }
}
.common-header .header-aside .aside-button.sitemap-toggle .button-ico {
  width: 1.75rem;
  height: 1.75rem;
}
.common-header .header-aside .aside-button.mobile-toggle {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-aside .aside-button.mobile-toggle {
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-aside .aside-button.mobile-toggle {
    display: flex;
  }
}
.common-header .header-aside .aside-links {
  display: flex;
  gap: 0.625rem;
  display: none;
}
.common-header .header-aside .aside-link {
  display: flex;
  align-items: center;
  height: 2rem;
  box-sizing: border-box;
  padding: 0 1Rem;
  background-color: #162D66;
  border-radius: 1.5625rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
}
.common-header .header-user {
  position: relative;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-user {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-user {
    display: none;
  }
}
.common-header .header-user:has(.user-button.is-active) .user-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translate(-0.3125rem, 0.3125rem);
}
.common-header .header-user .user-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 6.875rem;
  height: 2rem;
  background-color: var(--primary, #162D66);
  border-radius: 1.5625rem;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.common-header .header-user .user-button .button-ico,
.common-header .header-user .user-button .button-txt {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.common-header .header-user .user-button .button-ico {
  display: flex;
}
.common-header .header-user .user-button .button-ico .omks-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.common-header .header-user .user-button .button-txt {
  font-size: 0.9375rem;
  font-weight: 500;
  text-underline-offset: 3px;
}
.common-header .header-user .user-button.is-active {
  background-color: rgb(0, 103.5, 86.6511627907);
}
.common-header .header-user .user-button[type=button] .button-txt:after {
  content: "";
  display: inline-flex;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 1.25rem auto;
  background-position: center;
  background-image: url("../../img/common/user-toggle.svg");
}
.common-header .header-user .user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  transform: translate(-0.3125rem, 0.3125rem);
  padding: 0 1.25rem;
  background-color: #fff;
  border: 1px solid #9DA9D1;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.04);
  border-radius: 0.3125rem;
  transition: all 0.2s ease;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transform: translate(-0.3125rem, 0rem);
}
.common-header .header-user .user-menu .menu-list {
  display: flex;
  flex-direction: column;
}
.common-header .header-user .user-menu .menu-list li {
  display: flex;
  width: 100%;
  line-height: 1;
}
.common-header .header-user .user-menu .menu-list li ~ li {
  border-top: 1px solid #e7e7e7;
}
.common-header .header-user .user-menu .menu-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  text-underline-offset: 0.1875rem;
  white-space: nowrap;
}
.common-header .header-user .user-menu .menu-link:hover, .common-header .header-user .user-menu .menu-link:focus {
  text-decoration: underline;
}
.common-header .header-user .user-menu .menu-timeout {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 0.3125rem;
  padding: 0.625rem 0;
  text-align: left;
  width: 11.25Rem;
}
.common-header .header-user .user-menu .menu-timeout .timeout-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #555;
}
.common-header .header-user .user-menu .menu-timeout .timeout-count {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #EB2A29;
  line-height: 1;
}
.common-header .header-user .user-menu .menu-timeout .timeout-count .count-ico {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25Rem;
  color: #555;
}
.common-header .header-user .user-menu .menu-timeout .timeout-count .count-ico svg {
  width: inherit;
  height: inherit;
}
.common-header .header-user .user-menu .menu-timeout .timeout-count .count-ico svg path {
  fill: currentColor !important;
}
.common-header .header-user .user-menu .menu-timeout .timeout-count .count-txt {
  display: inline-flex;
}
.common-header .header-user .user-menu .menu-timeout .timeout-prolong {
  display: inline-flex;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  transform: translateY(-0.125rem);
}
.common-header .header-user .user-menu .menu-timeout .timeout-prolong:hover {
  color: #162D66;
}
.common-header .header-user .user-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  background-color: var(--primary, #00816C);
  border-radius: 1.5625rem;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.common-header .header-user .user-links li ~ li {
  position: relative;
}
.common-header .header-user .user-links li ~ li:before {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  left: -0.75rem;
  content: "";
  width: 1px;
  height: 0.875rem;
  background-color: #fff;
}
.common-header .header-user .user-link:hover, .common-header .header-user .user-link:focus {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.common-header .header-user .user-link.type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
}
.common-header .header-user .user-link.type-icon svg, .common-header .header-user .user-link.type-icon img {
  width: 1.5rem;
}
.common-header .header-mobile {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-mobile.is-active {
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-mobile.is-active {
    display: flex;
  }
}
.common-header .header-mobile .mobile-wrap {
  display: flex;
  flex-direction: column;
  width: 21.5625rem;
  height: 100%;
  box-shadow: 0 -0.1875rem 0.625rem rgba(0, 0, 0, 0.16);
  animation: mobileMenuRending 0.3s ease 0s 1 alternate both;
}
@keyframes mobileMenuRending {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.common-header .header-mobile .mobile-head {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 5rem;
  box-sizing: border-box;
  padding: 0.625rem 1.75rem;
  background-color: #222;
  color: #fff;
}
.common-header .header-mobile .mobile-head:has(.user-login) {
  padding-top: 0;
  height: 5rem;
}
.common-header .header-mobile .mobile-head:has(.user-login) .mobile-user {
  display: none;
}
.common-header .header-mobile .mobile-head:has(.user-login) .mobile-user .info-name:not(.user-login) {
  display: none;
}
.common-header .header-mobile .mobile-head:has(.user-login) .mobile-user .user-logout {
  display: none;
}
.common-header .header-mobile .mobile-head:has(.user-login) .mobile-user .user-menu {
  display: none;
}
.common-header .header-mobile .mobile-body {
  flex: 1 1 calc(100% - 9.375rem);
  height: calc(100% - 9.375rem);
  box-sizing: border-box;
  padding: 1.75rem 0;
  background-color: #fff;
  overflow-y: auto;
}
.common-header .header-mobile .mobile-user {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.625rem;
}
.common-header .header-mobile .mobile-user a {
  color: #fff;
}
.common-header .header-mobile .mobile-user a:hover, .common-header .header-mobile .mobile-user a:active {
  color: #fff;
}
.common-header .header-mobile .mobile-user .user-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.common-header .header-mobile .mobile-user .user-info .info-name {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.common-header .header-mobile .mobile-user .user-info .info-name .name-ico,
.common-header .header-mobile .mobile-user .user-info .info-name .name-txt {
  display: inline-flex;
}
.common-header .header-mobile .mobile-user .user-info .info-name .name-ico img {
  width: 1.5rem;
}
.common-header .header-mobile .mobile-user .user-info .info-name .name-txt {
  display: inline-flex;
  align-items: center;
  gap: 0.3125Rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.common-header .header-mobile .mobile-user .user-info .info-name .name-txt b {
  font-size: 1.625rem;
  font-weight: 500;
}
.common-header .header-mobile .mobile-user .user-info .info-name a.name-txt {
  position: relative;
  font-size: 0.9375rem;
}
.common-header .header-mobile .mobile-user .user-info .info-name a.name-txt:after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../img/common/menu-link-arrow--white.svg");
  background-size: 1.375rem auto;
}
.common-header .header-mobile .mobile-user .user-info .info-name.user-login {
  height: 2.5rem;
  padding: 0 0.875rem;
  border-radius: 1.5625rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.13);
}
.common-header .header-mobile .mobile-user .user-info .info-name.user-login a.name-txt {
  padding-right: 1.875rem;
}
.common-header .header-mobile .mobile-user .user-info .info-name.user-login a.name-txt:after {
  transform: translate(0, -50%) rotateZ(-90deg);
}
.common-header .header-mobile .mobile-user .user-info .user-logout {
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.common-header .header-mobile .mobile-user .user-menu {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 0;
}
.common-header .header-mobile .mobile-user .user-menu li {
  display: flex;
}
.common-header .header-mobile .mobile-user .user-menu .menu-link {
  display: inline-flex;
  padding: 0.3125rem 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.01875rem;
}
.common-header .header-mobile .mobile-user .user-menu .menu-link .link-txt {
  position: relative;
  display: inline-flex;
  padding-left: 0.625rem;
}
.common-header .header-mobile .mobile-user .user-menu .menu-link .link-txt:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%) skewY(-0.01deg);
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: #fff;
}
.common-header .header-mobile .mobile-close {
  position: absolute;
  top: 0.625rem;
  right: 1.875rem;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  transform: translateX(0.875Rem);
  transform: translate(0.875Rem, -50%);
}
.common-header .header-mobile .mobile-close img {
  width: 1.375rem;
}
.common-header .header-mobile .mobile-logo {
  width: 7.5rem;
}
.common-header .header-mobile .mobile-menu {
  padding: 0 1.75rem;
}
.common-header .header-mobile .mobile-menu .menu-item {
  border-bottom: 1px solid #e7e7e7;
}
.common-header .header-mobile .mobile-menu .menu-item:has(.menu-name.is-active) {
  padding-bottom: 1.25rem;
}
.common-header .header-mobile .mobile-menu .menu-item:has(.menu-name.is-active) .menu-depths {
  display: block;
}
.common-header .header-mobile .mobile-menu .menu-name {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 4.375rem;
  box-sizing: border-box;
  padding: 0.625rem 0;
  color: #444;
  font-weight: 400;
}
.common-header .header-mobile .mobile-menu .menu-name:after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../img/common/mobile-menu-arrow.svg");
  background-size: 1.75Rem auto;
  transition: all 0.2s ease;
}
.common-header .header-mobile .mobile-menu .menu-name .name-txt {
  font-size: 1.5rem;
}
.common-header .header-mobile .mobile-menu .menu-name.is-active {
  color: var(--onmakers-primary);
  text-shadow: 0 0 1px var(--onmakers-primary);
}
.common-header .header-mobile .mobile-menu .menu-name.is-active:after {
  transform: translateY(-50%) rotateZ(180deg);
}
.common-header .header-mobile .mobile-menu .menu-depths {
  display: none;
  padding: 0.625rem 1.25rem;
  border-top: 1px solid var(--onmakers-primary);
  background: #F8F9FA;
}
.common-header .header-mobile .mobile-menu .menu-depths li {
  display: flex;
  flex-direction: column;
}
.common-header .header-mobile .mobile-menu .menu-depths li ~ li {
  margin-top: 0.625rem;
}
.common-header .header-mobile .mobile-menu .menu-depths:not(:has(li)) {
  display: none !important;
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-link {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 400;
  color: #222;
  word-break: keep-all;
  line-height: 1.5;
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-link .link-ico {
  flex: 0 0 0.375rem;
  display: inline-flex;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--onmakers-primary);
  margin-right: 0.625rem;
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-link.is-active {
  font-weight: 500;
  color: var(--onmakers-primary);
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-under {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-under .under-link {
  display: flex;
  gap: 0.3125rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-under .under-link:before {
  content: "-";
}
.common-header .header-mobile .mobile-menu .menu-depths .depths-under .under-link.is-active {
  font-weight: 500;
  color: #162D66;
}
.common-header .header-sitemap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 3.125rem 0;
  background-color: #222;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
}
.common-header .header-sitemap.is-active {
  visibility: visible;
  opacity: 1;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-header .header-sitemap.is-active {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .common-header .header-sitemap.is-active {
    display: none;
  }
}
.common-header .header-sitemap .sitemap-wrap {
  position: relative;
  width: 104.5rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8.125rem 2.375rem;
  margin: 0 auto;
}
.common-header .header-sitemap .sitemap-head {
  padding-bottom: 1.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.common-header .header-sitemap .sitemap-ttl {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.09375rem;
}
.common-header .header-sitemap .sitemap-close {
  position: absolute;
  top: 0;
  right: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4375Rem;
  height: 3.4375rem;
  opacity: 0.65;
}
.common-header .header-sitemap .sitemap-close:hover, .common-header .header-sitemap .sitemap-close:focus {
  opacity: 1;
}
.common-header .header-sitemap .sitemap-close .button-ico {
  width: 3Rem;
  height: 3rem;
}
.common-header .header-sitemap .sitemap-menu .menu-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6.25rem;
  padding: 2.375rem 0;
  border-bottom: 1px solid #585858;
}
.common-header .header-sitemap .sitemap-menu .menu-name {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.0625rem;
}
.common-header .header-sitemap .sitemap-menu .menu-depths .depths-list {
  display: flex;
  flex-direction: wrap;
  gap: 3.4375rem;
}
.common-header .header-sitemap .sitemap-menu .menu-depths .depths-block {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.025rem;
  color: #E0E0E0;
}
.common-header .header-sitemap .sitemap-menu .menu-depths .depths-block:hover {
  color: var(--onmakers-primary);
  text-decoration: underline;
  text-underline-offset: 0.3125rem;
}

/* 컨테이너 */
.common-container {
  /* 페이지 레이아웃 */
  /* 페이지네이션 */
}
.common-container .page-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  padding: 5rem 0 10rem;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-container .page-wrap {
    padding: 3.125rem 0 5rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-container .page-wrap {
    padding: 1.25rem 0 5rem;
  }
}
.common-container .page-inner {
  width: 103.5rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1.75rem;
  margin: 0 auto;
}
.common-container .page-head {
  position: relative;
  margin-bottom: 3.125rem;
  padding-bottom: 3.125rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-container .page-head {
    padding-bottom: 1.5625rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-container .page-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .common-container .page-head .page-inner {
    margin-bottom: 0rem;
  }
}
.common-container .page-head:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.0625rem;
  transform: skew(-0.01deg);
  content: "";
  background-color: #E0E0E0;
}
.common-container .page-head .page-inner {
  display: flex;
}
@media only screen and (max-width: 767px) {
  .common-container .page-head .page-inner {
    display: block;
  }
}
.common-container .page-head .page-inner .page-title {
  order: 1;
}
.common-container .page-head .page-inner .page-navi {
  order: 2;
}
@media only screen and (max-width: 767px) {
  .common-container .page-head .page-inner .page-navi {
    margin-bottom: 1.875rem;
  }
}
.common-container .page-tab {
  margin-top: 3.125rem;
  transform: translateY(3.125rem);
  overflow: auto;
  -webkit-mask-image: linear-gradient(to left, transparent 0, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-container .page-tab {
    margin: 0.9375Rem 0 0 0;
    transform: translateY(1.5625rem);
  }
}
@media only screen and (max-width: 767px) {
  .common-container .page-tab {
    margin: 0 0 0.9375rem 0;
    transform: translateY(0.9375rem);
    overflow: auto;
  }
}
.common-container .page-tab .page-inner {
  display: flex;
  align-items: center;
  gap: 3.75rem;
}
@media only screen and (max-width: 767px) {
  .common-container .page-tab .page-inner {
    width: 100%;
    gap: 0;
    padding: 0;
    margin: 0;
  }
}
.common-container .page-tab .tab-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  height: 4.6875Rem;
  font-size: 1.4375rem;
  color: #757575;
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: nowrap;
  outline: none;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-container .page-tab .tab-button {
    height: 3.4375rem;
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-container .page-tab .tab-button {
    min-width: auto;
    height: 2.8125rem;
    padding: 0 1.25rem;
    font-size: 1.125rem;
  }
}
.common-container .page-tab .tab-button:after {
  position: absolute;
  bottom: 0.0625rem;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, 0) skewY(-0.01deg);
  content: "";
  width: 100%;
  height: 0.1875rem;
  background-color: var(--onmakers-primary);
  visibility: hidden;
  opacity: 0;
}
.common-container .page-tab .tab-button:hover, .common-container .page-tab .tab-button:focus {
  font-weight: 500;
  color: #222;
}
.common-container .page-tab .tab-button.is-active {
  font-weight: 700;
  color: var(--onmakers-primary);
}
.common-container .page-tab .tab-button.is-active:after {
  visibility: visible;
  opacity: 1;
}
.common-container .page-title {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .common-container .page-title {
    gap: 0.9375rem;
  }
}
.common-container .page-title.is-align-center {
  text-align: center;
}
.common-container .page-title .title-from {
  font-size: 1.5Rem;
  font-weight: 600;
  color: #757575;
  letter-spacing: -0.03125rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-container .page-title .title-from {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-container .page-title .title-from {
    font-size: 1.125rem;
  }
}
.common-container .page-title .title-current {
  font-size: 3.75rem;
  font-weight: 800;
  color: #222;
  letter-spacing: -0.125rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-container .page-title .title-current {
    font-size: 2.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-container .page-title .title-current {
    font-size: 1.75rem;
  }
}
.common-container .page-navi {
  margin-left: auto;
  align-self: flex-end;
}
@media only screen and (max-width: 767px) {
  .common-container .page-navi {
    display: none;
  }
}
.common-container .page-navi .navi-menu {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.01875rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-container .page-navi .navi-menu {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-container .page-navi .navi-menu {
    font-size: 0.9375rem;
  }
}
.common-container .page-navi .navi-menu .menu-home {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.common-container .page-navi .navi-menu .menu-home .home-icon {
  display: flex;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
}
.common-container .page-navi .navi-menu .menu-depths {
  position: relative;
}
.common-container .page-navi .navi-menu .menu-depths:before {
  position: absolute;
  top: 50%;
  left: -0.75rem;
  transform: translate(-100%, -50%);
  content: "";
  width: 1.5rem;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-image: url("../../img/common/navi-arrow.svg");
  background-position: center;
}

/* 하단 */
.common-footer {
  margin-top: auto;
  padding: 0.625rem 0;
  background-color: #161616;
  border-radius: 2.5Rem 2.5Rem 0 0;
  color: #fff;
  overflow: hidden;
}
.common-footer .footer-inner {
  width: 103.5rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1.75rem;
  margin: 0 auto;
}
.common-footer .footer-row {
  display: flex;
  align-items: center;
  padding: 3.125Rem 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-footer .footer-row {
    padding: 2.1875rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .common-footer .footer-row {
    padding: 1.5625rem 0;
  }
}
.common-footer .footer-row ~ .footer-row {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.common-footer .footer-row:has(.row-inner) {
  flex-direction: column;
  align-items: initial;
  gap: 3.125rem;
}
.common-footer .footer-row .row-inner {
  display: flex;
  align-items: center;
}
.common-footer .footer-row .row-inner .footer-link-group {
  margin-left: auto;
}
.common-footer .footer-link-group {
  display: flex;
  align-items: center;
  gap: 6.25rem;
  font-size: 1.25rem;
  font-weight: 500;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-footer .footer-link-group {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .common-footer .footer-link-group {
    display: none;
  }
}
.common-footer .footer-logo {
  display: flex;
  width: 12.5Rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .common-footer .footer-logo {
    width: 11.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .common-footer .footer-logo {
    width: 8.75rem;
  }
}
.common-footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.common-footer .footer-contact li:after {
  display: block;
  clear: both;
  content: "";
}
.common-footer .footer-contact .contact-label {
  float: left;
  min-width: 4.375rem;
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25Rem;
}
.common-footer .footer-contact .contact-label .label-ico {
  display: flex;
  align-items: center;
}
.common-footer .footer-contact .contact-conts {
  display: block;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.common-footer .footer-copyright {
  font-size: 0.875rem;
  font-weight: 300;
  color: #fff;
}
.common-footer .footer-conts {
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
}

.header-menugroup {
  display: none;
}

.top-scroll {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--onmakers-primary);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  transform: translateX(10%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .top-scroll {
    top: inherit;
    right: 0.625Rem;
    bottom: 0.9375rem;
  }
}
.top-scroll:hover {
  border-color: #E3363E;
  background-color: #E3363E;
}
.top-scroll:active {
  border-color: #A20E15;
  background-color: #A20E15;
}

.top-scroll.is-visible {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

/* Unit */
/**********  **********/
/* 여백 클래스 정의 */
/**********  **********/
.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.m-0 {
  margin: 0rem !important;
}

.mt-0 {
  margin-top: 0rem !important;
}

.mr-0 {
  margin-right: 0rem !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.ml-0 {
  margin-left: 0rem !important;
}

.mx-0 {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}

.my-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.p-0 {
  padding: 0rem !important;
}

.pt-0 {
  padding-top: 0rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.px-0 {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

.py-0 {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.m-1 {
  margin: 0.125rem !important;
}

.mt-1 {
  margin-top: 0.125rem !important;
}

.mr-1 {
  margin-right: 0.125rem !important;
}

.mb-1 {
  margin-bottom: 0.125rem !important;
}

.ml-1 {
  margin-left: 0.125rem !important;
}

.mx-1 {
  margin-left: 0.125rem !important;
  margin-right: 0.125rem !important;
}

.my-1 {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}

.p-1 {
  padding: 0.125rem !important;
}

.pt-1 {
  padding-top: 0.125rem !important;
}

.pr-1 {
  padding-right: 0.125rem !important;
}

.pb-1 {
  padding-bottom: 0.125rem !important;
}

.pl-1 {
  padding-left: 0.125rem !important;
}

.px-1 {
  padding-left: 0.125rem !important;
  padding-right: 0.125rem !important;
}

.py-1 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}

.m-2 {
  margin: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.25rem !important;
}

.mr-2 {
  margin-right: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.25rem !important;
}

.ml-2 {
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-2 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.p-2 {
  padding: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.25rem !important;
}

.pr-2 {
  padding-right: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.25rem !important;
}

.pl-2 {
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-2 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.m-3 {
  margin: 0.375rem !important;
}

.mt-3 {
  margin-top: 0.375rem !important;
}

.mr-3 {
  margin-right: 0.375rem !important;
}

.mb-3 {
  margin-bottom: 0.375rem !important;
}

.ml-3 {
  margin-left: 0.375rem !important;
}

.mx-3 {
  margin-left: 0.375rem !important;
  margin-right: 0.375rem !important;
}

.my-3 {
  margin-top: 0.375rem !important;
  margin-bottom: 0.375rem !important;
}

.p-3 {
  padding: 0.375rem !important;
}

.pt-3 {
  padding-top: 0.375rem !important;
}

.pr-3 {
  padding-right: 0.375rem !important;
}

.pb-3 {
  padding-bottom: 0.375rem !important;
}

.pl-3 {
  padding-left: 0.375rem !important;
}

.px-3 {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}

.py-3 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.m-4 {
  margin: 0.5rem !important;
}

.mt-4 {
  margin-top: 0.5rem !important;
}

.mr-4 {
  margin-right: 0.5rem !important;
}

.mb-4 {
  margin-bottom: 0.5rem !important;
}

.ml-4 {
  margin-left: 0.5rem !important;
}

.mx-4 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-4 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.p-4 {
  padding: 0.5rem !important;
}

.pt-4 {
  padding-top: 0.5rem !important;
}

.pr-4 {
  padding-right: 0.5rem !important;
}

.pb-4 {
  padding-bottom: 0.5rem !important;
}

.pl-4 {
  padding-left: 0.5rem !important;
}

.px-4 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-4 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.m-5 {
  margin: 0.625rem !important;
}

.mt-5 {
  margin-top: 0.625rem !important;
}

.mr-5 {
  margin-right: 0.625rem !important;
}

.mb-5 {
  margin-bottom: 0.625rem !important;
}

.ml-5 {
  margin-left: 0.625rem !important;
}

.mx-5 {
  margin-left: 0.625rem !important;
  margin-right: 0.625rem !important;
}

.my-5 {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important;
}

.p-5 {
  padding: 0.625rem !important;
}

.pt-5 {
  padding-top: 0.625rem !important;
}

.pr-5 {
  padding-right: 0.625rem !important;
}

.pb-5 {
  padding-bottom: 0.625rem !important;
}

.pl-5 {
  padding-left: 0.625rem !important;
}

.px-5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}

.py-5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

.m-6 {
  margin: 0.75rem !important;
}

.mt-6 {
  margin-top: 0.75rem !important;
}

.mr-6 {
  margin-right: 0.75rem !important;
}

.mb-6 {
  margin-bottom: 0.75rem !important;
}

.ml-6 {
  margin-left: 0.75rem !important;
}

.mx-6 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.my-6 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.p-6 {
  padding: 0.75rem !important;
}

.pt-6 {
  padding-top: 0.75rem !important;
}

.pr-6 {
  padding-right: 0.75rem !important;
}

.pb-6 {
  padding-bottom: 0.75rem !important;
}

.pl-6 {
  padding-left: 0.75rem !important;
}

.px-6 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.py-6 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.m-7 {
  margin: 0.875rem !important;
}

.mt-7 {
  margin-top: 0.875rem !important;
}

.mr-7 {
  margin-right: 0.875rem !important;
}

.mb-7 {
  margin-bottom: 0.875rem !important;
}

.ml-7 {
  margin-left: 0.875rem !important;
}

.mx-7 {
  margin-left: 0.875rem !important;
  margin-right: 0.875rem !important;
}

.my-7 {
  margin-top: 0.875rem !important;
  margin-bottom: 0.875rem !important;
}

.p-7 {
  padding: 0.875rem !important;
}

.pt-7 {
  padding-top: 0.875rem !important;
}

.pr-7 {
  padding-right: 0.875rem !important;
}

.pb-7 {
  padding-bottom: 0.875rem !important;
}

.pl-7 {
  padding-left: 0.875rem !important;
}

.px-7 {
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
}

.py-7 {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

.m-8 {
  margin: 1rem !important;
}

.mt-8 {
  margin-top: 1rem !important;
}

.mr-8 {
  margin-right: 1rem !important;
}

.mb-8 {
  margin-bottom: 1rem !important;
}

.ml-8 {
  margin-left: 1rem !important;
}

.mx-8 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-8 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.p-8 {
  padding: 1rem !important;
}

.pt-8 {
  padding-top: 1rem !important;
}

.pr-8 {
  padding-right: 1rem !important;
}

.pb-8 {
  padding-bottom: 1rem !important;
}

.pl-8 {
  padding-left: 1rem !important;
}

.px-8 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-8 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.m-9 {
  margin: 1.125rem !important;
}

.mt-9 {
  margin-top: 1.125rem !important;
}

.mr-9 {
  margin-right: 1.125rem !important;
}

.mb-9 {
  margin-bottom: 1.125rem !important;
}

.ml-9 {
  margin-left: 1.125rem !important;
}

.mx-9 {
  margin-left: 1.125rem !important;
  margin-right: 1.125rem !important;
}

.my-9 {
  margin-top: 1.125rem !important;
  margin-bottom: 1.125rem !important;
}

.p-9 {
  padding: 1.125rem !important;
}

.pt-9 {
  padding-top: 1.125rem !important;
}

.pr-9 {
  padding-right: 1.125rem !important;
}

.pb-9 {
  padding-bottom: 1.125rem !important;
}

.pl-9 {
  padding-left: 1.125rem !important;
}

.px-9 {
  padding-left: 1.125rem !important;
  padding-right: 1.125rem !important;
}

.py-9 {
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
}

.m-10 {
  margin: 1.25rem !important;
}

.mt-10 {
  margin-top: 1.25rem !important;
}

.mr-10 {
  margin-right: 1.25rem !important;
}

.mb-10 {
  margin-bottom: 1.25rem !important;
}

.ml-10 {
  margin-left: 1.25rem !important;
}

.mx-10 {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}

.my-10 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.p-10 {
  padding: 1.25rem !important;
}

.pt-10 {
  padding-top: 1.25rem !important;
}

.pr-10 {
  padding-right: 1.25rem !important;
}

.pb-10 {
  padding-bottom: 1.25rem !important;
}

.pl-10 {
  padding-left: 1.25rem !important;
}

.px-10 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.py-10 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.m-11 {
  margin: 1.375rem !important;
}

.mt-11 {
  margin-top: 1.375rem !important;
}

.mr-11 {
  margin-right: 1.375rem !important;
}

.mb-11 {
  margin-bottom: 1.375rem !important;
}

.ml-11 {
  margin-left: 1.375rem !important;
}

.mx-11 {
  margin-left: 1.375rem !important;
  margin-right: 1.375rem !important;
}

.my-11 {
  margin-top: 1.375rem !important;
  margin-bottom: 1.375rem !important;
}

.p-11 {
  padding: 1.375rem !important;
}

.pt-11 {
  padding-top: 1.375rem !important;
}

.pr-11 {
  padding-right: 1.375rem !important;
}

.pb-11 {
  padding-bottom: 1.375rem !important;
}

.pl-11 {
  padding-left: 1.375rem !important;
}

.px-11 {
  padding-left: 1.375rem !important;
  padding-right: 1.375rem !important;
}

.py-11 {
  padding-top: 1.375rem !important;
  padding-bottom: 1.375rem !important;
}

.m-12 {
  margin: 1.5rem !important;
}

.mt-12 {
  margin-top: 1.5rem !important;
}

.mr-12 {
  margin-right: 1.5rem !important;
}

.mb-12 {
  margin-bottom: 1.5rem !important;
}

.ml-12 {
  margin-left: 1.5rem !important;
}

.mx-12 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-12 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.p-12 {
  padding: 1.5rem !important;
}

.pt-12 {
  padding-top: 1.5rem !important;
}

.pr-12 {
  padding-right: 1.5rem !important;
}

.pb-12 {
  padding-bottom: 1.5rem !important;
}

.pl-12 {
  padding-left: 1.5rem !important;
}

.px-12 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-12 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.m-13 {
  margin: 1.625rem !important;
}

.mt-13 {
  margin-top: 1.625rem !important;
}

.mr-13 {
  margin-right: 1.625rem !important;
}

.mb-13 {
  margin-bottom: 1.625rem !important;
}

.ml-13 {
  margin-left: 1.625rem !important;
}

.mx-13 {
  margin-left: 1.625rem !important;
  margin-right: 1.625rem !important;
}

.my-13 {
  margin-top: 1.625rem !important;
  margin-bottom: 1.625rem !important;
}

.p-13 {
  padding: 1.625rem !important;
}

.pt-13 {
  padding-top: 1.625rem !important;
}

.pr-13 {
  padding-right: 1.625rem !important;
}

.pb-13 {
  padding-bottom: 1.625rem !important;
}

.pl-13 {
  padding-left: 1.625rem !important;
}

.px-13 {
  padding-left: 1.625rem !important;
  padding-right: 1.625rem !important;
}

.py-13 {
  padding-top: 1.625rem !important;
  padding-bottom: 1.625rem !important;
}

.m-14 {
  margin: 1.75rem !important;
}

.mt-14 {
  margin-top: 1.75rem !important;
}

.mr-14 {
  margin-right: 1.75rem !important;
}

.mb-14 {
  margin-bottom: 1.75rem !important;
}

.ml-14 {
  margin-left: 1.75rem !important;
}

.mx-14 {
  margin-left: 1.75rem !important;
  margin-right: 1.75rem !important;
}

.my-14 {
  margin-top: 1.75rem !important;
  margin-bottom: 1.75rem !important;
}

.p-14 {
  padding: 1.75rem !important;
}

.pt-14 {
  padding-top: 1.75rem !important;
}

.pr-14 {
  padding-right: 1.75rem !important;
}

.pb-14 {
  padding-bottom: 1.75rem !important;
}

.pl-14 {
  padding-left: 1.75rem !important;
}

.px-14 {
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

.py-14 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

.m-15 {
  margin: 1.875rem !important;
}

.mt-15 {
  margin-top: 1.875rem !important;
}

.mr-15 {
  margin-right: 1.875rem !important;
}

.mb-15 {
  margin-bottom: 1.875rem !important;
}

.ml-15 {
  margin-left: 1.875rem !important;
}

.mx-15 {
  margin-left: 1.875rem !important;
  margin-right: 1.875rem !important;
}

.my-15 {
  margin-top: 1.875rem !important;
  margin-bottom: 1.875rem !important;
}

.p-15 {
  padding: 1.875rem !important;
}

.pt-15 {
  padding-top: 1.875rem !important;
}

.pr-15 {
  padding-right: 1.875rem !important;
}

.pb-15 {
  padding-bottom: 1.875rem !important;
}

.pl-15 {
  padding-left: 1.875rem !important;
}

.px-15 {
  padding-left: 1.875rem !important;
  padding-right: 1.875rem !important;
}

.py-15 {
  padding-top: 1.875rem !important;
  padding-bottom: 1.875rem !important;
}

.m-16 {
  margin: 2rem !important;
}

.mt-16 {
  margin-top: 2rem !important;
}

.mr-16 {
  margin-right: 2rem !important;
}

.mb-16 {
  margin-bottom: 2rem !important;
}

.ml-16 {
  margin-left: 2rem !important;
}

.mx-16 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.my-16 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.p-16 {
  padding: 2rem !important;
}

.pt-16 {
  padding-top: 2rem !important;
}

.pr-16 {
  padding-right: 2rem !important;
}

.pb-16 {
  padding-bottom: 2rem !important;
}

.pl-16 {
  padding-left: 2rem !important;
}

.px-16 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.py-16 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.m-17 {
  margin: 2.125rem !important;
}

.mt-17 {
  margin-top: 2.125rem !important;
}

.mr-17 {
  margin-right: 2.125rem !important;
}

.mb-17 {
  margin-bottom: 2.125rem !important;
}

.ml-17 {
  margin-left: 2.125rem !important;
}

.mx-17 {
  margin-left: 2.125rem !important;
  margin-right: 2.125rem !important;
}

.my-17 {
  margin-top: 2.125rem !important;
  margin-bottom: 2.125rem !important;
}

.p-17 {
  padding: 2.125rem !important;
}

.pt-17 {
  padding-top: 2.125rem !important;
}

.pr-17 {
  padding-right: 2.125rem !important;
}

.pb-17 {
  padding-bottom: 2.125rem !important;
}

.pl-17 {
  padding-left: 2.125rem !important;
}

.px-17 {
  padding-left: 2.125rem !important;
  padding-right: 2.125rem !important;
}

.py-17 {
  padding-top: 2.125rem !important;
  padding-bottom: 2.125rem !important;
}

.m-18 {
  margin: 2.25rem !important;
}

.mt-18 {
  margin-top: 2.25rem !important;
}

.mr-18 {
  margin-right: 2.25rem !important;
}

.mb-18 {
  margin-bottom: 2.25rem !important;
}

.ml-18 {
  margin-left: 2.25rem !important;
}

.mx-18 {
  margin-left: 2.25rem !important;
  margin-right: 2.25rem !important;
}

.my-18 {
  margin-top: 2.25rem !important;
  margin-bottom: 2.25rem !important;
}

.p-18 {
  padding: 2.25rem !important;
}

.pt-18 {
  padding-top: 2.25rem !important;
}

.pr-18 {
  padding-right: 2.25rem !important;
}

.pb-18 {
  padding-bottom: 2.25rem !important;
}

.pl-18 {
  padding-left: 2.25rem !important;
}

.px-18 {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
}

.py-18 {
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

.m-19 {
  margin: 2.375rem !important;
}

.mt-19 {
  margin-top: 2.375rem !important;
}

.mr-19 {
  margin-right: 2.375rem !important;
}

.mb-19 {
  margin-bottom: 2.375rem !important;
}

.ml-19 {
  margin-left: 2.375rem !important;
}

.mx-19 {
  margin-left: 2.375rem !important;
  margin-right: 2.375rem !important;
}

.my-19 {
  margin-top: 2.375rem !important;
  margin-bottom: 2.375rem !important;
}

.p-19 {
  padding: 2.375rem !important;
}

.pt-19 {
  padding-top: 2.375rem !important;
}

.pr-19 {
  padding-right: 2.375rem !important;
}

.pb-19 {
  padding-bottom: 2.375rem !important;
}

.pl-19 {
  padding-left: 2.375rem !important;
}

.px-19 {
  padding-left: 2.375rem !important;
  padding-right: 2.375rem !important;
}

.py-19 {
  padding-top: 2.375rem !important;
  padding-bottom: 2.375rem !important;
}

.m-20 {
  margin: 2.5rem !important;
}

.mt-20 {
  margin-top: 2.5rem !important;
}

.mr-20 {
  margin-right: 2.5rem !important;
}

.mb-20 {
  margin-bottom: 2.5rem !important;
}

.ml-20 {
  margin-left: 2.5rem !important;
}

.mx-20 {
  margin-left: 2.5rem !important;
  margin-right: 2.5rem !important;
}

.my-20 {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.p-20 {
  padding: 2.5rem !important;
}

.pt-20 {
  padding-top: 2.5rem !important;
}

.pr-20 {
  padding-right: 2.5rem !important;
}

.pb-20 {
  padding-bottom: 2.5rem !important;
}

.pl-20 {
  padding-left: 2.5rem !important;
}

.px-20 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.py-20 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.gap-0 {
  gap: 0rem !important;
}

.gap-row-0 {
  row-gap: 0rem !important;
}

.gap-column-0 {
  -moz-column-gap: 0rem !important;
       column-gap: 0rem !important;
}

.gap-1 {
  gap: 0.5rem !important;
}

.gap-row-1 {
  row-gap: 0.5rem !important;
}

.gap-column-1 {
  -moz-column-gap: 0.5rem !important;
       column-gap: 0.5rem !important;
}

.gap-2 {
  gap: 1rem !important;
}

.gap-row-2 {
  row-gap: 1rem !important;
}

.gap-column-2 {
  -moz-column-gap: 1rem !important;
       column-gap: 1rem !important;
}

.gap-3 {
  gap: 1.5rem !important;
}

.gap-row-3 {
  row-gap: 1.5rem !important;
}

.gap-column-3 {
  -moz-column-gap: 1.5rem !important;
       column-gap: 1.5rem !important;
}

.gap-4 {
  gap: 2rem !important;
}

.gap-row-4 {
  row-gap: 2rem !important;
}

.gap-column-4 {
  -moz-column-gap: 2rem !important;
       column-gap: 2rem !important;
}

.gap-5 {
  gap: 2.5rem !important;
}

.gap-row-5 {
  row-gap: 2.5rem !important;
}

.gap-column-5 {
  -moz-column-gap: 2.5rem !important;
       column-gap: 2.5rem !important;
}

.gap-6 {
  gap: 3rem !important;
}

.gap-row-6 {
  row-gap: 3rem !important;
}

.gap-column-6 {
  -moz-column-gap: 3rem !important;
       column-gap: 3rem !important;
}

.gap-7 {
  gap: 3.5rem !important;
}

.gap-row-7 {
  row-gap: 3.5rem !important;
}

.gap-column-7 {
  -moz-column-gap: 3.5rem !important;
       column-gap: 3.5rem !important;
}

.gap-8 {
  gap: 4rem !important;
}

.gap-row-8 {
  row-gap: 4rem !important;
}

.gap-column-8 {
  -moz-column-gap: 4rem !important;
       column-gap: 4rem !important;
}

.gap-9 {
  gap: 4.5rem !important;
}

.gap-row-9 {
  row-gap: 4.5rem !important;
}

.gap-column-9 {
  -moz-column-gap: 4.5rem !important;
       column-gap: 4.5rem !important;
}

.gap-10 {
  gap: 5rem !important;
}

.gap-row-10 {
  row-gap: 5rem !important;
}

.gap-column-10 {
  -moz-column-gap: 5rem !important;
       column-gap: 5rem !important;
}

.gap-11 {
  gap: 5.5rem !important;
}

.gap-row-11 {
  row-gap: 5.5rem !important;
}

.gap-column-11 {
  -moz-column-gap: 5.5rem !important;
       column-gap: 5.5rem !important;
}

.gap-12 {
  gap: 6rem !important;
}

.gap-row-12 {
  row-gap: 6rem !important;
}

.gap-column-12 {
  -moz-column-gap: 6rem !important;
       column-gap: 6rem !important;
}

.gap-13 {
  gap: 6.5rem !important;
}

.gap-row-13 {
  row-gap: 6.5rem !important;
}

.gap-column-13 {
  -moz-column-gap: 6.5rem !important;
       column-gap: 6.5rem !important;
}

.gap-14 {
  gap: 7rem !important;
}

.gap-row-14 {
  row-gap: 7rem !important;
}

.gap-column-14 {
  -moz-column-gap: 7rem !important;
       column-gap: 7rem !important;
}

.gap-15 {
  gap: 7.5rem !important;
}

.gap-row-15 {
  row-gap: 7.5rem !important;
}

.gap-column-15 {
  -moz-column-gap: 7.5rem !important;
       column-gap: 7.5rem !important;
}

.gap-16 {
  gap: 8rem !important;
}

.gap-row-16 {
  row-gap: 8rem !important;
}

.gap-column-16 {
  -moz-column-gap: 8rem !important;
       column-gap: 8rem !important;
}

.gap-17 {
  gap: 8.5rem !important;
}

.gap-row-17 {
  row-gap: 8.5rem !important;
}

.gap-column-17 {
  -moz-column-gap: 8.5rem !important;
       column-gap: 8.5rem !important;
}

.gap-18 {
  gap: 9rem !important;
}

.gap-row-18 {
  row-gap: 9rem !important;
}

.gap-column-18 {
  -moz-column-gap: 9rem !important;
       column-gap: 9rem !important;
}

.gap-19 {
  gap: 9.5rem !important;
}

.gap-row-19 {
  row-gap: 9.5rem !important;
}

.gap-column-19 {
  -moz-column-gap: 9.5rem !important;
       column-gap: 9.5rem !important;
}

.gap-20 {
  gap: 10rem !important;
}

.gap-row-20 {
  row-gap: 10rem !important;
}

.gap-column-20 {
  -moz-column-gap: 10rem !important;
       column-gap: 10rem !important;
}

.display-flex {
  display: flex !important;
}

.display-inline-flex {
  display: inline-flex !important;
}

.display-block {
  display: block !important;
}

.width-full {
  width: 100%;
  flex: 0 0 100%;
}

.width-half {
  width: 50%;
  flex: 0 0 50%;
}

.height-full {
  height: 100%;
}

/* Form */
.input-text[type=text], .input-text[type=password], .input-text[type=number] {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 2.75rem;
  max-width: 31.25rem;
  box-sizing: border-box;
  padding: 0 0.75rem;
  border-radius: 0.3125rem;
  border: 1px solid #D0D0D0;
  background: #FFF;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #222;
}
.input-text[type=text]::-moz-placeholder, .input-text[type=password]::-moz-placeholder, .input-text[type=number]::-moz-placeholder {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #9C9C9C;
}
.input-text[type=text]::placeholder, .input-text[type=password]::placeholder, .input-text[type=number]::placeholder {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #9C9C9C;
}
.input-text[type=text]:-moz-read-only, .input-text[type=password]:-moz-read-only, .input-text[type=number]:-moz-read-only {
  border-color: #D0D0D0;
  background: #F5F5F5;
}
.input-text[type=text]:read-only, .input-text[type=password]:read-only, .input-text[type=number]:read-only {
  border-color: #D0D0D0;
  background: #F5F5F5;
}

.input-select {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 2.75rem;
  box-sizing: border-box;
  padding: 0 0.75rem;
  padding-right: 2.375rem;
  border-radius: 0.3125rem;
  border: 1px solid #D0D0D0;
  background: #FFF;
  background-repeat: no-repeat;
  background-position: right 0.625rem top 50%;
  background-size: 1rem auto;
  background-image: url("../../img/board/select-arrow.svg");
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #222;
}

.input-combine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
}

.input-email {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 31.25rem;
  gap: 0.625rem;
}
.input-email .input-text {
  flex: 2;
}

.input-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  min-width: 5.625rem;
  height: 2.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0.3125rem;
  border: 1px solid rgba(0, 31, 96, 0.6);
  background: #F7F8FB;
  color: #001F60;
}
.input-button:hover {
  border-color: rgba(0, 31, 96, 0.8);
  background-color: #E1E5F2;
  color: #001A50;
}
.input-button:active {
  border-color: rgb(0, 31, 96);
  background-color: #C5CCE3;
  color: #001542;
}
.input-button .button-txt {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01875rem;
}

.input-ref {
  display: flex;
  padding: 0 0.1875rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: #5B617A;
}

.input-contact {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 31.25rem;
}
.input-contact .input-select,
.input-contact .input-text {
  flex: 1 1 33%;
  text-align: center;
}

.input-combine:has(.input-address) {
  align-items: flex-start;
}

.input-address {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 31.25rem;
  gap: 0.625rem;
}

.input-textarea {
  width: 100%;
  height: 6.25rem;
  box-sizing: border-box;
  padding: 0.75rem;
  border-radius: 0.3125rem;
  border: 1px solid #D0D0D0;
  font-size: 1rem;
  font-weight: 400;
  color: #222;
  line-height: 1.5;
}
.input-textarea::-moz-placeholder {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #9C9C9C;
}
.input-textarea::placeholder {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #9C9C9C;
}

.input-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.input-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  font-weight: 400;
  font-size: 1rem;
  cursor: pointer;
}
.input-choice input[type=checkbox],
.input-choice input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.input-choice .choice-ico {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-indent: -9999px;
  overflow: hidden;
}
.input-choice .choice-txt {
  display: inline-flex;
  font-size: 1em;
}
.input-choice:has(input[type=checkbox]) .choice-ico {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8em auto;
}
.input-choice:has(input[type=radio]) .choice-ico {
  background: none;
  border-radius: 50%;
  border-color: rgba(0, 0, 0, 0.15);
}
.input-choice:has(input[type=checkbox]:checked) {
  font-weight: 500;
}
.input-choice:has(input[type=checkbox]:checked) .choice-ico {
  border-color: #3481F5;
  background-color: #3481F5;
  background-image: url("../../img/board/ico-checkbox--checked.svg");
}
.input-choice:has(input[type=radio]:checked) {
  font-weight: 500;
}
.input-choice:has(input[type=radio]:checked) .choice-ico {
  background: none;
  background-color: #fff;
  border: 0.3125rem solid #3481F5;
}

.input-attached {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
}
.input-attached li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.input-attached .attached-file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 1.5625rem;
  background-color: #F7F8FB;
}
.input-attached .attached-file:hover, .input-attached .attached-file:focus-within {
  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.16);
}
.input-attached .attached-file .file-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01875rem;
  max-width: 12.5rem;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
}
.input-attached .attached-file a.file-name:hover, .input-attached .attached-file a.file-name:focus {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.input-attached .attached-file .file-remove {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-image: url("../../img/board/ico-remove.svg");
  background-size: 1rem auto;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
}
.input-attached .attached-file .file-remove:hover:after, .input-attached .attached-file .file-remove:focus:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  mix-blend-mode: color;
  opacity: 0.6;
  pointer-events: none;
}

.input-switch {
  position: relative;
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  cursor: pointer;
}
.input-switch input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: 0;
  width: 1px;
  height: 1px;
}
.input-switch input[type=checkbox]:focus ~ .switch-dot {
  border-color: #000;
}
.input-switch input[type=checkbox]:checked ~ .switch-dot {
  background-color: var(--element-primary, #256EF4);
  border-color: var(--element-primary, #256EF4);
}
.input-switch input[type=checkbox]:checked ~ .switch-dot:before {
  transform: translate(100%, -50%);
  background-color: #fff;
}
.input-switch .switch-dot {
  display: flex;
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  min-width: auto;
  border: 0.1em solid transparent;
  border-radius: 1.5625rem;
  background-color: #ECECEC;
}
.input-switch .switch-dot:before {
  position: absolute;
  top: 50%;
  left: 0.125rem;
  transform: translateY(-50%);
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.input-switch.style-size-l .switch-dot {
  width: 3.125rem;
  height: 1.75rem;
}
.input-switch.style-size-l .switch-dot:before {
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
.input-switch.style-size-m .switch-dot {
  width: 2.5rem;
  height: 1.5rem;
}
.input-switch.style-size-m .switch-dot:before {
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
}
.input-switch.style-size-s .switch-dot {
  width: 2rem;
  height: 1.25rem;
}
.input-switch.style-size-s .switch-dot:before {
  width: 0.75rem;
  height: 0.75rem;
}

.input-button.style-primary {
  border: none;
  border-radius: var(--border-radius-md, 4px);
  background: var(--button-primary-fill, #256EF4);
  color: #FFF;
}
.input-button.style-primary:hover, .input-button.style-primary:focus {
  border-radius: var(--border-radius-md, 4px);
  background: var(--button-primary-fill-hover, #0B50D0);
}
.input-button.style-primary:active {
  border-radius: var(--border-radius-md, 4px);
  background: var(--button-primary-fill-pressed, #083891);
}
.input-button.style-secondary {
  border: 1px solid var(--button-secondary-border, #256EF4);
  background: var(--button-secondary-fill, #FFF);
  color: var(--text-primary, #0B50D0);
}
.input-button.style-secondary:hover, .input-button.style-secondary:focus {
  border: 1px solid var(--button-secondary-border, #256EF4);
  background: var(--button-secondary-fill-hover, #F5F8FE);
}
.input-button.style-secondary:active {
  border: 1px solid var(--button-secondary-border, #256EF4);
  background: var(--button-secondary-fill-pressed, #D8E5FD);
}
.input-button.style-assistive {
  border: 1px solid var(--button-assistive-border, #B1B8BE);
  background: var(--button-assistive-fill, #F5F8FE);
  color: var(--text-subtle, #464C53);
}
.input-button.style-assistive:hover, .input-button.style-assistive:focus {
  border: 1px solid var(--button-assistive-border, #B1B8BE);
  background: var(--button-assistive-fill-hover, #D8E5FD);
}
.input-button.style-assistive:active {
  border: 1px solid var(--button-assistive-border, #B1B8BE);
  background: var(--button-assistive-fill-pressed, #B1CEFB);
}
.input-button.style-tertiary {
  border: 1px solid var(--button-tertiary-border, #B1B8BE);
  background: var(--button-tertiary-fill, rgb(255, 255, 255));
  color: var(--text-subtle, #464C53);
}
.input-button.style-tertiary:hover, .input-button.style-tertiary:focus {
  border: 1px solid var(--button-tertiary-border, #B1B8BE);
  background: var(--button-tertiary-fill-hover, #F4F5F6);
}
.input-button.style-tertiary:active {
  border: 1px solid var(--button-tertiary-border, #B1B8BE);
  background: var(--button-tertiary-fill-pressed, #E6E8EA);
}
.input-button.style-delete {
  border: 1px solid var(--button-danger-border, #BD2C0F);
  background: var(--button-danger-fill, #FDEFEC);
  color: var(--text-danger, #BD2C0F);
}
.input-button.style-delete:hover, .input-button.style-delete:focus {
  border: 1px solid var(--button-danger-border, #BD2C0F);
  background: var(--button-danger-fill-hover, #FCDFD9);
}
.input-button.style-delete:active {
  border: 1px solid var(--button-danger-border, #BD2C0F);
  background: var(--button-danger-fill-pressed, #F7AFA1);
}
.input-button.style-text {
  border: none;
  height: auto;
  padding: var(--spacing-spacing-4, 4px);
  font-weight: inherit;
  color: inherit;
}
.input-button.style-text:hover, .input-button.style-text:focus {
  background: var(--button-text-fill-hover, #EEF2F7);
}
.input-button.style-text:active {
  background: var(--button-text-fill-pressed, #D6E0EB);
}
.input-button.style-text:disabled {
  background: var(--button-text-fill, rgba(255, 255, 255, 0)) !important;
  color: var(--text-disabled-on, #6D7882) !important;
}
.input-button.style-text.style-size-l {
  height: var(--spacing-spacing-40, 40px);
  min-width: 96px;
  font-size: var(--label-large-font-size, 18px);
}
.input-button.style-text.style-size-m {
  height: var(--spacing-spacing-32, 32px);
  min-width: 80px;
  font-size: var(--label-medium-font-size, 16px);
}
.input-button.style-text.style-size-s {
  height: var(--spacing-spacing-24, 24px);
  min-width: 60px;
  font-size: var(--label-small-font-size, 15px);
}
.input-button.style-icon {
  min-width: auto;
  border: none;
  height: auto;
  padding: var(--spacing-spacing-2, 2px);
  font-weight: inherit;
  color: inherit;
}
.input-button.style-icon:hover, .input-button.style-icon:focus {
  background: var(--button-text-fill-hover, #EEF2F7);
}
.input-button.style-icon:active {
  background: var(--button-text-fill-pressed, #D6E0EB);
}
.input-button.style-icon:disabled {
  background: var(--button-text-fill, rgba(255, 255, 255, 0)) !important;
  color: var(--text-disabled-on, #6D7882) !important;
}

/* Board */
:root {
  --board-primary: #D0121B;
  --board-secondary: #001F60;
}

.board-section {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.board-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.875rem 2.5rem;
  border: 1px solid #E0E0E0;
  background: #F7F8FB;
}
.board-search .search-submit {
  border-color: #D0121B;
  background-color: #D0121B;
  color: #fff;
}
.board-search .search-submit:hover {
  border-color: #E3363E; /* 좀 더 밝은 파란색 */
  background-color: #E3363E; /* 동일하게 맞춤 */
  color: #ffffff; /* 텍스트 색상 유지 */
}
.board-search .search-submit:active {
  border-color: #A20E15; /* 어둡고 깊이감 있는 파란색 */
  background-color: #A20E15; /* 동일하게 맞춤 */
  color: #ffffff; /* 텍스트 색상 유지 */
}

.board-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.board-list .list-header {
  display: flex;
  align-items: flex-end;
}
.board-list .list-pager {
  font-size: 1.125em;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: -0.01875rem;
  color: #000;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .board-list .list-pager {
    font-size: 0.875rem;
  }
}
.board-list .list-pager b {
  font-weight: 700;
  color: var(--board-primary);
}
.board-list .list-table table {
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  color: #666;
  letter-spacing: -0.01875rem;
  text-align: center;
}
.board-list .list-table table:has(.table-ttl) {
  table-layout: fixed;
}
.board-list .list-table table thead {
  border-top: 2px solid #555555;
  border-top-color: #222;
  border-bottom: 1px solid rgba(0, 0, 0, 0.19);
  border-bottom-color: #ddd;
}
.board-list .list-table table thead th {
  height: 4.375rem;
  background-color: #fff;
  font-weight: 600;
  color: #000;
  word-break: keep-all;
}
.board-list .list-table table tbody td {
  text-align: center;
  word-break: keep-all;
}
.board-list .list-table table tr:hover, .board-list .list-table table tr:focus-within {
  background-color: rgb(252.06, 253.04, 252.55);
}
.board-list .list-table table tr.is-active {
  background-color: #F9FBFA;
}
.board-list .list-table table tr.is-active .table-order {
  position: relative;
  display: inline-flex;
  width: 4.375rem;
  height: 1.875rem;
  border-radius: 1.5625rem;
  background-color: #000;
  text-indent: -9999px;
  overflow: hidden;
}
.board-list .list-table table tr.is-active .table-order:before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  content: "공지";
  font-size: 0.9375rem;
  font-weight: 400;
  color: #fff;
  text-indent: 0;
  text-align: center;
}
.board-list .list-table table th, .board-list .list-table table td {
  height: 5rem;
  box-sizing: border-box;
  border-bottom: 1px solid #DFDFDF;
  padding: 0.625rem;
  vertical-align: middle;
}
.board-list .list-table table th {
  font-size: 1.25rem;
}
.board-list .list-table table td {
  font-size: 1.125rem;
}
@media only screen and (max-width: 767px) {
  .board-list .list-table table, .board-list .list-table tbody, .board-list .list-table tr, .board-list .list-table th, .board-list .list-table td {
    display: block;
  }
  .board-list .list-table caption, .board-list .list-table colgroup {
    display: none;
  }
  .board-list .list-table table thead {
    display: none;
  }
  .board-list .list-table table tbody {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.625rem;
  }
  .board-list .list-table table tbody tr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem;
  }
  .board-list .list-table table tbody tr td:has(.table-ttl) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1 100%;
    width: 100%;
  }
  .board-list .list-table table tbody tr td:has(.table-ttl):before {
    content: none;
  }
  .board-list .list-table table tbody tr td:has(.table-ttl) .table-ttl {
    display: flex;
    width: 100%;
  }
  .board-list .list-table table tbody td {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    height: auto;
    font-weight: 500;
    color: #222;
  }
  .board-list .list-table table tbody td:before {
    content: attr(data-ttl);
    font-weight: 400;
    color: #555;
  }
  .board-list .list-table table tr {
    border: 1px solid #e7e7e7;
    border-radius: 0.1875rem;
  }
  .board-list .list-table table th, .board-list .list-table table td {
    height: auto;
    padding: 0.25rem 0.625rem;
    border-bottom: 0;
  }
}
.board-list .list-table .table-ttl {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 0.625rem;
  line-height: 1.5rem;
}
.board-list .list-table .table-ttl .table-new {
  flex: none;
}
.board-list .list-table .table-ttl .table-lock {
  flex: none;
}
.board-list .list-table .table-category {
  color: #666;
}
.board-list .list-table .table-link {
  display: inline-block;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  color: #222;
}
.board-list .list-table .table-link:hover, .board-list .list-table .table-link:focus {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.board-list .list-table .table-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #000;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}
.board-list .list-table .table-lock {
  position: relative;
  display: inline-flex;
  width: 1.25rem;
  text-indent: -9999px;
  overflow: hidden;
}
.board-list .list-table .table-lock:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-image: url("../../img/board/ico-lock.svg");
  background-size: 1.1875rem auto;
  background-position: center;
}
.board-list .list-table .table-white-space {
  white-space: nowrap;
}
.board-list .list-table .table-attached,
.board-list .list-table .table-ico {
  display: inline-flex;
  vertical-align: middle;
}
.board-list .list-table .table-attached img,
.board-list .list-table .table-ico img {
  width: 1.125rem;
}
.board-list .list-table .table-attached {
  position: relative;
}
.board-list .list-table .table-attached:has(.attached-button.is-active) .attached-layer {
  display: flex;
}
.board-list .list-table .table-attached .attached-button {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  gap: 0.25rem;
  align-items: center;
}
.board-list .list-table .table-attached .attached-button img {
  width: 1.125rem;
}
.board-list .list-table .table-attached .attached-button:hover:after, .board-list .list-table .table-attached .attached-button:focus:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--board-primary);
  mix-blend-mode: color;
  opacity: 0.6;
  pointer-events: none;
}
.board-list .list-table .table-attached .attached-button .button-ico {
  width: 1.5rem;
  height: 1.5rem;
}
.board-list .list-table .table-attached .attached-layer {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  padding: 0.625rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  background-color: #fff;
  border-radius: 0.3125rem;
  box-shadow: 0px 0px 0.3125rem rgba(0, 0, 0, 0.16);
  display: none;
  transform: translateY(0.3125rem);
  animation: attachedFilesRending 0.3s ease 0s 1 alternate both;
}
@keyframes attachedFilesRending {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0.3125rem);
  }
}
.board-list .list-table .table-attached .attached-file {
  font-size: 0.875rem;
}
.board-list .list-table .table-attached .attached-file:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.board-list .list-state {
  display: flex;
  align-items: center;
  height: 1.875rem;
  box-sizing: border-box;
  padding: 0.375rem 0.75rem;
  border-radius: 1.5625rem;
  border: 1px solid rgba(51, 54, 63, 0.6);
  font-size: 1rem;
  white-space: nowrap;
  color: #33363F;
}
.board-list .list-state.style--red {
  border-color: rgba(235, 42, 41, 0.6);
  color: #EB2A29;
}
.board-list .list-faq {
  display: flex;
  flex-direction: column;
  border-top: 0.125rem solid #555;
}
.board-list .list-faq .faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.board-list .list-faq .faq-item:has(.faq-toggle.is-active) .faq-question:after {
  transform: rotateZ(0deg) skewY(-0.01deg);
}
.board-list .list-faq .faq-item:has(.faq-toggle.is-active) .faq-answer {
  display: flex;
}
.board-list .list-faq .faq-question {
  position: relative;
  display: flex;
  gap: 0.625rem;
  min-height: 5.625rem;
  box-sizing: border-box;
  padding: 1.875rem 1.25rem;
  padding-right: 3.125rem;
}
.board-list .list-faq .faq-question:after {
  position: absolute;
  top: 1.875rem;
  right: 1.25rem;
  content: "";
  transform: rotateZ(180deg) skewY(-0.01deg);
  width: 1.875rem;
  height: 1.875rem;
  background-repeat: no-repeat;
  background-image: url("../../img/board/faq-arrow.svg");
  background-position: center;
  background-size: 1.875rem auto;
  transition: all 0.2s ease;
}
.board-list .list-faq .faq-question .question-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  word-break: keep-all;
}
.board-list .list-faq .faq-question .question-ttl {
  display: inline;
}
.board-list .list-faq .faq-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 1.875rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.05rem;
  color: #081A40;
}
.board-list .list-faq .faq-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
.board-list .list-faq .faq-toggle:hover {
  background-color: var(--board-primary);
  mix-blend-mode: color;
  opacity: 0.1;
}
.board-list .list-faq .faq-answer {
  display: flex;
  gap: 0.625rem;
  padding: 1.875rem 1.25rem;
  background: #F7F8FB;
  display: none;
}
.board-list .list-faq .faq-answer .faq-mark {
  color: #8698B8;
}
.board-list .list-faq .faq-answer .answer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.board-list .list-faq .faq-answer .answer-comment {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01875rem;
  word-break: keep-all;
  color: #555;
}
.board-list .list-faq .faq-answer .answer-attached .input-attached .attached-file {
  border: 1px solid #e7e7e7;
  background-color: #fff;
}
.board-list .list-faq .faq-answer .answer-attached .input-attached .attached-file .file-remove {
  display: none;
}
.board-list .list-faq .faq-answer .board-foot-buttons {
  gap: 0.625rem;
}
.board-list .list-faq .faq-answer .board-foot-buttons .foot-button {
  width: 7.5rem;
  height: 2.75rem;
  min-width: auto;
  max-width: 100%;
}
.board-list .list-faq .faq-label {
  position: relative;
  display: inline-flex;
  width: 2.5rem;
  flex: 0 0 2.5rem;
  text-indent: -9999px;
}
.board-list .list-faq .faq-label:before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  content: "공지";
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #D0121B;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.025rem;
  text-indent: 0;
  text-align: center;
}
.board-list .list-faq .faq-new {
  position: relative;
  display: inline-flex;
  width: 3.4375rem;
  text-indent: -9999px;
  overflow: hidden;
}
.board-list .list-faq .faq-new:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  content: "NEW";
  width: 3.125rem;
  height: 1.25rem;
  border-radius: 1.5625rem;
  border: 1px solid var(--board-primary);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.01875rem;
  line-height: 1;
  text-indent: 0;
  color: var(--board-primary);
}
.board-list .list-album {
  padding-top: 1.875rem;
  margin-top: 0.9375rem;
  border-top: 2px solid #000;
}
.board-list .list-album .album-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .board-list .list-album .album-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .board-list .list-album .album-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
.board-list .list-album .album-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.board-list .list-album .album-item:hover .album-ttl .ttl-txt, .board-list .list-album .album-item:focus-within .album-ttl .ttl-txt {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.board-list .list-album .album-head {
  position: relative;
  margin-bottom: 0.625rem;
}
.board-list .list-album .album-body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.board-list .list-album .album-foot {
  display: flex;
  align-items: center;
  height: 1.25rem;
}
.board-list .list-album .album-label {
  position: absolute;
  top: 0.9375rem;
  left: 0.9375rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.25rem;
  box-sizing: border-box;
  padding: 0 0.75rem;
  border-radius: 1.5625rem;
  background-color: #000;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.025rem;
  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.16);
}
.board-list .list-album .album-thumbs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  border-radius: 1.25rem;
  background-color: #D9D9D9;
  background-repeat: no-repeat;
  background-image: url("../../img/common/logo.svg");
  background-size: 8.75rem auto;
  background-position: center;
  overflow: hidden;
}
.board-list .list-album .album-thumbs img {
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
}
.board-list .list-album .album-category {
  display: flex;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--board-primary);
}
.board-list .list-album .album-ttl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.01875rem;
}
.board-list .list-album .album-ttl .ttl-category {
  font-weight: 600;
}
.board-list .list-album .album-new {
  position: relative;
  display: inline-flex;
  width: 1.5rem;
  text-indent: -9999px;
  overflow: hidden;
}
.board-list .list-album .album-new:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  content: "N";
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background-color: #222;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01875rem;
  line-height: 1;
  text-indent: 0;
  color: #fff;
}
.board-list .list-album .album-infos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 1rem;
  font-weight: 400;
  color: #666;
  letter-spacing: -0.01875rem;
  line-height: 1;
}
.board-list .list-album .album-infos li {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}
.board-list .list-album .album-infos .info-ttl,
.board-list .list-album .album-infos .info-conts {
  display: inline-flex;
}
.board-list .list-album .album-infos .info-ttl {
  position: relative;
  width: 0.9375rem;
  height: 0.9375rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.9375rem auto;
  text-indent: -9999px;
  overflow: hidden;
}
.board-list .list-album .album-infos .info-ttl.album-hit {
  background-image: url("../../img/board/ico-hit.svg");
}
.board-list .list-album .album-infos .info-ttl.album-date {
  background-image: url("../../img/board/ico-date.svg");
}
.board-list .list-album .album-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  overflow: hidden;
}

.board-foot-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
}
.board-foot-buttons:has(.foot-gl ~ .foot-button) {
  justify-content: stretch;
}
.board-foot-buttons:has(.foot-gl ~ .foot-button) .foot-gl + .foot-button {
  margin-left: auto;
}
.board-foot-buttons:has(.foot-gl):not(:has(.foot-gl ~ .foot-button)) {
  justify-content: center;
}
.board-foot-buttons .foot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 9.375rem;
  height: 3.75rem;
  max-width: 100%;
  border-radius: 0.3125rem;
  border: 1px solid var(--board-primary);
  background-color: var(--board-primary);
  color: #fff;
  transition: all 0.2s ease;
}
.board-foot-buttons .foot-button:hover {
  background-color: #E3363E;
}
.board-foot-buttons .foot-button:active {
  background-color: #A20E15;
}
.board-foot-buttons .foot-button .button-txt {
  display: inline-flex;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01875rem;
}
.board-foot-buttons .foot-button .button-ico {
  display: inline-flex;
}
.board-foot-buttons .foot-button .button-ico img {
  width: 1.25rem;
}
.board-foot-buttons .foot-button.style--reverse {
  background-color: #fff;
  color: var(--board-primary);
}
.board-foot-buttons .foot-button.style--reverse:hover {
  border-color: #2B6DB3;
  background-color: #E3F0FF;
  color: #2B6DB3;
}
.board-foot-buttons .foot-button.style--reverse:active {
  border-color: #1F4D87;
  background-color: #B2D4FF;
  color: #1F4D87;
}
.board-foot-buttons .foot-button.style--system {
  background-color: #262A37;
  border-color: #262A37;
  color: #fff;
}
.board-foot-buttons .foot-button.style--system:hover {
  background-color: rgb(27.5806451613, 30.4838709677, 39.9193548387);
  border-color: rgb(27.5806451613, 30.4838709677, 39.9193548387);
}
.board-foot-buttons .foot-button.style--system:active {
  background-color: rgb(17.1612903226, 18.9677419355, 24.8387096774);
  border-color: rgb(17.1612903226, 18.9677419355, 24.8387096774);
}
.board-foot-buttons .foot-button.style--void {
  background-color: #fff;
  border-color: #888CA0;
  color: #888CA0;
}
.board-foot-buttons .foot-button.style--void:hover {
  background-color: white;
  border-color: rgb(108.761682243, 113.3411214953, 136.238317757);
}
.board-foot-buttons .foot-button.style--void:active {
  background-color: white;
  border-color: rgb(97.441588785, 101.5443925234, 122.058411215);
}
.board-foot-buttons .foot-button.style--neg {
  background-color: #fff;
  border-color: #EB2A29;
  color: #EB2A29;
}
.board-foot-buttons .foot-button.style--neg:hover {
  background-color: rgb(254.6153846154, 250.9038461538, 250.8846153846);
  border-color: rgb(229.0897435897, 22.4807692308, 21.4102564103);
}
.board-foot-buttons .foot-button.style--neg:active {
  background-color: rgb(252.4358974359, 227.6923076923, 227.5641025641);
  border-color: rgb(205.7692307692, 20.1923076923, 19.2307692308);
}
.board-foot-buttons .foot-button.style--disabled {
  background-color: #F4F6FA;
  border-color: #DBE0E7;
  color: #B4C0D3;
  cursor: default;
  outline: none;
}

.board-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.board-pager .pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.125rem;
  font-weight: 400;
  color: #666666;
}
@media only screen and (max-width: 767px) {
  .board-pager .pager-num {
    display: none;
  }
}
.board-pager .pager-num:is(:hover, :focus) {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.board-pager .pager-num.is-active {
  font-weight: 500;
  color: #222;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.board-pager .pager-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.3125rem;
  border: 1px solid #C5C9D6;
  background: #FFF;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem auto;
  text-indent: -9999px;
  overflow: hidden;
}
.board-pager .pager-button:hover {
  background-color: #F7F8FB;
}
.board-pager .pager-button:active {
  background-color: #E1E3EB;
  border-color: #AEB3C0;
}
.board-pager .pager-button.pager-first {
  background-image: url("../../img/board/pager-first.svg");
}
.board-pager .pager-button.pager-last {
  background-image: url("../../img/board/pager-last.svg");
}
.board-pager .pager-button.pager-prev {
  background-image: url("../../img/board/pager-prev.svg");
}
.board-pager .pager-button.pager-next {
  background-image: url("../../img/board/pager-next.svg");
}
.board-pager .pager-direct {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  color: #222;
  display: none;
}
@media only screen and (max-width: 767px) {
  .board-pager .pager-direct {
    display: flex;
  }
}
.board-pager .pager-direct .pager-input {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 3.625rem;
  height: 2.5rem;
  box-sizing: border-box;
  padding: 0 0.625rem;
  border: 1px solid #e7e7e7;
  border-radius: 0.1875rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  color: #222;
}
.board-pager .pager-direct .pager-total {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.board-pager .pager-direct .pager-total:before {
  display: inline-flex;
  content: "/";
}
.board-pager .pager-direct .pager-sumbit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  box-sizing: border-box;
  padding: 0 0.75rem;
  border-radius: 0.3125rem;
  background-color: #fff;
  border: 1px solid var(--board-primary);
  color: var(--board-primary);
}
.board-pager .pager-direct .pager-sumbit:hover {
  border-color: #2B6DB3;
  background-color: #E3F0FF;
  color: #2B6DB3;
}
.board-pager .pager-direct .pager-sumbit:active {
  border-color: #1F4D87;
  background-color: #B2D4FF;
  color: #1F4D87;
}

.board-footer:has(.board-pager ~ .board-foot-buttons) {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.board-view .view-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem;
  min-height: 9.375rem;
  box-sizing: border-box;
  padding: 2.5rem 1.25rem;
  border-top: 2px solid #333;
  border-bottom: 1px solid #DADCDE;
}
.board-view .view-header ~ .view-attached {
  border-top: 0;
}
.board-view .view-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 0.3125rem;
  font-size: 2rem;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  word-break: keep-all;
  text-align: center;
}
.board-view .view-ttl .ttl-category {
  font-size: 1.375rem;
  color: var(--board-primary);
  font-weight: 500;
}
.board-view .view-ttl .ttl-txt {
  flex: 1 1 100%;
}
.board-view .view-state {
  display: flex;
  align-items: center;
  height: 1.875rem;
  box-sizing: border-box;
  padding: 0.375rem 0.75rem;
  border-radius: 0.125rem;
  border: 1px solid rgba(51, 54, 63, 0.6);
  font-size: 1rem;
  white-space: nowrap;
  color: #33363F;
}
.board-view .view-state.style--red {
  border-color: rgba(235, 42, 41, 0.6);
  color: #EB2A29;
}
.board-view .view-infos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  color: #666;
  letter-spacing: -0.01875rem;
}
.board-view .view-infos li {
  display: flex;
  gap: 1.375rem;
}
.board-view .view-infos .info-ttl {
  font-weight: 500;
  color: #222;
  letter-spacing: -0.09375rem;
}
.board-view .view-infos .info-conts {
  position: relative;
}
.board-view .view-infos .info-conts:before {
  position: absolute;
  top: 50%;
  left: -0.6875rem;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.0625rem;
  height: 0.75rem;
  background-color: #BEC2C8;
}
.board-view .view-attached {
  display: flex;
  border-top: 1px solid #DADCDE;
  border-bottom: 1px solid #DADCDE;
}
.board-view .view-attached:not(:has(.attached-file)) {
  display: none;
}
.board-view .view-attached .attached-head,
.board-view .view-attached .attached-body {
  padding: 1.5625rem;
}
.board-view .view-attached .attached-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  max-width: 25%;
}
.board-view .view-attached .attached-body {
  flex: 1;
}
.board-view .view-attached .attached-ttl {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #333;
  letter-spacing: -0.125rem;
}
.board-view .view-attached .attached-list {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.board-view .view-attached .attached-file {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: #666;
  letter-spacing: -0.01875rem;
}
.board-view .view-attached .attached-file:before {
  content: "";
  display: block;
  clear: both;
}
.board-view .view-attached .attached-file .file-ico {
  position: relative;
  display: block;
  float: left;
  width: 1.25rem;
  margin-right: 0.3125rem;
  text-indent: -9999px;
  overflow: hidden;
}
.board-view .view-attached .attached-file .file-ico:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../img/board/ico-clip.svg");
  background-size: 1.1875rem auto;
}
.board-view .view-attached .attached-file .file-name {
  display: block;
  overflow: hidden;
}
.board-view .view-attached .attached-file .file-name:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.board-view .view-editor {
  padding: 2.5rem;
  padding-bottom: 5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  letter-spacing: -0.01875rem;
  line-height: 1.5;
  word-break: keep-all;
}
.board-view .view-album {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 0;
}
.board-view .view-album .album-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 51.25rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1.875rem;
}
.board-view .view-album .album-banner .banner-set {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.board-view .view-album .album-banner .banner-main {
  width: 45rem;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.board-view .view-album .album-banner .banner-main .banner-container {
  width: 100%;
}
.board-view .view-album .album-banner .banner-main .banner-slide {
  width: 100%;
  box-sizing: border-box;
  padding: 1.25rem;
}
.board-view .view-album .album-banner .banner-main .banner-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  background: rgba(106, 106, 106, 0.9);
  box-shadow: 0.25rem 0.25rem 0.8125rem 0 rgba(0, 0, 0, 0.19);
}
.board-view .view-album .album-banner .banner-main .banner-image img {
  max-width: 100%;
  max-height: 100%;
}
.board-view .view-album .album-banner .banner-thumbs {
  width: 42.5rem;
  max-width: 100%;
  overflow: hidden;
}
.board-view .view-album .album-banner .banner-thumbs .banner-slide {
  width: auto;
}
.board-view .view-album .album-banner .banner-thumbs .banner-slide.is-active .banner-image {
  position: relative;
}
.board-view .view-album .album-banner .banner-thumbs .banner-slide.is-active .banner-image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0.125rem solid #222;
}
.board-view .view-album .album-banner .banner-thumbs .banner-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.75rem;
  aspect-ratio: 16/9;
  background: rgba(217, 217, 217, 0.9);
}
.board-view .view-album .album-banner .banner-thumbs .banner-image img {
  max-width: 100%;
  max-height: 100%;
}
.board-view .view-album .album-banner .banner-navi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 0;
}
.board-view .view-album .album-banner .banner-navi .navi-button {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid #BFBFBF;
  background: #FFF;
  background-repeat: no-repeat;
  background-size: 1.25rem auto;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
}
.board-view .view-album .album-banner .banner-navi .navi-button.navi-prev {
  transform: translate(-1.875rem, -50%);
  background-image: url("../../img/board/banner-prev.svg");
}
.board-view .view-album .album-banner .banner-navi .navi-button.navi-next {
  transform: translate(1.875rem, -50%);
  background-image: url("../../img/board/banner-next.svg");
}
.board-view .view-album .album-banner .banner-navi .navi-button.is--disabled {
  opacity: 0.3;
  cursor: default;
}
.board-view .view-response {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  margin-bottom: 3.125rem;
}
.board-view .view-response .response-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}
.board-view .view-response .response-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9375rem;
  font-size: 1rem;
}
.board-view .view-response .response-body {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
}
.board-view .view-response .response-foot {
  margin-top: 1.25rem;
}
.board-view .view-response .response-ttl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
  color: #222;
  line-height: 1;
}
.board-view .view-response .response-ttl .ttl-ico, .board-view .view-response .response-ttl .ttl-txt {
  display: inline-flex;
}
.board-view .view-response .response-ttl .ttl-ico img, .board-view .view-response .response-ttl .ttl-txt img {
  width: 1.5rem;
}
.board-view .view-response .response-view {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  padding: 1.875rem 1.25rem;
  border-radius: 0.5rem;
  background: #F7F8FB;
}
.board-view .view-response .response-comment {
  font-size: 1.0625rem;
  font-weight: 400;
  color: #555;
  letter-spacing: -0.01875rem;
  word-break: keep-all;
}
.board-view .view-response .response-attached .input-attached .attached-file {
  border: 1px solid #e7e7e7;
  background-color: #fff;
}
.board-view .view-response .response-attached .input-attached .attached-file .file-remove {
  display: none;
}

.board-navi {
  border-top: 1px solid #222;
  border-bottom: 1px solid #DADCDE;
  font-size: 1.125rem;
  font-weight: 400;
  color: #444;
  letter-spacing: -0.01875rem;
  line-height: 1.5;
  word-break: keep-all;
}
.board-navi li {
  display: flex;
  border-top: 1px solid #DADCDE;
}
.board-navi .navi-ttl {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 12.5rem;
  max-width: 25%;
  box-sizing: border-box;
  padding: 0 1.5625rem;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  color: #222;
}
.board-navi .navi-ttl .ttl-ico,
.board-navi .navi-ttl .ttl-txt {
  display: inline-flex;
}
.board-navi .navi-ttl .ttl-ico img,
.board-navi .navi-ttl .ttl-txt img {
  width: 1.5rem;
}
.board-navi .navi-link {
  display: flex;
  align-items: center;
  min-height: 5.625rem;
  box-sizing: border-box;
  padding: 0.625rem 1.25rem;
}
.board-navi .navi-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.board-write .write-form {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}
.board-write .write-form .form-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9375rem;
  font-size: 1rem;
}
.board-write .write-form .form-ttl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
  color: #222;
  line-height: 1;
}
.board-write .write-form .form-ttl .ttl-ico, .board-write .write-form .form-ttl .ttl-txt {
  display: inline-flex;
}
.board-write .write-form .form-ttl .ttl-ico img, .board-write .write-form .form-ttl .ttl-txt img {
  width: 1.5rem;
}
.board-write .write-form .form-ref {
  font-size: 1em;
  color: #EE2E5B;
}
.board-write .write-table table {
  width: 100%;
  border-top: 1px solid #8E98B4;
}
.board-write .write-table table th, .board-write .write-table table td {
  height: 4rem;
  box-sizing: border-box;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid #DADCDE;
  vertical-align: middle;
  font-size: 0.9375rem;
  font-weight: 400;
}
.board-write .write-table table th {
  padding: 0.625rem 1.25rem;
  background-color: #F7F8FB;
  font-size: 1.0625rem;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .board-write .write-table table, .board-write .write-table tbody, .board-write .write-table tr, .board-write .write-table th, .board-write .write-table td {
    display: block;
  }
  .board-write .write-table caption, .board-write .write-table colgroup {
    display: none;
  }
  .board-write .write-table table th, .board-write .write-table table td {
    height: auto;
  }
}

.board-security {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
  width: 43.125rem;
  max-width: 100%;
}
.board-security .security-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 10rem;
  height: 10rem;
  border: 1px solid #ccc;
  background-color: #F7F8F9;
  border-radius: 50%;
}
.board-security .security-ico img {
  width: 7.0625rem;
}
.board-security .security-ico .omks-icon {
  width: 6.25rem;
  height: 6.25rem;
}
.board-security .security-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem 1.25rem;
  padding: 1.875rem;
  border-radius: 0.3125rem;
  border: 1px solid #9EAFE3;
  background: #F7F8FB;
}
.board-security .security-confirm .confirm-ttl {
  display: inline-flex;
  white-space: nowrap;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01875rem;
  color: #222;
}
.board-security .security-confirm .input-text {
  flex: 1;
  width: 100%;
  max-width: 100%;
}
.board-security .security-confirm .input-ref {
  flex: 1 1 100%;
}
.board-security .security-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.board-security .security-guide p {
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.01875rem;
  line-height: 1.5;
  color: #333;
  word-break: keep-all;
  text-align: center;
}
.board-security .security-guide p b {
  font-weight: 700;
  color: var(--account-primary);
}

.board-comment {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}
.board-comment .comment-write {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  width: 100%;
}
.board-comment .comment-write .write-author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  order: 1;
}
.board-comment .comment-write .write-author .author-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  box-sizing: border-box;
  padding: 0.3125rem;
  border-radius: 50%;
  background-color: #E7E7E7;
  overflow: hidden;
}
.board-comment .comment-write .write-author .author-ico img {
  max-width: 100%;
  max-height: 100%;
}
.board-comment .comment-write .write-author .author-ico:not(:has(img)) {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../img/board/comment-default.svg");
  background-size: 2.5rem auto;
}
.board-comment .comment-write .write-author .author-name {
  font-size: 1.125Rem;
  letter-spacing: -0.125rem;
}
.board-comment .comment-write .write-submit {
  order: 2;
  margin-left: auto;
}
.board-comment .comment-write .write-textarea {
  display: flex;
  flex: 1 1 100%;
  width: 100%;
  order: 3;
}
.board-comment .comment-write .write-textarea textarea {
  width: 100%;
  min-height: 6.25rem;
  resize: vertical;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  padding: 1.25rem;
  border-radius: 0.375rem;
  border: 1px solid #DADCDE;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  letter-spacing: -0.01875rem;
  line-height: 1.5;
}
.board-comment .comment-write .write-textarea textarea::-moz-placeholder {
  font-weight: 300;
  color: #555;
}
.board-comment .comment-write .write-textarea textarea::placeholder {
  font-weight: 300;
  color: #555;
}
.board-comment .comment-write .write-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 7.5rem;
  height: 2.75rem;
  max-width: 100%;
  border-radius: 0.3125rem;
  border: 1px solid var(--board-primary);
  background-color: var(--board-primary);
  color: #fff;
  transition: all 0.2s ease;
}
.board-comment .comment-write .write-submit:hover {
  background-color: #296ED9;
}
.board-comment .comment-write .write-submit:active {
  background-color: #1b4da1;
}
.board-comment .comment-write .write-submit .button-txt {
  display: inline-flex;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01875rem;
}
.board-comment .comment-write .write-submit .button-ico {
  display: inline-flex;
}
.board-comment .comment-write .write-submit .button-ico img {
  width: 1.25rem;
}
.board-comment .comment-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #DADCDE;
}
.board-comment .comment-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  min-height: 5.9375rem;
  box-sizing: border-box;
  padding: 1.25rem;
  border-bottom: 1px solid #DADCDE;
}
.board-comment .comment-item.is-active .comment-from .from-name {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.board-comment .comment-item.is-active .comment-from .from-name:before {
  content: "내 댓글";
  font-size: 0.875rem;
  border-radius: 0.1875rem;
  padding: 0.125rem 0.25rem;
  background-color: #D0121B;
  color: #fff;
  line-height: 1;
  font-weight: 300;
}
.board-comment .comment-edit {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: flex;
  align-items: center;
}
.board-comment .comment-edit .edit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  background-color: #fff;
}
.board-comment .comment-edit .edit-button .button-txt {
  position: relative;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  overflow: hidden;
}
.board-comment .comment-edit .edit-button.edit-adjust .button-txt {
  background-repeat: no-repeat;
  background-image: url("../../img/board/ico-adjust.svg");
  background-size: 1.25rem auto;
  background-position: center;
}
.board-comment .comment-edit .edit-button.edit-adjust:hover .button-txt:after, .board-comment .comment-edit .edit-button.edit-adjust:focus .button-txt:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D0121B;
  mix-blend-mode: color;
  opacity: 0.6;
  pointer-events: none;
}
.board-comment .comment-edit .edit-button.edit-remove .button-txt {
  background-repeat: no-repeat;
  background-image: url("../../img/board/ico-remove.svg");
  background-size: 1.5rem auto;
  background-position: center;
}
.board-comment .comment-edit .edit-button.edit-remove:hover .button-txt:after, .board-comment .comment-edit .edit-button.edit-remove:focus .button-txt:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  mix-blend-mode: color;
  opacity: 0.6;
  pointer-events: none;
}
.board-comment .comment-from {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  letter-spacing: -0.01875rem;
}
.board-comment .comment-from .from-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #222;
}
.board-comment .comment-from .from-date {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #888;
}
.board-comment .comment-ment {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01875rem;
  word-break: keep-all;
}

/* 추가 커스텀 */
.board-list .list-header:has(.board-search) {
  display: flex;
  align-items: flex-end;
}
@media only screen and (max-width: 767px) {
  .board-list .list-header:has(.board-search) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9375rem;
  }
  .board-list .list-header:has(.board-search) .list-pager {
    order: 2;
  }
  .board-list .list-header:has(.board-search) .board-searhc {
    order: 1;
  }
}
.board-list .list-header:has(.board-search) .board-search {
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
}
@media only screen and (max-width: 767px) {
  .board-list .list-header:has(.board-search) .board-search {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3125rem;
    padding: 1.25rem;
    background-color: #f5f5f5;
  }
}
.board-list .list-album {
  padding-top: 1.875rem;
  margin-top: 0.9375rem;
  border-top: 2px solid #000;
}
.board-list .list-row-group {
  margin-top: 0.9375rem;
  border-top: 0.125rem solid #222;
}
@media only screen and (max-width: 767px) {
  .board-list .list-row-group {
    margin-top: 0;
  }
}
.board-list .list-row-group .row-item {
  display: grid;
  grid-template-columns: 6.25rem 1fr auto;
  align-items: center;
  gap: 1.875rem;
  min-height: 8.75rem;
  box-sizing: border-box;
  padding: 1.875rem;
  border-bottom: 1px solid #E0E0E0;
}
@media only screen and (max-width: 767px) {
  .board-list .list-row-group .row-item {
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: flex-start;
    min-height: auto;
    padding: 1.25rem 0.625rem;
  }
  .board-list .list-row-group .row-item.is-active {
    grid-template-columns: 3.75rem 1fr auto;
  }
  .board-list .list-row-group .row-item.is-active .item-order {
    align-self: center;
  }
}
.board-list .list-row-group .row-item.is-active .item-order {
  position: relative;
  display: inline-flex;
  justify-self: center;
  width: 3.75rem;
  height: 1.875rem;
  border-radius: 1.5625rem;
  background-color: #000;
  text-indent: -9999px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .board-list .list-row-group .row-item.is-active .item-order {
    justify-self: flex-start;
  }
}
.board-list .list-row-group .row-item.is-active .item-order:before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  content: "공지";
  font-size: 0.9375rem;
  font-weight: 400;
  color: #fff;
  text-indent: 0;
  text-align: center;
}
.board-list .list-row-group .row-item .item-order {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 500;
  color: #616161;
}
@media only screen and (max-width: 767px) {
  .board-list .list-row-group .row-item .item-order {
    display: none;
  }
}
.board-list .list-row-group .row-item .item-conts {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  overflow: hidden;
}
.board-list .list-row-group .row-item .item-conts:hover .item-ttl .ttl-txt, .board-list .list-row-group .row-item .item-conts:focus-within .item-ttl .ttl-txt {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.board-list .list-row-group .row-item .item-ttl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.03125rem;
}
@media only screen and (max-width: 767px) {
  .board-list .list-row-group .row-item .item-ttl {
    font-size: 1rem;
  }
}
.board-list .list-row-group .row-item .item-ttl .ttl-txt {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.board-list .list-row-group .row-item .item-ttl .item-new {
  flex: none;
}
.board-list .list-row-group .row-item .item-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  text-align: left;
  overflow: hidden;
}
.board-list .list-row-group .row-item .item-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background-color: var(--board-primary);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.board-list .list-row-group .row-item .item-infos {
  display: flex;
  gap: 1.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #9E9E9E;
}
@media only screen and (max-width: 767px) {
  .board-list .list-row-group .row-item .item-infos {
    font-size: 0.875rem;
  }
}
.board-list .list-row-group .row-item .item-infos li ~ li {
  position: relative;
}
.board-list .list-row-group .row-item .item-infos li ~ li:after {
  position: absolute;
  top: 50%;
  left: -0.75rem;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.0625rem;
  height: 0.625rem;
  background-color: #9E9E9E;
}
.board-list .list-row-group .row-item .item-attached {
  display: flex;
  position: relative;
}
.board-list .list-row-group .row-item .item-attached:has(.attached-button.is-active) .attached-layer {
  display: flex;
}
.board-list .list-row-group .row-item .item-attached .attached-button {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  gap: 0.25rem;
  align-items: center;
}
.board-list .list-row-group .row-item .item-attached .attached-button img {
  width: 1.125rem;
}
.board-list .list-row-group .row-item .item-attached .attached-button:hover, .board-list .list-row-group .row-item .item-attached .attached-button:focus {
  color: var(--board-primary);
}
.board-list .list-row-group .row-item .item-attached .attached-button .button-ico {
  width: 1.75rem;
  height: 1.75rem;
}
.board-list .list-row-group .row-item .item-attached .attached-layer {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  width: -moz-max-content;
  width: max-content;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0 0.8125rem 0 rgba(0, 0, 0, 0.09);
  display: none;
  transform: translateY(0.3125rem);
  animation: attachedFilesRending 0.3s ease 0s 1 alternate both;
}
@keyframes attachedFilesRending {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0.3125rem);
  }
}
.board-list .list-row-group .row-item .item-attached .attached-file {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 1.0625rem;
  font-weight: 400;
  color: #424242;
}
.board-list .list-row-group .row-item .item-attached .attached-file:hover {
  color: #222;
}
.board-list .list-combi {
  padding-top: 1.875rem;
  margin-top: 0.9375rem;
  border-top: 2px solid #000;
}
.board-list .list-combi .combi-list {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.board-list .list-combi .combi-item {
  position: relative;
  display: grid;
  grid-template-columns: 30rem 1fr;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .board-list .list-combi .combi-item {
    grid-template-columns: 23.75rem 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .board-list .list-combi .combi-item {
    grid-template-columns: 1fr;
  }
}
.board-list .list-combi .combi-item:hover .combi-ttl, .board-list .list-combi .combi-item:focus-within .combi-ttl {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.board-list .list-combi .combi-thumbs {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #f4f4f4;
  border-radius: 0.9375rem;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../img/common/logo.svg");
  background-size: 8.75rem auto;
}
.board-list .list-combi .combi-thumbs .thumbs-ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 70%;
  color: var(--white, #FFF);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.617px;
  word-break: keep-all;
}
.board-list .list-combi .combi-thumbs .thumbs-date {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}
.board-list .list-combi .combi-conts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 3.125rem 3.75rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .board-list .list-combi .combi-conts {
    padding: 1.25rem 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .board-list .list-combi .combi-conts {
    padding: 1.875rem 1.25rem 0;
  }
}
.board-list .list-combi .combi-ttl {
  display: inline;
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.025rem;
}
.board-list .list-combi .combi-pin {
  transform: translateY(-0.0625rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background-color: #222;
  height: 1.75rem;
  box-sizing: border-box;
  padding: 0 0.75rem;
  border-radius: 0.3125rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
}
.board-list .list-combi .combi-new {
  transform: translateY(-0.125rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background-color: var(--board-primary);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.board-list .list-combi .combi-paragraph {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  text-overflow: ellipsis;
  max-height: 4.375rem;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 400;
  color: #616161;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.board-list .list-combi .combi-infos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.board-list .list-combi .combi-infos li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: #9E9E9E;
}
.board-list .list-combi .combi-infos li ~ li {
  position: relative;
}
.board-list .list-combi .combi-infos li ~ li:after {
  position: absolute;
  top: 50%;
  left: -0.75rem;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.0625rem;
  height: 0.625rem;
  background-color: #9E9E9E;
}
.board-list .list-combi .combi-infos .info-label {
  color: #9E9E9E;
}
.board-list .list-combi .combi-infos .info-conts {
  color: #757575;
}
.board-list .list-combi .combi-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  overflow: hidden;
}

.board-view .view-news {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.25rem;
  margin: 0.625rem;
  background-color: #f4f4f4;
  border: 1px solid #dedede;
}
.board-view .news-link {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

/* Print */
/* 프린트 양식 */
.print-report {
  width: 794px;
  min-height: 1123px;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
@media print {
  .print-report {
    padding: 0;
    border: none;
  }
}
.print-report .report-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-height: 1123px;
}
.print-report .report-foot {
  margin-top: auto;
}
.print-report .report-table table {
  table-layout: fixed;
  width: 100%;
}
.print-report .report-table table th, .print-report .report-table table td {
  vertical-align: middle;
  height: 40px;
  box-sizing: border-box;
  padding: 5px 12px;
  border: 1px solid #555;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #555;
}
.print-report .report-table table th {
  padding: 0;
  background-color: #ddd;
  font-size: 16px;
  color: #333;
  line-height: 1.3;
  font-weight: 500;
}
.print-report .report-table table ~ table tr:first-child th, .print-report .report-table table ~ table tr:first-child td {
  border-top: 0;
}
.print-report .report-confirm .confirm-sign {
  position: relative;
}
.print-report .report-confirm .confirm-sign img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80px;
}

/* 개인정보 및 기업정보의 수집․이용․제공 동의서 */
.print-report.type-terms .report-title {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.print-report.type-terms .report-from {
  display: block;
  margin: 20px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-decoration: underline;
}
.print-report.type-terms .report-paragraph {
  font-size: 18px;
  font-weight: 500;
  color: #444;
  line-height: 1.5;
  word-break: keep-all;
}
.print-report.type-terms .report-table {
  margin-bottom: 20px;
}
.print-report.type-terms .report-table:last-child {
  margin-bottom: 0;
}
.print-report.type-terms .report-table .table-title {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #222;
}
.print-report.type-terms .report-table table th, .print-report.type-terms .report-table table td {
  font-size: 14px;
  color: #333;
}
.print-report.type-terms .report-stnc {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: left;
}
.print-report.type-terms .report-stnc:after {
  content: "";
  display: block;
  clear: both;
}
.print-report.type-terms .report-stnc .stnc-ico {
  float: left;
  margin-right: 5px;
}
.print-report.type-terms .report-stnc .stnc-txt {
  display: block;
  overflow: hidden;
}
.print-report.type-terms .report-confirm {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.print-report.type-terms .report-confirm .terms-confirm {
  width: 100%;
}
.print-report.type-terms .report-confirm .terms-confirm .confirm-set {
  display: flex;
  align-items: center;
  gap: 20px;
}
.print-report.type-terms .report-confirm .terms-confirm .confirm-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.print-report.type-terms .report-confirm .terms-confirm .confirm-name .name-inputs {
  letter-spacing: 5px;
}
.print-report.type-terms .report-confirm .terms-confirm .confirm-sign {
  position: relative;
  margin-left: auto;
  flex: none;
}
.print-report.type-terms .report-confirm .terms-confirm table {
  width: 100%;
}
.print-report.type-terms .report-confirm .terms-confirm table th {
  background-color: #ddd;
}
.print-report.type-terms .report-confirm .terms-confirm table th, .print-report.type-terms .report-confirm .terms-confirm table td {
  height: 38px;
  box-sizing: border-box;
  padding: 4px 12px;
  border: 1px solid #555;
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
}
.print-report.type-terms .report-confirm .confirm-date {
  margin-left: auto;
  flex: none;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 확약서 */
.print-report.type-comit .report-head {
  padding: 100px 0;
}
.print-report.type-comit .report-foot {
  padding: 100px 0;
}
.print-report.type-comit .report-title {
  font-size: 38px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.print-report.type-comit .report-paragraph {
  font-size: 24px;
  font-weight: 500;
  color: #444;
  line-height: 1.8;
  word-break: keep-all;
  text-align: center;
}
.print-report.type-comit .report-from {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  text-align: center;
  letter-spacing: 6px;
}
.print-report.type-comit .report-confirm {
  margin-bottom: 80px;
}
.print-report.type-comit .report-confirm .comit-confirm {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.print-report.type-comit .report-confirm .confirm-date {
  display: block;
  margin-bottom: 30px;
  font-size: 26px;
  font-weight: 400;
  color: #333;
  text-align: center;
}
.print-report.type-comit .report-confirm .confirm-set {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-left: 50%;
  font-size: 22px;
  font-weight: 600;
  color: #222;
}
.print-report.type-comit .report-confirm .confirm-name {
  display: flex;
  align-items: center;
  gap: 20px;
  letter-spacing: 5px;
}

/* 시제품 제작 지원 신청서 */
.print-report.type-prototype .report-foot {
  padding: 30px 0;
}
.print-report.type-prototype .report-title {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.print-report.type-prototype .report-title-label {
  font-size: 24px;
  font-weight: 600;
  color: #222;
  text-align: center;
}
.print-report.type-prototype .report-from {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  text-align: center;
  letter-spacing: 6px;
}
.print-report.type-prototype .report-confirm {
  display: flex;
  flex-direction: column;
}
.print-report.type-prototype .report-confirm .confirm-paragraph {
  display: block;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #444;
  line-height: 1.5;
  word-break: keep-all;
}
.print-report.type-prototype .report-confirm .confirm-date {
  display: block;
  margin-bottom: 50px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
}
.print-report.type-prototype .report-confirm .prototype-confirm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 20px;
}
.print-report.type-prototype .report-confirm .prototype-confirm .confirm-set {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  letter-spacing: 5px;
}
.print-report.type-prototype .report-confirm .prototype-confirm .confirm-name {
  display: flex;
  align-items: center;
  gap: 20px;
}
.print-report.type-prototype .report-table {
  margin-bottom: 20px;
}
.print-report.type-prototype .report-table:last-child {
  margin-bottom: 0;
}
.print-report.type-prototype .report-table .table-title {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #222;
}
.print-report.type-prototype .report-table .table-text.style-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
}
.print-report.type-prototype .report-table .table-text:has(.unit) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.print-report.type-prototype .report-table .table-text:has(.unit) .unit {
  font-size: 0.9em;
  font-weight: 400;
}
.print-report.type-prototype .report-table .table-paragraph {
  text-align: left;
  margin-bottom: 5px;
}
.print-report.type-prototype .report-table .table-paragraph:last-child {
  margin-bottom: 0;
}
.print-report.type-prototype .report-table .table-intable {
  margin-bottom: 10px;
}
.print-report.type-prototype .report-table .table-intable:last-child {
  margin-bottom: 0;
}
.print-report.type-prototype .report-table .table-intable table th, .print-report.type-prototype .report-table .table-intable table td {
  height: 28px;
  padding: 4px;
  font-size: 13px;
}

/* 장비공동활용 및 시험의뢰서 */
.print-report.type-request .report-title {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.print-report.type-request .request-checked-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
}
.print-report.type-request .report-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.print-report.type-request .report-from {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  text-align: center;
  letter-spacing: 3px;
}
.print-report.type-request .report-paragraph {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 400;
  color: #555;
}
.print-report.type-request .report-confirm {
  display: grid;
  grid-template-columns: auto auto auto;
  margin: 0 auto 30px;
  font-size: 20px;
  font-weight: 400;
  color: #333;
}
.print-report.type-request .report-confirm .confirm-set {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.print-report.type-request .report-confirm .confirm-name {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 2px;
}
.print-report.type-request .report-confirm .confirm-name .name-label {
  width: 100px;
  text-align: right;
  letter-spacing: 5px;
}
.print-report.type-request .report-confirm .confirm-name .confirm-sign {
  margin-left: 20px;
}
.print-report.type-request .report-confirm .confirm-sign {
  align-self: flex-end;
}
.print-report.type-request .report-table tfoot td[colspan] {
  padding: 30px 8px;
}
.print-report.type-request .table-paragraph {
  text-align: left;
}

/* 견적서 */
.print-report.type-estimate .report-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.print-report.type-estimate .report-logo {
  display: flex;
}
.print-report.type-estimate .report-logo img {
  max-width: 180px;
}
.print-report.type-estimate .report-title {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.print-report.type-estimate .report-confirm {
  display: flex;
  justify-content: flex-end;
}
.print-report.type-estimate .report-confirm table th, .print-report.type-estimate .report-confirm table td {
  height: 28px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  font-weight: 400;
  vertical-align: middle;
}
.print-report.type-estimate .report-confirm table .table-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.print-report.type-estimate .report-confirm .confirm-sign {
  display: flex;
  aspect-ratio: 1/1;
  width: 60px;
}
.print-report.type-estimate .report-info {
  display: grid;
  grid-template-columns: 50% 50%;
  margin-bottom: 10px;
}
.print-report.type-estimate .report-info .info-issuance {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.print-report.type-estimate .report-info .info-issuance .issuance-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
}
.print-report.type-estimate .report-info .info-issuance .issuance-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}
.print-report.type-estimate .report-info .info-issuance .issuance-list .item-label {
  display: flex;
  justify-content: space-between;
}
.print-report.type-estimate .report-info .info-issuance .issuance-name {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.print-report.type-estimate .report-info .info-issuance .issuance-name .name-space {
  position: relative;
  width: 120px;
  text-align: center;
}
.print-report.type-estimate .report-info .info-issuance .issuance-name .name-space:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: skewY(-0.01deg);
  width: 100%;
  height: 1px;
  background-color: #222;
}
.print-report.type-estimate .report-info .info-issuance .issuance-name .name-space input[type=text] {
  width: 100%;
  text-align: center;
}
.print-report.type-estimate .report-info .info-issuance .issuance-name .name-unit {
  font-size: 18px;
}
.print-report.type-estimate .report-info .info-org table {
  width: 100%;
}
.print-report.type-estimate .report-info .info-org table th, .print-report.type-estimate .report-info .info-org table td {
  height: 28px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid #555;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  vertical-align: middle;
  word-break: keep-all;
  line-height: 1.3;
}
.print-report.type-estimate .report-info .info-org table th {
  background-color: #ddd;
}
.print-report.type-estimate .report-price {
  display: grid;
  grid-template-columns: 40% 1fr;
  margin-bottom: 10px;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  font-size: 20px;
  font-weight: 400;
}
.print-report.type-estimate .report-price .price-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ddd;
}
.print-report.type-estimate .report-price .price-value {
  display: flex;
  align-items: center;
  justify-content: center;
}
.print-report.type-estimate .report-helper {
  padding-top: 10px;
  border-top: 2px solid #555;
  font-size: 15px;
  font-weight: 400;
  color: #444;
}
.print-report.type-estimate .report-stnc {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: left;
}
.print-report.type-estimate .report-stnc:after {
  content: "";
  display: block;
  clear: both;
}
.print-report.type-estimate .report-stnc .stnc-ico {
  float: left;
  margin-right: 5px;
}
.print-report.type-estimate .report-stnc .stnc-txt {
  display: block;
  overflow: hidden;
}
.print-report.type-estimate .report-etc {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
.print-report.type-estimate .report-etc .etc-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 10px;
  background-color: #ddd;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
}
.print-report.type-estimate .report-etc .etc-conts {
  padding: 5px 10px;
  font-size: 14px;
}

/* 시험 수수료 내역서 */
.print-report.type-fee .report-logo {
  display: flex;
}
.print-report.type-fee .report-logo img {
  max-width: 180px;
}
.print-report.type-fee .report-title {
  display: flex;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #222;
  text-align: center;
  line-height: 1;
  word-spacing: 5px;
  letter-spacing: 4px;
}
.print-report.type-fee .report-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  padding: 20px 0;
  border-top: 3px solid #2f75b5;
  border-bottom: 3px solid #2f75b5;
  margin-bottom: 15px;
  overflow: hidden;
}
.print-report.type-fee .report-info-grid .info-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
}
.print-report.type-fee .report-info-grid .info-item .item-label {
  display: flex;
}
.print-report.type-fee .report-info-grid .info-item .item-label:after {
  margin-left: auto;
  content: ":";
}
.print-report.type-fee .report-info-grid .info-item .item-conts {
  display: flex;
  align-items: center;
  gap: 10px;
}
.print-report.type-fee .report-confirm {
  display: flex;
  align-items: center;
  gap: 20px;
}
.print-report.type-fee .report-confirm .confirm-name {
  letter-spacing: 5px;
}
.print-report.type-fee .report-confirm .confirm-sign img {
  max-width: 50px;
}
.print-report.type-fee .report-price {
  margin-bottom: 15px;
  border: 1px solid #555;
}
@media print {
  .print-report.type-fee .report-price {
    padding: 1px;
  }
}
.print-report.type-fee .report-price table {
  width: 100%;
}
.print-report.type-fee .report-price table th, .print-report.type-fee .report-price table td {
  vertical-align: middle;
  text-align: left;
  height: 50px;
  box-sizing: border-box;
  padding: 0 10px;
}
.print-report.type-fee .report-price table th:last-child, .print-report.type-fee .report-price table td:last-child {
  border-left: 1px solid #555;
  text-align: center;
}
.print-report.type-fee .report-table {
  overflow: hidden;
}
@media print {
  .print-report.type-fee .report-table {
    padding: 1px;
  }
}
.print-report.type-fee .report-table tfoot th {
  background: none;
  letter-spacing: 5px;
}
.print-report.type-fee .report-table th.bt-none, .print-report.type-fee .report-table td.bt-none {
  border-top: none;
}
.print-report.type-fee .report-table th.bb-none, .print-report.type-fee .report-table td.bb-none {
  border-bottom: none;
}
.print-report.type-fee .report-stnc {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: left;
}
.print-report.type-fee .report-stnc:after {
  content: "";
  display: block;
  clear: both;
}
.print-report.type-fee .report-stnc .stnc-ico {
  float: left;
  margin-right: 5px;
}
.print-report.type-fee .report-stnc .stnc-txt {
  display: block;
  overflow: hidden;
}

/* 시험성적서 */
.print-report.type-result .report-head {
  border-top: 2px solid #222;
  border-bottom: 2px solid #222;
}
.print-report.type-result .report-stnc {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: left;
}
.print-report.type-result .report-stnc:after {
  content: "";
  display: block;
  clear: both;
}
.print-report.type-result .report-stnc .stnc-ico {
  float: left;
  margin-right: 5px;
}
.print-report.type-result .report-stnc .stnc-txt {
  display: block;
  overflow: hidden;
}
.print-report.type-result .report-paragraph {
  font-size: 14px;
}
.print-report.type-result .report-paragraph .report-stnc {
  margin-bottom: 5px;
}
.print-report.type-result .report-paragraph .report-stnc:last-child {
  margin-bottom: 0;
}
.print-report.type-result .report-paragraph .report-stnc .stnc-txt span {
  font-size: 0.9em;
}
.print-report.type-result .report-from {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.print-report.type-result .report-foot .report-confirm {
  display: flex;
  align-items: center;
  gap: 20px;
}
.print-report.type-result .report-foot .report-confirm .confirm-name {
  letter-spacing: 5px;
  word-spacing: 10px;
}
.print-report.type-result .report-foot .report-confirm .confirm-sign {
  font-size: 0.9em;
  font-weight: 500;
}
.print-report.type-result .report-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 30px;
  font-size: 22px;
  font-weight: 400;
  color: #222;
  word-spacing: 20px;
  letter-spacing: 2px;
}
.print-report.type-result .report-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
  background-color: #ddd;
  line-height: 1;
}
.print-report.type-result .report-title .title-kor {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 2px;
}
.print-report.type-result .report-title .title-eng {
  font-size: 20px;
  font-weight: 400;
}
.print-report.type-result .report-page-infos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 5px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}
.print-report.type-result .report-page-infos .info-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.print-report.type-result .report-page-infos .info-label {
  font-weight: 500;
}
.print-report.type-result .report-page-infos .info-conts {
  font-size: 14px;
}
.print-report.type-result .report-table {
  margin-bottom: 10px;
}
.print-report.type-result .report-table table {
  margin-bottom: 10px;
}
.print-report.type-result .report-table table.type-oneline {
  margin-top: 20px;
}
.print-report.type-result .report-table table:last-child {
  margin-bottom: 0;
}
.print-report.type-result .report-table th, .print-report.type-result .report-table td {
  border: none;
  text-align: left;
  font-weight: 400;
  color: #333;
}
.print-report.type-result .report-table th {
  padding: 0;
  padding-left: 5px;
  background: none;
  text-align: left;
  vertical-align: top;
  line-height: 1.1;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 600;
  color: #111;
}
.print-report.type-result .report-table th span {
  font-size: 0.825em;
}
.print-report.type-result .report-table .table-th {
  display: block;
  position: relative;
}
.print-report.type-result .report-table .table-th:after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: ":";
}
.print-report.type-result .report-table table.type-confirm th, .print-report.type-result .report-table table.type-confirm td {
  border: 1px solid #555;
  vertical-align: middle;
  text-align: center;
}
.print-report.type-result .report-table table.type-confirm th[rowspan] {
  text-align: left;
}
.print-report.type-result .report-table .report-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
}
.print-report.type-result .report-table .report-confirm .confirm-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.print-report.type-result .report-table .report-confirm .confirm-sign {
  margin-left: auto;
}
.print-report.type-result .report-table .report-confirm .confirm-sign img {
  max-width: 50px;
}

/* OMKS CSS framework Custom */
:root {
  --button-primary-fill: red;
}

/* 프레임워크 커스텀시 작성 */
.omks-icon.type-fill svg path {
  fill: currentColor !important;
  stroke: transparent !important;
}
.omks-icon.type-stroke svg path {
  fill: transparent !important;
  stroke: currentColor !important;
}

.omks-modal .modal-wrap {
  border: none;
  border-radius: 0;
}

/* 컨텐츠 템플릿 */
.contents-temp .temp-paragraph {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.contents-temp .temp-paragraph.style-em {
  font-size: 1.625rem;
  font-weight: 700;
  color: #222;
  word-spacing: 0.125rem;
  letter-spacing: -0.025rem;
  line-height: 2;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp .temp-paragraph.style-em {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-paragraph.style-em {
    font-size: 1.125rem;
  }
}
.contents-temp .temp-paragraph .word-break {
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp .temp-paragraph .word-break {
    display: inline;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-paragraph .word-break {
    display: inline;
  }
}
.contents-temp .temp-group {
  margin-bottom: 6.25rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-group {
    margin-bottom: 3.125rem;
  }
}
.contents-temp .temp-group:last-child {
  margin-bottom: 0;
}
.contents-temp .temp-group {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.contents-temp .temp-group .group-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.contents-temp .temp-ttl {
  font-size: 2.5Rem;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.05Rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-ttl {
    font-size: 1.625rem;
  }
}
.contents-temp .temp-foot-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
}
.contents-temp .temp-foot-buttons:has(.foot-gl ~ .foot-button) {
  justify-content: stretch;
}
.contents-temp .temp-foot-buttons:has(.foot-gl ~ .foot-button) .foot-gl + .foot-button {
  margin-left: auto;
}
.contents-temp .temp-foot-buttons:has(.foot-gl):not(:has(.foot-gl ~ .foot-button)) {
  justify-content: center;
}
.contents-temp .temp-foot-buttons .foot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 9.375rem;
  height: 3.75rem;
  max-width: 100%;
  border-radius: 0.3125rem;
  border: 1px solid var(--board-primary);
  background-color: var(--board-primary);
  color: #fff;
  transition: all 0.2s ease;
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-foot-buttons .foot-button {
    min-width: 6.25rem;
    height: 3rem;
    box-sizing: border-box;
    padding: 0 1rem;
  }
}
.contents-temp .temp-foot-buttons .foot-button:hover {
  background-color: #E3363E;
}
.contents-temp .temp-foot-buttons .foot-button:active {
  background-color: #A20E15;
}
.contents-temp .temp-foot-buttons .foot-button .button-txt {
  display: inline-flex;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01875rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-foot-buttons .foot-button .button-txt {
    font-size: 1rem;
  }
}
.contents-temp .temp-foot-buttons .foot-button .button-ico {
  display: inline-flex;
}
.contents-temp .temp-foot-buttons .foot-button .button-ico img {
  width: 1.25rem;
}
.contents-temp .temp-foot-buttons .foot-button.style--reverse {
  background-color: #fff;
  color: var(--board-primary);
}
.contents-temp .temp-foot-buttons .foot-button.style--reverse:hover {
  border-color: #2B6DB3;
  background-color: #E3F0FF;
  color: #2B6DB3;
}
.contents-temp .temp-foot-buttons .foot-button.style--reverse:active {
  border-color: #1F4D87;
  background-color: #B2D4FF;
  color: #1F4D87;
}
.contents-temp .temp-foot-buttons .foot-button.style--system {
  background-color: #262A37;
  border-color: #262A37;
  color: #fff;
}
.contents-temp .temp-foot-buttons .foot-button.style--system:hover {
  background-color: rgb(27.5806451613, 30.4838709677, 39.9193548387);
  border-color: rgb(27.5806451613, 30.4838709677, 39.9193548387);
}
.contents-temp .temp-foot-buttons .foot-button.style--system:active {
  background-color: rgb(17.1612903226, 18.9677419355, 24.8387096774);
  border-color: rgb(17.1612903226, 18.9677419355, 24.8387096774);
}
.contents-temp .temp-foot-buttons .foot-button.style--void {
  background-color: #fff;
  border-color: #888CA0;
  color: #888CA0;
}
.contents-temp .temp-foot-buttons .foot-button.style--void:hover {
  background-color: white;
  border-color: rgb(108.761682243, 113.3411214953, 136.238317757);
}
.contents-temp .temp-foot-buttons .foot-button.style--void:active {
  background-color: white;
  border-color: rgb(97.441588785, 101.5443925234, 122.058411215);
}
.contents-temp .temp-foot-buttons .foot-button.style--neg {
  background-color: #fff;
  border-color: #EB2A29;
  color: #EB2A29;
}
.contents-temp .temp-foot-buttons .foot-button.style--neg:hover {
  background-color: rgb(254.6153846154, 250.9038461538, 250.8846153846);
  border-color: rgb(229.0897435897, 22.4807692308, 21.4102564103);
}
.contents-temp .temp-foot-buttons .foot-button.style--neg:active {
  background-color: rgb(252.4358974359, 227.6923076923, 227.5641025641);
  border-color: rgb(205.7692307692, 20.1923076923, 19.2307692308);
}
.contents-temp .temp-foot-buttons .foot-button.style--disabled {
  background-color: #F4F6FA;
  border-color: #DBE0E7;
  color: #B4C0D3;
  cursor: default;
  outline: none;
}
.contents-temp .temp-hero {
  position: relative;
  padding: 7.1875rem 0;
  transform: translateY(-5rem);
  margin-bottom: 1.25Rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-hero {
    padding: 1.875rem 0;
    transform: translateY(-1.875rem);
  }
}
.contents-temp .temp-hero .temp-paragraph {
  font-size: 1.5rem;
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.8;
  text-align: center;
  color: #fff;
  letter-spacing: -0.025rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp .temp-hero .temp-paragraph {
    font-size: 1rem;
  }
}
.contents-temp .temp-hero .hero-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100%;
}
.contents-temp .temp-hero .hero-background:after {
  content: "";
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.contents-temp .temp-hero .hero-conts {
  position: relative;
  z-index: 1;
}

.contents-temp.type-kp .temp-paragraph {
  margin-bottom: 5.625rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-kp .temp-paragraph {
    margin-bottom: 3.75rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .temp-paragraph {
    margin-bottom: 2.5rem;
  }
}
.contents-temp.type-kp .kp-tab {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.75rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-kp .kp-tab {
    margin-bottom: 2.8125rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .kp-tab {
    margin-bottom: 1.875rem;
  }
}
.contents-temp.type-kp .kp-tab .tab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 8.75rem;
  height: 3.625rem;
  box-sizing: border-box;
  padding: 0 1.75rem;
  border-radius: 3.125rem;
  border: 1px solid var(--gray300, #E0E0E0);
  background: var(--white, #FFF);
  font-size: 1.125rem;
  font-weight: 400;
  color: #9E9E9E;
  letter-spacing: -0.025rem;
  word-break: keep-all;
  text-align: center;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .kp-tab .tab-button {
    min-width: 5.625rem;
    height: 2.625rem;
    padding: 0 0.875rem;
    font-size: 0.9375rem;
  }
}
.contents-temp.type-kp .kp-tab .tab-button:hover, .contents-temp.type-kp .kp-tab .tab-button:focus {
  border-color: var(--onmakers-primary);
  color: var(--onmakers-primary);
  font-weight: 500;
}
.contents-temp.type-kp .kp-tab .tab-button.is-active {
  background-color: var(--onmakers-primary);
  color: #fff;
  font-weight: 600;
}
.contents-temp.type-kp .kp-gallery.type-ca .gallery-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 3.75rem 1.5rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .kp-gallery.type-ca .gallery-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contents-temp.type-kp .kp-gallery.type-dc .gallery-list {
  grid-template-columns: repeat(3, 1fr);
  gap: 3.75rem 1.5rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .kp-gallery.type-dc .gallery-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contents-temp.type-kp .kp-gallery.type-dc .gallery-thumbs {
  aspect-ratio: 16/10;
}
.contents-temp.type-kp .kp-gallery .gallery-list {
  display: grid;
}
.contents-temp.type-kp .kp-gallery .gallery-item {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .kp-gallery .gallery-item {
    gap: 0.9375Rem;
  }
}
.contents-temp.type-kp .kp-gallery .gallery-item:hover .gallery-thumbs .thumbs-cover, .contents-temp.type-kp .kp-gallery .gallery-item:focus-within .gallery-thumbs .thumbs-cover {
  opacity: 1;
  visibility: visible;
}
.contents-temp.type-kp .kp-gallery .gallery-thumbs {
  position: relative;
  aspect-ratio: 4/5;
  box-sizing: border-box;
  border: 1px solid #BDBDBD;
  background-color: #f4f4f4;
  background-repeat: no-repeat;
  background-image: url("../../img/common/logo.svg");
  background-size: 8.75rem auto;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
}
.contents-temp.type-kp .kp-gallery .gallery-thumbs img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: 100%;
}
.contents-temp.type-kp .kp-gallery .gallery-thumbs .thumbs-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}
.contents-temp.type-kp .kp-gallery .gallery-thumbs .thumbs-cover svg, .contents-temp.type-kp .kp-gallery .gallery-thumbs .thumbs-cover img {
  position: relative;
  top: initial;
  left: inherit;
  transform: translate(0);
  width: 12.5rem;
  height: auto;
  min-width: auto;
  max-width: 90%;
}
.contents-temp.type-kp .kp-gallery .gallery-conts {
  display: flex;
  flex-direction: column;
  gap: 0.3125Rem;
}
.contents-temp.type-kp .kp-gallery .gallery-ttl {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-kp .kp-gallery .gallery-ttl {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .kp-gallery .gallery-ttl {
    font-size: 1.125rem;
  }
}
.contents-temp.type-kp .kp-gallery .gallery-infos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
@media only screen and (max-width: 479px) {
  .contents-temp.type-kp .kp-gallery .gallery-infos {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}
.contents-temp.type-kp .kp-gallery .gallery-infos li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: #9E9E9E;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-kp .kp-gallery .gallery-infos li {
    font-size: 0.875rem;
  }
}
.contents-temp.type-kp .kp-gallery .gallery-infos li ~ li {
  position: relative;
}
.contents-temp.type-kp .kp-gallery .gallery-infos li ~ li:after {
  position: absolute;
  top: 50%;
  left: -0.75rem;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.0625rem;
  height: 0.625rem;
  background-color: #9E9E9E;
}
@media only screen and (max-width: 479px) {
  .contents-temp.type-kp .kp-gallery .gallery-infos li ~ li:after {
    content: none;
  }
}

.contents-temp.type-inquire {
  color: #1E2124;
}
.contents-temp.type-inquire .inquire-head {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1.875Rem;
  border-bottom: 1px solid #222;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-inquire .inquire-head {
    display: block;
    padding-bottom: 0.9375rem;
  }
}
.contents-temp.type-inquire .inquire-head .temp-paragraph {
  line-height: 1.5;
}
.contents-temp.type-inquire .inquire-head .require-guide {
  margin-left: auto;
}
.contents-temp.type-inquire .inquire-foot {
  display: flex;
  align-items: center;
  margin-top: 1.875rem;
}
.contents-temp.type-inquire .inquire-foot .temp-foot-buttons {
  margin-left: auto;
}
.contents-temp.type-inquire .require-guide {
  font-size: 1rem;
  font-weight: 400;
  color: #616161;
}
.contents-temp.type-inquire .require-mark {
  color: var(--onmakers-primary);
}
.contents-temp.type-inquire .inquire-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.25rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid #E0E0E0;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-inquire .inquire-form .form-row {
    grid-template-columns: 1fr;
  }
}
.contents-temp.type-inquire .inquire-form .form-cell.col-2-span {
  grid-column: span 2;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-inquire .inquire-form .form-cell.col-2-span {
    grid-column: 1;
  }
}
.contents-temp.type-inquire .inquire-form .form-cell.type-row {
  display: flex;
  align-items: center;
  gap: 4.0625rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-inquire .inquire-form .form-cell.type-row {
    flex-direction: column;
    align-items: inherit;
    gap: 0.9375rem;
  }
}
.contents-temp.type-inquire .inquire-form .form-cell.type-row .cell-label {
  flex: none;
  margin-bottom: 0;
}
.contents-temp.type-inquire .inquire-form .form-cell.type-row .cell-conts {
  flex: 1;
}
.contents-temp.type-inquire .inquire-form .form-cell .cell-label {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.3125rem;
  font-size: 1.25Rem;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.025rem;
  vertical-align: middle;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-inquire .inquire-form .form-cell .cell-label {
    font-size: 1.125rem;
  }
}
.contents-temp.type-inquire .inquire-form .form-cell .input-text {
  max-width: 100%;
  height: 3.125rem;
}
.contents-temp.type-inquire .inquire-form .form-cell .input-text,
.contents-temp.type-inquire .inquire-form .form-cell .input-select,
.contents-temp.type-inquire .inquire-form .form-cell .input-textarea {
  background-color: #F8F9FB;
  border-color: #EDEEF2;
}
.contents-temp.type-inquire .inquire-form .form-cell .input-text::-moz-placeholder, .contents-temp.type-inquire .inquire-form .form-cell .input-select::-moz-placeholder, .contents-temp.type-inquire .inquire-form .form-cell .input-textarea::-moz-placeholder {
  color: #9c9c9c;
}
.contents-temp.type-inquire .inquire-form .form-cell .input-text::placeholder,
.contents-temp.type-inquire .inquire-form .form-cell .input-select::placeholder,
.contents-temp.type-inquire .inquire-form .form-cell .input-textarea::placeholder {
  color: #9c9c9c;
}
.contents-temp.type-inquire .inquire-form .form-cell .input-text:focus,
.contents-temp.type-inquire .inquire-form .form-cell .input-select:focus,
.contents-temp.type-inquire .inquire-form .form-cell .input-textarea:focus {
  background-color: #fdfdfd;
}
.contents-temp.type-inquire .inquire-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.1875rem 0;
}
.contents-temp.type-inquire .inquire-chips .chip-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  box-sizing: border-box;
  padding: 0 1.25rem;
  border-radius: 3.125rem;
  border: 1px solid var(--gray300, #E0E0E0);
  background: var(--white, #FFF);
  font-size: 1rem;
  font-weight: 400;
  color: #9E9E9E;
  letter-spacing: -0.025rem;
  word-break: keep-all;
  text-align: center;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-inquire .inquire-chips .chip-button {
    height: 2.625rem;
    font-size: 0.9375rem;
  }
}
.contents-temp.type-inquire .inquire-chips .chip-button:hover, .contents-temp.type-inquire .inquire-chips .chip-button:focus {
  border-color: var(--onmakers-primary);
  color: var(--onmakers-primary);
  font-weight: 500;
}
.contents-temp.type-inquire .inquire-chips .chip-button.is-active {
  background-color: var(--onmakers-primary);
  color: #fff;
  font-weight: 600;
}
.contents-temp.type-inquire .inquire-editor textarea, .contents-temp.type-inquire .inquire-editor .input-textarea {
  min-height: 18.75rem;
}
.contents-temp.type-inquire .inquire-agree {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contents-temp.type-inquire .inquire-agree .agree-doc {
  height: 9.375rem;
  box-sizing: border-box;
  padding: 1.75rem;
  border-radius: 0.25rem;
  border: 1px solid #EDEEF2;
  background: #F8F9FB;
  overflow-y: auto;
  font-size: 1rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-inquire .inquire-agree .agree-doc {
    padding: 1.125rem;
    font-size: 0.9375rem;
  }
}
.contents-temp.type-client {
  position: relative;
}
.contents-temp.type-client:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(10Rem);
  content: "";
  width: 100vw;
  height: 55.625rem;
  background: linear-gradient(180deg, #FFF 0%, #F1F3F7 100%);
  pointer-events: none;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-client:after {
    transform: translateX(-50%) translateY(5Rem);
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client:after {
    transform: translateX(-50%) translateY(5Rem);
  }
}
.contents-temp.type-client .temp-ttl {
  font-size: 2.25rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .temp-ttl {
    font-size: 1.625rem;
  }
}
.contents-temp.type-client .temp-group .group-head {
  justify-content: center;
}
.contents-temp.type-client .client-inner {
  position: relative;
  z-index: 1;
}
.contents-temp.type-client .client-advt {
  position: relative;
  display: grid;
  grid-template-columns: 30rem 1fr;
  padding: 7.5rem 0;
  margin: 3.75rem 0 6.25rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-client .client-advt {
    gap: 1.25Rem;
    grid-template-columns: 1fr;
    padding: 5rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-advt {
    gap: 1.25Rem;
    grid-template-columns: 1fr;
    padding: 2.5rem 0;
    margin: 1.875rem 0 3.125rem;
  }
}
.contents-temp.type-client .client-advt .advt-background {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../../img/contents/client-background.png");
  background-size: cover;
}
.contents-temp.type-client .client-advt .advt-ttl,
.contents-temp.type-client .client-advt .advt-list {
  position: relative;
  z-index: 1;
}
.contents-temp.type-client .client-advt .advt-ttl {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.04375rem;
  line-height: 1.5;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-advt .advt-ttl {
    font-size: 1.375rem;
  }
}
.contents-temp.type-client .client-advt .advt-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-advt .advt-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contents-temp.type-client .client-advt .advt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 5.625rem;
  box-sizing: border-box;
  padding: 0.625rem 1.25rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.2);
  font-size: 1.25Rem;
  font-weight: 500;
  letter-spacing: -0.025rem;
  color: #fff;
  word-break: keep-all;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-advt .advt-box {
    border-radius: 0.625rem;
    font-size: 1rem;
  }
}
.contents-temp.type-client .client-advt .advt-box .box-ico,
.contents-temp.type-client .client-advt .advt-box .box-txt {
  display: flex;
}
.contents-temp.type-client .client-type {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 77.5rem;
  max-width: 100%;
  margin: 0 auto;
  transform: translateX(3.125rem);
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-type {
    grid-template-columns: repeat(2, 1fr);
    transform: translateX(0.625rem);
  }
}
.contents-temp.type-client .client-type .type-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.125rem;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  word-break: keep-all;
  overflow: hidden;
}
.contents-temp.type-client .client-type .type-circle:nth-child(1) {
  transform: translateX(-1.25rem);
  background-image: url("../../img/contents/client-type_01.png");
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-type .type-circle:nth-child(1) {
    transform: translateX(0);
  }
}
.contents-temp.type-client .client-type .type-circle:nth-child(2) {
  transform: translateX(-2.5rem);
  background-image: url("../../img/contents/client-type_02.png");
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-type .type-circle:nth-child(2) {
    transform: translateX(0);
  }
}
.contents-temp.type-client .client-type .type-circle:nth-child(3) {
  transform: translateX(-3.75rem);
  background-image: url("../../img/contents/client-type_03.png");
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-type .type-circle:nth-child(3) {
    transform: translateX(0);
  }
}
.contents-temp.type-client .client-type .type-circle:nth-child(4) {
  transform: translateX(-5rem);
  background-image: url("../../img/contents/client-type_04.png");
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-type .type-circle:nth-child(4) {
    transform: translateX(0);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-client .client-type .type-circle {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-type .type-circle {
    transform: translateX(0);
    font-size: 1.25rem;
  }
  .contents-temp.type-client .client-type .type-circle:nth-child(2n) {
    transform: translateX(-1.25rem);
  }
  .contents-temp.type-client .client-type .type-circle:nth-child(3) {
    transform: translateY(-1.25rem);
  }
  .contents-temp.type-client .client-type .type-circle:nth-child(4) {
    transform: translateX(-1.25rem) translateY(-1.25rem);
  }
}
.contents-temp.type-client .client-partners {
  position: relative;
  padding-bottom: 21.875rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-partners {
    padding-bottom: 12.5rem;
  }
}
.contents-temp.type-client .client-partners .temp-paragraph {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.8;
  color: #616161;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-partners .temp-paragraph {
    font-size: 1rem;
  }
}
.contents-temp.type-client .client-partners .partners-banner-group {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  margin-top: 5rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-partners .partners-banner-group {
    margin-top: 2.5rem;
  }
}
.contents-temp.type-client .client-partners .partners-banner-group .partners-banner {
  margin-bottom: 1.25rem;
}
.contents-temp.type-client .client-partners .partners-banner-group .partners-banner:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .contents-temp.type-client .client-partners .partners-banner .banner-wrapper {
    transition-duration: 12000ms !important;
  }
}
.contents-temp.type-client .client-partners .partners-banner .banner-slide {
  width: 20rem;
  box-sizing: border-box;
  padding: 0 0.625rem;
  flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-partners .partners-banner .banner-slide {
    width: 11.25rem;
  }
}
.contents-temp.type-client .client-partners .partners-banner .banner-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7.1875rem;
  border-radius: 1.25Rem;
  background: #FFF;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-client .client-partners .partners-banner .banner-image {
    height: 4.375rem;
    border-radius: 0.625Rem;
  }
}

.contents-temp.type-load .load-map {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  position: relative;
  padding-right: 15.625rem;
  padding-bottom: 3.125rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-load .load-map {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-map {
    padding: 0;
  }
}
.contents-temp.type-load .load-map .map-frame {
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: 1.875rem;
  overflow: hidden;
  background-color: #f4f4f4;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-load .load-map .map-frame {
    aspect-ratio: 16/9;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-map .map-frame {
    aspect-ratio: 4/3;
  }
}
.contents-temp.type-load .load-map .map-frame .map-api {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}
.contents-temp.type-load .load-card {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  width: 37.5rem;
  max-width: 100%;
  aspect-ratio: 16/9;
  padding: 4.25rem 3rem;
  border-radius: 1.875rem;
  background-color: #D0121B;
  background-repeat: no-repeat;
  background-image: url("../../img/contents/load-card-background.svg");
  background-size: 12.5rem auto;
  background-position: right 3rem bottom 4.25rem;
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-load .load-card {
    position: relative;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-card {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    padding: 2.375rem 1.5rem;
    background-size: 8.75rem auto;
    background-position: right 1.75rem bottom 2.375rem;
  }
}
.contents-temp.type-load .load-card .card-ttl {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.625rem;
  font-weight: 800;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-card .card-ttl {
    font-size: 1.25rem;
  }
}
.contents-temp.type-load .load-card .card-ttl .ttl-ico,
.contents-temp.type-load .load-card .card-ttl .ttl-txt {
  display: flex;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-card .card-ttl .ttl-ico img, .contents-temp.type-load .load-card .card-ttl .ttl-ico svg,
  .contents-temp.type-load .load-card .card-ttl .ttl-txt img,
  .contents-temp.type-load .load-card .card-ttl .ttl-txt svg {
    width: 1.5rem;
  }
}
.contents-temp.type-load .load-contact {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  font-size: 1.25Rem;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-contact {
    font-size: 1rem;
  }
}
.contents-temp.type-load .load-contact li:after {
  display: block;
  clear: both;
  content: "";
}
.contents-temp.type-load .load-contact .contact-label {
  float: left;
  min-width: 6.25rem;
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25Rem;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-contact .contact-label {
    display: block;
    float: none;
  }
}
.contents-temp.type-load .load-contact .contact-label .label-ico {
  display: flex;
  align-items: center;
}
.contents-temp.type-load .load-contact .contact-conts {
  display: block;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.contents-temp.type-load .load-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10Rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  background-color: #000;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01875rem;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-load .load-link {
    margin-top: 0.625rem;
    width: 7.5Rem;
    height: 3rem;
    font-size: 1rem;
  }
}

.contents-temp.type-tech .tech-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.75rem;
  margin-top: 3.75rem;
}
@media only screen and (min-width: 1081px) and (max-width: 1279px) {
  .contents-temp.type-tech .tech-list {
    gap: 1.875rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-tech .tech-list {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-tech .tech-list {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}
.contents-temp.type-tech .tech-item {
  position: relative;
  aspect-ratio: 1.67/1;
  border-radius: 1.875rem 1.875rem 0 0;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-tech .tech-item {
    aspect-ratio: inherit;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-tech .tech-item {
    border-radius: 1.25rem 1.25rem 0 0;
  }
}
.contents-temp.type-tech .tech-item:hover .item-background svg circle, .contents-temp.type-tech .tech-item:focus-within .item-background svg circle {
  transition: all 0.2s ease;
  fill: var(--board-primary) !important;
}
.contents-temp.type-tech .tech-item:hover .item-cover, .contents-temp.type-tech .tech-item:focus-within .item-cover {
  transform: translateY(10%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.contents-temp.type-tech .tech-item:hover .item-hover, .contents-temp.type-tech .tech-item:focus-within .item-hover {
  transform: translateY(0%);
  opacity: 1;
  visibility: visible;
  pointer-events: inherit;
}
.contents-temp.type-tech .tech-item.is-active .item-background svg circle {
  transition: all 0.2s ease;
  fill: var(--board-primary) !important;
}
.contents-temp.type-tech .tech-item.is-active .item-cover {
  transform: translateY(10%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.contents-temp.type-tech .tech-item.is-active .item-hover {
  transform: translateY(0%);
  opacity: 1;
  visibility: visible;
  pointer-events: inherit;
}
.contents-temp.type-tech .tech-item .item-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 3.75rem;
  transition: all 0.2s ease;
}
.contents-temp.type-tech .tech-item .item-cover .cover-ttl {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03125rem;
}
.contents-temp.type-tech .tech-item .item-cover .cover-ttl .ttl-eng {
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
}
.contents-temp.type-tech .tech-item .item-cover .cover-ttl .ttl-eng .word-break {
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-tech .tech-item .item-cover {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-tech .tech-item .item-cover {
    display: none;
  }
}
.contents-temp.type-tech .tech-item .item-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3.75rem;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  transform: translateY(10%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-tech .tech-item .item-hover {
    position: relative;
    transform: translateY(0%);
    opacity: 1;
    visibility: visible;
    pointer-events: inherit;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-tech .tech-item .item-hover {
    position: relative;
    padding: 1.25rem 2rem;
    padding-right: 0;
    gap: 0.9375rem;
    transform: translateY(0%);
    opacity: 1;
    visibility: visible;
    pointer-events: inherit;
  }
}
.contents-temp.type-tech .tech-item .item-background {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 100%;
}
.contents-temp.type-tech .tech-item .item-background svg {
  display: block;
  width: 100%;
  height: 100%;
}
.contents-temp.type-tech .tech-item .item-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.contents-temp.type-tech .tech-ttl {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.0625Rem;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-tech .tech-ttl {
    font-size: 1.625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-tech .tech-ttl {
    gap: 0.625rem;
    font-size: 1.25rem;
  }
}
.contents-temp.type-tech .tech-ttl .ttl-ico,
.contents-temp.type-tech .tech-ttl .ttl-txt {
  display: flex;
}
.contents-temp.type-tech .tech-ttl .ttl-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.625rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-tech .tech-ttl .ttl-ico {
    width: 2rem;
  }
  .contents-temp.type-tech .tech-ttl .ttl-ico svg, .contents-temp.type-tech .tech-ttl .ttl-ico img {
    width: 1rem;
  }
}
.contents-temp.type-tech .tech-infos {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025rem;
  color: #fff;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-tech .tech-infos {
    font-size: 0.9375Rem;
  }
}
.contents-temp.type-tech .tech-infos .info-ico {
  position: relative;
  float: left;
  width: 0.25rem;
  margin-right: 0.75rem;
  text-indent: -9999px;
  overflow: hidden;
}
.contents-temp.type-tech .tech-infos .info-ico:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.25rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--board-primary);
}
.contents-temp.type-tech .tech-infos .info-txt {
  display: block;
  overflow: hidden;
}

.contents-temp.type-business .temp-hero .hero-background {
  background-image: url("../../img/contents/business-hero.png");
  background-position: center;
  background-size: cover;
}
.contents-temp.type-business .temp-hero .hero-background:after {
  content: "";
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.contents-temp.type-business .business-acordi {
  border-top: 1px solid #222;
}
.contents-temp.type-business .business-acordi .acordi-row {
  border-bottom: 1px solid #E0E0E0;
}
.contents-temp.type-business .business-acordi .acordi-head {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 7.8125rem;
  box-sizing: border-box;
  padding: 1.25rem 2.5rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-head {
    min-height: auto;
    padding: 1.25rem;
    padding-right: 5rem;
  }
}
.contents-temp.type-business .business-acordi .acordi-body {
  display: none;
  padding: 2.5rem;
  border-top: 1px solid #E0E0E0;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-body {
    padding: 1.25rem;
  }
}
.contents-temp.type-business .business-acordi .acordi-card {
  display: grid;
  grid-template-columns: 31.25rem 1fr;
  gap: 3.75rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-business .business-acordi .acordi-card {
    grid-template-columns: 13.75rem 1fr;
    gap: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-card {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}
.contents-temp.type-business .business-acordi .acordi-card .card-thumbs {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 1.25rem;
  background-color: #f4f4f4;
  overflow: hidden;
}
.contents-temp.type-business .business-acordi .acordi-card .card-thumbs img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  min-width: 100%;
}
.contents-temp.type-business .business-acordi .acordi-card .card-conts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 3.125rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-business .business-acordi .acordi-card .card-conts {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-card .card-conts {
    padding: 0;
  }
}
.contents-temp.type-business .business-acordi .acordi-card .card-ttl {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  word-break: keep-all;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-business .business-acordi .acordi-card .card-ttl {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-card .card-ttl {
    font-size: 1.125rem;
  }
}
.contents-temp.type-business .business-acordi .acordi-card .card-infos {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025rem;
  color: #424242;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-card .card-infos {
    font-size: 0.9375Rem;
  }
}
.contents-temp.type-business .business-acordi .acordi-card .card-infos .info-ico {
  position: relative;
  float: left;
  width: 0.25rem;
  margin-right: 0.75rem;
  text-indent: -9999px;
  overflow: hidden;
}
.contents-temp.type-business .business-acordi .acordi-card .card-infos .info-ico:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.25rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--board-primary);
}
.contents-temp.type-business .business-acordi .acordi-card .card-infos .info-txt {
  display: block;
  overflow: hidden;
}
.contents-temp.type-business .business-acordi .acordi-card .card-infos li:not(:has(.info-ico)) {
  padding-left: 1.125rem;
  font-size: 0.925em;
}
.contents-temp.type-business .business-acordi .acordi-ttl {
  font-size: 1.75rem;
  font-weight: 700;
  color: #222;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-business .business-acordi .acordi-ttl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-ttl {
    font-size: 1.25rem;
  }
}
.contents-temp.type-business .business-acordi .acordi-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 2.5rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-business .business-acordi .acordi-button {
    padding: 0 1.25rem;
  }
}
.contents-temp.type-business .business-acordi .acordi-button .button-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  aspect-ratio: 1/1;
  background-color: #000;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.2s ease;
}
.contents-temp.type-business .business-acordi .acordi-button .button-ico.type-minus {
  display: none;
}
.contents-temp.type-business .business-acordi .acordi-button:hover .button-ico, .contents-temp.type-business .business-acordi .acordi-button:focus .button-ico {
  background-color: var(--board-primary);
}
.contents-temp.type-business .business-acordi .acordi-row:has(.acordi-button.is-active) .acordi-button .button-ico.type-plus {
  display: none;
}
.contents-temp.type-business .business-acordi .acordi-row:has(.acordi-button.is-active) .acordi-button .button-ico.type-minus {
  display: flex;
}
.contents-temp.type-business .business-acordi .acordi-row:has(.acordi-button.is-active) .acordi-body {
  display: block;
}

.contents-temp.type-org .temp-paragraph {
  margin-bottom: 3.75rem;
}
.contents-temp.type-org .temp-group .group-head {
  justify-content: center;
}
.contents-temp.type-org .org-map {
  position: relative;
  padding: 6.25rem 0;
  margin-bottom: 6.25Rem;
  background-color: #F8F7F7;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-map {
    padding: 3.75rem 0;
    margin-bottom: 3.75rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map {
    padding: 3.75rem 0;
    margin-bottom: 3.125rem;
  }
}
.contents-temp.type-org .org-map .map-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100%;
  background-color: #F8F7F7;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-background {
    background-repeat: no-repeat;
    background-image: url("../../img/contents/org-logo.svg");
    background-size: 15rem auto;
    background-position: center top 1.5625rem;
  }
}
.contents-temp.type-org .org-map .map-conts {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4.6875rem;
  background-repeat: no-repeat;
  background-image: url("../../img/contents/org-logo.svg");
  background-size: 26.875rem auto;
  background-position: right top;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-map .map-conts {
    gap: 1.875rem;
    background-size: 12.5rem auto;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-conts {
    gap: 1.875rem;
    background: none;
  }
}
.contents-temp.type-org .org-map .map-conts:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 0.0625rem;
  height: 100%;
  background-color: #E0E0E0;
  transform: translate(-50%, -50%) skewY(-0.01deg);
}
.contents-temp.type-org .org-map .map-row {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
.contents-temp.type-org .org-map .map-block {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5Rem;
  height: 4.25rem;
  max-width: 100%;
  border-radius: 0.5Rem;
  font-size: 1.25Rem;
  font-weight: 700;
  letter-spacing: -0.025Rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-map .map-block {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-block {
    width: 10rem;
    height: 3.5rem;
    font-size: 1.0625rem;
  }
}
.contents-temp.type-org .org-map .map-block.type-owner {
  background: var(--onmakers-primary);
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-block.type-owner {
    width: 11.25rem;
    height: 3.75rem;
    font-size: 1.25rem;
  }
}
.contents-temp.type-org .org-map .map-block.type-exec {
  background: #fff;
  border: 1px solid var(--onmakers-primary);
  color: var(--onmakers-primary);
}
.contents-temp.type-org .org-map .map-row:has(.type-exec) {
  width: 40.625rem;
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}
.contents-temp.type-org .org-map .map-row:has(.type-exec):after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 100%;
  height: 0.0625Rem;
  background-color: #E0E0E0;
  transform: translate(-50%, -50%) skewY(-0.01deg);
}
.contents-temp.type-org .org-map .map-row:has(.map-team) {
  gap: 1.25Rem;
  padding: 2.5rem 0.625rem 0;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-row:has(.map-team) {
    position: relative;
    z-index: 1;
    flex-direction: column;
    padding: 2.5rem 0 0 0;
    background-color: #F8F7F7;
  }
  .contents-temp.type-org .org-map .map-row:has(.map-team):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% + 0.0625rem);
    height: 0.0625Rem;
    background-color: #E0E0E0;
    transform: translate(0, 0) skewY(-0.01deg);
  }
  .contents-temp.type-org .org-map .map-row:has(.map-team)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.0625rem;
    height: 50%;
    background-color: #E0E0E0;
    transform: translate(0, 0) skewY(-0.01deg);
  }
}
.contents-temp.type-org .org-map .map-row:has(.map-team) .map-team {
  flex: 1 1 20%;
}
.contents-temp.type-org .org-map .map-team {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 2.8125Rem;
  background-color: #F8F7F7;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    padding-top: 0;
    padding-left: 1.75rem;
  }
}
.contents-temp.type-org .org-map .map-team .map-block {
  position: relative;
  width: 100%;
  height: 3.5rem;
  background-color: #222;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team .map-block {
    font-size: 0.9375rem;
  }
}
.contents-temp.type-org .org-map .map-team .map-block:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  width: 0.5rem;
  box-sizing: border-box;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: var(--onmakers-primary);
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team .map-block:after {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) skewY(-0.01deg);
  }
}
.contents-temp.type-org .org-map .map-team .team-do {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5625rem;
  box-sizing: border-box;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  background-color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  color: #616161;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-map .map-team .team-do {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team .team-do {
    position: relative;
    z-index: 1;
    min-height: auto;
    font-size: 0.9375rem;
  }
}
.contents-temp.type-org .org-map .map-team:before {
  position: absolute;
  top: 0;
  left: 50%;
  content: "";
  width: calc(100% + 1.25rem);
  height: 0.0625Rem;
  background-color: #E0E0E0;
  transform: translate(-50%, 0) skewY(-0.01deg);
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team:before {
    top: 1.75rem;
    left: 0;
    width: 100%;
    transform: translate(0, -50%) skewY(-0.01deg);
  }
}
.contents-temp.type-org .org-map .map-team:after {
  position: absolute;
  top: 0;
  left: 50%;
  content: "";
  width: 0.0625rem;
  height: 2.8125Rem;
  background-color: #E0E0E0;
  transform: translate(-50%, 0) skewY(-0.01deg);
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team:after {
    height: calc(100% + 1.25rem);
    top: 1.75rem;
    left: 0;
    transform: translate(0, -100%) skewY(-0.01deg);
  }
}
.contents-temp.type-org .org-map .map-team:first-child:before {
  left: 50%;
  transform: translate(0, 0) skewY(-0.01deg);
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team:first-child:before {
    left: 0;
    transform: translate(0, -50%) skewY(-0.01deg);
  }
}
.contents-temp.type-org .org-map .map-team:last-child:before {
  left: 50%;
  transform: translate(-100%, 0) skewY(-0.01deg);
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-map .map-team:last-child:before {
    left: 0;
    transform: translate(0, -50%) skewY(-0.01deg);
  }
}
.contents-temp.type-org .org-teams {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.875rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-teams {
    gap: 1.25Rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-teams {
    grid-template-columns: 1fr;
  }
}
.contents-temp.type-org .org-teams .team-item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 3.75rem;
  border-radius: 1.875rem;
  border: 1px solid #E0E0E0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-teams .team-item {
    padding: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-teams .team-item {
    padding: 1.75rem;
  }
}
.contents-temp.type-org .org-teams .team-item .team-name {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-teams .team-item .team-name {
    align-items: center;
    flex-direction: row;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-teams .team-item .team-name {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.3125rem;
  }
}
.contents-temp.type-org .org-teams .team-item .team-name .name-ico,
.contents-temp.type-org .org-teams .team-item .team-name .name-txt {
  display: flex;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-teams .team-item .team-name .name-ico {
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-teams .team-item .team-name .name-ico {
    transform: scale(0.8);
  }
}
.contents-temp.type-org .org-teams .team-item .team-name .name-txt {
  font-size: 1.5rem;
  font-weight: 700;
  word-break: keep-all;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-teams .team-item .team-name .name-txt {
    font-size: 1.375Rem;
  }
}
.contents-temp.type-org .org-teams .team-item .team-role {
  font-size: 1.25rem;
  font-weight: 500;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-org .org-teams .team-item .team-role {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-teams .team-item .team-role {
    font-size: 1.0625rem;
  }
}
.contents-temp.type-org .org-teams .team-item .team-infos {
  display: flex;
  flex-direction: column;
  margin-top: 0.625rem;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025rem;
  color: #424242;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-org .org-teams .team-item .team-infos {
    font-size: 1Rem;
  }
}
.contents-temp.type-org .org-teams .team-item .team-infos .info-ico {
  position: relative;
  float: left;
  width: 0.25rem;
  margin-right: 0.75rem;
  text-indent: -9999px;
  overflow: hidden;
}
.contents-temp.type-org .org-teams .team-item .team-infos .info-ico:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.25rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--board-primary);
}
.contents-temp.type-org .org-teams .team-item .team-infos .info-txt {
  display: block;
  overflow: hidden;
}

.contents-temp.type-who .temp-hero {
  padding: 6.25rem 0;
  margin-bottom: 3.75rem;
}
.contents-temp.type-who .temp-hero .hero-background {
  background-repeat: no-repeat;
  background-image: url("../../img/contents/who-background.png");
  background-size: cover;
  background-position: center;
}
.contents-temp.type-who .who-surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.contents-temp.type-who .who-surface .surface-logo {
  display: flex;
  width: 12.5rem;
}
.contents-temp.type-who .who-surface .surface-msg {
  color: rgba(255, 255, 255, 0.9);
  word-break: keep-all;
  text-align: center;
  line-height: 2;
}
.contents-temp.type-who .who-surface .surface-msg .temp-paragraph {
  color: #fff;
  line-height: 1.8;
}
.contents-temp.type-who .who-comment {
  display: flex;
  justify-content: center;
  margin-bottom: 3.75rem;
}
.contents-temp.type-who .who-comment .comment-txt {
  position: relative;
  display: block;
  padding: 0 2.8125rem;
  font-size: 2.25rem;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.04375rem;
  word-break: keep-all;
  line-height: 1.6;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-comment .comment-txt {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-comment .comment-txt {
    font-size: 1.375rem;
  }
}
.contents-temp.type-who .who-comment .comment-txt strong {
  color: var(--onmakers-primary);
  font-weight: 700;
}
.contents-temp.type-who .who-comment .comment-txt:before, .contents-temp.type-who .who-comment .comment-txt:after {
  position: absolute;
  top: 0;
  transform: translateY(-0.9375rem);
  display: flex;
  align-self: flex-start;
  font-size: 6.25rem;
  font-weight: 700;
  font-family: "Pontano Sans", sans-serif;
  color: rgba(158, 158, 158, 0.3);
  line-height: 1;
}
.contents-temp.type-who .who-comment .comment-txt:before {
  content: "“";
  left: 0;
}
.contents-temp.type-who .who-comment .comment-txt:after {
  content: "”";
  right: 0;
}
.contents-temp.type-who .who-sum {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.875rem;
  margin-bottom: 10rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-sum {
    margin-bottom: 8.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-sum {
    margin-bottom: 5.3125rem;
  }
}
.contents-temp.type-who .who-sum .sum-circle {
  width: 22.3125rem;
  aspect-ratio: 1/1;
}
.contents-temp.type-who .who-sum .sum-circle .circle-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #222;
  border-radius: 50%;
}
.contents-temp.type-who .who-sum .sum-circle .circle-txt {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
  color: #222;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-sum .sum-circle .circle-txt {
    font-size: 1.375Rem;
  }
}
.contents-temp.type-who .who-sum .sum-circle.type-makers .circle-frame {
  border-color: var(--onmakers-primary);
}
.contents-temp.type-who .who-sum .sum-circle.type-makers .circle-txt {
  color: var(--onmakers-primary);
}
.contents-temp.type-who .who-sum .sum-circle.type-online .circle-frame {
  animation: circleMoveAni01 2s ease 2s 1 normal both;
}
@keyframes circleMoveAni01 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}
.contents-temp.type-who .who-sum .sum-circle.type-makers .circle-frame {
  animation: circleMoveAni02 2s ease 2s 1 normal both;
}
@keyframes circleMoveAni02 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
    opacity: 0;
  }
}
.contents-temp.type-who .who-sum .sum-plus {
  position: relative;
  display: flex;
  justify-content: center;
  width: 2.5rem;
  aspect-ratio: 1/1;
  font-size: 3.75rem;
  font-weight: 600;
  color: #BDBDBD;
}
.contents-temp.type-who .who-sum .sum-plus .plus-ico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 1.875rem;
  height: 1.875rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-sum .sum-plus .plus-ico {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.contents-temp.type-who .who-sum .sum-plus .plus-ico img, .contents-temp.type-who .who-sum .sum-plus .plus-ico svg {
  width: 100%;
  height: 100%;
}
.contents-temp.type-who .who-sum .sum-plus .plus-star {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents-temp.type-who .who-sum .sum-plus .plus-star .star-ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}
.contents-temp.type-who .who-sum .sum-plus .plus-star .star-ico img, .contents-temp.type-who .who-sum .sum-plus .plus-star .star-ico svg {
  width: 100%;
  height: 100%;
}
.contents-temp.type-who .who-sum .sum-plus .plus-ico {
  animation: plusMoveAni01 1s ease 2s 1 normal both;
}
.contents-temp.type-who .who-sum .sum-plus .plus-star .star-ico {
  animation: plusMoveAni02 3s ease 2.5s 1 normal both;
  transform-origin: center;
}
@keyframes plusMoveAni01 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}
@keyframes plusMoveAni02 {
  0% {
    opacity: 0;
    transform: translateY(0) rotateZ(0deg);
  }
  50% {
    opacity: 1;
    transform: translateY(0) rotateZ(360deg);
  }
  75% {
    opacity: 1;
    transform: translateY(0) rotateZ(360deg);
  }
  100% {
    opacity: 0;
    transform: translateY(1.25rem) rotateZ(0deg);
  }
}
.contents-temp.type-who .who-sum .sum-result {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22.3125rem;
  aspect-ratio: 1/1;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-sum .sum-result {
    width: 15rem;
  }
}
.contents-temp.type-who .who-sum .sum-result .result-circle {
  display: flex;
  width: 100%;
  height: 100%;
}
.contents-temp.type-who .who-sum .sum-result svg {
  width: 100%;
  height: 100%;
}
.contents-temp.type-who .who-sum .sum-result svg path {
  stroke-dasharray: 1118;
  stroke-dashoffset: 1118;
  animation: resultDrawAni 1s 2s linear forwards;
}
@keyframes resultDrawAni {
  from {
    stroke-dashoffset: 1118;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.contents-temp.type-who .who-sum .sum-result .result-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25Rem;
  width: 100%;
  height: 100%;
  animation: resultCommentAni 2s 5s ease both;
}
@keyframes resultCommentAni {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.contents-temp.type-who .who-sum .sum-result .result-logo {
  display: flex;
  width: 12.5rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-sum .sum-result .result-logo {
    width: 8.75rem;
  }
}
.contents-temp.type-who .who-sum .sum-result .result-comment {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.025rem;
  line-height: 1.6;
  color: #222;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-sum .sum-result .result-comment {
    font-size: 1.125rem;
  }
}
.contents-temp.type-who .who-sum .sum-result .result-comment strong {
  font-weight: 600;
  color: var(--onmakers-primary);
}
.contents-temp.type-who .who-service {
  display: flex;
  flex-direction: column;
  gap: 6.25rem;
  width: 83.125rem;
  max-width: 100%;
  padding: 3.75rem 0;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service {
    padding: 2.1875rem 0;
    gap: 3.125rem;
  }
}
.contents-temp.type-who .who-service .service-row {
  display: grid;
  grid-template-columns: 38.125rem 1fr;
  gap: 4.0625rem;
  align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-service .service-row {
    grid-template-columns: 20rem 1fr;
    gap: 1.5625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.contents-temp.type-who .who-service .service-row:nth-child(2n) {
  grid-template-columns: 1fr 38.125rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-service .service-row:nth-child(2n) {
    grid-template-columns: 1fr 20rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-row:nth-child(2n) {
    grid-template-columns: 1fr;
  }
}
.contents-temp.type-who .who-service .service-row:nth-child(2n) .service-conts {
  order: 1;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-row:nth-child(2n) .service-conts {
    order: 2;
  }
}
.contents-temp.type-who .who-service .service-row:nth-child(2n) .service-thumbs {
  order: 2;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-row:nth-child(2n) .service-thumbs {
    order: 1;
  }
}
.contents-temp.type-who .who-service .service-thumbs {
  position: relative;
  aspect-ratio: 16/9;
  background-color: #f4f4f4;
  border-radius: 1.875rem;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-thumbs {
    aspect-ratio: 21/9;
  }
}
.contents-temp.type-who .who-service .service-thumbs img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-thumbs img {
    width: 100%;
    height: auto;
    top: 60%;
  }
}
.contents-temp.type-who .who-service .service-conts {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0 4.0625rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-service .service-conts {
    padding: 0 1.5625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-conts {
    padding: 0 1.125rem;
  }
}
.contents-temp.type-who .who-service .service-order {
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(34, 34, 34, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-service .service-order {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-order {
    font-size: 2rem;
  }
}
.contents-temp.type-who .who-service .service-ttl {
  font-size: 1.875rem;
  font-weight: 700;
  color: #222;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-service .service-ttl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-ttl {
    font-size: 1.25rem;
  }
}
.contents-temp.type-who .who-service .service-infos {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.625rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025rem;
  color: #616161;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-who .who-service .service-infos {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-who .who-service .service-infos {
    font-size: 0.9375Rem;
  }
}
.contents-temp.type-who .who-service .service-infos .info-ico {
  position: relative;
  float: left;
  width: 0.25rem;
  margin-right: 0.75rem;
  text-indent: -9999px;
  overflow: hidden;
}
.contents-temp.type-who .who-service .service-infos .info-ico:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.25rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--onmakers-primary);
}
.contents-temp.type-who .who-service .service-infos .info-txt {
  display: block;
  overflow: hidden;
}

.contents-temp.type-ti .temp-hero {
  padding: 6.25rem 0;
}
.contents-temp.type-ti .temp-hero .hero-background {
  background-repeat: no-repeat;
  background-image: url("../../img/contents/who-background.png");
  background-size: cover;
  background-position: center;
}
.contents-temp.type-ti .temp-hero .hero-background.type-01 {
  background-image: url("../../img/contents/tech/tech_01/background-hero.png");
}
.contents-temp.type-ti .temp-hero .hero-background.type-02 {
  background-image: url("../../img/contents/tech/tech_02/background-hero.png");
}
.contents-temp.type-ti .temp-hero .hero-background.type-03 {
  background-image: url("../../img/contents/tech/tech_03/background-hero.png");
}
.contents-temp.type-ti .temp-hero .hero-background.type-04 {
  background-image: url("../../img/contents/tech/tech_04/background-hero.png");
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .temp-hero br {
    display: none;
  }
}
.contents-temp.type-ti .temp-ttl {
  font-size: 2.25rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .temp-ttl {
    font-size: 1.625rem;
  }
}
.contents-temp.type-ti .temp-group {
  margin-bottom: 6.25rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .temp-group {
    margin-bottom: 6.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .temp-group {
    margin-bottom: 3.75rem;
  }
}
.contents-temp.type-ti .temp-group:last-child {
  margin-bottom: 0;
}
.contents-temp.type-ti .temp-group .group-head {
  justify-content: center;
}
.contents-temp.type-ti .ti-surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.contents-temp.type-ti .ti-surface .surface-msg {
  color: rgba(255, 255, 255, 0.9);
  word-break: keep-all;
  text-align: center;
  line-height: 2;
}
.contents-temp.type-ti .ti-surface .surface-msg .temp-paragraph {
  color: #fff;
  line-height: 1.8;
}
.contents-temp.type-ti .ti-surface .surface-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 13.75rem;
  height: 3.5rem;
  box-sizing: border-box;
  padding: 0 1rem;
  border-radius: 0.625rem;
  background-color: var(--onmakers-primary);
  color: #fff;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surface .surface-button {
    min-width: 11.25rem;
    width: auto;
    height: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surface .surface-button .button-ico {
    transform: scale(0.9);
  }
}
.contents-temp.type-ti .ti-card-group .card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.contents-temp.type-ti .ti-card-group .card-frame {
  border-radius: 1.875rem;
  border: 1px solid var(--gray300, #E0E0E0);
  background: var(--white, #FFF);
}
.contents-temp.type-ti .ti-roles .ti-card-group .card-frame {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
  box-sizing: border-box;
  padding: 3.5rem 3.75rem;
  font-size: 1.375Rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
  line-height: 1.6;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-roles .ti-card-group .card-frame {
    padding: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-roles .ti-card-group .card-frame {
    flex-direction: row;
    align-items: center;
    padding: 1.75rem;
    border-radius: 0.9375rem;
    font-size: 1.125rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-roles .ti-card-group .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-roles .ti-card-group .card-list {
    grid-template-columns: 1fr;
  }
}
.contents-temp.type-ti .ti-roles .role-ico,
.contents-temp.type-ti .ti-roles .role-txt {
  display: flex;
}
.contents-temp.type-ti .ti-roles .role-ico {
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
}
.contents-temp.type-ti .ti-effect .ti-card-group .card-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2/1;
  font-size: 1.375Rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
  line-height: 1.6;
  text-align: center;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-effect .ti-card-group .card-frame {
    aspect-ratio: 21/9;
    padding: 1.75rem;
    font-size: 1.25rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-effect .ti-card-group .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-effect .ti-card-group .card-list {
    grid-template-columns: 1fr;
  }
}
.contents-temp.type-ti .ti-effect.type-01 .card-item:nth-child(1) .card-frame {
  background-image: url("../../img/contents/tech/tech_01/effect_01.png");
}
.contents-temp.type-ti .ti-effect.type-01 .card-item:nth-child(2) .card-frame {
  background-image: url("../../img/contents/tech/tech_01/effect_02.png");
}
.contents-temp.type-ti .ti-effect.type-01 .card-item:nth-child(3) .card-frame {
  background-image: url("../../img/contents/tech/tech_01/effect_03.png");
}
.contents-temp.type-ti .ti-effect.type-01 .card-item:nth-child(4) .card-frame {
  background-image: url("../../img/contents/tech/tech_01/effect_04.png");
}
.contents-temp.type-ti .ti-effect.type-02 .card-item:nth-child(1) .card-frame {
  background-image: url("../../img/contents/tech/tech_02/effect_01.png");
}
.contents-temp.type-ti .ti-effect.type-02 .card-item:nth-child(2) .card-frame {
  background-image: url("../../img/contents/tech/tech_02/effect_02.png");
}
.contents-temp.type-ti .ti-effect.type-02 .card-item:nth-child(3) .card-frame {
  background-image: url("../../img/contents/tech/tech_02/effect_03.png");
}
.contents-temp.type-ti .ti-effect.type-02 .card-item:nth-child(4) .card-frame {
  background-image: url("../../img/contents/tech/tech_02/effect_04.png");
}
.contents-temp.type-ti .ti-effect.type-03 .card-item:nth-child(1) .card-frame {
  background-image: url("../../img/contents/tech/tech_03/effect_01.png");
}
.contents-temp.type-ti .ti-effect.type-03 .card-item:nth-child(2) .card-frame {
  background-image: url("../../img/contents/tech/tech_03/effect_02.png");
}
.contents-temp.type-ti .ti-effect.type-03 .card-item:nth-child(3) .card-frame {
  background-image: url("../../img/contents/tech/tech_03/effect_03.png");
}
.contents-temp.type-ti .ti-effect.type-03 .card-item:nth-child(4) .card-frame {
  background-image: url("../../img/contents/tech/tech_03/effect_04.png");
}
.contents-temp.type-ti .ti-effect.type-04 .card-item:nth-child(1) .card-frame {
  background-image: url("../../img/contents/tech/tech_04/effect_01.png");
}
.contents-temp.type-ti .ti-effect.type-04 .card-item:nth-child(2) .card-frame {
  background-image: url("../../img/contents/tech/tech_04/effect_02.png");
}
.contents-temp.type-ti .ti-effect.type-04 .card-item:nth-child(3) .card-frame {
  background-image: url("../../img/contents/tech/tech_04/effect_03.png");
}
.contents-temp.type-ti .ti-effect.type-04 .card-item:nth-child(4) .card-frame {
  background-image: url("../../img/contents/tech/tech_04/effect_04.png");
}
.contents-temp.type-ti .temp-group:has(.ti-ncs) {
  position: relative;
  margin: 12.5rem 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .temp-group:has(.ti-ncs) {
    margin: 6.25rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .temp-group:has(.ti-ncs) {
    margin: 5rem 0;
  }
}
.contents-temp.type-ti .temp-group:has(.ti-ncs):after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: calc(100% + 12.5rem);
  background-color: #f4f4f4;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .temp-group:has(.ti-ncs):after {
    height: calc(100% + 6.25rem);
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .temp-group:has(.ti-ncs):after {
    height: calc(100% + 5rem);
  }
}
.contents-temp.type-ti .temp-group:has(.ti-ncs) .group-head,
.contents-temp.type-ti .temp-group:has(.ti-ncs) .group-body {
  position: relative;
  z-index: 1;
}
.contents-temp.type-ti .ti-ncs {
  width: 73.75Rem;
  margin: 0 auto;
  max-width: 100%;
}
.contents-temp.type-ti .ti-ncs .ti-card-group .card-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-list {
    gap: 1.5625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-list {
    grid-template-columns: 1fr;
  }
}
.contents-temp.type-ti .ti-ncs .ti-card-group .card-item {
  position: relative;
  padding-top: 4.0625rem;
  border-radius: 1.875rem 0 1.875rem 1.875rem;
  overflow: hidden;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-item {
    border-radius: 1.25rem 0 1.25rem 1.25rem;
    padding-top: 5.3125rem;
  }
}
@media only screen and (max-width: 479px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-item {
    padding-top: 4.0625rem;
  }
}
.contents-temp.type-ti .ti-ncs .ti-card-group .card-item .item-background {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-item .item-background {
    width: 100%;
  }
}
.contents-temp.type-ti .ti-ncs .ti-card-group .card-item .item-background svg {
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-item .item-background svg {
    width: 31.25rem;
    height: auto;
  }
}
.contents-temp.type-ti .ti-ncs .ti-card-group .card-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
  box-sizing: border-box;
  border: none;
  padding: 3.75rem;
  padding-top: 0;
  font-size: 1.375Rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
  line-height: 1.6;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-frame {
    padding: 0 2.8125rem 3.75rem;
    padding-top: 0;
    font-size: 1.25Rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-ncs .ti-card-group .card-frame {
    padding: 0 2.375rem 2.8125rem;
    padding-top: 0;
    min-height: 10rem;
    font-size: 1.25rem;
  }
}
.contents-temp.type-ti .ti-ncs .ncs-ttl {
  color: #222;
}
.contents-temp.type-ti .ti-ncs .ncs-paragraph {
  font-size: 1.125rem;
  font-weight: 400;
  color: #616161;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-ncs .ncs-paragraph {
    font-size: 1rem;
  }
  .contents-temp.type-ti .ti-ncs .ncs-paragraph br {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-ncs .ncs-paragraph {
    font-size: 1rem;
  }
  .contents-temp.type-ti .ti-ncs .ncs-paragraph br {
    display: none;
  }
}
.contents-temp.type-ti .ti-surf {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  margin-top: 0.625Rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surf {
    gap: 2.1875rem;
  }
}
.contents-temp.type-ti .ti-surf .surf-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contents-temp.type-ti .ti-surf .surf-ttl {
  color: #222;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03125rem;
  text-align: center;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-surf .surf-ttl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surf .surf-ttl {
    font-size: 1.375rem;
  }
}
.contents-temp.type-ti .ti-surf .surf-paragraph {
  font-size: 1.125rem;
  font-weight: 400;
  color: #616161;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-surf .surf-paragraph {
    font-size: 1.0625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surf .surf-paragraph {
    font-size: 0.9375rem;
  }
}
.contents-temp.type-ti .ti-surf .surf-images {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4.0625rem;
  padding: 3.125rem;
  border: 1px solid var(--gray300, #E0E0E0);
  background: var(--white, #FFF);
}
.contents-temp.type-ti .ti-surf .surf-images .image-box:has(.image-caption) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5625rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-surf .surf-images .image-box img {
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surf .surf-images .image-box img {
    max-width: 100% !important;
  }
}
.contents-temp.type-ti .ti-surf .surf-images .image-caption {
  font-size: 1.125Rem;
  font-weight: 500;
  color: #616161;
  text-align: center;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-surf .surf-images .image-caption {
    font-size: 1.0625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surf .surf-images .image-caption {
    font-size: 0.9375rem;
  }
}
.contents-temp.type-ti .ti-surf .surf-tech {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 0.625rem;
}
.contents-temp.type-ti .ti-surf .surf-tech .tech-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.625rem;
  box-sizing: border-box;
  padding: 0 1.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--gray300, #E0E0E0);
  font-size: 1rem;
  font-weight: 500;
  color: #222;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-surf .surf-tech .tech-block {
    padding: 1rem;
    height: 3rem;
    font-size: 0.9375rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-surf .surf-tech .tech-block {
    border-radius: 0.3125rem;
    padding: 0.5rem 1rem;
    min-height: auto;
    font-size: 0.9375rem;
    line-height: 1.2;
  }
}
.contents-temp.type-ti .ti-tech .tech-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.contents-temp.type-ti .ti-tech .tech-item .item-frame {
  display: flex;
  align-items: center;
  padding: 3.125rem 3.75rem;
  border-radius: 1.25rem;
  background-color: #F8F7F7;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-frame {
    gap: 1.875rem;
    padding: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-frame {
    flex-direction: column;
    gap: 1.875rem;
    padding: 1.75rem;
  }
}
.contents-temp.type-ti .ti-tech .tech-item .item-conts {
  display: flex;
  flex-direction: column;
  gap: 1Rem;
  padding: 0 3.75rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-conts {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-conts {
    padding: 0;
  }
}
.contents-temp.type-ti .ti-tech .tech-item .item-ttl {
  font-size: 1.625rem;
  font-weight: 700;
  color: #222;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-ttl {
    font-size: 1.5Rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-ttl {
    font-size: 1.375rem;
  }
}
.contents-temp.type-ti .ti-tech .tech-item .item-infos {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025rem;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: #616161;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-infos {
    font-size: 1.0625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-infos {
    font-size: 0.9375Rem;
  }
}
.contents-temp.type-ti .ti-tech .tech-item .item-infos .info-ico {
  position: relative;
  float: left;
  width: 0.25rem;
  margin-right: 0.75rem;
  text-indent: -9999px;
  overflow: hidden;
}
.contents-temp.type-ti .ti-tech .tech-item .item-infos .info-ico:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.25rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--board-primary);
}
.contents-temp.type-ti .ti-tech .tech-item .item-infos .info-txt {
  display: block;
  overflow: hidden;
}
.contents-temp.type-ti .ti-tech .tech-item .item-thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.75rem;
  margin-left: auto;
  aspect-ratio: 16/9;
  border-radius: 1.875rem;
  background-color: #fff;
  box-sizing: border-box;
  padding: 1.75rem;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-thumbs {
    width: 20rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-tech .tech-item .item-thumbs {
    width: 100%;
    border-radius: 1.25rem;
  }
}
.contents-temp.type-ti .ti-bring {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-bring {
    gap: 1.875rem;
  }
}
.contents-temp.type-ti .ti-bring .ti-card-group .card-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  box-sizing: border-box;
  padding: 0.625rem;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-bring .ti-card-group .card-frame {
    min-height: auto;
    padding: 2.375rem 1.125rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-bring .ti-card-group .card-list {
    gap: 2.5rem 1.5625rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-bring .ti-card-group .card-list {
    gap: 2.1875rem;
    grid-template-columns: 1fr;
  }
}
.contents-temp.type-ti .ti-bring .bring-effect {
  transform: translateY(-1.25rem);
  font-size: 1.625rem;
  font-weight: 700;
  color: #424242;
  line-height: 1.8;
  letter-spacing: -0.03125rem;
  text-align: center;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-bring .bring-effect {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-bring .bring-effect {
    font-size: 1.125rem;
  }
  .contents-temp.type-ti .ti-bring .bring-effect br {
    display: none;
  }
}
.contents-temp.type-ti .ti-bring .bring-effect strong {
  font-weight: 700;
  color: var(--onmakers-primary);
}
.contents-temp.type-ti .ti-bring .bring-order {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--onmakers-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .contents-temp.type-ti .ti-bring .bring-order {
    font-size: 1.0625rem;
  }
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-bring .bring-order {
    font-size: 0.9375rem;
  }
}
.contents-temp.type-ti .ti-bring .bring-ttl {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: #222;
  word-break: keep-all;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .contents-temp.type-ti .ti-bring .bring-ttl {
    font-size: 1.125rem;
  }
}

/* 기술소개서 */
.omks-modal:has(.contents-temp.type-inquire) .modal-wrap {
  padding: 0;
  border: none;
  border-radius: 0;
}
@media only screen and (max-width: 767px) {
  .omks-modal:has(.contents-temp.type-inquire) .modal-wrap {
    min-width: auto;
  }
}
.omks-modal:has(.contents-temp.type-inquire) .modal-head {
  position: relative;
  padding: 2.5rem;
}
@media only screen and (max-width: 767px) {
  .omks-modal:has(.contents-temp.type-inquire) .modal-head {
    padding: 1.75rem;
  }
}
.omks-modal:has(.contents-temp.type-inquire) .modal-head:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) skewY(-0.01deg);
  width: calc(100% - 5rem);
  height: 0.0625rem;
  background-color: #222;
}
@media only screen and (max-width: 767px) {
  .omks-modal:has(.contents-temp.type-inquire) .modal-head:after {
    width: calc(100% - 3.5rem);
  }
}
.omks-modal:has(.contents-temp.type-inquire) .modal-body {
  padding: 0 2.5rem;
  padding-bottom: 3.75rem;
}
@media only screen and (max-width: 767px) {
  .omks-modal:has(.contents-temp.type-inquire) .modal-body {
    padding: 0 1.75rem;
    padding-bottom: 3.75rem;
  }
}
.omks-modal:has(.contents-temp.type-inquire) .contents-temp.type-inquire .inquire-form .form-row {
  padding: 1.75rem 0;
}
.omks-modal:has(.contents-temp.type-inquire) .contents-temp.type-inquire .inquire-form .form-row:first-child {
  padding-top: 0;
}

/* 메인 */
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-container {
    overflow: hidden;
  }
}
@media only screen and (max-width: 767px) {
  .main-container {
    overflow: hidden;
  }
}

.main-section {
  padding: 7.5rem 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section {
    padding: 5rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .main-section {
    padding: 3.75rem 0;
  }
}
.main-section .section-ttl {
  position: relative;
  display: flex;
  font-size: 2.75Rem;
  font-weight: 700;
  letter-spacing: -0.08125rem;
  line-height: 1;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section .section-ttl {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section .section-ttl {
    font-size: 1.5rem;
  }
}
.main-section .section-ttl:After {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: flex;
  width: 1.125Rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url("../../img/main/ttl-star.svg");
  background-position: center;
  background-size: 1.125rem auto;
  transform: translate(110%, -60%);
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section .section-ttl:After {
    width: 1rem;
    background-size: 1rem auto;
  }
}
@media only screen and (max-width: 767px) {
  .main-section .section-ttl:After {
    width: 0.75rem;
    background-size: 0.75rem auto;
  }
}
.main-section .section-inner {
  width: 103.5rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1.75Rem;
  margin: 0 auto;
}
.main-section .section-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.8125rem;
}
@media only screen and (max-width: 767px) {
  .main-section .section-wrap {
    gap: 1.875rem;
  }
}
.main-section .section-wrap .section-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.main-section .section-comment {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.025rem;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section .section-comment {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section .section-comment {
    font-size: 0.9375rem;
  }
}
.main-section .section-more {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.5rem;
  box-sizing: border-box;
  padding: 0.3125rem 1.875rem;
  border-radius: 1.875rem;
  border: 1px solid #E0E0E0;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(0.1875rem);
          backdrop-filter: blur(0.1875rem);
  font-size: 1.125rem;
  font-weight: 500;
  box-shadow: 0 0 0 10px rgba(208, 18, 27, 0);
  transition: all 0.2s ease;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section .section-more {
    height: 3rem;
    padding: 0.3125rem 1.125rem;
    font-size: 1.0625rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section .section-more {
    height: 2.625rem;
    padding: 0.3125rem 1.125rem;
    font-size: 0.9375rem;
  }
}
.main-section .section-more .link-txt,
.main-section .section-more .link-ico {
  display: flex;
}
.main-section .section-more:hover, .main-section .section-more:focus {
  transform: translateY(-0.125rem);
  box-shadow: 0 0 0 3px rgba(208, 18, 27, 0.3);
}

.main-section.type-report {
  overflow: hidden;
  padding: 12.5rem 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-report {
    padding: 6.25rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-report {
    padding: 5rem 0;
  }
}
.main-section.type-report .report-list .report-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.1875rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-report .report-list .report-item {
    width: 23.75rem;
    gap: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-report .report-list .report-item {
    width: 22.5Rem;
    gap: 1.25rem;
  }
}
.main-section.type-report .report-list .report-item .item-conts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-report .report-list .report-item .item-conts {
    gap: 0.625rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-report .report-list .report-item .item-conts {
    gap: 0.625rem;
  }
}
.main-section.type-report .report-list .report-item .item-ttl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 5.625rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.05625rem;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-report .report-list .report-item .item-ttl {
    max-height: 5rem;
    font-size: 1.375rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-report .report-list .report-item .item-ttl {
    max-height: 4.0625rem;
    font-size: 1.125rem;
  }
}
.main-section.type-report .report-list .report-item .item-date {
  font-size: 1Rem;
  font-weight: 400;
  color: var(--onmakers-primary);
}
@media only screen and (max-width: 767px) {
  .main-section.type-report .report-list .report-item .item-date {
    font-size: 0.875rem;
  }
}
.main-section.type-report .report-list .report-item .item-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  text-align: left;
}
.main-section.type-report .report-list .report-item .item-thumb {
  position: relative;
}
.main-section.type-report .report-list .report-item .item-thumb .image-frame {
  position: relative;
  z-index: 1;
}
.main-section.type-report .report-list .report-item .item-thumb .image-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 70%;
  color: var(--white, #FFF);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.617px;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-report .report-list .report-item .item-thumb .image-caption {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-report .report-list .report-item .item-thumb .image-caption {
    font-size: 1rem;
  }
}
.main-section.type-report .report-list .report-item:hover .item-thumb .image-frame .circle-button, .main-section.type-report .report-list .report-item:focus-within .item-thumb .image-frame .circle-button {
  fill: var(--onmakers-primary);
  transition: all 0.2s ease;
}
.main-section.type-report .report-list .report-item:hover .item-ttl, .main-section.type-report .report-list .report-item:focus-within .item-ttl {
  text-decoration: underline;
  text-underline-offset: 0.3125rem;
}
.main-section.type-report .section-more {
  margin-left: auto;
  color: #424242;
}
.main-section.type-report .section-more:hover, .main-section.type-report .section-more:focus {
  border-color: var(--onmakers-primary);
  color: var(--onmakers-primary);
}

.main-section.type-tech {
  box-sizing: border-box;
  padding: 8.75rem 0;
  color: #fff;
  background-repeat: no-repeat;
  background-image: url("../../img/main/tech-background.png");
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech {
    padding: 6.25rem 0;
    overflow: hidden;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech {
    padding: 5rem 0;
  }
}
.main-section.type-tech .section-wrap {
  display: grid;
  grid-template-columns: 31.25rem 1fr;
}
@media screen and (min-width: 1541px) {
  .main-section.type-tech .section-wrap {
    align-items: flex-start;
  }
}
@media only screen and (min-width: 1280px) and (max-width: 1540px) {
  .main-section.type-tech .section-wrap {
    display: flex;
  }
}
@media only screen and (min-width: 1081px) and (max-width: 1279px) {
  .main-section.type-tech .section-wrap {
    display: flex;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .section-wrap {
    grid-template-columns: 1fr;
    gap: 3.75rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .section-wrap {
    display: block;
  }
}
.main-section.type-tech .section-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
}
@media screen and (min-width: 1541px) {
  .main-section.type-tech .section-head {
    position: sticky;
    top: 10rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .section-head {
    align-items: center;
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .section-head {
    margin-bottom: 2.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .main-section.type-tech .section-head .section-ttl {
    order: 1;
  }
  .main-section.type-tech .section-head .section-more {
    order: 2;
    margin: 0 0 0 auto;
  }
  .main-section.type-tech .section-head .section-comment {
    flex: 1 1 100%;
    order: 3;
  }
}
.main-section.type-tech .section-body {
  display: flex;
  justify-content: flex-end;
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .section-body {
    display: block;
  }
}
.main-section.type-tech .section-more {
  margin-top: 0.625rem;
  color: rgba(255, 255, 255, 0.8);
}
.main-section.type-tech .section-more:hover, .main-section.type-tech .section-more:focus {
  background-color: #fff;
  border-color: var(--onmakers-primary);
  color: var(--onmakers-primary);
}
.main-section.type-tech .section-comment {
  color: rgba(255, 255, 255, 0.8);
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .section-comment br:first-child ~ br {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .section-comment br {
    display: none;
  }
}
.main-section.type-tech .tech-conts {
  position: relative;
  width: 52.5rem;
}
@media only screen and (min-width: 1081px) and (max-width: 1279px) {
  .main-section.type-tech .tech-conts {
    width: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .tech-conts {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-conts {
    width: auto;
  }
}
.main-section.type-tech .tech-card-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.0625rem 3.75rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .tech-card-group {
    width: 42.8125rem;
    max-width: 100%;
    margin: 0 auto;
    gap: 2.8125rem 2.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card-group {
    display: flex;
    gap: 0;
  }
}
.main-section.type-tech .tech-card {
  position: relative;
  width: 24.375rem;
  height: 32.5rem;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .tech-card {
    width: 20rem;
    height: 26.625rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card {
    width: 20rem;
    height: 26.625rem;
  }
}
.main-section.type-tech .tech-card:nth-child(2) {
  transform: translateY(50%);
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card:nth-child(2) {
    transform: translateY(0);
  }
}
.main-section.type-tech .tech-card .card-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2.1875rem;
  padding-bottom: 4.0625rem;
  border-radius: 1.875rem;
  background-color: #fff;
  transition: all 0.2s ease;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .tech-card .card-frame {
    padding-bottom: 3.3125rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card .card-frame {
    transform: scale(0.9);
    padding-bottom: 3.3125rem;
  }
}
.main-section.type-tech .tech-card .card-order {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--onmakers-primary);
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1.3;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .tech-card .card-order {
    font-size: 3.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card .card-order {
    font-size: 2.625rem;
  }
}
.main-section.type-tech .tech-card .card-sub {
  color: var(--onmakers-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card .card-sub {
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
  }
}
.main-section.type-tech .tech-card .card-conts {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}
.main-section.type-tech .tech-card .card-ttl {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-tech .tech-card .card-ttl {
    font-size: 1.75rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card .card-ttl {
    font-size: 1.5rem;
  }
}
.main-section.type-tech .tech-card .card-paragraph {
  font-size: 1.125rem;
  font-weight: 400;
  color: #616161;
  word-break: keep-all;
  line-height: 1.6;
  letter-spacing: -0.01875rem;
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card .card-paragraph {
    font-size: 1rem;
  }
}
.main-section.type-tech .tech-card .card-order,
.main-section.type-tech .tech-card .card-sub,
.main-section.type-tech .tech-card .card-ttl,
.main-section.type-tech .tech-card .card-paragraph {
  transition: inherit;
}
.main-section.type-tech .tech-card .card-background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: all 0.2s ease;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.95);
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card .card-background {
    height: auto;
    transform: translate(-50%, -50%) scale(1);
  }
}
.main-section.type-tech .tech-card .card-link {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50%;
  text-indent: -9999px;
  text-align: left;
  overflow: hidden;
  outline: none;
}
@media (min-width: 1080px) {
  .main-section.type-tech .tech-card:hover .card-background {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition-duration: 0.5s;
  }
  .main-section.type-tech .tech-card:hover .card-frame {
    transform: scale(0.95);
    background-color: transparent;
  }
  .main-section.type-tech .tech-card:hover .card-frame .card-ttl {
    color: #fff;
  }
  .main-section.type-tech .tech-card:hover .card-frame .card-paragraph {
    color: rgba(255, 255, 255, 0.8);
  }
  .main-section.type-tech .tech-card:hover .card-frame .card-order,
  .main-section.type-tech .tech-card:hover .card-frame .card-sub {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.5);
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-tech .tech-card.swiper-slide-active .card-background {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition-duration: 0.5s;
  }
  .main-section.type-tech .tech-card.swiper-slide-active .card-frame {
    transform: scale(0.95);
    background-color: transparent;
  }
  .main-section.type-tech .tech-card.swiper-slide-active .card-frame .card-ttl {
    color: #fff;
  }
  .main-section.type-tech .tech-card.swiper-slide-active .card-frame .card-paragraph {
    color: rgba(255, 255, 255, 0.8);
  }
  .main-section.type-tech .tech-card.swiper-slide-active .card-frame .card-order,
  .main-section.type-tech .tech-card.swiper-slide-active .card-frame .card-sub {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.5);
  }
}

.main-section.type-what {
  position: relative;
  padding: 0;
}
.main-section.type-what .section-inner {
  position: relative;
  z-index: 1;
}
.main-section.type-what .what-banner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .main-section.type-what .what-banner .banner-wrapper {
    transition-duration: 12000ms !important;
  }
}
.main-section.type-what .what-banner .banner-slide {
  width: 14.375rem;
  flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
  .main-section.type-what .what-banner .banner-slide {
    width: 10rem;
  }
}
.main-section.type-what .what-banner .banner-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7.1875rem;
  border-radius: 1.25Rem;
  background: #FFF;
}
@media only screen and (max-width: 767px) {
  .main-section.type-what .what-banner .banner-image {
    height: 4.375rem;
    border-radius: 0.625Rem;
  }
}
.main-section.type-what .what-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-repeat: no-repeat;
  background-image: url("../../img/main/what-background.png");
  background-size: cover;
  background-position: center bottom;
}
.main-section.type-what .what-background img, .main-section.type-what .what-background svg {
  width: 100%;
}
.main-section.type-what .what-logo img, .main-section.type-what .what-logo svg {
  width: 18.75rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-what .what-logo img, .main-section.type-what .what-logo svg {
    width: 12.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-what .what-logo img, .main-section.type-what .what-logo svg {
    width: 8.75rem;
  }
}
.main-section.type-what .what-do {
  color: #222;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.075rem;
  text-align: center;
  word-break: keep-all;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-what .what-do {
    font-size: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-what .what-do {
    font-size: 1.5rem;
  }
}
.main-section.type-what .what-sub {
  color: #616161;
  text-align: center;
  word-break: keep-all;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.4px;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-what .what-sub {
    font-size: 1.125rem;
  }
  .main-section.type-what .what-sub br {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-what .what-sub {
    font-size: 1rem;
  }
}
.main-section.type-what .what-button {
  margin-top: 1.25rem;
}
.main-section.type-what .what-button.section-more {
  border-color: var(--onmakers-primary);
  color: var(--onmakers-primary);
}
.main-section.type-what .what-button.section-more:hover, .main-section.type-what .what-button.section-more:focus {
  background-color: var(--onmakers-primary);
  color: #fff;
}
.main-section.type-what .what-button .button-txt,
.main-section.type-what .what-button .button-ico {
  display: flex;
}
.main-section.type-what .what-conts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 11.25rem 0 13.75rem 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-what .what-conts {
    padding: 7.5rem 0 10rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-what .what-conts {
    padding: 5rem 0 6.875rem 0;
  }
}

.main-section.type-surf {
  overflow: hidden;
}
.main-section.type-surf .surf-comment {
  margin-bottom: 3.75rem;
  font-size: 3.125rem;
  font-weight: 500;
  color: #222;
  letter-spacing: -0.125rem;
  word-break: keep-all;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-comment {
    font-size: 2.125Rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-comment {
    margin-bottom: 1.875rem;
    font-size: 1.375Rem;
  }
}
.main-section.type-surf .surf-comment .emp {
  font-weight: 800;
}
.main-section.type-surf .surf-comment .emp strong {
  color: var(--onmakers-primary);
}
.main-section.type-surf .surf-banner-group {
  position: relative;
  display: grid;
  grid-template-columns: 31.25rem 1fr;
  gap: 4.375rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner-group {
    display: block;
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner-group {
    display: block;
    text-align: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner-group .group-figure {
    display: inline-flex;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner-group .group-figure {
    display: inline-flex;
  }
}
.main-section.type-surf .surf-banner-group .group-figure,
.main-section.type-surf .surf-banner-group .group-conts {
  position: relative;
  z-index: 1;
}
.main-section.type-surf .surf-banner-group .group-conts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 3rem 0;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner-group .group-conts {
    gap: 2.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner-group .group-conts {
    padding: 1.75Rem;
  }
}
.main-section.type-surf .surf-banner-group .banner-tab {
  display: flex;
  align-items: center;
  gap: 1.5625rem;
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner-group .banner-tab {
    display: none;
  }
}
.main-section.type-surf .surf-banner-group .banner-tab .tab-button {
  font-size: 1.125rem;
  font-weight: 500;
  color: #bdbdbd;
  letter-spacing: -0.01875rem;
  word-break: keep-all;
  text-align: left;
  transition: all 0.2s ease;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner-group .banner-tab .tab-button {
    font-size: 1rem;
  }
}
.main-section.type-surf .surf-banner-group .banner-tab .tab-button:hover, .main-section.type-surf .surf-banner-group .banner-tab .tab-button:focus {
  color: var(--onmakers-primary);
}
.main-section.type-surf .surf-banner-group .banner-tab .tab-button.is-active {
  font-weight: 700;
  color: var(--onmakers-primary);
}
.main-section.type-surf .surf-banner-group .banner-pagi {
  display: grid;
  grid-template-columns: auto 1fr;
  width: 45rem;
  align-items: center;
  gap: 2.5rem;
  margin-top: auto;
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner-group .banner-pagi {
    width: 100%;
    gap: 1.25rem;
  }
}
.main-section.type-surf .surf-banner-group .banner-pagi .pagi-pager {
  color: #BDBDBD;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.025rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner-group .banner-pagi .pagi-pager {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner-group .banner-pagi .pagi-pager {
    font-size: 0.9375rem;
  }
}
.main-section.type-surf .surf-banner-group .banner-pagi .pagi-pager .pager-current {
  font-weight: 700;
  color: #222;
}
.main-section.type-surf .surf-banner-group .banner-pagi .pagi-progress {
  position: relative;
  display: flex;
  width: 100%;
  height: 0.25rem;
  background-color: #EEE;
  border-radius: 0.25rem;
  overflow: hidden;
}
.main-section.type-surf .surf-banner-group .banner-pagi .pagi-progress .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--onmakers-primary);
  transition: width linear;
}
.main-section.type-surf .surf-banner-group .banner-pager {
  position: absolute;
  bottom: 1.25Rem;
  right: -0.625Rem;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .main-section.type-surf .surf-banner-group .banner-pager {
    bottom: 0.9375rem;
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 479px) {
  .main-section.type-surf .surf-banner-group .banner-pager {
    bottom: 0;
  }
}
.main-section.type-surf .surf-banner-group .banner-pager .pager-frame {
  width: 100px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--onmakers-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625Rem;
}
.main-section.type-surf .surf-banner-group .banner-pager .pager-frame li {
  display: flex;
}
.main-section.type-surf .surf-banner-group .banner-pager .pager-frame li ~ li {
  position: relative;
}
.main-section.type-surf .surf-banner-group .banner-pager .pager-frame li ~ li:before {
  position: absolute;
  top: 50%;
  left: -0.3125rem;
  transform: translate(-50%, -50%) skewY(-0.01deg);
  content: "";
  width: 0.0625rem;
  height: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
}
.main-section.type-surf .surf-banner-group .banner-pager .pager-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2Rem;
  height: 2rem;
  color: #fff;
  opacity: 0.5;
}
.main-section.type-surf .surf-banner-group .banner-pager .pager-button:hover, .main-section.type-surf .surf-banner-group .banner-pager .pager-button:focus {
  opacity: 1;
}
.main-section.type-surf .surf-banner-group .banner-pager .pager-button .button-ico {
  width: 1.75rem;
  height: 1.75rem;
}
.main-section.type-surf .surf-banner {
  overflow: hidden;
}
.main-section.type-surf .surf-banner .banner-container {
  overflow: hidden;
}
.main-section.type-surf .surf-banner.type-image {
  -webkit-mask: url("../../img/main/banner-mask.svg");
  mask: url("../../img/main/banner-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner.type-image {
    width: 31.25rem;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .main-section.type-surf .surf-banner.type-image {
    width: 26.875rem;
  }
}
@media only screen and (max-width: 479px) {
  .main-section.type-surf .surf-banner.type-image {
    width: 20rem;
  }
}
.main-section.type-surf .surf-banner.type-image .banner-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.main-section.type-surf .surf-banner.type-image .banner-image .image-ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 80%;
  color: #fff;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  word-break: keep-all;
  mix-blend-mode: overlay;
  letter-spacing: 0;
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner.type-image .banner-image .image-ttl {
    font-size: 2rem;
  }
}
.main-section.type-surf .surf-banner.type-image .banner-image .image-ttl.type-bigger {
  font-size: 3.125Rem;
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner.type-image .banner-image .image-ttl.type-bigger {
    font-size: 2.125rem;
  }
}
.main-section.type-surf .surf-banner.type-image .banner-image .image-ttl.type-noblend {
  mix-blend-mode: unset;
  color: rgba(255, 255, 255, 0.4);
}
.main-section.type-surf .surf-banner.type-image .banner-image .image-mask {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.main-section.type-surf .surf-banner.type-image .banner-image .image-mask img {
  min-width: 100%;
  height: 100%;
}
.main-section.type-surf .surf-banner.type-text {
  text-align: left;
}
.main-section.type-surf .surf-banner.type-text .banner-conts {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.main-section.type-surf .surf-banner.type-text .banner-ttl {
  color: #222;
  font-size: 2.875rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.09375rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner.type-text .banner-ttl {
    font-size: 2.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner.type-text .banner-ttl {
    font-size: 1.5rem;
  }
}
.main-section.type-surf .surf-banner.type-text .banner-paragraph {
  color: #616161;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.025rem;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-banner.type-text .banner-paragraph {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-banner.type-text .banner-paragraph {
    font-size: 1.0625rem;
  }
}
.main-section.type-surf .surf-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.main-section.type-surf .surf-background .background-frame {
  position: relative;
  width: 100%;
  height: 100%;
}
.main-section.type-surf .surf-background .background-circle {
  /* 위아래 떠오름 */
  /* 좌우 드리프트(미세) */
  /* 미세한 틸트 + 펄스 */
  /* 접근성: 애니메이션 최소화 설정 존중 */
}
.main-section.type-surf .surf-background .background-circle .circle-frame {
  width: 31.25rem;
  aspect-ratio: 1/1;
  border: 1px solid #ccc;
  border-radius: 50%;
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-background .background-circle .circle-frame {
    width: 20rem;
  }
}
.main-section.type-surf .surf-background .background-circle.type-left {
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-background .background-circle.type-left {
    left: 30%;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-background .background-circle.type-left {
    left: 10%;
  }
}
.main-section.type-surf .surf-background .background-circle.type-left .circle-frame {
  transform: translateX(-70%);
  /* 은은한 그라디언트로 볼륨감 */
  /* 성능 힌트 */
  will-change: transform, filter;
  /* 둥둥 애니메이션(위아래, 좌우, 기울기) */
  animation: floatLeftY var(--float-dur, 6s) ease-in-out infinite;
  /* 살짝 흐림/광택 */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}
.main-section.type-surf .surf-background .background-circle.type-right {
  position: absolute;
  right: 0;
  top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .main-section.type-surf .surf-background .background-circle.type-right {
    right: 30%;
  }
}
@media only screen and (max-width: 767px) {
  .main-section.type-surf .surf-background .background-circle.type-right {
    right: 10%;
  }
}
.main-section.type-surf .surf-background .background-circle.type-right .circle-frame {
  transform: translateX(80%);
  /* 성능 힌트 */
  will-change: transform, filter;
  /* 둥둥 애니메이션(위아래, 좌우, 기울기) */
  animation: floatRightY var(--float-dur, 6s) ease-in-out infinite;
  /* 살짝 흐림/광택 */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}
@keyframes floatLeftY {
  0% {
    transform: translateX(-70%) translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateX(-70%) translateY(-1.875rem) rotate(0deg) scale(0.98);
  }
  100% {
    transform: translateX(-70%) translateY(0) rotate(0deg) scale(1);
  }
}
@keyframes floatRightY {
  0% {
    transform: translateX(80%) translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateX(80%) translateY(1.875rem) rotate(0deg) scale(1.02);
  }
  100% {
    transform: translateX(80%) translateY(0) rotate(0deg) scale(1);
  }
}
@keyframes driftX {
  0% {
    transform: translateX(calc(-70% - 4px)) translateY(0);
  }
  50% {
    transform: translateX(calc(-70% + 4px)) translateY(0);
  }
  100% {
    transform: translateX(calc(-70% - 4px)) translateY(0);
  }
}
@keyframes tilt {
  0% {
    transform: translateX(-70%) translateY(0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translateX(-70%) translateY(0) rotate(2deg) scale(1.02);
  }
  100% {
    transform: translateX(-70%) translateY(0) rotate(-2deg) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-section.type-surf .surf-background .background-circle .floaty {
    animation: none;
  }
}
.main-section.type-surf .surf-banner.type-image .banner-image {
  background-color: #222;
}
.main-section.type-surf .surf-banner.type-image .banner-image .image-ttl {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.5);
  visibility: hidden;
  transition: all 1s linear;
}
.main-section.type-surf .surf-banner.type-image .banner-image .image-mask {
  transition: all 2s linear;
  transform: scale(1);
  opacity: 0;
}
.main-section.type-surf .surf-banner.type-image .is-active .image-mask {
  transform: scale(1.1);
  opacity: 1;
}
.main-section.type-surf .surf-banner.type-image .is-active .image-ttl {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
}
.main-section.type-surf .surf-banner.type-text .banner-ttl,
.main-section.type-surf .surf-banner.type-text .banner-paragraph {
  opacity: 0;
  transform: translateY(10%);
  visibility: hidden;
  transition: all 1s linear;
}
.main-section.type-surf .surf-banner.type-text .banner-paragraph {
  transition-delay: 0.1s;
}
.main-section.type-surf .surf-banner.type-text .is-active .banner-ttl,
.main-section.type-surf .surf-banner.type-text .is-active .banner-paragraph {
  opacity: 1;
  transform: translateY(0%);
  visibility: visible;
}
.main-section.type-surf .surf-comment {
  animation: surfCommentRending 1s linear 0.5s 1 alternate both;
}
@keyframes surfCommentRending {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.main-section.type-surf .surf-banner-group .group-figure,
.main-section.type-surf .surf-banner-group .group-conts {
  animation: surfContentsRending 1s linear 0.5s 1 alternate both;
}
@keyframes surfContentsRending {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.main-section.type-surf .surf-background .background-circle.type-left {
  animation: circleLeftRending 1s linear 0.5s 1 alternate both;
}
@keyframes circleLeftRending {
  0% {
    opacity: 0;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.main-section.type-surf .surf-background .background-circle.type-right {
  animation: circleLeftRending 1s linear 0.5s 1 alternate both;
}
@keyframes circleLeftRending {
  0% {
    opacity: 0;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.main-section {
  transition: all 0.5s ease;
  animation: mainSectionRending 1s linear 0.5s 1 alternate both;
}
@keyframes mainSectionRending {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.main-section .section-inner {
  transform: translateY(10%);
  transition: all 0.5s ease;
}
.main-section.is-active .section-inner {
  transform: translateY(0);
}
.main-section.type-surf .section-inner {
  transform: translateY(0);
}

/* 문서 */
.terms-stnc {
  font-size: 1em;
  font-weight: 400;
  color: #555;
}
.terms-stnc:after {
  content: "";
  display: block;
  clear: both;
}
.terms-stnc .stnc-ico {
  float: left;
  margin-right: 0.25em;
}
.terms-stnc .stnc-txt {
  display: block;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.terms-stnc .stnc-txt b {
  font-weight: 600;
  color: #333;
}
.terms-stnc.type-title {
  margin-bottom: 0.3125em;
  font-size: 1.2em;
  font-weight: 700;
  color: #222;
}
.terms-stnc.type-indent {
  padding-left: 1em;
  font-size: 0.95em;
}
.terms-stnc.type-indent-2x {
  padding-left: 2em;
  font-size: 0.9em;
}
.terms-stnc ~ .terms-stnc {
  margin-top: 0.25em;
}

.terms-frame:has(.terms-group) {
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
}

.terms-table {
  overflow: auto;
  margin: 0.625rem 0;
}
.terms-table table {
  width: 100%;
  min-width: 48rem;
}
.terms-table table thead th {
  background-color: #333;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.terms-table table th, .terms-table table td {
  padding: 0.625rem;
  border: 1px solid #555;
  text-align: center;
  vertical-align: middle;
  background-color: #fff;
  font-size: 0.9em;
  word-break: keep-all;
}