html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
a {
  background-color: rgba(0, 0, 0, 0);
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: inherit;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
figure,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td,
form,
fieldset,
blockquote,
iframe {
  margin: 0;
  padding: 0;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
html * {
  box-sizing: border-box;
  word-wrap: break-word;
}
article,
aside,
canvas,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}
command,
datalist,
keygen,
mark,
meter,
progress,
rp,
rt,
ruby,
time,
wbr {
  display: inline;
}
img {
  vertical-align: top;
  border: 0;
}
fieldset {
  border: 0;
}
ul,
ol,
li {
  list-style: none;
}
hr {
  display: none;
  border: 0;
}
pre {
  white-space: pre-wrap;
}
legend,
caption {
  display: none;
  clear: both;
}
a {
  color: inherit;
  cursor: pointer;
}
a:link {
  text-decoration: none;
}
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
  word-break: break-all;
}
em,
i,
address,
cite {
  font-style: normal;
  font-weight: 300;
}
input,
textarea,
select,
button,
table {
  font-size: inherit;
  font-family: inherit;
  *font-size: inherit;
  border: 0;
  background-color: rgba(0, 0, 0, 0);
}
button,
select {
  cursor: pointer;
}
textarea,
input,
select {
  border-radius: 0;
  border: 0;
  outline-style: none;
  outline-width: medium;
}
textarea {
  resize: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
label {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
label img {
  pointer-events: none;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  border-collapse: collapse;
}
progress[value] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background-size: auto;
}
progress[value][role][aria-valuenow] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background-size: auto;
}
progress[value][role][aria-valuenow]:after {
  background-image: none;
}
progress[value][role][aria-valuenow]:before {
  display: table;
}
progress[value][role][aria-valuenow] strong {
  display: none;
}
progress[value][role][aria-valuenow]::-webkit-progress-value,
progress[value][role][aria-valuenow]::-webkit-progress-inner-element {
  display: table;
}
progress[value][role][aria-valuenow]::-webkit-progress-bar {
  display: table-cell;
}
progress[value][role][aria-valuenow]::-moz-progress-bar,
progress[value][role][aria-valuenow]::-webkit-progress-value {
  display: table;
}
textarea {
  color: inherit;
}
textarea:focus::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0);
}
textarea:focus:-moz-placeholder {
  color: rgba(0, 0, 0, 0);
}
textarea:focus::-moz-placeholder {
  color: rgba(0, 0, 0, 0);
}
textarea:focus:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0);
}
input[type="reset"],
input[type="button"],
input[type="submit"] {
  line-height: normal !important;
  cursor: pointer;
}
input[type="button"],
input[type="text"],
input[type="image"],
input[type="submit"] {
  -webkit-appearance: none;
}
input:checked[type="checkbox"] {
  background-color: #fff;
  -webkit-appearance: checkbox;
}
input {
  color: inherit;
}
input::-webkit-input-placeholder {
  color: inherit;
}
input::-moz-placeholder {
  color: inherit;
}
input:-ms-input-placeholder {
  color: inherit;
}
input:-moz-placeholder {
  color: inherit;
}
input:focus::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0);
}
input:focus:-moz-placeholder {
  color: rgba(0, 0, 0, 0);
}
input:focus::-moz-placeholder {
  color: rgba(0, 0, 0, 0);
}
input:focus:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0);
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: inherit;
  box-shadow: 0 0 0px 1000px #fff inset;
}
select::-ms-expand {
  display: none;
}
input[type="date"]::-webkit-clear-button {
  display: none;
}
input[type="date"]::-webkit-inner-spin-button {
  display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  color: #343434;
  background: #fff;
}
input[type="date"] {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  display: inline-block !important;
  visibility: visible !important;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-Thin.otf) format("opentype"),
    url(/assets/fonts/Pretendard-Thin.ttf) format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-ExtraLight.otf) format("opentype"),
    url(/assets/fonts/Pretendard-ExtraLight.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-Light.otf) format("opentype"),
    url(/assets/fonts/Pretendard-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-Regular.otf) format("opentype"),
    url(/assets/fonts/Pretendard-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-Medium.otf) format("opentype"),
    url(/assets/fonts/Pretendard-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-SemiBold.otf) format("opentype"),
    url(/assets/fonts/Pretendard-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-Bold.otf) format("opentype"),
    url(/assets/fonts/Pretendard-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-ExtraBold.otf) format("opentype"),
    url(/assets/fonts/Pretendard-ExtraBold.ttf) format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src:
    url(/assets/fonts/Pretendard-Black.otf) format("opentype"),
    url(/assets/fonts/Pretendard-Black.ttf) format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Hanwha";
  src: url(/assets/fonts/HanwhaL.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Hanwha";
  src: url(/assets/fonts/HanwhaR.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-XLight.otf) format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Light.otf) format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Bold.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-XBold.otf) format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Black.otf) format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-XBlack.otf) format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-XLight.otf) format("opentype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Light.otf) format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Bold.otf) format("opentype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-XBold.otf) format("opentype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-Black.otf) format("opentype");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Trust2ATRIAL";
  src: url(/assets/fonts/Trust2ATRIAL-XBlack.otf) format("opentype");
  font-weight: 900;
  font-style: italic;
}
:root {
  --hwf-font-size-base: 62.5%;
  --hwf-base-line-height: 1.5;
  --hwf-content-width: 130rem;
  --hwf-content-width-large: 168rem;
  --hwf-content-padding-x: 4rem;
  --hwf-content-wrap-width: calc(var(--hwf-content-width) + var(--hwf-content-padding-x) * 2);
  --hwf-content-wrap-width-large: calc(var(--hwf-content-width-large) + var(--hwf-content-padding-x) * 2);
  --hwf-font-size-en-display-large: 16rem;
  --hwf-font-size-en-display-medium: 12rem;
  --hwf-font-size-en-display-small: 9.6rem;
  --hwf-font-size-title-xxlarge: 6.4rem;
  --hwf-font-size-title-xlarge: 4.8rem;
  --hwf-font-size-title-large: 4rem;
  --hwf-font-size-title-medium: 3.2rem;
  --hwf-font-size-title-small: 2.8rem;
  --hwf-font-size-title-xsmall: 2.4rem;
  --hwf-font-size-title-xxsmall: 2.1rem;
  --hwf-font-size--body-xxlarge: 4rem;
  --hwf-font-size--body-xlarge: 3.2rem;
  --hwf-font-size--body-large: 2.4rem;
  --hwf-font-size--body-medium: 2.1rem;
  --hwf-font-size--body-small: 1.8rem;
  --hwf-font-size--body-xsmall: 1.6rem;
  --hwf-font-size--body-xxsmall: 1.5rem;
  --hwf-font-size--body-xxxsmall: 1.4rem;
  --hwf-font-size-label-large: 1.8rem;
  --hwf-font-size-label-medium: 1.6rem;
  --hwf-font-size-label-small: 1.5rem;
  --hwf-radius-medium: 0.2rem;
  --hwf-radius-large: 0.4rem;
  --hwf-radius-max: 100rem;
  --hwf-icon-size-xsmall: 1.2rem;
  --hwf-icon-size-small: 1.4rem;
  --hwf-icon-size-medium: 1.6rem;
  --hwf-icon-size-large: 2rem;
  --hwf-icon-size-xlarge: 2.4rem;
  --hwf-icon-size-xxlarge: 4rem;
  --hwf-icon-size-xxxlarge: 4.8rem;
  --hwf-transition-base: 0.4s ease-in-out;
  --hwf-color-gray-5: #f5f4f4;
  --hwf-color-gray-10: #e6e5e5;
  --hwf-color-gray-20: #d7d5d5;
  --hwf-color-gray-30: #c3c1c1;
  --hwf-color-gray-40: #969292;
  --hwf-color-gray-50: #757070;
  --hwf-color-gray-60: #605c5c;
  --hwf-color-gray-70: #494646;
  --hwf-color-gray-80: #272626;
  --hwf-color-gray-90: #151414;
  --hwf-color-sub-5: #f3f2f1;
  --hwf-color-sub-10: #e7e5e4;
  --hwf-color-sub-20: #dcd8d6;
  --hwf-color-sub-30: #c7c1bd;
  --hwf-color-sub-40: #a19187;
  --hwf-color-sub-50: #a19187;
  --hwf-color-sub-60: #685950;
  --hwf-color-sub-70: #51453d;
  --hwf-color-sub-80: #2c2320;
  --hwf-color-sub-90: #1a140f;
  --hwf-color-orange-lighter: #feeae1;
  --hwf-color-orange-light: #ffcdb8;
  --hwf-color-orange-base: #fe5b16;
  --hwf-color-orange-dark: #f54500;
  --hwf-color-brown-base: #030303;
  --hwf-color-navy-base: #02204b;
  --hwf-color-white: #ffffff;
  --hwf-color-black: #000000;
  --hwf-color-change-up: #ee0f07;
  --hwf-color-change-up-dark: #f65565;
  --hwf-color-change-down: #0a6beb;
  --hwf-color-change-down-dark: #3485fa;
  --hwf-color-point-darkblue: #063874;
  --hwf-color-point-darkorange: #d76800;
  --hwf-color-point-darkred: #bc271f;
  --hwf-color-gradient-text: linear-gradient(90deg, #ff5532 0%, #04021e 100%);
  --hwf-color-gradient-text-dark: ;
  --hwf-color-gradient-line: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
  --hwf-color-gradient-bg: linear-gradient(90deg, rgba(223, 188, 165, 0) 0%, rgba(244, 178, 134, 0.7) 100%);
  --hwf-color-tag-point-bright-red: #f94339;
  --hwf-color-tag-point-vivid-orange: #ff8401;
  --hwf-color-tag-point-violet: #8347eb;
  --hwf-color-text-strong: var(--hwf-color-gray-90);
  --hwf-color-text-basic: var(--hwf-color-gray-80);
  --hwf-color-text-subtle: var(--hwf-color-gray-70);
  --hwf-color-text-subtler: var(--hwf-color-gray-50);
  --hwf-color-text-primary: var(--hwf-color-orange-base);
  --hwf-color-text-primary-dark: var(--hwf-color-orange-dark);
  --hwf-color-text-white: var(--hwf-color-white);
  --hwf-color-text-disabled: #b1b8be;
  --hwf-color-text-disabled-on: #8a949e;
  --hwf-color-input-surface: #ffffff;
  --hwf-color-input-surface-disabled: #e6e5e5;
  --hwf-color-input-surface-gray: var(--hwf-color-sub-80);
  --hwf-color-input-border: #c3c1c1;
  --hwf-color-input-border-active: #fe5b16;
  --hwf-color-input-border-disabled: #c3c1c1;
  --hwf-color-input-border-error: #e81311;
  --hwf-color-button-primary-fill: var(--hwf-color-orange-dark);
  --hwf-color-button-primary-fill-hover: #8a240f;
  --hwf-color-button-primary-fill-pressed: #8a240f;
  --hwf-color-button-secondary-fill: #fcebe4;
  --hwf-color-button-secondary-fill-hover: #f4c0a9;
  --hwf-color-button-secondary-fill-pressed: #f4c0a9;
  --hwf-color-button-secondary-border: #f4c0a9;
  --hwf-color-button-tertiary-fill: #f3f2f1;
  --hwf-color-button-tertiary-fill-hover: #ddd;
  --hwf-color-button-tertiary-fill-pressed: #ddd;
  --hwf-color-button-black-fill: var(--hwf-color-sub-80);
  --hwf-color-button-black-fill-hover: var(--hwf-color-gray-90);
  --hwf-color-button-black-fill-pressed: var(--hwf-color-gray-90);
  --hwf-color-button-disabled-fill: var(--hwf-color-sub-30);
  --hwf-color-button-disabled-border: var(--hwf-color-sub-30);
  --hwf-color-button-text-fill: #ffffff00;
  --hwf-color-button-text-fill-hover: #f5f5f5;
  --hwf-color-button-text-fill-pressed: transparent;
  --hwf-color-button-text-disabled: var(--hwf-color-text-white);
  --hwf-color-button-text-disabled-on: #8a949e;
}
@media (max-width: 640px) {
  :root {
    --hwf-content-padding-x: 1.6rem;
    --hwf-font-size-title-xxlarge: 4rem;
    --hwf-font-size-title-xlarge: 3.2rem;
    --hwf-font-size-title-large: 2.8rem;
    --hwf-font-size-title-medium: 2.8rem;
    --hwf-font-size-title-small: 2.4rem;
    --hwf-font-size--body-large: 2.1rem;
  }
}
html {
  font-size: var(--hwf-font-size-base);
  scroll-behavior: smooth;
  font-family: "Pretendard", sans-serif;
}
.wrap {
  color: var(--hwf-color-text-basic);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: var(--hwf-base-line-height);
}
.blind,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.f-hanwha {
  font-family: "Hanwha", sans-serif;
}
.f-pretend {
  font-family: "Pretendard", sans-serif;
}
.f-trust {
  font-family: "Trust2ATRIAL", sans-serif;
}
.txt-center {
  text-align: center !important;
}
.txt-left {
  text-align: left !important;
}
.txt-right {
  text-align: right !important;
}
.flex {
  display: flex;
}
.justify-start {
  justify-content: flex-start !important;
}
.justify-end {
  justify-content: flex-end !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.align-start {
  align-items: flex-start !important;
}
.align-end {
  align-items: flex-end !important;
}
.align-center {
  align-items: center !important;
}
.align-between {
  align-items: space-between !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-row {
  flex-direction: row !important;
}
.fc-white {
  color: var(--hwf-color-text-white) !important;
}
.fc-gray {
  color: var(--hwf-color-gray-70) !important;
}
.fc-light-gray {
  color: var(--hwf-color-text-subtler) !important;
}
.fc-red {
  color: #f94339 !important;
}
.fc-primary {
  color: var(--hwf-color-text-primary-dark) !important;
}
.fc-black {
  color: var(--hwf-color-text-basic) !important;
}
.fc-dark-black {
  color: var(--hwf-color-text-strong) !important;
}
.fw-bold {
  font-weight: 700 !important;
}
.fw-semibold {
  font-weight: 600 !important;
}
.fw-medium {
  font-weight: 500 !important;
}
.w-full {
  width: 100% !important;
}
.scroll-wrap {
  overflow-x: auto;
}
.pc-only {
  display: flex !important;
}
.pc-tablet-only {
  display: flex !important;
}
.tablet-only {
  display: none !important;
}
.tablet-mobile-only {
  display: none !important;
}
.tablet-small-only {
  display: none !important;
}
.mobile-only {
  display: none !important;
}
@media (max-width: 1024px) {
  .pc-only {
    display: none !important;
  }
  .tablet-only {
    display: flex !important;
  }
  .tablet-mobile-only {
    display: flex !important;
  }
}
@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
  .pc-tablet-only {
    display: flex !important;
  }
  .tablet-small-only {
    display: flex !important;
  }
}
@media (max-width: 640px) {
  .pc-tablet-only {
    display: none !important;
  }
  .pc-only {
    display: none !important;
  }
  .mobile-only {
    display: flex !important;
  }
}
.line-bottom,
.box-list-wrap .tit {
  position: relative;
}
.line-bottom::after,
.box-list-wrap .tit::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.line-top {
  position: relative;
}
.line-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.pt-0 {
  padding-top: calc(0 * 0.1rem) !important;
}
.pt-4 {
  padding-top: calc(4 * 0.1rem) !important;
}
.pt-8 {
  padding-top: calc(8 * 0.1rem) !important;
}
.pt-12 {
  padding-top: calc(12 * 0.1rem) !important;
}
.pt-16 {
  padding-top: calc(16 * 0.1rem) !important;
}
.pt-20 {
  padding-top: calc(20 * 0.1rem) !important;
}
.pt-24 {
  padding-top: calc(24 * 0.1rem) !important;
}
.pt-32 {
  padding-top: calc(32 * 0.1rem) !important;
}
.pt-40 {
  padding-top: calc(40 * 0.1rem) !important;
}
.pt-56 {
  padding-top: calc(56 * 0.1rem) !important;
}
.pb-0 {
  padding-bottom: calc(0 * 0.1rem) !important;
}
.pb-4 {
  padding-bottom: calc(4 * 0.1rem) !important;
}
.pb-8 {
  padding-bottom: calc(8 * 0.1rem) !important;
}
.pb-12 {
  padding-bottom: calc(12 * 0.1rem) !important;
}
.pb-16 {
  padding-bottom: calc(16 * 0.1rem) !important;
}
.pb-20 {
  padding-bottom: calc(20 * 0.1rem) !important;
}
.pb-24 {
  padding-bottom: calc(24 * 0.1rem) !important;
}
.pb-32 {
  padding-bottom: calc(32 * 0.1rem) !important;
}
.pb-40 {
  padding-bottom: calc(40 * 0.1rem) !important;
}
.pb-56 {
  padding-bottom: calc(56 * 0.1rem) !important;
}
.pl-0 {
  padding-left: calc(0 * 0.1rem) !important;
}
.pl-4 {
  padding-left: calc(4 * 0.1rem) !important;
}
.pl-8 {
  padding-left: calc(8 * 0.1rem) !important;
}
.pl-12 {
  padding-left: calc(12 * 0.1rem) !important;
}
.pl-16 {
  padding-left: calc(16 * 0.1rem) !important;
}
.pl-20 {
  padding-left: calc(20 * 0.1rem) !important;
}
.pl-24 {
  padding-left: calc(24 * 0.1rem) !important;
}
.pl-32 {
  padding-left: calc(32 * 0.1rem) !important;
}
.pl-40 {
  padding-left: calc(40 * 0.1rem) !important;
}
.pl-56 {
  padding-left: calc(56 * 0.1rem) !important;
}
.pr-0 {
  padding-right: calc(0 * 0.1rem) !important;
}
.pr-4 {
  padding-right: calc(4 * 0.1rem) !important;
}
.pr-8 {
  padding-right: calc(8 * 0.1rem) !important;
}
.pr-12 {
  padding-right: calc(12 * 0.1rem) !important;
}
.pr-16 {
  padding-right: calc(16 * 0.1rem) !important;
}
.pr-20 {
  padding-right: calc(20 * 0.1rem) !important;
}
.pr-24 {
  padding-right: calc(24 * 0.1rem) !important;
}
.pr-32 {
  padding-right: calc(32 * 0.1rem) !important;
}
.pr-40 {
  padding-right: calc(40 * 0.1rem) !important;
}
.pr-56 {
  padding-right: calc(56 * 0.1rem) !important;
}
.mt-0 {
  margin-top: calc(0 * 0.1rem) !important;
}
.mt-4 {
  margin-top: calc(4 * 0.1rem) !important;
}
.mt-8 {
  margin-top: calc(8 * 0.1rem) !important;
}
.mt-12 {
  margin-top: calc(12 * 0.1rem) !important;
}
.mt-16 {
  margin-top: calc(16 * 0.1rem) !important;
}
.mt-20 {
  margin-top: calc(20 * 0.1rem) !important;
}
.mt-24 {
  margin-top: calc(24 * 0.1rem) !important;
}
.mt-32 {
  margin-top: calc(32 * 0.1rem) !important;
}
.mt-40 {
  margin-top: calc(40 * 0.1rem) !important;
}
.mt-56 {
  margin-top: calc(56 * 0.1rem) !important;
}
.mb-0 {
  margin-bottom: calc(0 * 0.1rem) !important;
}
.mb-4 {
  margin-bottom: calc(4 * 0.1rem) !important;
}
.mb-8 {
  margin-bottom: calc(8 * 0.1rem) !important;
}
.mb-12 {
  margin-bottom: calc(12 * 0.1rem) !important;
}
.mb-16 {
  margin-bottom: calc(16 * 0.1rem) !important;
}
.mb-20 {
  margin-bottom: calc(20 * 0.1rem) !important;
}
.mb-24 {
  margin-bottom: calc(24 * 0.1rem) !important;
}
.mb-32 {
  margin-bottom: calc(32 * 0.1rem) !important;
}
.mb-40 {
  margin-bottom: calc(40 * 0.1rem) !important;
}
.mb-56 {
  margin-bottom: calc(56 * 0.1rem) !important;
}
.ml-0 {
  margin-left: calc(0 * 0.1rem) !important;
}
.ml-4 {
  margin-left: calc(4 * 0.1rem) !important;
}
.ml-8 {
  margin-left: calc(8 * 0.1rem) !important;
}
.ml-12 {
  margin-left: calc(12 * 0.1rem) !important;
}
.ml-16 {
  margin-left: calc(16 * 0.1rem) !important;
}
.ml-20 {
  margin-left: calc(20 * 0.1rem) !important;
}
.ml-24 {
  margin-left: calc(24 * 0.1rem) !important;
}
.ml-32 {
  margin-left: calc(32 * 0.1rem) !important;
}
.ml-40 {
  margin-left: calc(40 * 0.1rem) !important;
}
.ml-56 {
  margin-left: calc(56 * 0.1rem) !important;
}
.mr-0 {
  margin-right: calc(0 * 0.1rem) !important;
}
.mr-4 {
  margin-right: calc(4 * 0.1rem) !important;
}
.mr-8 {
  margin-right: calc(8 * 0.1rem) !important;
}
.mr-12 {
  margin-right: calc(12 * 0.1rem) !important;
}
.mr-16 {
  margin-right: calc(16 * 0.1rem) !important;
}
.mr-20 {
  margin-right: calc(20 * 0.1rem) !important;
}
.mr-24 {
  margin-right: calc(24 * 0.1rem) !important;
}
.mr-32 {
  margin-right: calc(32 * 0.1rem) !important;
}
.mr-40 {
  margin-right: calc(40 * 0.1rem) !important;
}
.mr-56 {
  margin-right: calc(56 * 0.1rem) !important;
}
.gap-0 {
  gap: calc(0 * 0.1rem) !important;
}
.gap-8 {
  gap: calc(8 * 0.1rem) !important;
}
.gap-12 {
  gap: calc(12 * 0.1rem) !important;
}
.gap-16 {
  gap: calc(16 * 0.1rem) !important;
}
.gap-24 {
  gap: calc(24 * 0.1rem) !important;
}
.gap-40 {
  gap: calc(40 * 0.1rem) !important;
}
.gap-80 {
  gap: calc(80 * 0.1rem) !important;
}
.btn {
  --hwf-button--size-height-small: 3.2rem;
  --hwf-button--padding-x-small: 1.6rem;
  --hwf-button--padding-y-small: 0;
  --hwf-button--gap-small: 0.2rem;
  --hwf-button--radius-small: var(--hwf-radius-medium);
  --hwf-button--icon-size-small: var(--hwf-icon-size-medium);
  --hwf-button--font-size-small: var(--hwf-font-size--body-xsmall);
  --hwf-button--size-height-medium: 4.8rem;
  --hwf-button--padding-x-medium: 2.4rem;
  --hwf-button--padding-y-medium: 0;
  --hwf-button--gap-medium: 0.4rem;
  --hwf-button--radius-medium: var(--hwf-radius-medium);
  --hwf-button--icon-size-medium: var(--hwf-icon-size-medium);
  --hwf-button--font-size-medium: var(--hwf-font-size--body-small);
  --hwf-button--size-height-large: 5.6rem;
  --hwf-button--padding-x-large: 4rem;
  --hwf-button--padding-y-large: 0;
  --hwf-button--gap-large: 0.8rem;
  --hwf-button--radius-large: var(--hwf-radius-medium);
  --hwf-button--icon-size-large: var(--hwf-icon-size-large);
  --hwf-button--font-size-large: var(--hwf-font-size--body-small);
  --hwf-button--size-height-xlarge: 6.4rem;
  --hwf-button--padding-x-xlarge: 4rem;
  --hwf-button--padding-y-xlarge: 0;
  --hwf-button--gap-xlarge: 0.8rem;
  --hwf-button--radius-xlarge: var(--hwf-radius-medium);
  --hwf-button--icon-size-xlarge: var(--hwf-icon-size-xlarge);
  --hwf-button--font-size-xlarge: var(--hwf-font-size--body-medium);
  --hwf-button--color-primary-fill: var(--hwf-color-button-primary-fill);
  --hwf-button--color-primary-fill-hover: var(--hwf-color-button-primary-fill-hover);
  --hwf-button--color-primary-fill-pressed: var(--hwf-color-button-primary-fill-pressed);
  --hwf-button--color-primary-fill-disabled: var(--hwf-color-button-disabled-fill);
  --hwf-button--color-primary-border: var(--hwf-color-button-primary-fill);
  --hwf-button--color-primary-border-disabled: var(--hwf-color-button-disabled-fill);
  --hwf-button--color-primary-text: var(--hwf-color-text-white);
  --hwf-button--color-primary-text-disabled: var(--hwf-color-text-disabled-on);
  --hwf-button--color-secondary-fill: var(--hwf-color-button-secondary-fill);
  --hwf-button--color-secondary-fill-hover: var(--hwf-color-button-secondary-fill-hover);
  --hwf-button--color-secondary-fill-pressed: var(--hwf-color-button-secondary-fill-pressed);
  --hwf-button--color-secondary-fill-disabled: var(--hwf-color-button-disabled-fill);
  --hwf-button--color-secondary-border: var(--hwf-color-button-secondary-border);
  --hwf-button--color-secondary-border-disabled: var(--hwf-color-button-disabled-border);
  --hwf-button--color-secondary-text: var(--hwf-text-basic);
  --hwf-button--color-secondary-text-disabled: var(--hwf-color-text-disabled-on);
  --hwf-button--color-tertiary-fill: var(--hwf-color-button-tertiary-fill);
  --hwf-button--color-tertiary-fill-hover: var(--hwf-color-button-tertiary-fill-hover);
  --hwf-button--color-tertiary-fill-pressed: var(--hwf-color-button-tertiary-fill-pressed);
  --hwf-button--color-tertiary-fill-disabled: var(--hwf-color-button-disabled-fill);
  --hwf-button--color-tertiary-border: var(--hwf-color-button-tertiary-fill);
  --hwf-button--color-tertiary-border-disabled: var(--hwf-color-button-disabled-border);
  --hwf-button--color-tertiary-text: var(--hwf-text-basic);
  --hwf-button--color-tertiary-text-disabled: var(--hwf-color-text-disabled-on);
  --hwf-button--color-black-fill: var(--hwf-color-button-black-fill);
  --hwf-button--color-black-fill-hover: var(--hwf-color-button-black-fill-hover);
  --hwf-button--color-black-fill-pressed: var(--hwf-color-button-black-fill-pressed);
  --hwf-button--color-black-fill-disabled: var(--hwf-color-button-disabled-fill);
  --hwf-button--color-black-border: var(--hwf-color-button-black-fill);
  --hwf-button--color-black-border-disabled: var(--hwf-color-button-disabled-border);
  --hwf-button--color-black-text: var(--hwf-color-text-white);
  --hwf-button--color-black-text-disabled: var(--hwf-color-button-text-disabled);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  border-style: solid;
  border-width: 0.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--hwf-transition-base);
  gap: var(--hwf-button--gap-large);
  height: var(--hwf-button--size-height-large);
  padding: var(--hwf-button--padding-y-large) var(--hwf-button--padding-x-large);
  border-radius: var(--hwf-button--radius-large);
  font-size: var(--hwf-button--font-size-large);
  font-weight: 400;
}
.btn .svg-icon {
  width: var(--hwf-button--icon-size-large);
  height: var(--hwf-button--icon-size-large);
}
.btn {
  background-color: var(--hwf-button--color-black-fill);
  border-color: var(--hwf-button--color-black-border);
  color: var(--hwf-button--color-black-text);
}
.btn .svg-icon {
  flex-shrink: 0;
  background-color: var(--hwf-color-text-white);
  transition: var(--hwf-transition-base);
}
.btn:hover {
  background-color: var(--hwf-button--color-black-fill-hover);
}
.btn:active,
.btn:focus {
  background-color: var(--hwf-button--color-black-fill-pressed);
}
.btn[disabled],
.btn.disabled {
  background-color: var(--hwf-button--color-black-fill-disabled);
  border-color: var(--hwf-button--color-black-border-disabled);
  color: var(--hwf-button--color-black-text-disabled);
  cursor: default;
}
.btn[disabled]:hover,
.btn.disabled:hover {
  background-color: var(--hwf-button--color-black-fill-disabled);
  border-color: var(--hwf-button--color-black-border-disabled);
  color: var(--hwf-button--color-black-text-disabled);
}
.btn.small {
  gap: var(--hwf-button--gap-small);
  height: var(--hwf-button--size-height-small);
  padding: var(--hwf-button--padding-y-small) var(--hwf-button--padding-x-small);
  border-radius: var(--hwf-button--radius-small);
  font-size: var(--hwf-button--font-size-small);
  font-weight: 400;
}
.btn.small .svg-icon {
  width: var(--hwf-button--icon-size-small);
  height: var(--hwf-button--icon-size-small);
}
.btn.medium {
  gap: var(--hwf-button--gap-medium);
  height: var(--hwf-button--size-height-medium);
  padding: var(--hwf-button--padding-y-medium) var(--hwf-button--padding-x-medium);
  border-radius: var(--hwf-button--radius-medium);
  font-size: var(--hwf-button--font-size-medium);
  font-weight: 400;
}
.btn.medium .svg-icon {
  width: var(--hwf-button--icon-size-medium);
  height: var(--hwf-button--icon-size-medium);
}
.btn.large {
  gap: var(--hwf-button--gap-large);
  height: var(--hwf-button--size-height-large);
  padding: var(--hwf-button--padding-y-large) var(--hwf-button--padding-x-large);
  border-radius: var(--hwf-button--radius-large);
  font-size: var(--hwf-button--font-size-large);
  font-weight: 400;
}
.btn.large .svg-icon {
  width: var(--hwf-button--icon-size-large);
  height: var(--hwf-button--icon-size-large);
}
.btn.xlarge {
  gap: var(--hwf-button--gap-xlarge);
  height: var(--hwf-button--size-height-xlarge);
  padding: var(--hwf-button--padding-y-xlarge) var(--hwf-button--padding-x-xlarge);
  border-radius: var(--hwf-button--radius-xlarge);
  font-size: var(--hwf-button--font-size-xlarge);
  font-weight: 400;
}
.btn.xlarge .svg-icon {
  width: var(--hwf-button--icon-size-xlarge);
  height: var(--hwf-button--icon-size-xlarge);
}
.btn.primary {
  background-color: var(--hwf-button--color-primary-fill);
  border-color: var(--hwf-button--color-primary-border);
  color: var(--hwf-button--color-primary-text);
}
.btn.primary:hover {
  background-color: var(--hwf-button--color-primary-fill-hover);
}
.btn.primary:active,
.btn.primary:focus {
  background-color: var(--hwf-button--color-primary-fill-pressed);
}
.btn.primary[disabled],
.btn.primary.disabled {
  background-color: var(--hwf-button--color-primary-fill-disabled);
  border-color: var(--hwf-button--color-primary-border-disabled);
  color: var(--hwf-button--color-primary-text-disabled);
  cursor: default;
}
.btn.primary[disabled]:hover,
.btn.primary.disabled:hover {
  background-color: var(--hwf-button--color-primary-fill-disabled);
  border-color: var(--hwf-button--color-primary-border-disabled);
  color: var(--hwf-button--color-primary-text-disabled);
}
.btn.secondary {
  background-color: var(--hwf-button--color-secondary-fill);
  border-color: var(--hwf-button--color-secondary-border);
  color: var(--hwf-button--color-secondary-text);
}
.btn.secondary:hover {
  background-color: var(--hwf-button--color-secondary-fill-hover);
}
.btn.secondary:active,
.btn.secondary:focus {
  background-color: var(--hwf-button--color-secondary-fill-pressed);
}
.btn.secondary[disabled],
.btn.secondary.disabled {
  background-color: var(--hwf-button--color-secondary-fill-disabled);
  border-color: var(--hwf-button--color-secondary-border-disabled);
  color: var(--hwf-button--color-secondary-text-disabled);
  cursor: default;
}
.btn.secondary[disabled]:hover,
.btn.secondary.disabled:hover {
  background-color: var(--hwf-button--color-secondary-fill-disabled);
  border-color: var(--hwf-button--color-secondary-border-disabled);
  color: var(--hwf-button--color-secondary-text-disabled);
}
.btn.tertiary {
  background-color: var(--hwf-button--color-tertiary-fill);
  border-color: var(--hwf-button--color-tertiary-border);
  color: var(--hwf-button--color-tertiary-text);
}
.btn.tertiary:hover {
  background-color: var(--hwf-button--color-tertiary-fill-hover);
}
.btn.tertiary:active,
.btn.tertiary:focus {
  background-color: var(--hwf-button--color-tertiary-fill-pressed);
}
.btn.tertiary[disabled],
.btn.tertiary.disabled {
  background-color: var(--hwf-button--color-tertiary-fill-disabled);
  border-color: var(--hwf-button--color-tertiary-border-disabled);
  color: var(--hwf-button--color-tertiary-text-disabled);
  cursor: default;
}
.btn.tertiary[disabled]:hover,
.btn.tertiary.disabled:hover {
  background-color: var(--hwf-button--color-tertiary-fill-disabled);
  border-color: var(--hwf-button--color-tertiary-border-disabled);
  color: var(--hwf-button--color-tertiary-text-disabled);
}
.btn.black {
  background-color: var(--hwf-button--color-black-fill);
  border-color: var(--hwf-button--color-black-border);
  color: var(--hwf-button--color-black-text);
}
.btn.black:hover {
  background-color: var(--hwf-button--color-black-fill-hover);
}
.btn.black:active,
.btn.black:focus {
  background-color: var(--hwf-button--color-black-fill-pressed);
}
.btn.black[disabled],
.btn.black.disabled {
  background-color: var(--hwf-button--color-black-fill-disabled);
  border-color: var(--hwf-button--color-black-border-disabled);
  color: var(--hwf-button--color-black-text-disabled);
  cursor: default;
}
.btn.black[disabled]:hover,
.btn.black.disabled:hover {
  background-color: var(--hwf-button--color-black-fill-disabled);
  border-color: var(--hwf-button--color-black-border-disabled);
  color: var(--hwf-button--color-black-text-disabled);
}
.btn.text {
  padding: 0;
  height: auto;
  color: var(--hwf-color-text-basic);
  background-color: var(--hwf-color-button-text-fill);
  border-color: var(--hwf-color-button-text-fill);
}
.btn.text .svg-icon {
  background-color: var(--hwf-color-text-basic);
}
.btn.text.primary {
  color: var(--hwf-color-text-primary);
}
.btn.text.primary .svg-icon {
  background-color: var(--hwf-color-text-primary);
}
.btn.text.secondary {
  color: var(--hwf-color-text-secondary);
}
.btn.text.secondary .svg-icon {
  background-color: var(--hwf-color-text-secondary);
}
.btn.text:hover {
  background-color: var(--hwf-color-button-text-fill-hover);
}
.btn.text:active,
.btn.text:focus {
  background-color: var(--hwf-color-button-text-fill-pressed);
}
.btn.text[disabled],
.btn.text.disabled {
  color: var(--hwf-color-text-disabled-on);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}
.btn.text[disabled]:hover,
.btn.text.disabled:hover {
  background-color: rgba(0, 0, 0, 0);
}
.btn.text.large .svg-icon {
  width: 2.4rem;
  height: 2.4rem;
}
.btn.link {
  border-radius: var(--hwf-radius-large);
}
.btn.link.medium {
  padding: 0 2.4rem;
}
.btn.link.large {
  padding: 0 4rem;
}
.btn.outline {
  padding: 0 2.4rem;
  color: #2c2320;
  border: 0.1rem solid #2c2320;
  background-color: #fff;
}
.btn.outline .svg-icon {
  background-color: currentColor;
}
.btn.outline.white {
  color: #fff;
  border-color: #fff;
  background-color: rgba(0, 0, 0, 0);
}
.btn.line {
  justify-content: space-between;
  padding: 0 1.6rem;
  color: var(--hwf-color-text-basic);
  background-color: var(--hwf-color-button-text-fill);
  border-color: var(--hwf-color-text-basic);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.btn.line .svg-icon {
  background-color: var(--hwf-color-text-basic);
}
.btn.line.dark:hover,
.btn.line.dark:active,
.btn.line.dark:focus {
  background-color: #e7e5e4;
}
.btn.line:hover,
.btn.line:active,
.btn.line:focus {
  background-color: #f3f2f1;
}
.btn.line[disabled],
.btn.line.disabled {
  color: var(--hwf-color-text-disabled-on);
  background-color: rgba(0, 0, 0, 0);
  border-color: var(--hwf-color-button-disabled-border);
}
.btn.line[disabled] .svg-icon,
.btn.line.disabled .svg-icon {
  background-color: var(--hwf-color-button-disabled-border);
}
.btn.line[disabled]:hover,
.btn.line.disabled:hover {
  background-color: rgba(0, 0, 0, 0);
}
.btn.underline {
  text-decoration: underline;
}
.btn.icon {
  --hwf-button--icon-size-xsmall: var(--hwf-icon-size-xsmall);
  --hwf-button--icon-size-small: var(--hwf-icon-size-small);
  --hwf-button--icon-size-medium: var(--hwf-icon-size-medium);
  --hwf-button--icon-size-large: var(--hwf-icon-size-large);
  --hwf-button--icon-size-xlarge: var(--hwf-icon-size-xlarge);
  --hwf-button--icon-size-xxlarge: var(--hwf-icon-size-xxlarge);
  --hwf-button--icon-size-xxxlarge: var(--hwf-icon-size-xxxlarge);
  width: var(--hwf-button--icon-size-large);
  height: var(--hwf-button--icon-size-large);
  padding: 0 !important;
  background-color: var(--hwf-color-button-text-fill);
  border: none;
  color: inherit;
}
.btn.icon .svg-icon {
  background-color: var(--hwf-color-text-basic);
}
.btn.icon:hover {
  background-color: var(--hwf-color-button-text-fill-hover);
}
.btn.icon:active,
.btn.icon:focus {
  background-color: var(--hwf-color-button-text-fill-pressed);
}
.btn.icon.xsmall {
  width: var(--hwf-button--icon-size-xsmall);
  height: var(--hwf-button--icon-size-xsmall);
}
.btn.icon.xsmall .svg-icon {
  width: 100%;
  height: 100%;
}
.btn.icon.small {
  width: var(--hwf-button--icon-size-small);
  height: var(--hwf-button--icon-size-small);
}
.btn.icon.small .svg-icon {
  width: 100%;
  height: 100%;
}
.btn.icon.medium {
  width: var(--hwf-button--icon-size-medium);
  height: var(--hwf-button--icon-size-medium);
}
.btn.icon.medium .svg-icon {
  width: 100%;
  height: 100%;
}
.btn.icon.large {
  width: var(--hwf-button--icon-size-large);
  height: var(--hwf-button--icon-size-large);
}
.btn.icon.large .svg-icon {
  width: 100%;
  height: 100%;
}
.btn.icon.xlarge {
  width: var(--hwf-button--icon-size-xlarge);
  height: var(--hwf-button--icon-size-xlarge);
}
.btn.icon.xlarge .svg-icon {
  width: 100%;
  height: 100%;
}
.btn.icon.xxlarge {
  width: var(--hwf-button--icon-size-xxlarge);
  height: var(--hwf-button--icon-size-xxlarge);
}
.btn.icon.xxlarge .svg-icon {
  width: 100%;
  height: 100%;
}
.btn.icon.xxxlarge {
  width: var(--hwf-button--icon-size-xxxlarge);
  height: var(--hwf-button--icon-size-xxxlarge);
}
.btn.icon.xxxlarge .svg-icon {
  width: 100%;
  height: 100%;
}
.btn.icon.round {
  border-radius: var(--hwf-radius-max);
}
.btn.icon[class*="bg-"] .svg-icon {
  width: 60%;
  height: 60%;
}
.btn.icon[class*="bg-"].xxlarge .svg-icon {
  width: var(--hwf-icon-size-xlarge);
  height: var(--hwf-icon-size-xlarge);
}
.btn.icon[class*="bg-"].xxxlarge .svg-icon {
  width: 3rem;
  height: 3rem;
}
.btn.icon.bg-deep-gray {
  background-color: var(--hwf-color-gray-80);
}
.btn.icon.bg-deep-gray .svg-icon {
  background-color: var(--hwf-color-text-white);
}
.btn.icon.bg-deep-gray:hover {
  background-color: #000;
}
.btn.icon.bg-deep-gray:active,
.btn.icon.bg-deep-gray:focus {
  background-color: #000;
}
.btn.icon.bg-gray {
  background-color: hsla(0, 0%, 100%, 0.2);
}
.btn.icon.bg-gray .svg-icon {
  background-color: var(--hwf-color-text-white);
}
.btn.icon.bg-gray:hover,
.btn.icon.bg-gray:active,
.btn.icon.bg-gray:focus {
  background-color: var(--hwf-color-white);
}
.btn.icon.bg-gray:hover .svg-icon,
.btn.icon.bg-gray:active .svg-icon,
.btn.icon.bg-gray:focus .svg-icon {
  background-color: var(--hwf-color-text-basic);
}
.btn.icon.bg-white {
  background-color: #fff;
}
.btn.icon.bg-white .svg-icon {
  background-color: var(--hwf-color-text-basic);
}
.btn.icon.bg-white:hover,
.btn.icon.bg-white:active,
.btn.icon.bg-white:focus {
  background-color: var(--hwf-color-sub-5);
}
.btn.more.medium {
  padding: 0 3.2rem;
}
.btn.more.large {
  padding: 0 4rem;
}
@media (max-width: 640px) {
  .btn {
    padding: var(--hwf-button--padding-y-medium) var(--hwf-button--padding-x-medium);
    height: var(--hwf-button--size-height-medium);
  }
  .btn:not(.text).large {
    padding: var(--hwf-button--padding-y-medium) var(--hwf-button--padding-x-medium);
    height: var(--hwf-button--size-height-medium);
  }
  .btn:not(.text).medium {
    padding: var(--hwf-button--padding-y-small) var(--hwf-button--padding-x-small);
    height: var(--hwf-button--size-height-small);
  }
  .btn:not(.text).small {
    padding: var(--hwf-button--padding-y-small) var(--hwf-button--padding-x-small);
    height: var(--hwf-button--size-height-small);
  }
  .btn.icon-mo-only span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .btn.icon-mo-only.small {
    padding: 0;
    width: var(--hwf-button--size-height-small);
  }
  .btn.icon-mo-only.medium {
    padding: 0;
    width: var(--hwf-button--size-height-medium);
  }
  .btn.icon-mo-only.large {
    padding: 0;
    width: var(--hwf-button--size-height-large);
  }
  .btn.icon-mo-only.xlarge {
    padding: 0;
    width: var(--hwf-button--size-height-xlarge);
  }
  .btn.icon {
    --hwf-button--icon-size-xxlarge: 3.2rem;
  }
  .btn.xlarge {
    padding: 0 2.4rem;
    font-size: 1.7rem;
    height: 4.8rem;
  }
}
.btn-wrap {
  display: flex;
  width: 100%;
  gap: 0.8rem;
}
.btn-wrap.column {
  flex-direction: column;
}
.btn-wrap.column .btn {
  flex: none;
}
.btn-wrap.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.btn-wrap:has(.btn.line).column {
  gap: 0;
}
.btn-wrap:has(.btn.line).column .line + .line {
  border-top: 0;
}
.btn-wrap:has(.btn.line).grid-3 {
  gap: 0 4rem;
}
.btn-wrap:has(.btn.line).grid-3 .line:nth-child(n + 4) {
  border-top: 0;
}
.btn-wrap .btn {
  flex: 1;
}
.btn-wrap.array-left {
  justify-content: flex-start;
}
.btn-wrap.array-left .btn {
  flex: none;
}
.btn-wrap.array-center {
  justify-content: center;
}
.btn-wrap.array-center .btn {
  width: -moz-fit-content;
  width: fit-content;
  flex: none;
}
.btn-wrap.array-right {
  justify-content: flex-end;
}
.btn-wrap.array-right .btn {
  flex: none;
}
@media (max-width: 640px) {
  .btn-wrap.grid-3 {
    grid-template-columns: 1fr;
  }
  .btn-wrap:has(.btn.line).grid-3 {
    gap: 0;
  }
  .btn-wrap:has(.btn.line).grid-3 .line + .line {
    border-top: 0;
  }
}
.badge {
  --hwf-badge--radius: 0.2rem;
  --hwf-badge--size-height-small: 2.4rem;
  --hwf-badge--padding-x-small: 0.8rem;
  --hwf-badge--font-size-small: 1.3rem;
  --hwf-badge--size-height-medium: 3rem;
  --hwf-badge--padding-x-medium: 0.8rem;
  --hwf-badge--font-size-medium: 1.5rem;
  --hwf-badge--color-domestic-element: var(--hwf-color-tag-point-bright-red);
  --hwf-badge--color-domestic-text: var(--hwf-color-text-white);
  --hwf-badge--color-stock-element: var(--hwf-color-tag-point-vivid-orange);
  --hwf-badge--color-stock-text: var(--hwf-color-text-white);
  --hwf-badge--color-global-element: var(--hwf-color-tag-point-violet);
  --hwf-badge--color-global-text: var(--hwf-color-text-white);
  --hwf-badge--color-red-element: var(--hwf-color-tag-point-bright-red);
  --hwf-badge--color-red-text: var(--hwf-color-text-white);
  --hwf-badge--color-orange-element: var(--hwf-color-tag-point-vivid-orange);
  --hwf-badge--color-orange-text: var(--hwf-color-text-white);
  --hwf-badge--color-purple-element: var(--hwf-color-tag-point-violet);
  --hwf-badge--color-purple-text: var(--hwf-color-text-white);
  --hwf-badge--color-level1-element: #f91d00;
  --hwf-badge--color-level1-text: var(--hwf-color-text-white);
  --hwf-badge--color-level2-element: #ff4891;
  --hwf-badge--color-level2-text: var(--hwf-color-text-white);
  --hwf-badge--color-level3-element: #fe6220;
  --hwf-badge--color-level3-text: var(--hwf-color-text-white);
  --hwf-badge--color-level4-element: #ffb80d;
  --hwf-badge--color-level4-text: var(--hwf-color-text-white);
  --hwf-badge--color-level5-element: #00cecf;
  --hwf-badge--color-level5-text: var(--hwf-color-text-white);
  --hwf-badge--color-level6-element: #119eff;
  --hwf-badge--color-level6-text: var(--hwf-color-text-white);
  --hwf-badge--color-new-element: #fe5b16;
  --hwf-badge--color-new-text: var(--hwf-color-text-white);
  --hwf-badge--color-gray-element: #dcd8d6;
  --hwf-badge--color-gray-text: var(--hwf-color-sub-80);
  --hwf-badge--color-light-orange-element: #feeae1;
  --hwf-badge--color-light-orange-text: var(--hwf-color-text-primary-dark);
  --hwf-badge--color-text-basic: var(--hwf-color-text-white);
}
.badge.outline-domestic {
  border-color: var(--hwf-badge--color-domestic-element);
}
.badge.outline-domestic {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-domestic {
  color: var(--hwf-badge--color-domestic-text);
}
.badge.domestic {
  color: var(--hwf-badge--color-domestic-text);
  background-color: var(--hwf-badge--color-domestic-element);
}
.badge.outline-stock {
  border-color: var(--hwf-badge--color-stock-element);
}
.badge.outline-stock {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-stock {
  color: var(--hwf-badge--color-stock-text);
}
.badge.stock {
  color: var(--hwf-badge--color-stock-text);
  background-color: var(--hwf-badge--color-stock-element);
}
.badge.outline-global {
  border-color: var(--hwf-badge--color-global-element);
}
.badge.outline-global {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-global {
  color: var(--hwf-badge--color-global-text);
}
.badge.global {
  color: var(--hwf-badge--color-global-text);
  background-color: var(--hwf-badge--color-global-element);
}
.badge.outline-red {
  border-color: var(--hwf-badge--color-red-element);
}
.badge.outline-red {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-red {
  color: var(--hwf-badge--color-red-text);
}
.badge.red {
  color: var(--hwf-badge--color-red-text);
  background-color: var(--hwf-badge--color-red-element);
}
.badge.outline-orange {
  border-color: var(--hwf-badge--color-orange-element);
}
.badge.outline-orange {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-orange {
  color: var(--hwf-badge--color-orange-text);
}
.badge.orange {
  color: var(--hwf-badge--color-orange-text);
  background-color: var(--hwf-badge--color-orange-element);
}
.badge.outline-purple {
  border-color: var(--hwf-badge--color-purple-element);
}
.badge.outline-purple {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-purple {
  color: var(--hwf-badge--color-purple-text);
}
.badge.purple {
  color: var(--hwf-badge--color-purple-text);
  background-color: var(--hwf-badge--color-purple-element);
}
.badge.outline-level1 {
  border-color: var(--hwf-badge--color-level1-element);
}
.badge.outline-level1 {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-level1 {
  color: var(--hwf-badge--color-level1-text);
}
.badge.level1 {
  color: var(--hwf-badge--color-level1-text);
  background-color: var(--hwf-badge--color-level1-element);
}
.badge.outline-level2 {
  border-color: var(--hwf-badge--color-level2-element);
}
.badge.outline-level2 {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-level2 {
  color: var(--hwf-badge--color-level2-text);
}
.badge.level2 {
  color: var(--hwf-badge--color-level2-text);
  background-color: var(--hwf-badge--color-level2-element);
}
.badge.outline-level3 {
  border-color: var(--hwf-badge--color-level3-element);
}
.badge.outline-level3 {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-level3 {
  color: var(--hwf-badge--color-level3-text);
}
.badge.level3 {
  color: var(--hwf-badge--color-level3-text);
  background-color: var(--hwf-badge--color-level3-element);
}
.badge.outline-level4 {
  border-color: var(--hwf-badge--color-level4-element);
}
.badge.outline-level4 {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-level4 {
  color: var(--hwf-badge--color-level4-text);
}
.badge.level4 {
  color: var(--hwf-badge--color-level4-text);
  background-color: var(--hwf-badge--color-level4-element);
}
.badge.outline-level5 {
  border-color: var(--hwf-badge--color-level5-element);
}
.badge.outline-level5 {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-level5 {
  color: var(--hwf-badge--color-level5-text);
}
.badge.level5 {
  color: var(--hwf-badge--color-level5-text);
  background-color: var(--hwf-badge--color-level5-element);
}
.badge.outline-level6 {
  border-color: var(--hwf-badge--color-level6-element);
}
.badge.outline-level6 {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-level6 {
  color: var(--hwf-badge--color-level6-text);
}
.badge.level6 {
  color: var(--hwf-badge--color-level6-text);
  background-color: var(--hwf-badge--color-level6-element);
}
.badge.outline-new {
  border-color: var(--hwf-badge--color-new-element);
}
.badge.outline-new {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-new {
  color: var(--hwf-badge--color-new-text);
}
.badge.new {
  color: var(--hwf-badge--color-new-text);
  background-color: var(--hwf-badge--color-new-element);
}
.badge.outline-gray {
  border-color: var(--hwf-badge--color-gray-element);
}
.badge.outline-gray {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-gray {
  color: var(--hwf-badge--color-gray-text);
}
.badge.gray {
  color: var(--hwf-badge--color-gray-text);
  background-color: var(--hwf-badge--color-gray-element);
}
.badge.outline-light-orange {
  border-color: var(--hwf-badge--color-light-orange-element);
}
.badge.outline-light-orange {
  border-width: 0.1rem;
  border-style: solid;
}
.badge.outline-light-orange {
  color: var(--hwf-badge--color-light-orange-text);
}
.badge.light-orange {
  color: var(--hwf-badge--color-light-orange-text);
  background-color: var(--hwf-badge--color-light-orange-element);
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--hwf-badge--padding-x-medium);
  height: var(--hwf-badge--size-height-medium);
  font-size: var(--hwf-badge--font-size-medium);
  font-weight: 500;
  border-radius: var(--hwf-badge--radius);
}
.badge.small {
  padding: 0 var(--hwf-badge--padding-x-small);
  height: var(--hwf-badge--size-height-small);
  font-size: var(--hwf-badge--font-size-small);
}
.badge.medium {
  padding: 0 var(--hwf-badge--padding-x-medium);
  height: var(--hwf-badge--size-height-medium);
  font-size: var(--hwf-badge--font-size-medium);
}
.badge.line {
  border: 0.1rem solid #969292;
}
.badge-wrap {
  --hwf-badge--wrap-gap: 0.4rem;
  display: flex;
  gap: var(--hwf-badge--wrap-gap);
}
.accordion {
  --hwf-accordion--color-divider: #e7e5e4;
  --hwf-accordion--body-color-bg: #f3f2f1;
  --hwf-accordion--category-color: var(--hwf-color-text-primary);
  --hwf-accordion--title-color: var(--hwf-color-text-subtle);
  --hwf-accordion--body-color: var(--hwf-color-text-subtle);
  --hwf-accordion--button-color-action: transparent;
  --hwf-accordion--button-color-action-hover: #f3f2f1;
  --hwf-accordion--translucent-color-divider: rgba(255, 255, 255, 0.25);
  --hwf-accordion--translucent-title-color: var(--hwf-color-text-strong);
  --hwf-accordion--translucent-body-color: var(--hwf-color-text-strong);
  --hwf-accordion--list-body-color-bg: transparent;
  --hwf-accordion--list-title-color: var(--hwf-color-text-strong);
  --hwf-accordion--list-button-color-action-hover: transparent;
  --hwf-accordion--padding-x: 2.4rem;
  --hwf-accordion--padding-y: 2.8rem;
  --hwf-accordion--button-padding-right: calc(var(--hwf-accordion--padding-x) + var(--hwf-accordion--title-button-gap) + var(--hwf-accordion--button-icon-size));
  --hwf-accordion--font-size: 1.8rem;
  --hwf-accordion--button-icon-size: 2.4rem;
  --hwf-accordion--title-button-gap: 0.8rem;
  --hwf-accordion--list-padding-x: 0;
  --hwf-accordion--list-button-padding-right: calc(var(--hwf-accordion--list-padding-x) + var(--hwf-accordion--title-button-gap) + var(--hwf-accordion--button-icon-size));
  --hwf-accordion--list-body-padding-top: 0.8rem;
  --hwf-accordion--list-body-padding-bottom: 2.4rem;
  --hwf-accordion--list-button-icon-size: 2rem;
}
.accordion .accordion-item {
  border-top: 0.1rem solid var(--hwf-accordion--color-divider);
  transition: var(--hwf-transition-base);
}
.accordion .accordion-item:last-child {
  border-bottom: 0.1rem solid var(--hwf-accordion--color-divider);
}
.accordion .accordion-item .btn-accordion {
  position: relative;
  display: flex;
  gap: 1.6rem;
  padding: var(--hwf-accordion--padding-y) var(--hwf-accordion--button-padding-right) var(--hwf-accordion--padding-y) var(--hwf-accordion--padding-x);
  width: 100%;
  text-align: left;
  background-color: var(--hwf-accordion--button-color-action);
  color: var(--hwf-accordion--title-color);
}
.accordion .accordion-item .btn-accordion .category {
  flex-shrink: 0;
  color: var(--hwf-accordion--category-color);
  font-weight: 500;
}
.accordion .accordion-item .btn-accordion .tit {
  word-break: keep-all;
}
.accordion .accordion-item .btn-accordion::after {
  position: absolute;
  top: var(--hwf-accordion--padding-y);
  right: var(--hwf-accordion--padding-x);
  flex-shrink: 0;
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-plus.svg);
  mask-image: url(/assets/images/icon/ico-plus.svg);
  width: var(--hwf-accordion--button-icon-size);
  height: var(--hwf-accordion--button-icon-size);
  background-color: currentColor;
}
.accordion .accordion-item.active .category {
  font-weight: 600;
}
.accordion .accordion-item.active .tit {
  font-weight: 600;
}
.accordion .accordion-item.active .btn-accordion::after {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-minus.svg);
  mask-image: url(/assets/images/icon/ico-minus.svg);
  background-color: var(--hwf-color-orange-base);
}
.accordion .accordion-item .accordion-body {
  position: relative;
  padding: var(--hwf-accordion--padding-y) var(--hwf-accordion--padding-x);
  color: var(--hwf-color-text-subtle);
  font-size: var(--hwf-accordion--font-size);
  background-color: var(--hwf-accordion--body-color-bg);
}
.accordion .accordion-item .accordion-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.accordion + .btn-wrap {
  --hwf-accordion--more-button-gap: 4rem;
  margin-top: var(--hwf-accordion--more-button-gap);
}
.accordion.translucent {
  border-top: 0.1rem solid hsla(0, 0%, 100%, 0.25);
  border-right: 0.1rem solid hsla(0, 0%, 100%, 0.25);
  border-left: 0.1rem solid hsla(0, 0%, 100%, 0.25);
  background: hsla(0, 0%, 100%, 0.2);
  backdrop-filter: blur(6rem);
}
.accordion.translucent .accordion-item {
  border-top-width: 0;
  border-bottom: 0.1rem solid var(--hwf-accordion--translucent-color-divider);
}
.accordion.translucent .accordion-item .btn-accordion {
  background-color: rgba(0, 0, 0, 0);
}
.accordion.translucent .accordion-item .btn-accordion .tit {
  color: var(--hwf-accordion--translucent-title-color);
}
.accordion.translucent .accordion-item .accordion-body {
  color: var(--hwf-accordion--translucent-body-color);
  background-color: rgba(0, 0, 0, 0);
}
.accordion.translucent .accordion-item .accordion-body::before {
  display: none;
}
.accordion.list .accordion-item {
  border-top: 0;
}
.accordion.list .accordion-item:last-child {
  border-bottom: 0;
}
.accordion.list .accordion-item.active .btn-accordion::after {
  transform: rotate(180deg);
}
.accordion.list .accordion-item .btn-accordion {
  padding-left: var(--hwf-accordion--list-padding-x);
  padding-right: var(--hwf-accordion--list-button-padding-right);
}
.accordion.list .accordion-item .btn-accordion::after {
  margin-top: 0.4rem;
  width: var(--hwf-accordion--list-button-icon-size);
  height: var(--hwf-accordion--list-button-icon-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-down.svg);
  mask-image: url(/assets/images/icon/ico-arrow-down.svg);
}
.accordion.list .accordion-item .btn-accordion:hover,
.accordion.list .accordion-item .btn-accordion:active {
  background-color: var(--hwf-accordion--list-button-color-action-hover);
}
.accordion.list .accordion-item .btn-accordion .tit {
  display: flex;
  gap: 0.8rem;
  color: var(--hwf-accordion--list-title-color);
}
.accordion.list .accordion-item .btn-accordion .tit .count {
  color: #fe5b16;
  font-weight: 400;
}
.accordion.list .accordion-item .accordion-body::before {
  display: none;
}
.accordion.list .accordion-item .accordion-body {
  padding: var(--hwf-accordion--list-body-padding-top) var(--hwf-accordion--list-padding-x) var(--hwf-accordion--list-body-padding-bottom);
  background-color: var(--hwf-accordion--list-body-color-bg);
}
@media (max-width: 768px) {
  .accordion .accordion-item .btn-accordion {
    flex-direction: column;
    gap: 0.4rem;
  }
}
@media (max-width: 640px) {
  .accordion {
    --hwf-accordion--padding-x: 1.6rem;
    --hwf-accordion--padding-y: 2rem;
    --hwf-accordion--font-size: 1.8rem;
    --hwf-accordion--button-icon-size: 2.4rem;
  }
  .accordion + .btn-wrap {
    --hwf-accordion--more-button-gap: 4rem;
  }
}
.input {
  --hwf-input--color-surface: var(--hwf-color-input-surface);
  --hwf-input--color-surface-readonly: var(--hwf-color-input-surface-disabled);
  --hwf-input--color-surface-disabled: var(--hwf-color-input-surface-disabled);
  --hwf-input--color-surface-error: var(--hwf-color-input-surface);
  --hwf-input--color-border: #c3c1c1;
  --hwf-input--color-border-active: var(--hwf-color-input-border-active);
  --hwf-input--color-border-readonly: var(--hwf-color-input-border-disabled);
  --hwf-input--color-border-disabled: var(--hwf-color-input-border-disabled);
  --hwf-input--color-border-error: var(--hwf-color-input-border-error);
  --hwf-input--color-text: var(--hwf-color-text-strong);
  --hwf-input--color-text-active: var(--hwf-color-text-strong);
  --hwf-input--color-text-readonly: var(--hwf-color-text-strong);
  --hwf-input--color-text-disabled: var(--hwf-color-text-subtler);
  --hwf-input--color-text-placeholder: var(--hwf-color-text-subtler);
  --hwf-input--color-text-error: var(--hwf-color-text-strong);
  --hwf-input--padding-x-small: 1.6rem;
  --hwf-input--gap-small: 0.8rem;
  --hwf-input--size-height-small: 4rem;
  --hwf-input--button-clear-size-small: 1.8rem;
  --hwf-input--radius-small: 0.3rem;
  --hwf-input--font-size-small: var(--hwf-font-size-label-small);
  --hwf-input--padding-x-medium: 1.6rem;
  --hwf-input--gap-medium: 0.8rem;
  --hwf-input--size-height-medium: 4.8rem;
  --hwf-input--button-clear-size-medium: 2rem;
  --hwf-input--radius-medium: 0.3rem;
  --hwf-input--font-size-medium: var(--hwf-font-size-label-medium);
  --hwf-input--padding-x-large: 1.6rem;
  --hwf-input--gap-large: 0.8rem;
  --hwf-input--size-height-large: 5.6rem;
  --hwf-input--button-clear-size-large: 2.4rem;
  --hwf-input--radius-large: 0.3rem;
  --hwf-input--font-size-large: var(--hwf-font-size-label-large);
  --hwf-input--padding-x-xlarge: 0.8rem;
  --hwf-input--gap-xlarge: 1.6rem;
  --hwf-input--size-height-xlarge: 8rem;
  --hwf-input--button-clear-size-xlarge: 3.2rem;
  --hwf-input--radius-xlarge: 0;
  --hwf-input--font-size-xlarge: 3.2rem;
}
.input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--hwf-input--color-surface);
  border: 0.1rem solid var(--hwf-input--color-border);
  font-family: inherit;
  color: var(--hwf-input--color-text);
  transition: var(--hwf-transition-base);
}
.input input {
  width: 100%;
  height: 100%;
  border: 0.1rem solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}
.input input:focus {
  outline: none;
}
.input input::-moz-placeholder {
  color: var(--hwf-input--color-text-placeholder);
}
.input input::placeholder {
  color: var(--hwf-input--color-text-placeholder);
}
.input {
  gap: var(--hwf-input--gap-large);
  padding: 0 var(--hwf-input--padding-x-large);
  height: var(--hwf-input--size-height-large);
  border-radius: var(--hwf-input--radius-large);
  font-size: var(--hwf-input--font-size-large);
}
.input.small {
  gap: var(--hwf-input--gap-small);
  padding: 0 var(--hwf-input--padding-x-small);
  height: var(--hwf-input--size-height-small);
  border-radius: var(--hwf-input--radius-small);
  font-size: var(--hwf-input--font-size-small);
}
.input.small .btn-clear {
  width: var(--hwf-input--button-clear-size-small);
  height: var(--hwf-input--button-clear-size-small);
}
.input.medium {
  gap: var(--hwf-input--gap-medium);
  padding: 0 var(--hwf-input--padding-x-medium);
  height: var(--hwf-input--size-height-medium);
  border-radius: var(--hwf-input--radius-medium);
  font-size: var(--hwf-input--font-size-medium);
}
.input.medium .btn-clear {
  width: var(--hwf-input--button-clear-size-medium);
  height: var(--hwf-input--button-clear-size-medium);
}
.input.large {
  gap: var(--hwf-input--gap-large);
  padding: 0 var(--hwf-input--padding-x-large);
  height: var(--hwf-input--size-height-large);
  border-radius: var(--hwf-input--radius-large);
  font-size: var(--hwf-input--font-size-large);
}
.input.large .btn-clear {
  width: var(--hwf-input--button-clear-size-large);
  height: var(--hwf-input--button-clear-size-large);
}
.input.xlarge {
  gap: var(--hwf-input--gap-xlarge);
  padding: 0 var(--hwf-input--padding-x-xlarge);
  height: var(--hwf-input--size-height-xlarge);
  border-radius: var(--hwf-input--radius-xlarge);
  font-size: var(--hwf-input--font-size-xlarge);
}
.input.xlarge .btn-clear {
  width: var(--hwf-input--button-clear-size-xlarge);
  height: var(--hwf-input--button-clear-size-xlarge);
}
.input:focus-within,
.input:focus,
.input.focus {
  border-color: var(--hwf-input--color-border-active);
  outline: none;
  box-shadow: 0 0 0.8rem 0 rgba(245, 69, 0, 0.8);
}
.input:focus-within ~ .textarea-count,
.input:focus ~ .textarea-count,
.input.focus ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.input:focus-within ~ .textarea-count .count-now,
.input:focus ~ .textarea-count .count-now,
.input.focus ~ .textarea-count .count-now {
  color: var(--hwf-input--count-number-color-text-active);
}
.input[readonly],
.input.readonly {
  background-color: var(--hwf-input--color-surface-readonly);
  border-color: var(--hwf-input--color-border-readonly);
  color: var(--hwf-input--color-text-readonly);
}
.input[readonly].datepicker,
.input.readonly.datepicker {
  background-color: var(--hwf-input--color-surface);
  border-color: var(--hwf-input--color-border);
  color: var(--hwf-input--color-text);
}
.input[readonly] ~ .textarea-count,
.input.readonly ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.input[readonly]:focus,
.input.readonly:focus {
  border-color: var(--hwf-input--color-border-active);
}
.input[disabled],
.input.disabled {
  background-color: var(--hwf-input--color-surface-disabled);
  border-color: var(--hwf-input--color-border-disabled);
  color: var(--hwf-input--color-text-disabled);
}
.input[disabled] ~ .textarea-count,
.input.disabled ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.input.is-error {
  background-color: var(--hwf-input--color-surface-error);
  border-color: var(--hwf-input--color-border-error);
  border-width: 2px;
  color: var(--hwf-input--color-text-error);
}
.input.is-error:focus {
  border-color: var(--hwf-input--color-border-active);
}
.input:not(textarea):-moz-placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input:not(textarea):placeholder-shown {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input *:not(input) {
  flex-shrink: 0;
}
.input .btn-clear {
  display: none;
}
.input .btn-clear .svg-icon {
  width: 100%;
  height: 100%;
}
.input .btn-clear.active {
  display: inline-flex;
}
.input input:has(~ .unit) {
  text-align: right;
}
.input.calendar[readonly],
.input.calendar.readonly {
  background-color: rgba(0, 0, 0, 0);
}
.input.calendar[readonly]:focus-within,
.input.calendar[readonly]:focus,
.input.calendar.readonly:focus-within,
.input.calendar.readonly:focus {
  border-color: var(--hwf-input--color-border-active);
}
.input.line {
  border: 0;
  border-bottom: 0.1rem solid #ddd;
  background-color: rgba(0, 0, 0, 0);
}
.input.line:focus-within,
.input.line:focus,
.input.line.focus {
  box-shadow: none;
}
@media (max-width: 640px) {
  .input {
    --hwf-input--font-size-xlarge: 2.1rem;
    --hwf-input--size-height-xlarge: 5.6rem;
  }
}
textarea.input {
  --hwf-input--textarea-size-height: 12rem;
  --hwf-input--textarea-padding-x: 1.6rem;
  --hwf-input--textarea-padding-y: 0.8rem;
  --hwf-input--count-number-font-size: 1.5rem;
  height: var(--hwf-input--textarea-size-height) !important;
  padding: var(--hwf-input--textarea-padding-y) var(--hwf-input--textarea-padding-x);
  line-height: var(--hwf-transition-base);
}
@media (max-width: 768px) {
  textarea.input {
    --hwf-input--textarea-size-height: 24rem;
  }
}
.textarea-wrap {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}
.textarea-wrap .textarea-count {
  --hwf-input--count-number-font-size: 1.5rem;
  --hwf-input--count-number-color-text: var(--hwf-color-text-subtler);
  --hwf-input--count-number-color-text-default: var(--hwf-color-text-disabled);
  --hwf-input--count-number-color-text-active: var(--hwf-color-text-primary);
  --hwf-input--count-number-color-text-error: var(--hwf-color-text-danger);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  width: 100%;
  font-size: var(--hwf-input--count-number-font-size);
  color: var(--hwf-input--count-number-color-text-default);
}
.textarea-wrap .is-error .textarea-count .count-now {
  color: var(--hwf-input--count-number-color-text-error);
}
.textarea-wrap .is-success .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.form-select {
  --hwf-form-select--size-height-small: 4rem;
  --hwf-form-select--icon-size-small: var(--hwf-icon-size-small);
  --hwf-form-select--option-padding-small: 1.2rem;
  --hwf-form-select--radius-small: var(--hwf-radius-medium);
  --hwf-form-select--font-size-small: 1.8rem;
  --hwf-form-select--size-height-medium: 4.8rem;
  --hwf-form-select--icon-size-medium: 2rem;
  --hwf-form-select--option-padding-medium: 1.4rem;
  --hwf-form-select--radius-medium: var(--hwf-radius-medium);
  --hwf-form-select--font-size-medium: var(--hwf-font-size-label-medium);
  --hwf-form-select--size-height-large: 5.6rem;
  --hwf-form-select--icon-size-large: var(--hwf-icon-size-large);
  --hwf-form-select--option-padding-large: 1.6rem;
  --hwf-form-select--radius-large: var(--hwf-radius-medium);
  --hwf-form-select--font-size-large: var(--hwf-font-size-label-large);
  --hwf-form-select--size-height-xlarge: 6.4rem;
  --hwf-form-select--icon-size-xlarge: 2.4rem;
  --hwf-form-select--option-padding-xlarge: 1.6rem;
  --hwf-form-select--radius-xlarge: var(--hwf-radius-medium);
  --hwf-form-select--font-size-xlarge: 3.2rem;
  --hwf-form-select--color-text: var(--hwf-color-text-basic);
  --hwf-form-select--color-text-active: var(--hwf-color-text-basic);
  --hwf-form-select--color-text-completed: var(--hwf-color-text-basic);
  --hwf-form-select--color-text-disabled: var(--hwf-color-text-disabled-on);
  --hwf-form-select--color-text-readonly: var(--hwf-color-text-disabled-on);
  --hwf-form-select--color-text-error: #de3412;
  --hwf-form-select--color-background: #f3f2f1;
  --hwf-form-select--color-background-readonly: var(--hwf-color-input-surface-disabled);
  --hwf-form-select--color-background-disabled: var(--hwf-color-input-surface-disabled);
  --hwf-form-select--color-background-error: var(--hwf-color-input-surface);
  --hwf-form-select--color-border: var(--hwf-color-input-border);
  --hwf-form-select--color-border-active: var(--hwf-color-input-border-active);
  --hwf-form-select--color-border-readonly: var(--hwf-color-input-border-disabled);
  --hwf-form-select--color-border-disabled: var(--hwf-color-input-border-disabled);
  --hwf-form-select--color-border-error: var(--hwf-color-input-border-error);
  --hwf-form-select-listbox--color-text: var(--hwf-color-text-basic);
  --hwf-form-select-listbox--color-text-selected: var(--hwf-color-text-primary);
  --hwf-form-select-listbox--color-border: var(--hwf-color-border-neutral-light);
  --hwf-form-select-listbox--color-background: #fff;
  --hwf-form-select-listbox-option--color-background: var(--hwf-color-sub-5);
  --hwf-form-select-listbox-option--color-background-hover: var(--hwf-color-sub-5);
  --hwf-form-select-listbox-option--color-background-pressed: var(--hwf-color-sub-5);
  --hwf-form-select-listbox-option--color-background-selected: var(--hwf-color-sub-5);
  --hwf-form-select-text--color-background: transparent;
  --hwf-form-select-text--color-background-hover: var(--hwf-color-action-primary-hover);
  --hwf-form-select-text--color-background-pressed: var(--hwf-color-action-primary-pressed);
  --hwf-form-select-text--color-text: var(--hwf-color-text-basic);
  --hwf-form-select-text--color-text-white: var(--hwf-color-text-white);
  --hwf-form-select-text-listbox-option--color-background-hover: var(--hwf-color-action-primary-hover);
  --hwf-form-select--outline-color-background: var(--hwf-color-input-surface);
  --hwf-form-select--outline-color-border: var(--hwf-color-gray-30);
  --hwf-form-select--padding-default: 1.6rem;
  --hwf-form-select-listbox-option--padding-default: 1.2rem;
  --hwf-form-select--border-width-focus: 0.1rem;
  --hwf-form-select-underline--padding-default: 1.6rem;
  --hwf-form-select-text--padding-default: 0.8rem;
  --hwf-form-select-text--radius: 0.2rem;
}
.form-select {
  position: relative;
  padding: 0 var(--hwf-form-select--padding-default);
  color: var(--hwf-form-select--color-text);
  border: 0.1rem solid var(--hwf-form-select--color-border);
  background-color: var(--hwf-form-select--color-background);
  cursor: pointer;
  height: var(--hwf-form-select--size-height-large);
  border-radius: var(--hwf-form-select--radius-large);
  font-size: var(--hwf-form-select--font-size-large);
}
.form-select .select-button::after {
  width: var(--hwf-form-select--icon-size-large);
  height: var(--hwf-form-select--icon-size-large);
}
.form-select .select-listbox {
  --form-select-listbox-max-height: calc(var(--hwf-form-select--size-height-large) * var(--form-select-listbox-option-length) + var(--hwf-form-select--option-padding-large) * 2);
  max-height: var(--form-select-listbox-max-height);
}
.form-select .select-listbox .select-option {
  padding: var(--hwf-form-select--option-padding-large);
}
.form-select .select-listbox .select-option:has(.item-link) {
  padding: 0;
}
.form-select .select-listbox .select-option:has(.item-link) .item-link {
  display: block;
  padding: var(--hwf-form-select--option-padding-large);
  width: 100%;
}
.form-select .select-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  height: 100%;
  color: inherit;
  text-align: left;
}
.form-select .select-button::after {
  content: "";
  display: block;
  flex-shrink: 0;
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-angle.svg);
  mask-image: url(/assets/images/icon/ico-angle.svg);
  background-color: currentColor;
}
.form-select .select-button .select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  color: var(--hwf-form-select--color-text-completed);
}
.form-select .select-button .select-value.placeholder {
  color: var(--hwf-form-select--color-text);
}
.form-select .select-listbox {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: calc(100% + var(--hwf-form-select--border-width-focus));
  z-index: 10;
  width: 100%;
  color: var(--hwf-form-select-listbox--color-text);
  background-color: var(--hwf-form-select-listbox--color-background);
  border: 0.1rem solid var(--hwf-form-select-listbox--color-border);
  border-radius: 0 0 0.4rem 0.4rem;
}
.form-select .select-listbox .select-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  color: #494646;
}
.form-select .select-listbox .select-option::after {
  content: "";
  display: block;
  flex-shrink: 0;
  margin-left: auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: #ddd;
}
.form-select .select-listbox .select-option[aria-selected="true"] {
  color: var(--hwf-form-select-listbox--color-text-selected);
}
.form-select .select-listbox .select-option[aria-selected="true"]::after {
  background-color: currentColor;
}
.form-select .select-listbox .select-option:active,
.form-select .select-listbox .select-option:hover {
  color: var(--hwf-form-select-listbox--color-text-selected);
  background-color: var(--hwf-form-select-listbox-option--color-background-hover);
}
.form-select.ico-plus .select-button::after {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-plus.svg);
  mask-image: url(/assets/images/icon/ico-plus.svg);
}
.form-select.small {
  height: var(--hwf-form-select--size-height-small);
  border-radius: var(--hwf-form-select--radius-small);
  font-size: var(--hwf-form-select--font-size-small);
}
.form-select.small .select-button::after {
  width: var(--hwf-form-select--icon-size-small);
  height: var(--hwf-form-select--icon-size-small);
}
.form-select.small .select-listbox {
  --form-select-listbox-max-height: calc(var(--hwf-form-select--size-height-small) * var(--form-select-listbox-option-length) + var(--hwf-form-select--option-padding-small) * 2);
  max-height: var(--form-select-listbox-max-height);
}
.form-select.small .select-listbox .select-option {
  padding: var(--hwf-form-select--option-padding-small);
}
.form-select.small .select-listbox .select-option:has(.item-link) {
  padding: 0;
}
.form-select.small .select-listbox .select-option:has(.item-link) .item-link {
  display: block;
  padding: var(--hwf-form-select--option-padding-small);
  width: 100%;
}
.form-select.medium {
  height: var(--hwf-form-select--size-height-medium);
  border-radius: var(--hwf-form-select--radius-medium);
  font-size: var(--hwf-form-select--font-size-medium);
}
.form-select.medium .select-button::after {
  width: var(--hwf-form-select--icon-size-medium);
  height: var(--hwf-form-select--icon-size-medium);
}
.form-select.medium .select-listbox {
  --form-select-listbox-max-height: calc(var(--hwf-form-select--size-height-medium) * var(--form-select-listbox-option-length) + var(--hwf-form-select--option-padding-medium) * 2);
  max-height: var(--form-select-listbox-max-height);
}
.form-select.medium .select-listbox .select-option {
  padding: var(--hwf-form-select--option-padding-medium);
}
.form-select.medium .select-listbox .select-option:has(.item-link) {
  padding: 0;
}
.form-select.medium .select-listbox .select-option:has(.item-link) .item-link {
  display: block;
  padding: var(--hwf-form-select--option-padding-medium);
  width: 100%;
}
.form-select.large {
  height: var(--hwf-form-select--size-height-large);
  border-radius: var(--hwf-form-select--radius-large);
  font-size: var(--hwf-form-select--font-size-large);
}
.form-select.large .select-button::after {
  width: var(--hwf-form-select--icon-size-large);
  height: var(--hwf-form-select--icon-size-large);
}
.form-select.large .select-listbox {
  --form-select-listbox-max-height: calc(var(--hwf-form-select--size-height-large) * var(--form-select-listbox-option-length) + var(--hwf-form-select--option-padding-large) * 2);
  max-height: var(--form-select-listbox-max-height);
}
.form-select.large .select-listbox .select-option {
  padding: var(--hwf-form-select--option-padding-large);
}
.form-select.large .select-listbox .select-option:has(.item-link) {
  padding: 0;
}
.form-select.large .select-listbox .select-option:has(.item-link) .item-link {
  display: block;
  padding: var(--hwf-form-select--option-padding-large);
  width: 100%;
}
.form-select.xlarge {
  height: var(--hwf-form-select--size-height-xlarge);
  border-radius: var(--hwf-form-select--radius-xlarge);
  font-size: var(--hwf-form-select--font-size-xlarge);
}
.form-select.xlarge .select-button::after {
  width: var(--hwf-form-select--icon-size-xlarge);
  height: var(--hwf-form-select--icon-size-xlarge);
}
.form-select.xlarge .select-listbox {
  --form-select-listbox-max-height: calc(var(--hwf-form-select--size-height-xlarge) * var(--form-select-listbox-option-length) + var(--hwf-form-select--option-padding-xlarge) * 2);
  max-height: var(--form-select-listbox-max-height);
}
.form-select.xlarge .select-listbox .select-option {
  padding: var(--hwf-form-select--option-padding-xlarge);
}
.form-select.xlarge .select-listbox .select-option:has(.item-link) {
  padding: 0;
}
.form-select.xlarge .select-listbox .select-option:has(.item-link) .item-link {
  display: block;
  padding: var(--hwf-form-select--option-padding-xlarge);
  width: 100%;
}
.form-select:focus,
.form-select:focus-within,
.form-select.focus {
  border-color: var(--hwf-form-select--color-border-active);
  border-width: var(--hwf-form-select--border-width-focus);
  outline: none;
  box-shadow: none;
  color: var(--hwf-form-select--color-text-active);
}
.form-select:focus .select-button::after,
.form-select:focus-within .select-button::after,
.form-select.focus .select-button::after {
  background-color: currentColor;
}
.form-select:focus .select-button .select-value,
.form-select:focus-within .select-button .select-value,
.form-select.focus .select-button .select-value {
  color: inherit;
}
.form-select.completed {
  color: var(--hwf-form-select--color-text-completed);
}
.form-select.is-error {
  border-color: var(--hwf-form-select--color-border-error);
  border-width: var(--hwf-form-select--border-width-focus);
}
.form-select[disabled],
.form-select.disabled {
  background-color: var(--hwf-form-select--color-background-disabled) !important;
  border-color: var(--hwf-form-select--color-border-disabled);
  color: var(--hwf-form-select--color-text-disabled);
  cursor: default;
}
.form-select[disabled] .select-button,
.form-select.disabled .select-button {
  cursor: default;
}
.form-select[disabled] .select-button::after,
.form-select.disabled .select-button::after {
  background-color: currentColor;
}
.form-select[disabled] .select-button .select-value,
.form-select.disabled .select-button .select-value {
  color: inherit;
}
.form-select[readonly],
.form-select.readonly {
  background-color: var(--hwf-form-select--color-background-disabled) !important;
  border-color: var(--hwf-form-select--color-border-disabled);
  color: var(--hwf-form-select--color-text-readonly);
  cursor: default;
}
.form-select[readonly] .select-button,
.form-select.readonly .select-button {
  cursor: default;
}
.form-select[readonly] .select-button::after,
.form-select.readonly .select-button::after {
  background-color: currentColor;
}
.form-select[readonly] .select-button .select-value,
.form-select.readonly .select-button .select-value {
  color: inherit;
}
.form-select.outline {
  background-color: var(--hwf-form-select--outline-color-background);
  border: 0.1rem solid var(--hwf-form-select--outline-color-border);
}
.form-select.outline .select-listbox {
  left: -0.1rem;
  width: calc(100% + 0.2rem);
}
.form-select.outline.active {
  border-radius: 0.2rem 0.2rem 0 0;
  border-color: #fe5b16;
  box-shadow: 0 0 0.8rem 0 rgba(245, 69, 0, 0.4);
}
.form-select.outline.active .select-value {
  font-weight: 600;
}
.form-select.outline.active .select-listbox {
  border-left: 0.1rem solid #c3c1c1;
  border-bottom: 0.1rem solid #c3c1c1;
  border-right: 0.1rem solid #c3c1c1;
}
.form-select.outline.is-error {
  border-color: var(--hwf-form-select--color-border-error);
}
.form-select.outline[readonly],
.form-select.outline.readonly {
  border-color: var(--hwf-form-select--color-border-disabled);
}
.form-select.underline {
  padding: 0 var(--hwf-form-select-underline--padding-default);
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 0.1rem solid var(--hwf-form-select--color-border);
  border-radius: 0;
}
.form-select.underline:focus,
.form-select.underline:focus-within,
.form-select.underline.focus {
  border-color: var(--hwf-form-select--color-border-active);
  border-radius: 0.4rem 0.4rem 0 0;
}
.form-select.underline.is-error {
  border-color: var(--hwf-form-select--color-border-error);
}
.form-select.underline[readonly],
.form-select.underline.readonly {
  border-color: var(--hwf-form-select--color-border-disabled);
}
.form-select.underline.white {
  color: var(--hwf-form-select-text--color-text-white);
  border-color: hsla(0, 0%, 100%, 0.2);
}
.form-select.underline.white .select-button::after {
  background-color: currentColor;
}
.form-select.underline.white .select-button .select-value {
  color: var(--hwf-form-select-text--color-text-white);
}
.form-select.underline.white.active {
  background-color: #fff;
  border-radius: 0.4rem 0.4rem 0 0;
}
.form-select.underline.white.active .select-button {
  margin: 0 calc(var(--hwf-form-select-underline--padding-default) * -1);
  width: calc(100% + var(--hwf-form-select-underline--padding-default) * 2);
  padding: 0 var(--hwf-form-select-underline--padding-default);
  border-bottom: 0.1rem solid #dcd8d6;
}
.form-select.underline.white.active .select-button::after {
  background-color: var(--hwf-form-select-text--color-text);
}
.form-select.underline.white.active .select-button .select-value {
  font-weight: 700;
  color: var(--hwf-form-select-text--color-text);
}
.form-select.underline.white.completed {
  color: var(--hwf-form-select-text--color-text-white);
}
.form-select.underline.white.is-error {
  border-color: var(--hwf-form-select--color-border-error);
}
.form-select.underline.white[disabled],
.form-select.underline.white.disabled {
  background-color: var(--hwf-form-select--color-background-disabled);
  border-color: var(--hwf-form-select--color-border-disabled);
  color: var(--hwf-form-select--color-text-disabled);
  cursor: default;
}
.form-select.underline.white[disabled] .select-button,
.form-select.underline.white.disabled .select-button {
  cursor: default;
}
.form-select.underline.white[disabled] .select-button::after,
.form-select.underline.white.disabled .select-button::after {
  background-color: currentColor;
}
.form-select.underline.white[disabled] .select-button .select-value,
.form-select.underline.white.disabled .select-button .select-value {
  color: inherit;
}
.form-select.underline.white[readonly],
.form-select.underline.white.readonly {
  background-color: var(--hwf-form-select--color-background-disabled);
  border-color: var(--hwf-form-select--color-border-disabled);
  color: var(--hwf-form-select--color-text-readonly);
  cursor: default;
}
.form-select.underline.white[readonly] .select-button,
.form-select.underline.white.readonly .select-button {
  cursor: default;
}
.form-select.underline.white[readonly] .select-button::after,
.form-select.underline.white.readonly .select-button::after {
  background-color: currentColor;
}
.form-select.underline.white[readonly] .select-button .select-value,
.form-select.underline.white.readonly .select-button .select-value {
  color: inherit;
}
.form-select.text {
  width: -moz-fit-content;
  width: fit-content;
  gap: 0.4rem;
  padding: 0 var(--hwf-form-select--padding-text-default);
  background-color: var(--hwf-form-select-text--color-background) !important;
  border: none;
  color: var(--hwf-form-select-text--color-text);
}
.form-select.text.small {
  height: auto;
  border-radius: 0;
}
.form-select.text.medium {
  height: auto;
  border-radius: 0;
}
.form-select.text.large {
  height: auto;
  border-radius: 0;
}
.form-select.text.xlarge {
  height: auto;
  border-radius: 0;
}
.form-select.text:hover:not([disabled]):not(.disabled) {
  background-color: var(--hwf-form-select-text--color-background-hover);
}
.form-select.text:focus,
.form-select.text.focus {
  background-color: var(--hwf-form-select-text--color-background-pressed);
}
.form-select.text .select-button::after {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-down-fill.svg);
  mask-image: url(/assets/images/icon/ico-down-fill.svg);
}
.form-select.text .select-listbox {
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
}
.form-select.text .select-listbox .select-option::after {
  display: none;
}
.form-select.bg-gray {
  color: var(--hwf-color-text-white);
  border-color: var(--hwf-color-input-surface-gray);
  background-color: var(--hwf-color-input-surface-gray);
}
.form-select.bg-gray .select-button .select-value {
  color: inherit;
}
.form-select.bg-gray:focus,
.form-select.bg-gray:focus-within,
.form-select.bg-gray.focus {
  color: #fff;
}
.form-select.bg-gray:focus .select-button .select-value,
.form-select.bg-gray:focus-within .select-button .select-value,
.form-select.bg-gray.focus .select-button .select-value {
  color: #fff;
}
.form-select.bg-gray.completed {
  color: #fff;
}
.form-toggle-switch {
  --hwf-form-toggle-switch--color-text: var(--hwf-color-text-basic);
  --hwf-form-toggle-switch--color-text-disabled: var(--hwf-color-text-disabled);
  --hwf-form-toggle-switch--button-color-background: var(--hwf-color-element-neutral-light);
  --hwf-form-toggle-switch--button-color-background-checked: var(--hwf-color-element-primary);
  --hwf-form-toggle-switch--button-color-background-disabled: var(--hwf-color-element-disabled);
  --hwf-form-toggle-switch--check-color-background: var(--hwf-color-element-white);
  --hwf-form-toggle-switch--check-color-background-disabled: var(--hwf-color-element-white);
  --hwf-form-toggle-switch--check-color-border: var(--hwf-form-toggle-switch--button-color-background);
  --hwf-form-toggle-switch--check-color-border-checked: var(--hwf-form-toggle-switch--button-color-background-checked);
  --hwf-form-toggle-switch--check-color-border-disabled: var(--hwf-form-toggle-switch--button-color-background-disabled);
  --hwf-form-toggle-switch--icon-button-color-background: var(--hwf-color-action-transparency);
  --hwf-form-toggle-switch--icon-button-color-background-checked: var(--hwf-color-element-primary);
  --hwf-form-toggle-switch--icon-button-color-background-disabled: var(--hwf-color-element-disabled);
  --hwf-form-toggle-switch--icon-button-color-border: var(--hwf-color-element-neutral);
  --hwf-form-toggle-switch--icon-button-color-border-checked: var(--hwf-form-toggle-switch--icon-button-color-background-checked);
  --hwf-form-toggle-switch--icon-button-color-border-disabled: var(--hwf-form-toggle-switch--icon-button-color-background-disabled);
  --hwf-form-toggle-switch--icon-check-color-checked: var(--hwf-color-icon-inverse);
  --hwf-form-toggle-switch--icon-check-color-disabled-checked: var(--hwf-color-icon-disabled-on);
  --hwf-form-toggle-switch--icon-check-color-background: var(--hwf-color-element-neutral-light);
  --hwf-form-toggle-switch--icon-check-color-background-checked: var(--hwf-color-element-white);
  --hwf-form-toggle-switch--icon-check-color-background-disabled: var(--hwf-color-element-white);
  --hwf-form-toggle-switch--icon-check-color-border: var(--hwf-form-toggle-switch--icon-button-color-background);
  --hwf-form-toggle-switch--icon-check-color-border-checked: var(--hwf-form-toggle-switch--icon-button-color-background-checked);
  --hwf-form-toggle-switch--icon-check-color-border-disabled: var(--hwf-form-toggle-switch--icon-button-color-background-disabled);
  --hwf-form-toggle-switch--button-size-width-small: 3.2rem;
  --hwf-form-toggle-switch--button-size-height-small: 2rem;
  --hwf-form-toggle-switch--check-size-small: calc(var(--hwf-form-toggle-switch--button-size-height-small) - var(--hwf-form-toggle-switch-offset) * 2);
  --hwf-form-toggle-switch--icon-size-small: 1rem;
  --hwf-form-toggle-switch--icon-check-gap-small: 0.1rem;
  --hwf-form-toggle-switch--button-radius-small: var(--hwf-form-toggle-switch--button-size-height-small);
  --hwf-form-toggle-switch--pc-font-size-small: 1.5rem;
  --hwf-form-toggle-switch--tablet-font-size-small: 1.5rem;
  --hwf-form-toggle-switch--mobile-font-size-small: 1.5rem;
  --hwf-form-toggle-switch--button-size-width-medium: 4rem;
  --hwf-form-toggle-switch--button-size-height-medium: 2.4rem;
  --hwf-form-toggle-switch--check-size-medium: calc(var(--hwf-form-toggle-switch--button-size-height-medium) - var(--hwf-form-toggle-switch-offset) * 2);
  --hwf-form-toggle-switch--icon-size-medium: 1.2rem;
  --hwf-form-toggle-switch--icon-check-gap-medium: 0.1rem;
  --hwf-form-toggle-switch--button-radius-medium: var(--hwf-form-toggle-switch--button-size-height-medium);
  --hwf-form-toggle-switch--pc-font-size-medium: 1.6rem;
  --hwf-form-toggle-switch--tablet-font-size-medium: 1.6rem;
  --hwf-form-toggle-switch--mobile-font-size-medium: 1.6rem;
  --hwf-form-toggle-switch--button-size-width-large: 4.8rem;
  --hwf-form-toggle-switch--button-size-height-large: 3rem;
  --hwf-form-toggle-switch--check-size-large: calc(var(--hwf-form-toggle-switch--button-size-height-large) - var(--hwf-form-toggle-switch-offset) * 2);
  --hwf-form-toggle-switch--icon-size-large: 1.4rem;
  --hwf-form-toggle-switch--icon-check-gap-large: 0.2rem;
  --hwf-form-toggle-switch--button-radius-large: var(--hwf-form-toggle-switch--button-size-height-large);
  --hwf-form-toggle-switch--pc-font-size-large: 1.8rem;
  --hwf-form-toggle-switch--tablet-font-size-large: 1.8rem;
  --hwf-form-toggle-switch--mobile-font-size-large: 1.8rem;
  --hwf-form-toggle-switch--gap: 0.8rem;
  --hwf-form-toggle-switch-offset: 0.2rem;
}
.form-toggle-switch.small [type="checkbox"] ~ label {
  gap: var(--hwf-form-toggle-switch--gap);
  font-size: var(--hwf-form-toggle-switch--pc-font-size-small);
  line-height: var(--hwf-form-toggle-switch--button-size-height-small);
}
@media (max-width: 1024px) {
  .form-toggle-switch.small [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--tablet-font-size-small);
  }
}
@media (max-width: 640px) {
  .form-toggle-switch.small [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--mobile-font-size-small);
  }
}
.form-toggle-switch.small [type="checkbox"] ~ label .switch-toggle {
  width: var(--hwf-form-toggle-switch--button-size-width-small);
  height: var(--hwf-form-toggle-switch--button-size-height-small);
  border-radius: var(--hwf-form-toggle-switch--button-radius-small);
}
.form-toggle-switch.small [type="checkbox"] ~ label .switch-toggle > i {
  width: var(--hwf-form-toggle-switch--check-size-small);
  height: var(--hwf-form-toggle-switch--check-size-small);
  top: var(--hwf-form-toggle-switch-offset);
  left: var(--hwf-form-toggle-switch-offset);
  border-radius: 100rem;
}
.form-toggle-switch.small [type="checkbox"]:checked ~ label .switch-toggle > i {
  left: calc(var(--hwf-form-toggle-switch--button-size-width-small) - var(--hwf-form-toggle-switch--check-size-small) - var(--hwf-form-toggle-switch-offset));
}
.form-toggle-switch.medium [type="checkbox"] ~ label {
  gap: var(--hwf-form-toggle-switch--gap);
  font-size: var(--hwf-form-toggle-switch--pc-font-size-medium);
  line-height: var(--hwf-form-toggle-switch--button-size-height-medium);
}
@media (max-width: 1024px) {
  .form-toggle-switch.medium [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--tablet-font-size-medium);
  }
}
@media (max-width: 640px) {
  .form-toggle-switch.medium [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--mobile-font-size-medium);
  }
}
.form-toggle-switch.medium [type="checkbox"] ~ label .switch-toggle {
  width: var(--hwf-form-toggle-switch--button-size-width-medium);
  height: var(--hwf-form-toggle-switch--button-size-height-medium);
  border-radius: var(--hwf-form-toggle-switch--button-radius-medium);
}
.form-toggle-switch.medium [type="checkbox"] ~ label .switch-toggle > i {
  width: var(--hwf-form-toggle-switch--check-size-medium);
  height: var(--hwf-form-toggle-switch--check-size-medium);
  top: var(--hwf-form-toggle-switch-offset);
  left: var(--hwf-form-toggle-switch-offset);
  border-radius: 100rem;
}
.form-toggle-switch.medium [type="checkbox"]:checked ~ label .switch-toggle > i {
  left: calc(var(--hwf-form-toggle-switch--button-size-width-medium) - var(--hwf-form-toggle-switch--check-size-medium) - var(--hwf-form-toggle-switch-offset));
}
.form-toggle-switch.large [type="checkbox"] ~ label {
  gap: var(--hwf-form-toggle-switch--gap);
  font-size: var(--hwf-form-toggle-switch--pc-font-size-large);
  line-height: var(--hwf-form-toggle-switch--button-size-height-large);
}
@media (max-width: 1024px) {
  .form-toggle-switch.large [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--tablet-font-size-large);
  }
}
@media (max-width: 640px) {
  .form-toggle-switch.large [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--mobile-font-size-large);
  }
}
.form-toggle-switch.large [type="checkbox"] ~ label .switch-toggle {
  width: var(--hwf-form-toggle-switch--button-size-width-large);
  height: var(--hwf-form-toggle-switch--button-size-height-large);
  border-radius: var(--hwf-form-toggle-switch--button-radius-large);
}
.form-toggle-switch.large [type="checkbox"] ~ label .switch-toggle > i {
  width: var(--hwf-form-toggle-switch--check-size-large);
  height: var(--hwf-form-toggle-switch--check-size-large);
  top: var(--hwf-form-toggle-switch-offset);
  left: var(--hwf-form-toggle-switch-offset);
  border-radius: 100rem;
}
.form-toggle-switch.large [type="checkbox"]:checked ~ label .switch-toggle > i {
  left: calc(var(--hwf-form-toggle-switch--button-size-width-large) - var(--hwf-form-toggle-switch--check-size-large) - var(--hwf-form-toggle-switch-offset));
}
.form-toggle-switch {
  position: relative;
  display: inline-flex;
}
.form-toggle-switch.focus [type="checkbox"] ~ label {
  box-shadow: var(--hwf-box-shadow-outline-inset);
  outline-offset: -0.4rem;
}
.form-toggle-switch [type="checkbox"] ~ label {
  display: inline-flex;
  align-items: center;
  gap: var(--hwf-form-toggle-switch--gap);
  font-size: var(--hwf-form-toggle-switch--pc-font-size-large);
  line-height: var(--hwf-form-toggle-switch--button-size-height-large);
}
@media (max-width: 1024px) {
  .form-toggle-switch [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--tablet-font-size-large);
  }
}
@media (max-width: 640px) {
  .form-toggle-switch [type="checkbox"] ~ label {
    font-size: var(--hwf-form-toggle-switch--mobile-font-size-large);
  }
}
.form-toggle-switch [type="checkbox"] ~ label {
  color: var(--hwf-form-toggle-switch--color-text);
}
.form-toggle-switch [type="checkbox"] ~ label .switch-toggle {
  width: var(--hwf-form-toggle-switch--button-size-width-large);
  height: var(--hwf-form-toggle-switch--button-size-height-large);
  border-radius: var(--hwf-form-toggle-switch--button-radius-large);
  position: relative;
  background-color: var(--hwf-form-toggle-switch--button-color-background);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-toggle-switch [type="checkbox"] ~ label .switch-toggle > i {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hwf-form-toggle-switch--check-size-large);
  height: var(--hwf-form-toggle-switch--check-size-large);
  top: var(--hwf-form-toggle-switch-offset);
  left: var(--hwf-form-toggle-switch-offset);
  border-radius: 100rem;
  background-color: var(--hwf-form-toggle-switch--check-color-background);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-toggle-switch [type="checkbox"]:checked ~ label .switch-toggle {
  background-color: var(--hwf-form-toggle-switch--button-color-background-checked);
}
.form-toggle-switch [type="checkbox"]:checked ~ label .switch-toggle > i {
  left: calc(var(--hwf-form-toggle-switch--button-size-width-large) - var(--hwf-form-toggle-switch--check-size-large) - var(--hwf-form-toggle-switch-offset));
  border-color: var(--hwf-form-toggle-switch--check-color-border-checked);
}
.form-toggle-switch [type="checkbox"]:disabled ~ label {
  color: var(--hwf-form-toggle-switch--color-text-disabled);
}
.form-toggle-switch [type="checkbox"]:disabled ~ label .switch-toggle {
  background-color: var(--hwf-form-toggle-switch--button-color-background-disabled);
}
.form-toggle-switch [type="checkbox"]:disabled ~ label .switch-toggle > i {
  background-color: var(--hwf-form-toggle-switch--check-color-background-disabled);
  border-color: var(--hwf-form-toggle-switch--check-color-border-disabled);
}
.form-toggle-switch.icon [type="checkbox"] ~ label .switch-toggle {
  background-color: var(--hwf-form-toggle-switch--icon-button-color-background);
}
.form-toggle-switch.icon [type="checkbox"] ~ label .switch-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
  border: 0.1rem solid var(--hwf-form-toggle-switch--icon-button-color-border);
  border-radius: var(--hwf-form-toggle-switch--button-radius-large);
}
.form-toggle-switch.icon [type="checkbox"] ~ label .switch-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--hwf-form-toggle-switch--check-size-large) + var(--hwf-form-toggle-switch-offset) + var(--hwf-form-toggle-switch--icon-check-gap-large));
  transform: translateY(-50%);
  display: inline-flex;
  width: var(--hwf-form-toggle-switch--icon-size-large);
  height: var(--hwf-form-toggle-switch--icon-size-large);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  background-color: var(--hwf-form-toggle-switch--icon-check-color-checked);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-switch-on.svg);
  mask-image: url(/assets/images/icon/ico-switch-on.svg);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-toggle-switch.icon [type="checkbox"] ~ label .switch-toggle > i {
  background-color: var(--hwf-form-toggle-switch--icon-check-color-background);
}
.form-toggle-switch.icon [type="checkbox"]:checked ~ label .switch-toggle {
  background-color: var(--hwf-form-toggle-switch--icon-button-color-background-checked);
}
.form-toggle-switch.icon [type="checkbox"]:checked ~ label .switch-toggle::before {
  border-color: var(--hwf-form-toggle-switch--icon-button-color-border-checked);
}
.form-toggle-switch.icon [type="checkbox"]:checked ~ label .switch-toggle::after {
  opacity: 1;
}
.form-toggle-switch.icon [type="checkbox"]:checked ~ label .switch-toggle > i {
  background-color: var(--hwf-form-toggle-switch--icon-check-color-background-checked);
}
.form-toggle-switch.icon [type="checkbox"]:disabled ~ label .switch-toggle {
  background-color: var(--hwf-form-toggle-switch--icon-button-color-background-disabled);
}
.form-toggle-switch.icon [type="checkbox"]:disabled ~ label .switch-toggle::before {
  border-color: var(--hwf-form-toggle-switch--icon-button-color-border-disabled);
}
.form-toggle-switch.icon [type="checkbox"]:disabled ~ label .switch-toggle > i {
  background-color: var(--hwf-form-toggle-switch--icon-check-color-background-disabled);
}
.datepicker {
  --hwf-calendar--dropdown-padding: 2.4rem;
  --hwf-calendar--dropdown-margin-top: 0.3rem;
  --hwf-calendar--dropdown-radius: 0.2rem;
  --hwf-calendar--nav-btn-size: 3.2rem;
  --hwf-calendar--nav-arrow-size: 2rem;
  --hwf-calendar--switch-font-size: 2.1rem;
  --hwf-calendar--switch-icon-size: 1.6rem;
  --hwf-calendar--dow-padding-top: 1.6rem;
  --hwf-calendar--dow-padding-bottom: 0.4rem;
  --hwf-calendar--dow-font-size: 1.4rem;
  --hwf-calendar--cell-size: 4rem;
  --hwf-calendar--cell-font-size: 1.5rem;
  --hwf-calendar--cell-radius: 0.4rem;
  --hwf-calendar--tfoot-height: 3rem;
  --hwf-calendar--tfoot-font-size: 1.4rem;
  --hwf-calendar--tfoot-radius: 0.2rem;
  --hwf-calendar--inline-margin-top: 2.4rem;
  --hwf-calendar--dropdown-border: var(--hwf-color-orange-base);
  --hwf-calendar--dropdown-shadow: 0 0.4rem 2.4rem 0 rgba(0, 0, 0, 0.12);
  --hwf-calendar--nav-arrow-color: var(--hwf-color-text-basic);
  --hwf-calendar--nav-arrow-color-disabled: #d7d5d5;
  --hwf-calendar--switch-color: var(--hwf-color-text-basic);
  --hwf-calendar--dow-color: var(--hwf-color-text-subtler);
  --hwf-calendar--cell-color: var(--hwf-color-text-subtler);
  --hwf-calendar--cell-color-disabled: #c3c1c1;
  --hwf-calendar--cell-color-off-month: #999;
  --hwf-calendar--cell-color-hover: var(--hwf-color-text-primary-dark);
  --hwf-calendar--cell-bg-hover: #feeae1;
  --hwf-calendar--cell-color-active: var(--hwf-color-text-primary-dark);
  --hwf-calendar--cell-bg-active: #feeae1;
  --hwf-calendar--tfoot-bg: #f3f2f1;
  --hwf-calendar--tfoot-color: var(--hwf-color-text-subtler);
}
.datepicker.datepicker-dropdown {
  margin-top: var(--hwf-calendar--dropdown-margin-top);
  border-radius: var(--hwf-calendar--dropdown-radius);
  border: 0.1rem solid var(--hwf-calendar--dropdown-border);
  box-shadow: var(--hwf-calendar--dropdown-shadow);
}
.datepicker.datepicker-dropdown::before,
.datepicker.datepicker-dropdown::after {
  display: none;
}
.datepicker.dropdown-menu {
  padding: var(--hwf-calendar--dropdown-padding);
}
.datepicker.dropdown-menu th {
  padding: 0;
}
.datepicker.datepicker-inline {
  width: 100%;
}
.datepicker .prev,
.datepicker .next {
  width: var(--hwf-calendar--nav-btn-size);
  height: var(--hwf-calendar--nav-btn-size);
  text-align: center;
  vertical-align: middle;
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
  visibility: visible;
  cursor: default;
  pointer-events: none;
}
.datepicker .prev.disabled:hover,
.datepicker .prev.disabled:active,
.datepicker .next.disabled:hover,
.datepicker .next.disabled:active {
  background-color: rgba(0, 0, 0, 0);
}
.datepicker .prev.disabled .svg-icon,
.datepicker .next.disabled .svg-icon {
  background-color: var(--hwf-calendar--nav-arrow-color-disabled);
}
.datepicker .prev .svg-icon,
.datepicker .next .svg-icon {
  width: var(--hwf-calendar--nav-arrow-size);
  height: var(--hwf-calendar--nav-arrow-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-right.svg);
  mask-image: url(/assets/images/icon/ico-arrow-right.svg);
  background-color: var(--hwf-calendar--nav-arrow-color);
}
.datepicker .prev .svg-icon {
  transform: rotate(180deg);
}
.datepicker .datepicker-switch {
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  color: var(--hwf-calendar--switch-color);
  font-size: var(--hwf-calendar--switch-font-size);
}
.datepicker .datepicker-switch:hover {
  background-color: rgba(0, 0, 0, 0);
}
.datepicker .datepicker-switch::after {
  content: "";
  display: inline-block;
  width: var(--hwf-calendar--switch-icon-size);
  height: var(--hwf-calendar--switch-icon-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-down-fill.svg);
  mask-image: url(/assets/images/icon/ico-down-fill.svg);
  background-color: currentColor;
}
.datepicker table {
  width: 100%;
}
.datepicker table thead th.dow {
  padding: var(--hwf-calendar--dow-padding-top) 0 var(--hwf-calendar--dow-padding-bottom);
  width: var(--hwf-calendar--cell-size);
  height: var(--hwf-calendar--tfoot-height);
  color: var(--hwf-calendar--dow-color);
  font-size: var(--hwf-calendar--dow-font-size);
  font-weight: 400;
}
.datepicker table tbody tr td span {
  width: 50%;
  height: var(--hwf-calendar--cell-size);
  line-height: var(--hwf-calendar--cell-size);
  margin: 0;
  color: var(--hwf-calendar--cell-color);
  font-size: var(--hwf-calendar--cell-font-size);
  border-radius: var(--hwf-calendar--cell-radius);
}
.datepicker table tbody tr td span.disabled,
.datepicker table tbody tr td span.disabled:hover {
  color: var(--hwf-calendar--cell-color-disabled);
  pointer-events: none;
}
.datepicker table tbody tr td span:hover,
.datepicker table tbody tr td span.focused,
.datepicker table tbody tr td span.active.active {
  color: var(--hwf-calendar--cell-color-hover);
  font-weight: 600;
  background-color: var(--hwf-calendar--cell-bg-hover);
  text-shadow: none;
}
.datepicker table tr td.day {
  width: var(--hwf-calendar--cell-size);
  height: var(--hwf-calendar--cell-size);
  color: var(--hwf-calendar--cell-color);
  font-size: var(--hwf-calendar--cell-font-size);
}
.datepicker table tr td.day.old,
.datepicker table tr td.day.new {
  color: var(--hwf-calendar--cell-color-off-month);
}
.datepicker table tr td.day.old.today,
.datepicker table tr td.day.new.today {
  color: var(--hwf-calendar--cell-color-off-month);
}
.datepicker table tr td.day.disabled,
.datepicker table tr td.day.disabled:hover {
  color: var(--hwf-calendar--cell-color-disabled);
}
.datepicker table tr td.day.today {
  color: var(--hwf-calendar--cell-color);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}
.datepicker table tr td.day.today.disabled,
.datepicker table tr td.day.today.disabled:active {
  background-color: rgba(0, 0, 0, 0);
  color: var(--hwf-calendar--cell-color-disabled);
}
.datepicker table tr td.day.active.active {
  color: var(--hwf-calendar--cell-color-active);
  font-weight: 600;
  background-color: var(--hwf-calendar--cell-bg-active);
  border-color: var(--hwf-calendar--cell-bg-active);
  text-shadow: none;
}
.datepicker table tfoot .today {
  height: var(--hwf-calendar--tfoot-height);
  color: var(--hwf-calendar--tfoot-color);
  font-size: var(--hwf-calendar--tfoot-font-size);
  vertical-align: middle;
  background-color: var(--hwf-calendar--tfoot-bg);
  border-radius: var(--hwf-calendar--tfoot-radius);
}
.datepicker .calendar-today-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--hwf-calendar--tfoot-height);
  background-color: var(--hwf-calendar--tfoot-bg);
  color: var(--hwf-calendar--tfoot-color);
}
.datepicker-inline-container {
  margin-top: 2.4rem;
}
input[type="radio"],
input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
label {
  display: inline-flex;
}
.check-area {
  display: flex;
  gap: 2rem;
}
.check-area.full {
  width: 100%;
}
.check-area.full label {
  width: 100%;
}
.check-area.full label span {
  width: 100%;
}
.form-check {
  --hwf-color-element-white: #ffffff;
  --hwf-color-element-disabled: #cdd1d5;
  --hwf-color-element-disabled-on: #b1b8be;
  --hwf-color-border-neutral: #b1b8be;
  --hwf-color-element-primary: #f54500;
  --hwf-form-check--color-text: var(--hwf-color-text-basic);
  --hwf-form-check--color-text-disabled: var(--hwf-color-text-disabled);
  --hwf-form-check--color-text-sub: var(--hwf-color-text-subtle);
  --hwf-form-check--color-text-sub-disabled: var(--hwf-color-text-disabled);
  --hwf-form-check--button-color-element: var(--hwf-color-element-white);
  --hwf-form-check--button-color-element-disabled: var(--hwf-color-element-disabled);
  --hwf-form-check--button-color-border: var(--hwf-color-border-neutral);
  --hwf-form-check--button-color-border-checked: var(--hwf-color-element-primary);
  --hwf-form-check--button-color-border-disabled: var(--hwf-color-border-disabled);
  --hwf-form-check--checkbox-button-color-element-checked: var(--hwf-color-element-primary);
  --hwf-form-check--radio-check-color-element: var(--hwf-color-element-white);
  --hwf-form-check--radio-check-color-element-checked: #fff;
  --hwf-form-check--radio-check-color-element-disabled: var(--hwf-color-element-disabled-on);
  --hwf-form-check--checkbox-check-color-element: var(--hwf-color-element-white);
  --hwf-form-check--checkbox-check-color-element-checked: var(--hwf-color-element-white);
  --hwf-form-check--checkbox-check-color-element-disabled: var(--hwf-color-element-disabled);
  --hwf-form-check--checkbox-check-color-element-checked-disabled: var(--hwf-color-element-disabled-on);
  --hwf-form-check--check-icon-button-color-element: var(--hwf-color-element-white);
  --hwf-form-check--check-icon-button-color-border: var(--hwf-color-element-white);
  --hwf-form-check--check-icon-color-element: var(--hwf-color-element-disabled);
  --hwf-form-check--check-icon-color-element-checked: var(--hwf-color-element-primary);
  --hwf-form-check--check-icon-color-element-disabled: var(--hwf-color-element-disabled);
  --hwf-form-check--additional-text-color-text: var(--hwf-color-text-subtle);
  --hwf-form-check--button-size-small: 2rem;
  --hwf-form-check--radio-check-size-small: 1.6rem;
  --hwf-form-check--checkbox-check-size-small: 1.6rem;
  --hwf-form-check--check-icon-size-small: 1.6rem;
  --hwf-form-check--checkbox-button-radius-small: 0.3rem;
  --hwf-form-check--pc-font-size-small: 1.5rem;
  --hwf-form-check--tablet-font-size-small: 1.5rem;
  --hwf-form-check--mobile-font-size-small: 1.5rem;
  --hwf-form-check--button-size-medium: 2rem;
  --hwf-form-check--radio-check-size-medium: 1rem;
  --hwf-form-check--checkbox-check-size-medium: 1.2rem;
  --hwf-form-check--check-icon-size-medium: 2rem;
  --hwf-form-check--radio-button-radius-medium: 100rem;
  --hwf-form-check--checkbox-button-radius-medium: 0.3rem;
  --hwf-form-check--pc-font-size-medium: 1.6rem;
  --hwf-form-check--tablet-font-size-medium: 1.6rem;
  --hwf-form-check--mobile-font-size-medium: 1.6rem;
  --hwf-form-check--additional-text-pc-font-size--medium: 1.5rem;
  --hwf-form-check--additional-text-tablet-font-size--medium: 1.5rem;
  --hwf-form-check--additional-text-mobile-font-size-medium: 1.5rem;
  --hwf-form-check--button-size-large: 2.4rem;
  --hwf-form-check--radio-check-size-large: 1.2rem;
  --hwf-form-check--checkbox-check-size-large: 1.6rem;
  --hwf-form-check--check-icon-size-large: 2.4rem;
  --hwf-form-check--radio-button-radius-large: 100rem;
  --hwf-form-check--checkbox-button-radius-large: 0.3rem;
  --hwf-form-check--pc-font-size-large: 1.8rem;
  --hwf-form-check--tablet-font-size-large: 1.8rem;
  --hwf-form-check--mobile-font-size-large: 1.8rem;
  --hwf-form-check--additional-text-pc-font-size--large: 1.6rem;
  --hwf-form-check--additional-text-tablet-font-size--large: 1.6rem;
  --hwf-form-check--additional-text-mobile-font-size-large: 1.6rem;
  --hwf-form-check--gap: 0.8rem;
  --hwf-form-check--button-margin-top: 0.2rem;
}
.form-check.small > input[type="radio"] ~ label,
.form-check.small > input[type="checkbox"] ~ label {
  gap: var(--hwf-form-check--gap);
  font-size: var(--hwf-form-check--pc-font-size-small);
}
@media (max-width: 1024px) {
  .form-check.small > input[type="radio"] ~ label,
  .form-check.small > input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--tablet-font-size-small);
  }
}
@media (max-width: 640px) {
  .form-check.small > input[type="radio"] ~ label,
  .form-check.small > input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--mobile-font-size-small);
  }
}
.form-check.small > input[type="radio"] ~ label::before,
.form-check.small > input[type="checkbox"] ~ label::before {
  width: var(--hwf-form-check--button-size-small);
  height: var(--hwf-form-check--button-size-small);
  margin-top: var(--hwf-form-check--button-margin-top);
}
.form-check.small > input[type="radio"] ~ label + .form-check-cnt,
.form-check.small > input[type="checkbox"] ~ label + .form-check-cnt {
  padding-left: calc(var(--hwf-form-check--button-size-small) + var(--hwf-form-check--gap));
}
.form-check.small > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
.form-check.small > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
  font-size: var(--hwf-form-check--additional-text-pc-font-size-small);
}
@media (max-width: 1024px) {
  .form-check.small > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
  .form-check.small > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
    font-size: var(--hwf-form-check--additional-text-tablet-font-size-small);
  }
}
@media (max-width: 640px) {
  .form-check.small > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
  .form-check.small > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
    font-size: var(--hwf-form-check--additional-text-mobile-font-size-small);
  }
}
.form-check.small > input[type="radio"] ~ label::before {
  border-radius: var(--hwf-form-check--radio-button-radius-small);
  box-sizing: border-box;
}
.form-check.small > input[type="radio"] ~ label::after {
  top: calc((var(--hwf-form-check--button-size-small) - var(--hwf-form-check--radio-check-size-small)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-small) - var(--hwf-form-check--radio-check-size-small)) / 2);
  width: var(--hwf-form-check--radio-check-size-small);
  height: var(--hwf-form-check--radio-check-size-small);
  border-radius: 100rem;
}
.form-check.small > input[type="checkbox"] ~ label::before {
  border-radius: var(--hwf-form-check--checkbox-button-radius-small);
}
.form-check.small > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-small);
  --form-check-color: var(--hwf-form-check--checkbox-check-color-element);
  top: calc((var(--hwf-form-check--button-size-small) - var(--form-check-check-size)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-small) - var(--form-check-check-size)) / 2);
  display: inline-flex;
  width: var(--form-check-check-size);
  height: var(--form-check-check-size);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: var(--form-check-color);
}
.form-check.small.icon-right > input[type="radio"] ~ label::before {
  order: 1;
}
.form-check.small.icon-right > input[type="radio"] ~ label::after {
  top: calc((var(--hwf-form-check--button-size-small) - var(--hwf-form-check--radio-check-size-small)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-small) - var(--hwf-form-check--radio-check-size-small)) / 2);
  width: var(--hwf-form-check--radio-check-size-small);
  height: var(--hwf-form-check--radio-check-size-small);
  border-radius: 100rem;
  left: auto;
  right: calc((var(--hwf-form-check--button-size-small) - var(--hwf-form-check--radio-check-size-small)) / 2);
}
.form-check.small.icon-right > input[type="checkbox"] ~ label::before {
  order: 1;
}
.form-check.small.icon-right > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-small);
  left: auto;
  right: calc((var(--hwf-form-check--button-size-small) - var(--form-check-check-size)) / 2);
}
.form-check.small.check-icon > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-small);
  --form-check-color: var(--hwf-form-check--checkbox-check-color-element);
  --form-check-check-size: var(--hwf-form-check--check-icon-size-small);
  --form-check-color: var(--hwf-form-check--check-icon-color-element);
  top: calc((var(--hwf-form-check--button-size-small) - var(--form-check-check-size)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-small) - var(--form-check-check-size)) / 2);
  display: inline-flex;
  width: var(--form-check-check-size);
  height: var(--form-check-check-size);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: var(--form-check-color);
}
.form-check.small.check-icon.icon-right > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-small);
  --form-check-check-size: var(--hwf-form-check--check-icon-size-small);
  left: auto;
  right: calc((var(--hwf-form-check--button-size-small) - var(--form-check-check-size)) / 2);
}
.form-check.medium > input[type="radio"] ~ label,
.form-check.medium > input[type="checkbox"] ~ label {
  gap: var(--hwf-form-check--gap);
  font-size: var(--hwf-form-check--pc-font-size-medium);
}
@media (max-width: 1024px) {
  .form-check.medium > input[type="radio"] ~ label,
  .form-check.medium > input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--tablet-font-size-medium);
  }
}
@media (max-width: 640px) {
  .form-check.medium > input[type="radio"] ~ label,
  .form-check.medium > input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--mobile-font-size-medium);
  }
}
.form-check.medium > input[type="radio"] ~ label::before,
.form-check.medium > input[type="checkbox"] ~ label::before {
  width: var(--hwf-form-check--button-size-medium);
  height: var(--hwf-form-check--button-size-medium);
  margin-top: var(--hwf-form-check--button-margin-top);
}
.form-check.medium > input[type="radio"] ~ label + .form-check-cnt,
.form-check.medium > input[type="checkbox"] ~ label + .form-check-cnt {
  padding-left: calc(var(--hwf-form-check--button-size-medium) + var(--hwf-form-check--gap));
}
.form-check.medium > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
.form-check.medium > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
  font-size: var(--hwf-form-check--additional-text-pc-font-size-medium);
}
@media (max-width: 1024px) {
  .form-check.medium > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
  .form-check.medium > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
    font-size: var(--hwf-form-check--additional-text-tablet-font-size-medium);
  }
}
@media (max-width: 640px) {
  .form-check.medium > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
  .form-check.medium > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
    font-size: var(--hwf-form-check--additional-text-mobile-font-size-medium);
  }
}
.form-check.medium > input[type="radio"] ~ label::before {
  border-radius: var(--hwf-form-check--radio-button-radius-medium);
  box-sizing: border-box;
}
.form-check.medium > input[type="radio"] ~ label::after {
  top: calc((var(--hwf-form-check--button-size-medium) - var(--hwf-form-check--radio-check-size-medium)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-medium) - var(--hwf-form-check--radio-check-size-medium)) / 2);
  width: var(--hwf-form-check--radio-check-size-medium);
  height: var(--hwf-form-check--radio-check-size-medium);
  border-radius: 100rem;
}
.form-check.medium > input[type="checkbox"] ~ label::before {
  border-radius: var(--hwf-form-check--checkbox-button-radius-medium);
}
.form-check.medium > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-medium);
  --form-check-color: var(--hwf-form-check--checkbox-check-color-element);
  top: calc((var(--hwf-form-check--button-size-medium) - var(--form-check-check-size)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-medium) - var(--form-check-check-size)) / 2);
  display: inline-flex;
  width: var(--form-check-check-size);
  height: var(--form-check-check-size);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: var(--form-check-color);
}
.form-check.medium.icon-right > input[type="radio"] ~ label::before {
  order: 1;
}
.form-check.medium.icon-right > input[type="radio"] ~ label::after {
  top: calc((var(--hwf-form-check--button-size-medium) - var(--hwf-form-check--radio-check-size-medium)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-medium) - var(--hwf-form-check--radio-check-size-medium)) / 2);
  width: var(--hwf-form-check--radio-check-size-medium);
  height: var(--hwf-form-check--radio-check-size-medium);
  border-radius: 100rem;
  left: auto;
  right: calc((var(--hwf-form-check--button-size-medium) - var(--hwf-form-check--radio-check-size-medium)) / 2);
}
.form-check.medium.icon-right > input[type="checkbox"] ~ label::before {
  order: 1;
}
.form-check.medium.icon-right > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-medium);
  left: auto;
  right: calc((var(--hwf-form-check--button-size-medium) - var(--form-check-check-size)) / 2);
}
.form-check.medium.check-icon > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-medium);
  --form-check-color: var(--hwf-form-check--checkbox-check-color-element);
  --form-check-check-size: var(--hwf-form-check--check-icon-size-medium);
  --form-check-color: var(--hwf-form-check--check-icon-color-element);
  top: calc((var(--hwf-form-check--button-size-medium) - var(--form-check-check-size)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-medium) - var(--form-check-check-size)) / 2);
  display: inline-flex;
  width: var(--form-check-check-size);
  height: var(--form-check-check-size);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: var(--form-check-color);
}
.form-check.medium.check-icon.icon-right > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-medium);
  --form-check-check-size: var(--hwf-form-check--check-icon-size-medium);
  left: auto;
  right: calc((var(--hwf-form-check--button-size-medium) - var(--form-check-check-size)) / 2);
}
.form-check.large > input[type="radio"] ~ label,
.form-check.large > input[type="checkbox"] ~ label {
  gap: var(--hwf-form-check--gap);
  font-size: var(--hwf-form-check--pc-font-size-large);
}
@media (max-width: 1024px) {
  .form-check.large > input[type="radio"] ~ label,
  .form-check.large > input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--tablet-font-size-large);
  }
}
@media (max-width: 640px) {
  .form-check.large > input[type="radio"] ~ label,
  .form-check.large > input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--mobile-font-size-large);
  }
}
.form-check.large > input[type="radio"] ~ label::before,
.form-check.large > input[type="checkbox"] ~ label::before {
  width: var(--hwf-form-check--button-size-large);
  height: var(--hwf-form-check--button-size-large);
  margin-top: var(--hwf-form-check--button-margin-top);
}
.form-check.large > input[type="radio"] ~ label + .form-check-cnt,
.form-check.large > input[type="checkbox"] ~ label + .form-check-cnt {
  padding-left: calc(var(--hwf-form-check--button-size-large) + var(--hwf-form-check--gap));
}
.form-check.large > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
.form-check.large > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
  font-size: var(--hwf-form-check--additional-text-pc-font-size-large);
}
@media (max-width: 1024px) {
  .form-check.large > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
  .form-check.large > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
    font-size: var(--hwf-form-check--additional-text-tablet-font-size-large);
  }
}
@media (max-width: 640px) {
  .form-check.large > input[type="radio"] ~ label + .form-check-cnt .form-check-p,
  .form-check.large > input[type="checkbox"] ~ label + .form-check-cnt .form-check-p {
    font-size: var(--hwf-form-check--additional-text-mobile-font-size-large);
  }
}
.form-check.large > input[type="radio"] ~ label::before {
  border-radius: var(--hwf-form-check--radio-button-radius-large);
  box-sizing: border-box;
}
.form-check.large > input[type="radio"] ~ label::after {
  top: calc((var(--hwf-form-check--button-size-large) - var(--hwf-form-check--radio-check-size-large)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-large) - var(--hwf-form-check--radio-check-size-large)) / 2);
  width: var(--hwf-form-check--radio-check-size-large);
  height: var(--hwf-form-check--radio-check-size-large);
  border-radius: 100rem;
}
.form-check.large > input[type="checkbox"] ~ label::before {
  border-radius: var(--hwf-form-check--checkbox-button-radius-large);
}
.form-check.large > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-large);
  --form-check-color: var(--hwf-form-check--checkbox-check-color-element);
  top: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2);
  display: inline-flex;
  width: var(--form-check-check-size);
  height: var(--form-check-check-size);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: var(--form-check-color);
}
.form-check.large.icon-right > input[type="radio"] ~ label::before {
  order: 1;
}
.form-check.large.icon-right > input[type="radio"] ~ label::after {
  top: calc((var(--hwf-form-check--button-size-large) - var(--hwf-form-check--radio-check-size-large)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-large) - var(--hwf-form-check--radio-check-size-large)) / 2);
  width: var(--hwf-form-check--radio-check-size-large);
  height: var(--hwf-form-check--radio-check-size-large);
  border-radius: 100rem;
  left: auto;
  right: calc((var(--hwf-form-check--button-size-large) - var(--hwf-form-check--radio-check-size-large)) / 2);
}
.form-check.large.icon-right > input[type="checkbox"] ~ label::before {
  order: 1;
}
.form-check.large.icon-right > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-large);
  left: auto;
  right: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2);
}
.form-check.large.check-icon > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-large);
  --form-check-color: var(--hwf-form-check--checkbox-check-color-element);
  --form-check-check-size: var(--hwf-form-check--check-icon-size-large);
  --form-check-color: var(--hwf-form-check--check-icon-color-element);
  top: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2);
  display: inline-flex;
  width: var(--form-check-check-size);
  height: var(--form-check-check-size);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: var(--form-check-color);
}
.form-check.large.check-icon.icon-right > input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-large);
  --form-check-check-size: var(--hwf-form-check--check-icon-size-large);
  left: auto;
  right: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2);
}
.form-check input[type="radio"] ~ label,
.form-check input[type="checkbox"] ~ label {
  position: relative;
  gap: var(--hwf-form-check--gap);
  font-size: var(--hwf-form-check--pc-font-size-large);
}
@media (max-width: 1024px) {
  .form-check input[type="radio"] ~ label,
  .form-check input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--tablet-font-size-large);
  }
}
@media (max-width: 640px) {
  .form-check input[type="radio"] ~ label,
  .form-check input[type="checkbox"] ~ label {
    font-size: var(--hwf-form-check--mobile-font-size-large);
  }
}
.form-check input[type="radio"] ~ label::before,
.form-check input[type="radio"] ~ label::after,
.form-check input[type="checkbox"] ~ label::before,
.form-check input[type="checkbox"] ~ label::after {
  display: flex;
  content: "";
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-check input[type="radio"] ~ label::before,
.form-check input[type="checkbox"] ~ label::before {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--hwf-form-check--button-size-large);
  height: var(--hwf-form-check--button-size-large);
  margin-top: var(--hwf-form-check--button-margin-top);
  background-color: var(--hwf-form-check--button-color-element);
  border: 0.1rem solid var(--hwf-form-check--button-color-border);
}
.form-check input[type="radio"] ~ label::after,
.form-check input[type="checkbox"] ~ label::after {
  position: absolute;
  z-index: 2;
}
.form-check input[type="radio"] ~ label span,
.form-check input[type="checkbox"] ~ label span {
  width: 100%;
}
.form-check input[type="radio"]:disabled ~ label,
.form-check input[type="checkbox"]:disabled ~ label {
  color: var(--hwf-form-check--color-text-sub-disabled);
  cursor: default;
}
.form-check input[type="radio"]:disabled ~ label::before,
.form-check input[type="checkbox"]:disabled ~ label::before {
  background-color: var(--hwf-form-check--button-color-element-disabled);
  border-color: var(--hwf-form-check--button-color-border-disabled);
}
.form-check input[type="radio"]:focus ~ label,
.form-check input[type="checkbox"]:focus ~ label {
  box-shadow: var(--hwf-box-shadow-outline-inset);
  outline-offset: 0.4rem;
}
.form-check input[type="radio"] ~ label::before {
  border-radius: var(--hwf-form-check--radio-button-radius-large);
  box-sizing: border-box;
}
.form-check input[type="radio"] ~ label::after {
  top: calc((var(--hwf-form-check--button-size-large) - var(--hwf-form-check--radio-check-size-large)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-large) - var(--hwf-form-check--radio-check-size-large)) / 2);
  width: var(--hwf-form-check--radio-check-size-large);
  height: var(--hwf-form-check--radio-check-size-large);
  border-radius: 100rem;
}
.form-check input[type="radio"]:checked ~ label::before {
  background-color: var(--hwf-form-check--button-color-border-checked);
  border-color: var(--hwf-form-check--button-color-border-checked);
}
.form-check input[type="radio"]:checked ~ label::after {
  background-color: var(--hwf-form-check--radio-check-color-element-checked);
}
.form-check input[type="radio"]:checked:disabled ~ label::before {
  border-color: var(--hwf-form-check--button-color-border-disabled);
}
.form-check input[type="radio"]:checked:disabled ~ label::after {
  background-color: var(--hwf-form-check--radio-check-color-element-disabled);
}
.form-check input[type="checkbox"] ~ label::before {
  border-radius: var(--hwf-form-check--checkbox-button-radius-large);
}
.form-check input[type="checkbox"] ~ label::after {
  --form-check-check-size: var(--hwf-form-check--checkbox-check-size-large);
  --form-check-color: var(--hwf-form-check--checkbox-check-color-element);
  top: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2 + var(--hwf-form-check--button-margin-top));
  left: calc((var(--hwf-form-check--button-size-large) - var(--form-check-check-size)) / 2);
  display: inline-flex;
  width: var(--form-check-check-size);
  height: var(--form-check-check-size);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-checked.svg);
  background-color: var(--form-check-color);
}
.form-check input[type="checkbox"]:checked ~ label::before {
  background-color: var(--hwf-form-check--checkbox-button-color-element-checked);
  border-color: var(--hwf-form-check--button-color-border-checked);
}
.form-check input[type="checkbox"]:checked ~ label::after {
  background-color: var(--hwf-form-check--checkbox-check-color-element-checked);
  transition-delay: 0.1s;
}
.form-check input[type="checkbox"]:checked:disabled ~ label::after {
  background-color: var(--hwf-form-check--checkbox-check-color-element-checked-disabled);
}
.form-check input[type="checkbox"]:disabled ~ label::before {
  background-color: var(--hwf-form-check--button-color-element-disabled);
  border-color: var(--hwf-form-check--button-color-border-disabled);
}
.form-check input[type="checkbox"]:disabled ~ label::after {
  background-color: var(--hwf-form-check--checkbox-check-color-element-disabled);
}
.form-check input[type="checkbox"]:indeterminate ~ label::before {
  background-color: var(--hwf-form-check--checkbox-button-color-element-checked);
  border-color: var(--hwf-form-check--button-color-border-checked);
}
.form-check input[type="checkbox"]:indeterminate ~ label::after {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox-indeterminate.svg);
  mask-image: url(/assets/images/icon/ico-checkbox-indeterminate.svg);
  background-color: var(--hwf-form-check--checkbox-check-color-element);
}
.form-check input[type="checkbox"]:indeterminate:disabled ~ label::before {
  background-color: var(--hwf-form-check--button-color-element-disabled);
  border-color: var(--hwf-form-check--button-color-border-disabled);
}
.form-check input[type="checkbox"]:indeterminate:disabled ~ label::after {
  background-color: var(--hwf-form-check--checkbox-check-color-element-checked-disabled);
}
.form-check.check-icon input[type="checkbox"] ~ label::before {
  border: var(--hwf-form-check--check-icon-button-color-border);
}
.form-check.check-icon input[type="checkbox"] ~ label::after {
  background-color: var(--hwf-form-check--check-icon-color-element);
}
.form-check.check-icon input[type="checkbox"]:checked ~ label::before {
  background-color: var(--hwf-form-check--check-icon-button-color-element);
}
.form-check.check-icon input[type="checkbox"]:checked ~ label::after {
  background-color: var(--hwf-form-check--check-icon-color-element-checked);
}
.form-check.check-icon input[type="checkbox"]:checked:disabled ~ label::after {
  background-color: var(--hwf-form-check--check-icon-color-element-disabled);
}
.form-check.check-icon input[type="checkbox"]:disabled ~ label::before {
  background-color: var(--hwf-form-check--check-icon-button-color-element);
}
.form-check.check-icon input[type="checkbox"]:disabled ~ label::after {
  background-color: var(--hwf-form-check--check-icon-color-element-disabled);
}
.form-check.card input[type="radio"] ~ label,
.form-check.card input[type="checkbox"] ~ label {
  padding: 2rem;
  border: 0.1rem solid #ddd;
  border-radius: 0.4rem;
}
.form-check.card input[type="radio"] ~ label::before,
.form-check.card input[type="radio"] ~ label::after,
.form-check.card input[type="checkbox"] ~ label::before,
.form-check.card input[type="checkbox"] ~ label::after {
  display: none;
}
.form-check.card input[type="radio"]:checked ~ label,
.form-check.card input[type="checkbox"]:checked ~ label {
  border-color: #f54500;
}
.form-check .form-check-cnt {
  margin-top: var(--hwf-padding-2);
}
.form-check .form-check-cnt .form-check-p {
  color: var(--hwf-form-check--additional-text-color-text);
}
.radio-wrap {
  display: flex;
  gap: 2rem;
}
.chip-wrap {
  flex-wrap: wrap;
  gap: 0.8rem;
}
.chip-wrap.full .form-chip {
  flex: 1;
  text-align: center;
}
.chip-wrap.full .form-chip .form-chip-outline {
  width: 100%;
  justify-content: center;
}
.chip-wrap.full .form-chip .form-chip-outline span {
  width: auto;
}
.chip-wrap.flow {
  flex-wrap: wrap;
}
.chip-wrap.grid {
  display: grid;
}
.chip-wrap.grid.col-1 {
  grid-template-columns: repeat(1, 1fr);
}
.chip-wrap.grid.col-2 {
  grid-template-columns: repeat(2, 1fr);
}
.chip-wrap.grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.chip-wrap.grid.col-4 {
  grid-template-columns: repeat(4, 1fr);
}
.chip-wrap.grid.col-5 {
  grid-template-columns: repeat(5, 1fr);
}
.chip-wrap.grid.col-6 {
  grid-template-columns: repeat(6, 1fr);
}
.chip-wrap.grid .form-chip-outline {
  width: 100%;
  justify-content: center;
}
.chip-wrap.grid .form-chip-outline span {
  width: auto;
}
.form-chip {
  --hwf-form-chip--color-text: var(--hwf-color-text-basic);
  --hwf-form-chip--color-text-checked: #fff;
  --hwf-form-chip--color-text-disabled: var(--hwf-color-text-disabled);
  --hwf-form-chip--color-border: var(--hwf-color-orange-base);
  --hwf-form-chip--color-border-disabled: var(--hwf-color-sub-30);
  --hwf-form-chip--color-border-checked: var(--hwf-color-orange-base);
  --hwf-form-chip--color-action: var(--hwf-color-orange-base);
  --hwf-form-chip--color-action-disabled: var(var(--hwf-color-sub-30));
  --hwf-form-chip--color-action-checked: var(--hwf-color-orange-base);
  --hwf-form-chip--checkbox-color-border: #e6e5e5;
  --hwf-form-chip--checkbox-color-action: #f5f4f4;
  --hwf-form-chip--checkbox-color-check-icon: var(--hwf-color-gray-40);
  --hwf-form-chip--checkbox-color-check-icon-disabled: var(--hwf-color-gray-40);
  --hwf-form-chip--checkbox-color-check-icon-checked: var(--hwf-form-chip--color-text-checked);
  --hwf-form-chip--size-height-small: 3.2rem;
  --hwf-form-chip--check-size-small: 1.4rem;
  --hwf-form-chip--padding-left-small: 0.8rem;
  --hwf-form-chip--padding-right-small: 1.2rem;
  --hwf-form-chip--radius-small: 0.3rem;
  --hwf-form-chip--font-size-small: 1.3rem;
  --hwf-form-chip--size-height-medium: 4rem;
  --hwf-form-chip--check-size-medium: 1.6rem;
  --hwf-form-chip--padding-left-medium: 1.2rem;
  --hwf-form-chip--padding-right-medium: 2rem;
  --hwf-form-chip--radius-medium: 0.3rem;
  --hwf-form-chip--font-size-medium: 1.6rem;
  --hwf-form-chip--size-height-large: 4.8rem;
  --hwf-form-chip--check-size-large: 2rem;
  --hwf-form-chip--padding-left-large: 1.6rem;
  --hwf-form-chip--padding-right-large: 2.4rem;
  --hwf-form-chip--radius-large: 0.3rem;
  --hwf-form-chip--font-size-large: 1.8rem;
  --hwf-form-chip--gap: 0.8rem;
}
.form-chip.small input[type="radio"] ~ label,
.form-chip.small input[type="checkbox"] ~ label {
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-small);
  padding-right: var(--hwf-form-chip--padding-left-small);
  min-height: var(--hwf-form-chip--size-height-small);
  font-size: var(--hwf-form-chip--font-size-small);
  border-radius: var(--hwf-form-chip--radius-small);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip.small button {
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-small);
  padding-right: var(--hwf-form-chip--padding-left-small);
  min-height: var(--hwf-form-chip--size-height-small);
  font-size: var(--hwf-form-chip--font-size-small);
  border-radius: var(--hwf-form-chip--radius-small);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip.small input[type="checkbox"] ~ label::before {
  display: inline-flex;
  width: var(--hwf-form-chip--check-size-small);
  height: var(--hwf-form-chip--check-size-small);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox.svg);
  mask-image: url(/assets/images/icon/ico-checkbox.svg);
}
.form-chip.medium input[type="radio"] ~ label,
.form-chip.medium input[type="checkbox"] ~ label {
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-medium);
  padding-right: var(--hwf-form-chip--padding-left-medium);
  min-height: var(--hwf-form-chip--size-height-medium);
  font-size: var(--hwf-form-chip--font-size-medium);
  border-radius: var(--hwf-form-chip--radius-medium);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip.medium button {
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-medium);
  padding-right: var(--hwf-form-chip--padding-left-medium);
  min-height: var(--hwf-form-chip--size-height-medium);
  font-size: var(--hwf-form-chip--font-size-medium);
  border-radius: var(--hwf-form-chip--radius-medium);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip.medium input[type="checkbox"] ~ label::before {
  display: inline-flex;
  width: var(--hwf-form-chip--check-size-medium);
  height: var(--hwf-form-chip--check-size-medium);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox.svg);
  mask-image: url(/assets/images/icon/ico-checkbox.svg);
}
.form-chip.large input[type="radio"] ~ label,
.form-chip.large input[type="checkbox"] ~ label {
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-large);
  padding-right: var(--hwf-form-chip--padding-left-large);
  min-height: var(--hwf-form-chip--size-height-large);
  font-size: var(--hwf-form-chip--font-size-large);
  border-radius: var(--hwf-form-chip--radius-large);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip.large button {
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-large);
  padding-right: var(--hwf-form-chip--padding-left-large);
  min-height: var(--hwf-form-chip--size-height-large);
  font-size: var(--hwf-form-chip--font-size-large);
  border-radius: var(--hwf-form-chip--radius-large);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip.large input[type="checkbox"] ~ label::before {
  display: inline-flex;
  width: var(--hwf-form-chip--check-size-large);
  height: var(--hwf-form-chip--check-size-large);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox.svg);
  mask-image: url(/assets/images/icon/ico-checkbox.svg);
}
.form-chip {
  display: inline-flex;
}
.form-chip input[type="radio"] ~ label,
.form-chip input[type="checkbox"] ~ label {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: var(--hwf-form-chip--color-text);
  border: 0.1rem solid #d7d5d5;
  background-color: #fff;
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-large);
  padding-right: var(--hwf-form-chip--padding-left-large);
  min-height: var(--hwf-form-chip--size-height-large);
  font-size: var(--hwf-form-chip--font-size-large);
  border-radius: var(--hwf-form-chip--radius-large);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip input[type="radio"]:disabled ~ label,
.form-chip input[type="checkbox"]:disabled ~ label {
  cursor: default;
  color: var(--hwf-form-chip--color-text-disabled);
  border-color: var(--hwf-form-chip--color-border-disabled);
  background-color: var(--hwf-form-chip--color-action-disabled);
}
.form-chip input[type="radio"]:disabled ~ label::before,
.form-chip input[type="checkbox"]:disabled ~ label::before {
  background-color: var(--hwf-form-chip--color-check-disabled);
}
.form-chip input[type="radio"]:checked ~ label,
.form-chip input[type="checkbox"]:checked ~ label {
  color: var(--hwf-form-chip--color-text-checked);
  font-weight: 600;
  border-color: var(--hwf-form-chip--color-border-checked);
  background-color: var(--hwf-form-chip--color-action-checked);
}
.form-chip input[type="radio"]:checked ~ label::before,
.form-chip input[type="checkbox"]:checked ~ label::before {
  background-color: var(--hwf-form-chip--color-check-checked);
}
@media (hover: hover) {
  .form-chip input[type="radio"]:hover ~ label,
  .form-chip input[type="checkbox"]:hover ~ label {
    color: #f54500;
    border-color: #fe5b16;
    background-color: #fff;
  }
  .form-chip input[type="radio"]:hover ~ label::before,
  .form-chip input[type="checkbox"]:hover ~ label::before {
    background-color: currentColor !important;
  }
}
@media (max-width: 640px) {
  .form-chip input[type="radio"]:hover ~ label,
  .form-chip input[type="checkbox"]:hover ~ label {
    color: var(--hwf-form-chip--color-text-checked);
    font-weight: 600;
    border-color: var(--hwf-form-chip--color-border-checked);
    background-color: var(--hwf-form-chip--color-action-checked);
  }
  .form-chip input[type="radio"]:hover ~ label::before,
  .form-chip input[type="checkbox"]:hover ~ label::before {
    background-color: var(--hwf-form-chip--color-check-checked);
  }
}
.form-chip input[type="radio"] ~ label {
  justify-content: center;
}
.form-chip input[type="checkbox"] ~ label {
  background-color: var(--hwf-form-chip--checkbox-color-action);
  border-color: var(--hwf-form-chip--checkbox-color-border);
}
.form-chip input[type="checkbox"] ~ label::before {
  flex-shrink: 0;
  content: "";
  display: inline-flex;
  width: var(--hwf-form-chip--check-size-large);
  height: var(--hwf-form-chip--check-size-large);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-checkbox.svg);
  mask-image: url(/assets/images/icon/ico-checkbox.svg);
  background-color: var(--hwf-form-chip--checkbox-color-check-icon);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.form-chip input[type="checkbox"]:disabled ~ label::before {
  background-color: var(--hwf-form-chip--checkbox-color-check-icon-disabled);
}
.form-chip input[type="checkbox"]:checked ~ label::before {
  background-color: var(--hwf-form-chip--checkbox-color-check-icon-checked);
}
.form-chip button {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: var(--hwf-form-chip--gap);
  padding-left: var(--hwf-form-chip--padding-left-large);
  padding-right: var(--hwf-form-chip--padding-left-large);
  min-height: var(--hwf-form-chip--size-height-large);
  font-size: var(--hwf-form-chip--font-size-large);
  border-radius: var(--hwf-form-chip--radius-large);
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
  color: var(--hwf-form-chip--button-color-text);
  border-color: var(--hwf-form-chip--button-color-border);
  background-color: var(--hwf-form-chip--button-color-action);
}
.form-chip button:disabled {
  cursor: default;
  color: var(--hwf-form-chip--button-color-text-disabled);
  border-color: var(--hwf-form-chip--button-color-border-disabled);
  background-color: var(--hwf-form-chip--button-color-action-disabled);
}
.form-chip button:hover:not(:disabled) {
  background-color: var(--hwf-form-chip--button-color-action-hover);
}
.form-chip button:active:not(:disabled) {
  background-color: var(--hwf-form-chip--button-color-action-pressed);
}
.form-chip.focus button,
.form-chip.focus input[type="checkbox"] ~ label,
.form-chip.focus input[type="radio"] ~ label {
  box-shadow: var(--hwf-box-shadow-outline-inset);
  outline-offset: -0.4rem;
}
@media (max-width: 640px) {
  .form-chip {
    --hwf-form-chip--size-height-large: 4rem;
    --hwf-form-chip--padding-left-large: 1.2rem;
    --hwf-form-chip--font-size-large: 1.6rem;
    --hwf-form-chip--check-size-large: 1.6rem;
    --hwf-form-chip--gap: 0.6rem;
  }
}
.fieldset {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.form-col-group {
  display: flex;
  gap: 1.6rem;
}
.form-col-group .form-group {
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 640px) {
  .form-col-group {
    flex-direction: column;
  }
  .form-col-group .form-group {
    width: 100%;
  }
}
.form-group {
  --hwf-form-group--label-text-color: var(--hwf-color-text-basic);
  --hwf-form-group--message-text-color: var(--hwf-color-text-subtle);
  --hwf-form-group--message-success-text-color: var(--hwf-color-text-success);
  --hwf-form-group--message-information-text-color: var(--hwf-color-text-subtle);
  --hwf-form-group--message-error-text-color: var(--hwf-color-text-danger);
  --hwf-form-group--label-font-size: 1.8rem;
  --hwf-form-group--gap: 0.8rem;
  --hwf-form-group--icon-padding-right: calc(2rem * 2 + var(--hwf-icon--size-large));
  --hwf-form-group--message-font-size: 1.3rem;
  --hwf-input--color-surface: var(--hwf-color-input-surface);
  --hwf-input--color-surface-readonly: var(--hwf-color-input-surface-disabled);
  --hwf-input--color-surface-disabled: var(--hwf-color-input-surface-disabled);
  --hwf-input--color-surface-error: var(--hwf-color-input-surface);
  --hwf-input--color-border: #c3c1c1;
  --hwf-input--color-border-active: var(--hwf-color-input-border-active);
  --hwf-input--color-border-readonly: var(--hwf-color-input-border-disabled);
  --hwf-input--color-border-disabled: var(--hwf-color-input-border-disabled);
  --hwf-input--color-border-error: var(--hwf-color-input-border-error);
  --hwf-input--color-text: var(--hwf-color-text-strong);
  --hwf-input--color-text-active: var(--hwf-color-text-strong);
  --hwf-input--color-text-readonly: var(--hwf-color-text-strong);
  --hwf-input--color-text-disabled: var(--hwf-color-text-subtler);
  --hwf-input--color-text-placeholder: var(--hwf-color-text-subtler);
  --hwf-input--color-text-error: var(--hwf-color-text-strong);
  --hwf-input--padding-x-small: 1.6rem;
  --hwf-input--gap-small: 0.8rem;
  --hwf-input--size-height-small: 4rem;
  --hwf-input--button-clear-size-small: 1.8rem;
  --hwf-input--radius-small: 0.3rem;
  --hwf-input--font-size-small: var(--hwf-font-size-label-small);
  --hwf-input--padding-x-medium: 1.6rem;
  --hwf-input--gap-medium: 0.8rem;
  --hwf-input--size-height-medium: 4.8rem;
  --hwf-input--button-clear-size-medium: 2rem;
  --hwf-input--radius-medium: 0.3rem;
  --hwf-input--font-size-medium: var(--hwf-font-size-label-medium);
  --hwf-input--padding-x-large: 1.6rem;
  --hwf-input--gap-large: 0.8rem;
  --hwf-input--size-height-large: 5.6rem;
  --hwf-input--button-clear-size-large: 2.4rem;
  --hwf-input--radius-large: 0.3rem;
  --hwf-input--font-size-large: var(--hwf-font-size-label-large);
  --hwf-input--padding-x-xlarge: 0.8rem;
  --hwf-input--gap-xlarge: 1.6rem;
  --hwf-input--size-height-xlarge: 8rem;
  --hwf-input--button-clear-size-xlarge: 3.2rem;
  --hwf-input--radius-xlarge: 0;
  --hwf-input--font-size-xlarge: 3.2rem;
  --hwf-form-input--padding: 1.6rem;
  --hwf-form-input--dash-gap: 2.4rem;
  --hwf-form-input--dash-width: 0.8rem;
}
.form-group {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: var(--hwf-form-group--gap);
  width: 100%;
}
.form-group.row .form-field,
.form-group.full .form-field,
.form-group.multi .input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--hwf-input--color-surface);
  border: 0.1rem solid var(--hwf-input--color-border);
  font-family: inherit;
  color: var(--hwf-input--color-text);
  transition: var(--hwf-transition-base);
}
.form-group.row .form-field input,
.form-group.full .form-field input,
.form-group.multi .input-group input {
  width: 100%;
  height: 100%;
  border: 0.1rem solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}
.form-group.row .form-field input:focus,
.form-group.full .form-field input:focus,
.form-group.multi .input-group input:focus {
  outline: none;
}
.form-group.row .form-field input::-moz-placeholder,
.form-group.full .form-field input::-moz-placeholder,
.form-group.multi .input-group input::-moz-placeholder {
  color: var(--hwf-input--color-text-placeholder);
}
.form-group.row .form-field input::placeholder,
.form-group.full .form-field input::placeholder,
.form-group.multi .input-group input::placeholder {
  color: var(--hwf-input--color-text-placeholder);
}
.form-group.row .form-field,
.form-group.full .form-field,
.form-group.multi .input-group {
  gap: 0.2rem;
}
.form-group.row .form-field.small,
.form-group.full .form-field.small,
.form-group.multi .input-group.small {
  border-radius: var(--hwf-input--radius-small);
}
.form-group.row .form-field.medium,
.form-group.full .form-field.medium,
.form-group.multi .input-group.medium {
  border-radius: var(--hwf-input--radius-medium);
}
.form-group.row .form-field.large,
.form-group.full .form-field.large,
.form-group.multi .input-group.large {
  border-radius: var(--hwf-input--radius-large);
}
.form-group.row .form-field.xlarge,
.form-group.full .form-field.xlarge,
.form-group.multi .input-group.xlarge {
  border-radius: var(--hwf-input--radius-xlarge);
}
.form-group.row .form-field .input,
.form-group.full .form-field .input,
.form-group.multi .input-group .input {
  padding: 0;
  border: none;
}
.form-group.row .form-field {
  align-items: center;
  flex-direction: row;
  padding: 0 var(--hwf-form-input--padding);
}
.form-group.row .form-field .form-tit {
  flex-shrink: 0;
  width: auto;
  min-width: 6.4rem;
}
.form-group.full .form-field {
  padding: var(--hwf-form-input--padding);
}
.form-group.multi .input-group {
  gap: var(--hwf-form-input--dash-gap);
}
.form-group.multi .input-group.focus {
  border-color: var(--hwf-input--color-border-active);
  border-width: 2px;
  outline: none;
  box-shadow: none;
}
.form-group.multi .input-group.focus ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.form-group.multi .input-group.focus ~ .textarea-count .count-now {
  color: var(--hwf-input--count-number-color-text-active);
}
.form-group.multi .input-group.readonly {
  background-color: var(--hwf-input--color-surface-readonly);
  border-color: var(--hwf-input--color-border-readonly);
  color: var(--hwf-input--color-text-readonly);
}
.form-group.multi .input-group.readonly.datepicker {
  background-color: var(--hwf-input--color-surface);
  border-color: var(--hwf-input--color-border);
  color: var(--hwf-input--color-text);
}
.form-group.multi .input-group.readonly .input {
  background-color: var(--hwf-input--color-surface-readonly);
}
.form-group.multi .input-group.readonly ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.form-group.multi .input-group.readonly:focus {
  border-color: var(--hwf-input--color-border-active);
}
.form-group.multi .input-group.disabled {
  background-color: var(--hwf-input--color-surface-disabled);
  border-color: var(--hwf-input--color-border-disabled);
  color: var(--hwf-input--color-text-disabled);
}
.form-group.multi .input-group.disabled .input {
  background-color: var(--hwf-input--color-surface-disabled);
}
.form-group.multi .input-group.disabled ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.form-group.multi .input-group.is-error {
  background-color: var(--hwf-input--color-surface-error);
  border-color: var(--hwf-input--color-border-error);
  border-width: 2px;
  color: var(--hwf-input--color-text-error);
}
.form-group.multi .input-group.is-error:focus {
  border-color: var(--hwf-input--color-border-active);
}
.form-group .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--hwf-form-group--gap);
}
.form-group .form-field.focus {
  border-color: var(--hwf-input--color-border-active);
  border-width: 2px;
  outline: none;
  box-shadow: none;
}
.form-group .form-field.focus ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.form-group .form-field.focus ~ .textarea-count .count-now {
  color: var(--hwf-input--count-number-color-text-active);
}
.form-group .form-field.readonly {
  background-color: var(--hwf-input--color-surface-readonly);
  border-color: var(--hwf-input--color-border-readonly);
  color: var(--hwf-input--color-text-readonly);
}
.form-group .form-field.readonly.datepicker {
  background-color: var(--hwf-input--color-surface);
  border-color: var(--hwf-input--color-border);
  color: var(--hwf-input--color-text);
}
.form-group .form-field.readonly .input {
  background-color: var(--hwf-input--color-surface-readonly);
}
.form-group .form-field.readonly ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.form-group .form-field.readonly:focus {
  border-color: var(--hwf-input--color-border-active);
}
.form-group .form-field.disabled {
  background-color: var(--hwf-input--color-surface-disabled);
  border-color: var(--hwf-input--color-border-disabled);
  color: var(--hwf-input--color-text-disabled);
}
.form-group .form-field.disabled .input {
  background-color: var(--hwf-input--color-surface-disabled);
}
.form-group .form-field.disabled ~ .textarea-count {
  color: var(--hwf-input--count-number-color-text);
}
.form-group .form-field.is-error {
  background-color: var(--hwf-input--color-surface-error);
  border-color: var(--hwf-input--color-border-error);
  border-width: 2px;
  color: var(--hwf-input--color-text-error);
}
.form-group .form-field.is-error:focus {
  border-color: var(--hwf-input--color-border-active);
}
.form-group .form-tit,
.form-group .form-label {
  width: 100%;
  font-size: var(--hwf-form-group--label-font-size);
  color: var(--hwf-form-group--label-text-color);
}
.form-group .form-tit .required,
.form-group .form-label .required {
  margin-left: 0.4rem;
  color: #f94339;
}
.form-group .form-conts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.form-group .form-conts .form-label {
  display: flex;
  font-size: var(--hwf-form-group--label-font-size);
  width: 100%;
}
.form-group > p {
  width: 100%;
}
.form-group [class^="form-hint"] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  font-size: var(--hwf-form-group--message-font-size);
  color: var(--hwf-form-group--message-text-color);
}
@media (max-width: 1024px) {
  .form-group [class^="form-hint"] {
    font-size: var(--hwf-form-group--message-tablet-font-size);
  }
}
@media (max-width: 640px) {
  .form-group [class^="form-hint"] {
    font-size: var(--hwf-form-group--message-mobile-font-size);
  }
}
.form-group [class^="form-hint"]::before {
  display: inline-flex;
  content: "";
  display: inline-flex;
  width: var(--hwf-icon--size-small);
  height: var(--hwf-icon--size-small);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-information.svg);
  mask-image: url(/assets/images/icon/ico-information.svg);
}
.form-group [class^="form-hint-"]::before {
  display: inline-flex;
  width: var(--hwf-icon--size-small);
  height: var(--hwf-icon--size-small);
  background-color: var(--hwf-color-text-basic);
  background-color: rgba(0, 0, 0, 0) !important;
  forced-color-adjust: none;
}
.form-group .form-hint-success {
  color: var(--hwf-form-group--message-success-text-color);
}
.form-group .form-hint-success::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-success-fill.svg);
  mask-image: url(/assets/images/icon/ico-success-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-success-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.form-group .form-hint-information {
  color: var(--hwf-form-group--message-information-text-color);
}
.form-group .form-hint-information::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-information.svg);
  mask-image: url(/assets/images/icon/ico-information.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-information.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.form-group .form-hint-invalid {
  color: var(--hwf-form-group--message-error-text-color);
}
.form-group .form-hint-invalid::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-error-fill.svg);
  mask-image: url(/assets/images/icon/ico-error-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-error-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.form-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.form-input-group:has(.input-group + .btn) .input-group .input:only-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-input-group:has(.input-group + .btn) .input-group .input:not(:only-child):first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-input-group:has(.input-group + .btn) .input-group .input:not(:only-child):last-child {
  border-radius: 0;
}
.form-input-group:has(.input-group + .btn) .input-group .input:not(:only-child) + .input {
  margin-left: -0.1rem;
}
.form-input-group:has(.input-group + .btn) .input-group + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}
.input-group.range {
  align-items: flex-end;
  position: relative;
}
.input-group.range > li:not(.mark) {
  display: flex;
  flex-direction: column;
  flex: 1 1 0px;
  min-width: 0;
  gap: var(--hwf-form-group--gap);
  position: relative;
}
.input-group.range > li.mark {
  display: flex;
  align-items: center;
  height: var(--hwf-size-height-8);
}
.input-group.range > li.mark.large {
  height: var(--hwf-size-height-8);
}
.input-group.range > li.mark.medium {
  height: var(--hwf-size-height-7);
}
.input-group.range > li.mark.small {
  height: var(--hwf-size-height-6);
}
.input-group.dash {
  gap: var(--hwf-form-input--dash-gap);
}
.input-group.dash .input {
  position: relative;
}
.input-group.dash .input + .input::before {
  content: "";
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: calc(var(--hwf-form-input--dash-gap) / 2 * -1 - var(--hwf-form-input--dash-width) / 2);
  transform: translateY(-50%);
  width: var(--hwf-form-input--dash-width);
  height: 0.1rem;
  background-color: #000;
}
.input-group .form-select {
  flex: 1;
}
.calendar-group {
  gap: 0;
}
.calendar-group .calendar {
  min-width: 18.1rem;
  transition: none;
}
.calendar-group .calendar:focus,
.calendar-group .calendar:focus-within {
  position: relative;
  z-index: 1;
}
.calendar-group .calendar:focus .btn.icon .icon-calendar,
.calendar-group .calendar:focus-within .btn.icon .icon-calendar {
  background-color: var(--hwf-color-orange-base);
}
.calendar-group:has(.calendar + .calendar) .calendar:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.calendar-group:has(.calendar + .calendar) .calendar:last-child {
  margin-left: -0.1rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media (max-width: 640px) {
  .calendar-group .calendar {
    min-width: auto;
  }
}
.tab {
  --hwf-tab--button-color-action: var(--hwf-color-action-transparency);
  --hwf-tab--button-color-action-hover: var(--hwf-color-action-neutral-hover);
  --hwf-tab--button-color-action-pressed: var(--hwf-color-action-neutral-pressed);
  --hwf-tab--button-color-border: var(--hwf-color-action-transparency);
  --hwf-tab--button-color-text: var(--hwf-color-text-subtler);
  --hwf-tab--button-color-text-disabled: var(--hwf-color-text-disabled);
  --hwf-tab--line-button-color-border: var(--hwf-color-action-transparency);
  --hwf-tab--line-button-color-line: #e6e5e5;
  --hwf-tab--line-button-color-line-active: #fe5b16;
  --hwf-tab--line-button-color-text-active: #151414;
  --hwf-tab--gap: 0.8rem;
  --hwf-tab--button-size-height: 4.8rem;
  --hwf-tab--button-font-size: 2.4rem;
  --hwf-tab--line-button-size-min-width: 20rem;
  --hwf-tab--line-button-padding-x: 2rem;
  --hwf-tab--line-button-padding-y: 1.2rem;
  --hwf-tab--line-button-height: 6.4rem;
}
.tab > ul {
  display: flex;
  align-items: center;
  gap: var(--hwf-tab--gap);
  overflow-x: auto;
  width: 100%;
}
.tab > ul li {
  flex-grow: 0;
}
.tab > ul li:first-child {
  margin-left: auto;
}
.tab > ul li:last-child {
  margin-right: auto;
}
.tab > ul li.active .btn-tab {
  font-weight: 700;
}
.tab li,
.tab .btn-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  white-space: nowrap;
}
.tab .btn-tab {
  width: 100%;
  background-color: var(--hwf-tab--button-color-action);
  border: 0.1rem solid var(--hwf-tab--button-color-border);
  font-size: var(--hwf-tab--button-font-size);
  color: var(--hwf-tab--button-color-text);
  font-weight: 600;
  transition: var(--hwf-transition-base);
}
.tab .btn-tab:not(:disabled):hover {
  background-color: var(--hwf-tab--button-color-action-hover);
}
.tab .btn-tab:not(:disabled):active {
  background-color: var(--hwf-tab--button-color-action-pressed);
}
.tab .btn-tab:focus {
  box-shadow: var(--hwf-box-shadow-outline-inset);
  outline-offset: -0.4rem;
}
.tab .btn-tab[disabled] {
  color: var(--hwf-tab--button-color-text-disabled);
  cursor: default;
}
.tab.full .btn-tab {
  padding: 0;
}
.tab.full > ul {
  gap: 0;
}
.tab.full > ul > li {
  flex: 1;
}
.tab.full.line .btn-tab {
  padding: 0 4rem;
  min-width: auto;
}
.tab.line > ul > li {
  flex: 1;
}
@media (max-width: 1024px) {
  .tab.line {
    padding: 0;
  }
}
.tab.line {
  position: relative;
}
.tab.line::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 0.2rem;
  background-color: var(--hwf-tab--line-button-color-line);
}
.tab.line .btn-tab {
  padding: 0 var(--hwf-tab--line-button-padding-x) var(--hwf-tab--line-button-padding-y);
  min-width: var(--hwf-tab--line-button-size-min-width);
  min-height: var(--hwf-tab--line-button-height);
}
.tab.line .btn-tab::after {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  right: auto;
  content: "";
  width: 0;
  height: 0.2rem;
  background-color: var(--hwf-tab--line-button-color-line-active);
  transition: var(--hwf-transition-base);
}
.tab.line .active .btn-tab {
  color: var(--hwf-tab--line-button-color-text-active);
}
.tab.line .active .btn-tab::before {
  content: "";
  display: inline-block;
  align-self: flex-start;
  margin-top: 1.4rem;
  margin-right: 0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #f54500;
}
.tab.line .active .btn-tab::after {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: auto;
  width: 100%;
}
@media (max-width: 1280px) {
  .tab > ul {
    justify-content: flex-start;
  }
  .tab li {
    flex: 1;
  }
}
@media (max-width: 1024px) {
  .tab {
    --hwf-tab--line-button-size-min-width: auto;
    --hwf-tab--line-button-padding: 1.6rem 2rem;
  }
}
@media (max-width: 640px) {
  .tab {
    --hwf-tab--button-font-size: 1.8rem;
    --hwf-tab--line-button-height: 5.6rem;
    --hwf-tab--line-button-padding-y: 1.6rem;
  }
  .tab.line {
    margin-left: calc(var(--hwf-content-padding-x) * -1);
    margin-right: calc(var(--hwf-content-padding-x) * -1);
  }
  .tab.line .btn-tab {
    padding-top: var(--hwf-tab--line-button-padding-y);
  }
  .tab.line .active .btn-tab::before {
    margin-top: 0;
  }
}
.tab-conts-wrap {
  --hwf-tab--conts-padding-top: 4rem;
  margin-top: var(--hwf-tab--conts-padding-top);
  width: 100%;
}
.tab-conts-wrap .tab-conts {
  display: none;
  margin-top: var(--hwf-tab--conts-padding-top);
}
.tab-conts-wrap .tab-conts.active {
  display: flex;
  align-items: normal;
  flex-direction: column;
}
@media (max-width: 640px) {
  .tab-conts-wrap {
    --hwf-tab--conts-padding-top: 2.4rem;
  }
}
.tbl-wrap {
  --hwf-table--gradient-bar: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
  --hwf-table--thead-color-text: #151414;
  --hwf-table--thead-color-surface: #f3f2f1;
  --hwf-table--tbody-color-text: #494646;
  --hwf-table--tbody-color-divider: #e7e5e4;
  --hwf-table--tbody-color-surface: #fff;
  --hwf-table--secondary-border-color: #e7e5e4;
  --hwf-table--secondary-thead-color-surface: #e7e5e4;
  --hwf-table--border-width: 0.1rem;
  --hwf-table--thead-height: 4rem;
  --hwf-table--thead-padding-y: 0.95rem;
  --hwf-table--thead-font-size: 1.5rem;
  --hwf-table--tbody-height: 6.4rem;
  --hwf-table--tbody-font-size: 1.8rem;
  --hwf-table--tbody-padding-x: 2.4rem;
  --hwf-table--tbody-padding-y: 1.85rem;
  --hwf-table--scroll-padding-bottom: 1.6rem;
  --hwf-table--scroll-min-width: 96rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  overflow-x: auto;
  position: relative;
  width: 100%;
}
.tbl-wrap .tbl {
  position: relative;
  width: 100%;
}
.tbl-wrap .tbl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hwf-table--border-width);
  background: var(--hwf-table--gradient-bar);
}
.tbl-wrap .tbl thead th {
  padding: var(--hwf-table--thead-padding-y) 0.8rem;
  min-height: var(--hwf-table--thead-height);
  color: var(--hwf-table--thead-color-text);
  font-size: var(--hwf-table--thead-font-size);
  font-weight: 600;
  text-align: center;
  background-color: var(--hwf-table--thead-color-surface);
}
.tbl-wrap .tbl thead .emphasis {
  background-color: rgba(208, 156, 88, 0.2);
}
.tbl-wrap .tbl thead .compare {
  background-color: #feeae1;
}
.tbl-wrap .tbl thead:has(tr + tr) tr {
  border-bottom: var(--hwf-table--border-width) solid var(--hwf-table--tbody-color-divider);
}
.tbl-wrap .tbl thead:has(tr + tr) tr th {
  border-right: var(--hwf-table--border-width) solid var(--hwf-table--tbody-color-divider);
}
.tbl-wrap .tbl thead:has(tr + tr) tr th:last-child {
  border-right: 0;
}
.tbl-wrap .tbl thead:has(tr + tr) tr:last-child {
  border-bottom: 0;
}
.tbl-wrap .tbl tbody th,
.tbl-wrap .tbl tbody td {
  padding: var(--hwf-table--tbody-padding-y) var(--hwf-table--tbody-padding-x);
  min-height: var(--hwf-table--tbody-height);
  color: var(--hwf-table--tbody-color-text);
  font-size: var(--hwf-table--tbody-font-size);
  text-align: center;
  word-break: keep-all;
  border-bottom: var(--hwf-table--border-width) solid var(--hwf-table--tbody-color-divider);
  background-color: var(--hwf-table--tbody-color-surface);
}
.tbl-wrap .tbl tbody th:has(.change).txt-right,
.tbl-wrap .tbl tbody td:has(.change).txt-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.tbl-wrap .tbl tbody th {
  color: var(--hwf-color-text-strong);
  font-weight: 400;
  background-color: var(--hwf-table--thead-color-surface);
}
.tbl-wrap .tbl tbody th.emphasis {
  background-color: rgba(208, 156, 88, 0.2);
}
.tbl-wrap .tbl tbody th.compare {
  background-color: #feeae1;
}
.tbl-wrap .tbl tbody .emphasis {
  background-color: rgba(208, 156, 88, 0.1);
}
.tbl-wrap .tbl tbody .emphasis th {
  color: var(--hwf-color-text-basic);
  background-color: rgba(208, 156, 88, 0.2);
}
.tbl-wrap .tbl tbody .emphasis td {
  color: var(--hwf-color-text-basic);
  background-color: rgba(208, 156, 88, 0.1);
}
.tbl-wrap .tbl tbody .compare {
  background-color: #fdf5f1;
}
.tbl-wrap .tbl tbody .compare th {
  background-color: #feeae1;
}
.tbl-wrap .tbl tbody .compare td {
  background-color: #fdf5f1;
}
.tbl-wrap .tbl tbody strong {
  font-weight: 600;
}
.tbl-wrap .tbl tbody .desc {
  display: inline-block;
  margin-bottom: 0.8rem;
}
.tbl-wrap .tbl th,
.tbl-wrap .tbl td {
  vertical-align: middle;
}
.tbl-wrap .tbl .note-list {
  gap: 0.4rem;
}
.tbl-wrap .tbl .note-list + .note-list {
  margin-top: 1.2rem;
}
.tbl-wrap.secondary .tbl::before {
  background: var(--hwf-table--secondary-border-color);
}
.tbl-wrap.secondary .tbl thead th {
  background-color: var(--hwf-table--secondary-thead-color-surface);
}
.tbl-wrap.tertiary {
  --hwf-table--thead-padding-y: 1.85rem;
  --hwf-table--thead-font-size: 1.8rem;
}
.tbl-wrap.tertiary .tbl thead th {
  font-size: var(--hwf-table--thead-font-size);
}
.tbl-wrap.tertiary .tbl tbody tr:first-child th,
.tbl-wrap.tertiary .tbl tbody tr:first-child td {
  border-top: var(--hwf-table--border-width) solid var(--hwf-table--tbody-color-divider);
}
@media (max-width: 640px) {
  .tbl-wrap.tertiary {
    --hwf-table--thead-padding-y: 1.2rem;
    --hwf-table--thead-font-size: 1.4rem;
  }
}
.tbl-wrap.scroll {
  overflow: auto hidden;
}
.tbl-wrap.scroll .tbl {
  min-width: var(--hwf-table--scroll-min-width);
}
.tbl-wrap.scroll.small {
  --hwf-table--scroll-min-width: 64rem;
}
@media (max-width: 640px) {
  .tbl-wrap {
    --hwf-table--tbody-font-size: 1.4rem;
    --hwf-table--thead-font-size: 1.4rem;
    gap: 1.6rem;
  }
  .tbl-wrap .note-list > li {
    padding-left: 1.4rem;
    font-size: var(--hwf-table--tbody-font-size);
  }
  .tbl-wrap .note-list > li::before {
    top: 0.8rem;
    left: 0.3rem;
  }
}
.tbl-info {
  font-size: 1.6rem;
  color: var(--hwf-color-text-subtler);
}
.modal {
  --hwf-modal--color-text: var(--hwf-color-text-basic);
  --hwf-modal--wrap-color-surface: #ffffff;
  --hwf-modal--header-color-border: #e6e5e5;
  --hwf-modal--color-dim: rgba(0, 0, 0, 0.7);
  --hwf-modal--full-popup-surface: #fff;
  --hwf-modal--size-large: calc(130rem + (var(--hwf-content-padding-x)) * 2);
  --hwf-modal--size-medium: calc(64rem + (var(--hwf-content-padding-x)) * 2);
  --hwf-modal--size-small: calc(48rem + (var(--hwf-content-padding-x)) * 2);
  --hwf-modal--size-min-height: 26.4rem;
  --hwf-modal--wrap-radius: 0.4rem;
  --hwf-modal--header-padding: 4rem;
  --hwf-modal--header-padding-bottom: 2.4rem;
  --hwf-modal--header-font-size: 2.8rem;
  --hwf-modal--conts-padding: 4rem;
  --hwf-modal--conts-font-size: 1.8rem;
  --hwf-modal--btn-close-position: 4rem;
  --hwf-modal--btn-close-size: 4.8rem;
  --hwf-modal--btn-close-icon-size: 4rem;
  --hwf-modal--btn-padding-x: 4rem;
  --hwf-modal--btn-padding-y-top: 1.6rem;
  --hwf-modal--btn-padding-y-bottom: 4rem;
  --hwf-modal--btn-gap: 0.8rem;
  --hwf-modal--btn-column-gap: 2rem;
  --hwf-modal--btn-size-min-width: 7.8rem;
  --hwf-modal--bottom-sheet-radius: 1.2rem;
  --hwf-modal--bottom-sheet-header-padding: 2.4rem;
  --hwf-modal--bottom-sheet-header-padding-x: 1.6rem;
  --hwf-modal--bottom-sheet-cont-padding: 1.6rem;
  --hwf-modal--bottom-sheet-btn-padding-top: 0.8rem;
  --hwf-modal--bottom-sheet-btn-padding-bottom: 4rem;
  --hwf-modal--bottom-sheet-btn-padding-side: 1.6rem;
  --hwf-modal--bottom-sheet-btn-close-size: 2.4rem;
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: var(--hwf-line-height-base);
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
}
@media (max-width: 640px) {
  .modal {
    font-size: 1.8rem;
  }
}
.modal > * {
  width: 100%;
}
.modal.in {
  z-index: 10;
  transition-delay: 0s;
  opacity: 1;
  visibility: visible;
}
.modal.show {
  display: block;
  z-index: 6;
}
.modal.show .modal-back {
  visibility: visible;
}
.modal.show.in {
  opacity: 1;
}
.modal.show.in .modal-back {
  opacity: 1;
}
.modal .modal-back {
  position: fixed;
  inset: 0;
  visibility: hidden;
  z-index: -1;
  background-color: var(--hwf-modal--color-dim);
  opacity: 0;
  transition: opacity 0.2s;
}
.modal .modal-dialog {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 0 var(--hwf-content-padding-x);
  max-width: var(--hwf-modal--size-large);
  height: 100%;
  min-height: var(--hwf-modal--size-min-height);
  z-index: 2;
}
.modal .modal-dialog.modal-sm {
  max-width: var(--hwf-modal--size-small);
}
.modal .modal-dialog.modal-md {
  max-width: var(--hwf-modal--size-medium);
}
.modal .modal-dialog.modal-lg {
  max-width: var(--hwf-modal--size-large);
}
.modal .modal-dialog.modal-md .modal-header {
  border-bottom: 0;
}
.modal .modal-dialog.modal-md .modal-conts {
  padding-top: 0;
}
.modal .modal-dialog .modal-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 5;
  position: relative;
  width: 100%;
  max-height: 80%;
  color: var(--hwf-modal--color-text);
  background-color: var(--hwf-modal--wrap-color-surface);
  border-radius: var(--hwf-modal--wrap-radius);
  transition: outline-color 0.1s;
}
.modal .modal-dialog .modal-content > *:not(.btn-close) {
  width: 100%;
}
.modal .modal-dialog .modal-content:focus {
  box-shadow: var(--hwf-box-shadow-outline-inset);
  outline-offset: 0.4rem;
}
.modal .modal-dialog .modal-header {
  width: 100%;
  padding: var(--hwf-modal--header-padding) var(--hwf-modal--header-padding) var(--hwf-modal--header-padding-bottom);
  border-bottom: 0.1rem solid var(--hwf-modal--header-color-border);
}
.modal .modal-dialog .modal-header .modal-title {
  line-height: 1.5;
  font-size: var(--hwf-modal--header-font-size);
  font-weight: 700;
}
.modal .modal-dialog .modal-conts {
  position: relative;
  overflow-y: auto;
  width: 100%;
  padding: var(--hwf-modal--conts-padding);
  font-size: var(--hwf-modal--conts-font-size);
}
.modal .modal-dialog .modal-conts .tit-wrap {
  margin-bottom: 4rem;
}
.modal .modal-dialog .modal-conts .tit-wrap .tit {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 2.4rem;
  font-weight: 700;
  color: #151414;
}
.modal .modal-dialog .modal-conts .tit-wrap .tit small {
  font-size: 1.8rem;
  font-weight: 400;
  color: #494646;
}
.modal .modal-dialog .modal-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hwf-modal--btn-gap);
  padding: var(--hwf-modal--btn-padding-y-top) var(--hwf-modal--btn-padding-x) var(--hwf-modal--btn-padding-y-bottom);
}
@media (max-width: 640px) {
  .modal .modal-dialog .modal-btn {
    padding: var(--hwf-modal--btn-padding-top) var(--hwf-modal--small-padding) var(--hwf-modal--small-padding);
  }
}
.modal .modal-dialog .modal-btn .btn {
  flex-shrink: 1;
  flex-grow: 1;
  min-width: var(--hwf-modal--btn-size-min-width);
}
.modal .modal-dialog .modal-btn.column {
  flex-direction: column;
  gap: var(--hwf-modal--btn-column-gap);
}
.modal .modal-dialog .modal-btn.column .btn {
  width: 100%;
}
.modal .modal-dialog .modal-btn.multi-conts {
  justify-content: space-between;
}
.modal .modal-dialog .icon.btn-close {
  position: absolute;
  top: var(--hwf-modal--btn-close-position);
  bottom: auto;
  left: auto;
  right: var(--hwf-modal--btn-close-position);
  width: var(--hwf-modal--btn-close-size);
  height: var(--hwf-modal--btn-close-size);
  z-index: 5;
}
.modal .modal-dialog .icon.btn-close .svg-icon {
  width: var(--hwf-modal--btn-close-icon-size);
  height: var(--hwf-modal--btn-close-icon-size);
}
.modal[data-type="full"] {
  background-color: var(--hwf-modal--full-popup-surface);
}
.modal[data-type="full"] .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}
.modal[data-type="full"] .modal-header {
  padding: 2rem 2rem 0;
}
.modal[data-type="full"] .modal-conts {
  padding: 2rem;
}
.modal[data-type="full"] .modal-content {
  height: 100%;
  max-height: 100%;
  background: none;
  margin: 0 auto;
  border: none;
  border-radius: 0;
}
.modal[data-type="full"] .modal-back.in {
  display: none;
}
.modal[data-type="top-sheet"] {
  --hwf-modal--top-sheet-content-padding-top: 4rem;
  --hwf-modal--top-sheet-header-padding-y: 2.4rem;
  --hwf-modal--top-sheet-conts-padding-top: 6.4rem;
  --hwf-modal--top-sheet-conts-padding-bottom: 12rem;
  --hwf-modal--top-sheet-btn-close-position-top: 6.8rem;
  --hwf-modal--top-sheet-btn-close-position-right: calc(50% - var(--hwf-content-width-large) / 2);
  transition: none;
}
.modal[data-type="top-sheet"] .modal-dialog {
  align-items: flex-start;
  padding: 0;
  max-width: 100%;
}
.modal[data-type="top-sheet"] .modal-dialog .modal-content {
  position: relative;
  padding-top: var(--hwf-modal--top-sheet-content-padding-top);
  border-radius: 0;
}
.modal[data-type="top-sheet"] .modal-dialog .modal-header {
  padding: var(--hwf-modal--top-sheet-header-padding-y) var(--hwf-content-padding-x);
  max-width: var(--hwf-content-wrap-width-large);
  border-bottom: 0;
}
.modal[data-type="top-sheet"] .modal-dialog .modal-conts {
  padding: var(--hwf-modal--top-sheet-conts-padding-top) var(--hwf-content-padding-x) var(--hwf-modal--top-sheet-conts-padding-bottom);
  max-width: var(--hwf-content-wrap-width-large);
}
.modal[data-type="top-sheet"] .modal-dialog .icon.btn-close {
  top: var(--hwf-modal--top-sheet-btn-close-position-top);
  right: var(--hwf-modal--top-sheet-btn-close-position-right);
}
@media (max-width: 1760px) {
  .modal[data-type="top-sheet"] {
    --hwf-modal--top-sheet-btn-close-position-right: var(--hwf-content-padding-x);
  }
}
@media (max-width: 640px) {
  .modal[data-type="top-sheet"] {
    --hwf-modal--top-sheet-content-padding-top: 0;
    --hwf-modal--top-sheet-header-padding-y: 1.6rem;
    --hwf-modal--top-sheet-conts-padding-top: 6.4rem;
    --hwf-modal--top-sheet-conts-padding-bottom: 6.4rem;
    --hwf-modal--top-sheet-btn-close-position-top: 1.2rem;
    --hwf-modal--btn-close-size: 4rem;
  }
  .modal[data-type="top-sheet"] .modal-dialog .icon.btn-close .svg-icon {
    width: 3.2rem;
    height: 3.2rem;
  }
}
.modal[data-type="bottom-sheet"] .modal-content {
  position: fixed;
  left: 0;
  bottom: -100%;
  border-radius: 0;
  border-top-left-radius: var(--hwf-modal--bottom-sheet-radius);
  border-top-right-radius: var(--hwf-modal--bottom-sheet-radius);
  max-height: 80%;
  transition: var(--hwf-transition-base);
}
.modal[data-type="bottom-sheet"] .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hwf-modal--bottom-sheet-header-padding) var(--hwf-modal--bottom-sheet-header-padding-x) 0;
  flex-shrink: 0;
  border-bottom: 0;
}
.modal[data-type="bottom-sheet"] .modal-header .modal-title {
  font-size: var(--hwf-modal--header-font-size);
}
.modal[data-type="bottom-sheet"] .modal-conts {
  display: block;
  padding: var(--hwf-modal--bottom-sheet-cont-padding);
}
.modal[data-type="bottom-sheet"] .icon.btn-close {
  top: var(--hwf-modal--bottom-sheet-header-padding);
  right: var(--hwf-modal--bottom-sheet-header-padding);
  width: var(--hwf-modal--bottom-sheet-btn-close-size);
  height: var(--hwf-modal--bottom-sheet-btn-close-size);
}
.modal[data-type="bottom-sheet"] .icon.btn-close .svg-icon {
  width: 100%;
  height: 100%;
}
.modal[data-type="bottom-sheet"] .pop-filter-top {
  width: auto;
}
.modal[data-type="bottom-sheet"] .modal-btn.btn-wrap {
  padding: var(--hwf-modal--bottom-sheet-btn-padding-top) var(--hwf-modal--bottom-sheet-btn-padding-side) var(--hwf-modal--bottom-sheet-btn-padding-bottom);
}
.modal[data-type="bottom-sheet"] .modal-btn.btn-wrap .btn {
  flex: 1;
}
.modal[data-type="bottom-sheet"] .modal-btn.btn-wrap .btn.primary {
  flex: 0 73.35%;
}
.modal[data-type="bottom-sheet"] .modal-btn.btn-wrap.ratio .btn:not(:only-child):first-child {
  min-width: auto;
  flex: 0 34%;
}
.modal[data-type="bottom-sheet"] .modal-btn.btn-wrap.column .btn {
  flex: none;
}
.modal[data-type="bottom-sheet"].in .modal-content {
  bottom: 0;
}
@media (max-width: 640px) {
  .modal {
    --hwf-modal--header-font-size: 1.8rem;
    --hwf-modal--conts-font-size: 1.6rem;
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) {
    --hwf-modal--header-padding: 1.6rem;
    --hwf-modal--header-padding-bottom: 1.6rem;
    --hwf-modal--conts-padding: 2.4rem 1.6rem;
    --hwf-modal--btn-close-position: 1.6rem;
    --hwf-modal--btn-close-size: 3.2rem;
    --hwf-modal--btn-close-icon-size: 2rem;
    --hwf-modal--btn-padding-x: 1.6rem;
    --hwf-modal--btn-padding-y-top: 1.6rem;
    --hwf-modal--btn-padding-y-bottom: 2.4rem;
    --hwf-modal--btn-column-gap: 1.6rem;
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog {
    padding: 0;
    min-height: 100vh;
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog .modal-content {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog .modal-conts .tit-wrap .tit {
    flex-direction: column;
    align-items: flex-start;
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-md,
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-sm {
    min-height: auto;
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-md .modal-header,
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-sm .modal-header {
    padding-top: var(--hwf-modal--bottom-sheet-header-padding);
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-md .modal-content,
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-sm .modal-content {
    position: fixed;
    left: 0;
    bottom: -100%;
    border-radius: 0;
    border-top-left-radius: var(--hwf-modal--bottom-sheet-radius);
    border-top-right-radius: var(--hwf-modal--bottom-sheet-radius);
    max-height: 80%;
    height: auto;
    transition: var(--hwf-transition-base);
  }
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-md .icon.btn-close,
  .modal:not([data-type="bottom-sheet"], [data-type="top-sheet"]) .modal-dialog.modal-sm .icon.btn-close {
    top: var(--hwf-modal--bottom-sheet-header-padding);
  }
  .modal.in .modal-dialog.modal-md .modal-content,
  .modal.in .modal-dialog.modal-sm .modal-content {
    bottom: 0;
  }
  .modal[data-type="full"] {
    --hwf-modal--full-mobile-btn-close-size: var(--hwf-size-height-4);
  }
  .modal[data-type="full"] .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .modal[data-type="full"] .modal-dialog .icon.btn-close {
    width: var(--hwf-modal--full-mobile-btn-close-size);
    height: var(--hwf-modal--full-mobile-btn-close-size);
  }
}
.popover-btn:disabled {
  pointer-events: none;
  cursor: none;
}
.popover {
  --hwf-popover--title-color-text: var(--hwf-color-text-basic);
  --hwf-popover--color-border: var(--hwf-color-sub-20);
  --hwf-popover--box-color-text: var(--hwf-color-text-basic);
  --hwf-popover--box-color-surface: #fff;
  --hwf-popover--padding: 2.4rem;
  --hwf-margin-x: 2.4rem;
  --hwf-popover--radius: 0.4rem;
  --hwf-popover--title-font-size: 1.8rem;
  --hwf-popover--title-contents-gap: 2.4rem;
  --hwf-popover--contents-font-size: 1.5rem;
  --hwf-popover--btn-close-size: 2.4rem;
  --hwf-popover--btn-close-position: 2.4rem;
}
.popover {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease-out,
    visibility 0s linear 0.2s;
  padding: var(--hwf-popover--padding);
  max-width: calc(100vw - 4rem);
  color: var(--hwf-popover--box-color-text);
  border: 0.1rem solid var(--hwf-popover--color-border);
  border-radius: var(--hwf-popover--radius);
  background-color: var(--hwf-popover--box-color-surface);
  font-size: var(--hwf-popover--contents-font-size);
  box-shadow: 0 0.4rem 2.4rem 0 rgba(0, 0, 0, 0.12);
}
.popover.active {
  display: block;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.2s ease-out,
    visibility 0s linear 0s;
}
.popover .popover-header {
  margin-bottom: var(--hwf-popover--title-contents-gap);
  padding-right: var(--hwf-popover--padding);
}
.popover .popover-header .popover-title {
  color: var(--hwf-popover--title-color-text);
  font-size: var(--hwf-popover--title-font-size);
  font-weight: 700;
}
.popover .btn-close {
  position: absolute;
  top: var(--hwf-popover--btn-close-position);
  right: var(--hwf-popover--btn-close-position);
  z-index: 1;
}
@media (max-width: 640px) {
  .popover {
    --hwf-popover--title-font-size: 1.8rem;
    --hwf-popover--contents-font-size: 1.5rem;
  }
}
.tooltip-btn:disabled {
  pointer-events: none;
  cursor: none;
}
.tooltip {
  --hwf-tooltip--inline-color-text: var(--hwf-color-text-white);
  --hwf-tooltip--inline-color-text-light: var(--hwf-color-text-basic);
  --hwf-tooltip--box-color-text: var(--hwf-color-text-basic);
  --hwf-tooltip--box-color-surface: #fff;
  --hwf-tooltip--color-surface: var(--hwf-color-surface-inverse);
  --hwf-tooltip--color-surface-light: var(--hwf-color-surface-elevated-03);
  --hwf-tooltip--box-shadow: var(--hwf-color-alpha-shadow1);
  --hwf-tooltip--box-shadow2: var(--hwf-color-alpha-shadow2);
  --hwf-tooltip--padding-y: 0.8rem;
  --hwf-tooltip--padding-x: 1.2rem;
  --hwf-tooltip--radius: 1rem;
  --hwf-tooltip--contents-pc-font-size: 1.5rem;
  --hwf-tooltip--contents-tablet-font-size: 1.5rem;
  --hwf-tooltip--contents-mobile-font-size: 1.5rem;
  --hwf-tooltip--contents-gap: 0.8rem;
  --hwf-tooltip--contents-icon-size: 2.4rem;
}
.tooltip {
  position: absolute;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease-out,
    visibility 0s linear 0.2s;
  white-space: nowrap;
  color: var(--hwf-tooltip--inline-color-text);
  font-size: var(--hwf-tooltip--contents-pc-font-size);
  border-radius: var(--hwf-tooltip--radius);
  padding: var(--hwf-tooltip--padding-y) var(--hwf-tooltip--padding-x);
  background-color: var(--hwf-tooltip--color-surface);
  box-shadow:
    0 0 0.2rem 0 var(--hwf-tooltip--box-shadow),
    0 0.4rem 0.8rem 0 var(--hwf-tooltip--box-shadow2);
  top: 0;
  left: 0;
}
@media (max-width: 1024px) {
  .tooltip {
    font-size: var(--hwf-tooltip--contents-tablet-font-size);
  }
}
@media (max-width: 640px) {
  .tooltip {
    font-size: var(--hwf-tooltip--contents-mobile-font-size);
  }
}
.tooltip.active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.2s ease-out,
    visibility 0s linear 0s;
}
.tooltip::before {
  --tooltip-arrow-size: 0.8rem;
  --tooltip-arrow-gap: calc((var(--tooltip-arrow-size) / 2) * -1);
  content: "";
  width: var(--tooltip-arrow-size);
  height: var(--tooltip-arrow-size);
  display: block;
  position: absolute;
  background-color: var(--hwf-tooltip--color-surface);
  left: var(--tooltip-arrow-gap);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.tooltip.type-light {
  color: var(--hwf-tooltip--inline-color-text-light);
  background-color: var(--hwf-tooltip--color-surface-light);
}
.tooltip.type-light::before {
  background-color: var(--hwf-tooltip--color-surface-light);
}
.tooltip .tooltip-inner {
  display: flex;
  align-items: center;
  gap: var(--hwf-tooltip--contents-gap);
}
.tooltip .tooltip-inner .svg-icon {
  width: var(--hwf-tooltip--contents-icon-size);
  height: var(--hwf-tooltip--contents-icon-size);
  flex-shrink: 0;
  flex-grow: 0;
}
.tooltip.left::before {
  left: calc(100% + var(--tooltip-arrow-gap));
}
.tooltip.bottom::before,
.tooltip.top::before {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.tooltip.bottom.right::before,
.tooltip.top.right::before {
  left: calc(100% - var(--hwf-tooltip--margin-x));
}
.tooltip.bottom.left::before,
.tooltip.top.left::before {
  left: var(--hwf-tooltip--margin-x);
}
.tooltip.top::before {
  top: calc(100% + var(--tooltip-arrow-gap));
}
.tooltip.bottom::before {
  top: var(--tooltip-arrow-gap);
}
.tooltip.bottom.tooltip-popover::before {
  transform: translateX(-50%) rotate(-135deg);
}
@media (width <= 420px) {
  .tooltip {
    width: calc(100% - var(--hwf-contents-padding-x) * 2);
    left: 50%;
    transform: translateX(-50%);
  }
  .tooltip::before {
    display: none;
  }
}
.segment-control {
  --hwf-segment-control--color-background: #f3f2f1;
  --hwf-segment-control--button-color-background-action: #f3f2f1;
  --hwf-segment-control--button-color-background-action-active: #fff;
  --hwf-segment-control--button-color-border-action-active: #ff3a08;
  --hwf-segment-control--button-color-text: var(--hwf-color-text-subtle);
  --hwf-segment-control--button-color-text-active: #ff3a08;
  --hwf-segment-control--padding-small: 0.4rem;
  --hwf-segment-control--button-height-small: 3.2rem;
  --hwf-segment-control--button-padding-small: 0.8rem;
  --hwf-segment-control--gap-small: 0.4rem;
  --hwf-segment-control--radius-small: 0.8rem;
  --hwf-segment-control--font-size-small: 1.5rem;
  --hwf-segment-control--padding-medium: 0.4rem;
  --hwf-segment-control--button-height-medium: 4rem;
  --hwf-segment-control--button-padding-medium: 0.8rem;
  --hwf-segment-control--gap-medium: 0.4rem;
  --hwf-segment-control--radius-medium: 1rem;
  --hwf-segment-control--font-size-medium: 1.6rem;
  --hwf-segment-control--padding-large: 0 0.8rem;
  --hwf-segment-control--button-height-large: 5.6rem;
  --hwf-segment-control--button-padding-large: 2rem;
  --hwf-segment-control--gap-large: 0.4rem;
  --hwf-segment-control--radius-large: 0.2rem;
  --hwf-segment-control--font-size-large: 1.8rem;
}
.segment-control {
  border-radius: var(--hwf-segment-control--radius-large);
  font-size: var(--hwf-segment-control--font-size-large);
}
.segment-control .control-btn {
  padding: 0 var(--hwf-segment-control--button-padding-large);
  height: var(--hwf-segment-control--button-height-large);
  border-radius: var(--hwf-segment-control--radius-large);
}
.segment-control {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  overflow-x: auto;
}
.segment-control .control-btn {
  align-items: center;
  color: var(--hwf-segment-control--button-color-text);
  border: 0.1rem solid rgba(0, 0, 0, 0);
  background-color: var(--hwf-segment-control--button-color-background-action);
  white-space: nowrap;
}
.segment-control .control-btn.active {
  color: var(--hwf-segment-control--button-color-text-active);
  font-weight: 700;
  background-color: var(--hwf-segment-control--button-color-background-action-active);
  border-color: var(--hwf-segment-control--button-color-border-action-active);
}
.segment-control.small {
  border-radius: var(--hwf-segment-control--radius-small);
  font-size: var(--hwf-segment-control--font-size-small);
}
.segment-control.small .control-btn {
  padding: 0 var(--hwf-segment-control--button-padding-small);
  height: var(--hwf-segment-control--button-height-small);
  border-radius: var(--hwf-segment-control--radius-small);
}
.segment-control.medium {
  border-radius: var(--hwf-segment-control--radius-medium);
  font-size: var(--hwf-segment-control--font-size-medium);
}
.segment-control.medium .control-btn {
  padding: 0 var(--hwf-segment-control--button-padding-medium);
  height: var(--hwf-segment-control--button-height-medium);
  border-radius: var(--hwf-segment-control--radius-medium);
}
.segment-control.large {
  border-radius: var(--hwf-segment-control--radius-large);
  font-size: var(--hwf-segment-control--font-size-large);
}
.segment-control.large .control-btn {
  padding: 0 var(--hwf-segment-control--button-padding-large);
  height: var(--hwf-segment-control--button-height-large);
  border-radius: var(--hwf-segment-control--radius-large);
}
.segment-control.bg {
  gap: 0;
  justify-content: space-between;
  background-color: var(--hwf-segment-control--color-background);
}
.segment-control.full {
  width: 100%;
}
.segment-control.full .control-btn {
  flex: 1;
}
@media (max-width: 1024px) {
  .segment-control {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .segment-control {
    --hwf-segment-control--font-size-small: 1.5rem;
    --hwf-segment-control--font-size-medium: 1.6rem;
    --hwf-segment-control--font-size-large: 1.8rem;
  }
}
.svg-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
}
.icon-download {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-download.svg);
  mask-image: url(/assets/images/icon/ico-download.svg);
}
.icon-file {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-file.svg);
  mask-image: url(/assets/images/icon/ico-file.svg);
}
.icon-arrow-right {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-right.svg);
  mask-image: url(/assets/images/icon/ico-arrow-right.svg);
}
.icon-share {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-share.svg);
  mask-image: url(/assets/images/icon/ico-share.svg);
}
.icon-search {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-search.svg);
  mask-image: url(/assets/images/icon/ico-search.svg);
}
.icon-menu {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-menu.svg);
  mask-image: url(/assets/images/icon/ico-menu.svg);
}
.icon-link {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-link.svg);
  mask-image: url(/assets/images/icon/ico-link.svg);
}
.icon-close {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-close.svg);
  mask-image: url(/assets/images/icon/ico-close.svg);
}
.icon-youtube {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-youtube.svg);
  mask-image: url(/assets/images/icon/ico-youtube.svg);
}
.icon-instagram {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-instagram.svg);
  mask-image: url(/assets/images/icon/ico-instagram.svg);
}
.icon-blog {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-blog.svg);
  mask-image: url(/assets/images/icon/ico-blog.svg);
}
.icon-linkedin {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-linkedin.svg);
  mask-image: url(/assets/images/icon/ico-linkedin.svg);
}
.icon-calendar {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-calendar.svg);
  mask-image: url(/assets/images/icon/ico-calendar.svg);
}
.icon-filter {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-filter.svg);
  mask-image: url(/assets/images/icon/ico-filter.svg);
}
.icon-plus {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-plus.svg);
  mask-image: url(/assets/images/icon/ico-plus.svg);
}
.icon-delete {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-delete.svg);
  mask-image: url(/assets/images/icon/ico-delete.svg);
}
.icon-reset {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-reset.svg);
  mask-image: url(/assets/images/icon/ico-reset.svg);
}
.icon-map {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-map.svg);
  mask-image: url(/assets/images/icon/ico-map.svg);
}
.icon-plus-fill {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-plus-fill.svg);
  mask-image: url(/assets/images/icon/ico-plus-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-plus-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.icon-ai-star {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-ai-star.svg);
  mask-image: url(/assets/images/icon/ico-ai-star.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-ai-star.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.icon-clear {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-delete-fill.svg);
  mask-image: url(/assets/images/icon/ico-delete-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-delete-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.note-list {
  --hwf-note-list--depth1-list-margin-top: 0;
  --hwf-note-list--depth1-padding-left: 2rem;
  --hwf-note-list--number-depth1-padding-left: 2rem;
  --hwf-note-list--layout-gap-depth1-li-li: 0.8rem;
  --hwf-note-list--depth1-font-size: 1.8rem;
  --hwf-note-list--depth2-list-margin-top: 0.4rem;
  --hwf-note-list--depth2-padding-left: 1.2rem;
  --hwf-note-list--number-depth2-padding-left: 2rem;
  --hwf-note-list--layout-gap-depth2-li-li: 0.4rem;
  --hwf-note-list--depth2-font-size: 1.6rem;
  --hwf-note-list--depth3-list-margin-top: 0.8rem;
  --hwf-note-list--depth3-padding-left: 1rem;
  --hwf-note-list--number-depth3-padding-left: 2rem;
  --hwf-note-list--layout-gap-depth3-li-li: 0.2rem;
  --hwf-note-list--depth3-font-size: 1.4rem;
  --hwf-note-list--info-txt-margin-top: 0;
  --hwf-note-list--color-text-depth1: var(--hwf-color-text-subtle);
  --hwf-note-list--color-text-depth2: var(--hwf-color-text-subtle);
  --hwf-note-list--color-text-depth3: var(--hwf-color-text-subtler);
  --hwf-note-list--color-text-white: var(--hwf-color-text-white);
  display: flex;
  flex-direction: column;
  margin-top: var(--hwf-note-list--depth1-list-margin-top);
  gap: var(--hwf-note-list--layout-gap-depth1-li-li);
}
.note-list > li {
  position: relative;
  padding-left: var(--hwf-note-list--depth1-padding-left);
  color: var(--hwf-note-list--color-text-depth1);
  font-size: var(--hwf-note-list--depth1-font-size);
}
.note-list > li::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 0.6rem;
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  background-color: var(--hwf-note-list--color-text-depth1);
  border-radius: var(--hwf-radius-max);
}
.note-list strong {
  color: var(--hwf-color-text-strong);
  font-weight: 600;
}
.terms-group .note-list.depth-1.order,
.terms-group .note-list.depth-1.number,
.terms-group .note-list.depth-1.dash {
  gap: 2.4rem;
}
@media (max-width: 640px) {
  .terms-group .note-list.depth-1.order,
  .terms-group .note-list.depth-1.number,
  .terms-group .note-list.depth-1.dash {
    gap: 1.6rem;
  }
}
.note-list .note-list {
  margin-top: 0.8rem;
}
.note-list.small {
  --hwf-note-list--layout-gap-depth1-li-li: 0.4rem;
  --hwf-note-list--depth1-font-size: 1.6rem;
}
.note-list.no-bullet > li {
  padding: 0;
}
.note-list.no-bullet > li::before {
  display: none;
}
.note-list.dash > li {
  padding-left: 1.6rem;
}
.note-list.dash > li::before {
  content: "-";
  top: 0;
  left: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: rgba(0, 0, 0, 0);
}
.note-list.number > li {
  padding-left: 2.8rem;
}
.note-list.number > li > span {
  position: absolute;
  top: 0;
  left: 0;
}
.note-list.number > li::before {
  display: none;
}
.note-list.order > li {
  padding-left: 2.4rem;
}
.note-list.order > li > span {
  position: absolute;
  top: 0;
  left: 0;
}
.note-list.order > li::before {
  display: none;
}
.note-list.asterisk > li {
  padding-left: 1.8rem;
}
.note-list.asterisk > li > span {
  position: absolute;
  top: 0;
  left: 0;
}
.note-list.asterisk > li::before {
  content: "*";
  top: 0;
  left: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: rgba(0, 0, 0, 0);
}
.note-list.fc-white > li {
  color: var(--hwf-note-list--color-text-white);
}
.note-list.fc-white > li::before {
  background-color: var(--hwf-note-list--color-text-white);
}
@media (max-width: 640px) {
  .note-list {
    --hwf-note-list--depth1-font-size: 1.8rem;
    --hwf-note-list--depth2-font-size: 1.8rem;
    --hwf-note-list--depth3-font-size: 1.8rem;
  }
}
.note-txt {
  --hwf-note-txt--color-text: #757070;
  color: var(--hwf-note-txt--color-text);
  font-size: 1.6rem;
}
.note-refer {
  display: flex;
  gap: 0.4rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #272626;
}
.note-refer::before {
  content: "";
  margin-top: 0.2rem;
  flex-shrink: 0;
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-note-refer.svg);
  mask-image: url(/assets/images/icon/ico-note-refer.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-note-refer.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.toast-container {
  --hwf-toast--group-padding: 4rem;
  --hwf-toast--group-gap: 1.2rem;
  --hwf-toast--padding: 2rem;
  --hwf-toast--radius: var(--hwf-radius-max);
  --hwf-toast--contents-font-size: 1.6rem;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--hwf-toast--group-gap);
  padding: var(--hwf-toast--group-padding);
  z-index: 9999;
  pointer-events: none;
}
.toast-container .toast {
  --hwf-toast--color-background: rgba(0, 0, 0, 0.7);
  --hwf-toast--color-text-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 32rem;
  padding: var(--hwf-toast--padding);
  color: var(--hwf-toast--color-text-color);
  font-size: var(--hwf-toast--contents-font-size);
  font-weight: 600;
  border-radius: var(--hwf-toast--radius);
  background-color: var(--hwf-toast--color-background);
  pointer-events: auto;
  opacity: 0;
  transition:
    opacity 0.4s cubic-bezier(0.21, 1.02, 0.73, 1),
    transform 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
}
.toast-container .toast .svg-icon {
  background-color: currentColor;
}
.toast-container.top-left {
  top: var(--hwf-toast--group-space-y);
  left: var(--hwf-toast--group-space-x);
  align-items: flex-start;
}
.toast-container.top-center {
  top: var(--hwf-toast--group-space-y);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.toast-container.top-right {
  top: var(--hwf-toast--group-space-y);
  right: var(--hwf-toast--group-space-x);
  align-items: flex-end;
}
.toast-container.bottom-left {
  bottom: var(--hwf-toast--group-space-y);
  left: var(--hwf-toast--group-space-x);
  align-items: flex-start;
}
.toast-container.bottom-center {
  bottom: var(--hwf-toast--group-space-y);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.toast-container.bottom-right {
  bottom: var(--hwf-toast--group-space-y);
  right: var(--hwf-toast--group-space-x);
  align-items: flex-end;
}
.toast-container.top-left .toast,
.toast-container.top-center .toast,
.toast-container.top-right .toast {
  transform: translateY(-100%);
}
.toast-container .toast.show {
  opacity: 1;
  transform: translateY(0);
}
.tag-wrap {
  --hwf-btn-tag--color-text: var(--hwf-color-text-basic);
  --hwf-btn-tag--color-action: var(--hwf-color-action-default);
  --hwf-btn-tag--color-action-hover: var(--hwf-color-action-neutral-hover);
  --hwf-btn-tag--color-action-pressed: var(--hwf-color-action-neutral-pressed);
  --hwf-btn-tag--color-border: var(--hwf-color-border-neutral-light);
  --hwf-btn-tag--color-border-hover: var(--hwf-btn-tag--color-action-hover);
  --hwf-btn-tag--color-border-pressed: var(--hwf-btn-tag--color-action-pressed);
  --hwf-btn-tag--color-icon: var(--hwf-color-icon-gray-light);
  --hwf-btn-tag--link-color-action: var(--hwf-color-action-primary-on);
  --hwf-btn-tag--link-color-action-hover: var(--hwf-color-action-primary-on-hover);
  --hwf-btn-tag--link-color-action-pressed: var(--hwf-color-action-primary-pressed);
  --hwf-btn-tag--link-color-border: var(--hwf-btn-tag--link-color-action);
  --hwf-btn-tag--link-color-border-hover: var(--hwf-btn-tag--link-color-action-hover);
  --hwf-btn-tag--link-color-border-pressed: var(--hwf-btn-tag--link-color-action-pressed);
  --hwf-btn-tag--button-color-background: var(--hwf-color-action-default);
  --hwf-btn-tag--button-color-border: var(--hwf-color-border-neutral-light);
  --hwf-btn-tag--button-color-icon: var(--hwf-color-icon-gray);
  --hwf-btn-tag--button-color-gradient-start: var(--hwf-color-alpha-base0);
  --hwf-btn-tag--button-color-gradient-end: var(--hwf-color-alpha-base100);
  --hwf-btn-tag--wrapper-gap-x-small: 0.8rem;
  --hwf-btn-tag--wrapper-gap-y-small: 1.6rem;
  --hwf-btn-tag--size-height-small: 2.4rem;
  --hwf-btn-tag--expand-button-gap-small: 0.1rem;
  --hwf-btn-tag--button-size-small: 1.4rem;
  --hwf-btn-tag--padding-x-small: 0.8rem;
  --hwf-btn-tag--font-size-small: 1.3rem;
  --hwf-btn-tag--wrapper-gap-x-medium: 0rem;
  --hwf-btn-tag--wrapper-gap-y-medium: 0rem;
  --hwf-btn-tag--size-height-medium: 4rem;
  --hwf-btn-tag--expand-button-gap-medium: 0.2rem;
  --hwf-btn-tag--button-size-medium: 1.6rem;
  --hwf-btn-tag--padding-x-medium: 1.2rem;
  --hwf-btn-tag--font-size-medium: 1.8rem;
  --hwf-btn-tag--wrapper-gap-x-large: 0.8rem;
  --hwf-btn-tag--wrapper-gap-y-large: 1rem;
  --hwf-btn-tag--size-height-large: 4.8rem;
  --hwf-btn-tag--expand-button-gap-large: 0.4rem;
  --hwf-btn-tag--button-size-large: 1.8rem;
  --hwf-btn-tag--padding-x-large: 2.4rem;
  --hwf-btn-tag--font-size-large: 1.8rem;
}
.tag-wrap.small {
  gap: var(--hwf-btn-tag--wrapper-gap-y-small) var(--hwf-btn-tag--wrapper-gap-x-small);
}
.tag-wrap.small .btn-tag {
  gap: 0.2rem;
  min-height: var(--hwf-btn-tag--size-height-small);
  padding: 0.4rem var(--hwf-btn-tag--padding-x-small);
  border-radius: var(--hwf-btn-tag--size-height-small);
  font-size: var(--hwf-btn-tag--font-size-small);
}
.tag-wrap.small .btn-tag .btn-delete {
  width: var(--hwf-btn-tag--button-size-small);
  height: var(--hwf-btn-tag--button-size-small);
}
.tag-wrap.small .btn-expand-wrap {
  width: calc(var(--hwf-btn-tag--size-height-small) + 2.4rem);
  min-height: calc(var(--hwf-btn-tag--size-height-small));
}
.tag-wrap.small .btn-expand-wrap .btn-expand {
  width: calc(var(--hwf-btn-tag--size-height-small) - var(--hwf-btn-tag--expand-button-gap-small) * 2);
  height: calc(var(--hwf-btn-tag--size-height-small) - var(--hwf-btn-tag--expand-button-gap-small) * 2);
}
.tag-wrap.small .btn-expand-wrap .btn-expand::before {
  display: inline-flex;
  width: calc(var(--hwf-btn-tag--size-height-small) * 0.48);
  height: calc(var(--hwf-btn-tag--size-height-small) * 0.48);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-angle.svg);
  mask-image: url(/assets/images/icon/ico-angle.svg);
}
.tag-wrap.small.expand {
  max-height: var(--hwf-btn-tag--size-height-small);
}
.tag-wrap.small.expand.active {
  max-height: 1000vh;
}
.tag-wrap.medium {
  gap: var(--hwf-btn-tag--wrapper-gap-y-medium) var(--hwf-btn-tag--wrapper-gap-x-medium);
}
.tag-wrap.medium .btn-tag {
  gap: 0.2rem;
  min-height: var(--hwf-btn-tag--size-height-medium);
  padding: 0.4rem var(--hwf-btn-tag--padding-x-medium);
  border-radius: var(--hwf-btn-tag--size-height-medium);
  font-size: var(--hwf-btn-tag--font-size-medium);
}
.tag-wrap.medium .btn-tag .btn-delete {
  width: var(--hwf-btn-tag--button-size-medium);
  height: var(--hwf-btn-tag--button-size-medium);
}
.tag-wrap.medium .btn-expand-wrap {
  width: calc(var(--hwf-btn-tag--size-height-medium) + 2.4rem);
  min-height: calc(var(--hwf-btn-tag--size-height-medium));
}
.tag-wrap.medium .btn-expand-wrap .btn-expand {
  width: calc(var(--hwf-btn-tag--size-height-medium) - var(--hwf-btn-tag--expand-button-gap-medium) * 2);
  height: calc(var(--hwf-btn-tag--size-height-medium) - var(--hwf-btn-tag--expand-button-gap-medium) * 2);
}
.tag-wrap.medium .btn-expand-wrap .btn-expand::before {
  display: inline-flex;
  width: calc(var(--hwf-btn-tag--size-height-medium) * 0.48);
  height: calc(var(--hwf-btn-tag--size-height-medium) * 0.48);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-angle.svg);
  mask-image: url(/assets/images/icon/ico-angle.svg);
}
.tag-wrap.medium.expand {
  max-height: var(--hwf-btn-tag--size-height-medium);
}
.tag-wrap.medium.expand.active {
  max-height: 1000vh;
}
.tag-wrap.large {
  gap: var(--hwf-btn-tag--wrapper-gap-y-large) var(--hwf-btn-tag--wrapper-gap-x-large);
}
.tag-wrap.large .btn-tag {
  gap: 0.2rem;
  min-height: var(--hwf-btn-tag--size-height-large);
  padding: 0.4rem var(--hwf-btn-tag--padding-x-large);
  border-radius: var(--hwf-btn-tag--size-height-large);
  font-size: var(--hwf-btn-tag--font-size-large);
}
.tag-wrap.large .btn-tag .btn-delete {
  width: var(--hwf-btn-tag--button-size-large);
  height: var(--hwf-btn-tag--button-size-large);
}
.tag-wrap.large .btn-expand-wrap {
  width: calc(var(--hwf-btn-tag--size-height-large) + 2.4rem);
  min-height: calc(var(--hwf-btn-tag--size-height-large));
}
.tag-wrap.large .btn-expand-wrap .btn-expand {
  width: calc(var(--hwf-btn-tag--size-height-large) - var(--hwf-btn-tag--expand-button-gap-large) * 2);
  height: calc(var(--hwf-btn-tag--size-height-large) - var(--hwf-btn-tag--expand-button-gap-large) * 2);
}
.tag-wrap.large .btn-expand-wrap .btn-expand::before {
  display: inline-flex;
  width: calc(var(--hwf-btn-tag--size-height-large) * 0.48);
  height: calc(var(--hwf-btn-tag--size-height-large) * 0.48);
  background-color: var(--hwf-color-text-basic);
  forced-color-adjust: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-angle.svg);
  mask-image: url(/assets/images/icon/ico-angle.svg);
}
.tag-wrap.large.expand {
  max-height: var(--hwf-btn-tag--size-height-large);
}
.tag-wrap.large.expand.active {
  max-height: 1000vh;
}
.tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hwf-btn-tag--wrapper-gap-y-medium) var(--hwf-btn-tag--wrapper-gap-x-medium);
}
.tag-wrap .btn-tag {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: 0.2rem;
  min-height: var(--hwf-btn-tag--size-height-medium);
  padding: 0.4rem var(--hwf-btn-tag--padding-x-medium);
  border-radius: var(--hwf-btn-tag--size-height-medium);
  font-size: var(--hwf-btn-tag--font-size-medium);
}
.tag-wrap .btn-tag:hover,
.tag-wrap .btn-tag:active {
  background-color: var(--hwf-btn-tag--color-action-hover);
}
.tag-wrap.text {
  background-color: rgba(0, 0, 0, 0);
}
.tag-wrap.text .btn-tag:hover,
.tag-wrap.text .btn-tag:active {
  color: var(--hwf-color-text-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
@media (max-width: 640px) {
  .tag-wrap {
    --hwf-btn-tag--font-size-medium: 1.6rem;
  }
}
.tit-xxlg {
  font-size: 6.4rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.tit-xlg {
  font-size: 4.8rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.tit-lg {
  font-size: 3.6rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.tit-md {
  font-size: 3.2rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.tit-sm {
  font-size: 2.8rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.tit-xsm {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.tit-xxsm {
  font-size: 2.1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.txt-xxlg {
  font-size: 4rem;
  line-height: 1.5;
}
.txt-xlg {
  font-size: 3.2rem;
  line-height: 1.4;
}
.txt-lg {
  font-size: 2.4rem;
  line-height: 1.5;
}
.txt-md {
  font-size: 2.1rem;
  line-height: 1.5;
}
.txt-sm {
  font-size: 1.8rem;
  line-height: 1.5;
}
.txt-xsm {
  font-size: 1.6rem;
  line-height: 1.5;
}
.txt-xxsm {
  font-size: 1.5rem;
  line-height: 1.5;
}
.fw-el {
  font-weight: 100 !important;
}
.fw-sl {
  font-weight: 200 !important;
}
.fw-l {
  font-weight: 300 !important;
}
.fw-r {
  font-weight: 400 !important;
}
.fw-m {
  font-weight: 500 !important;
}
.fw-sb {
  font-weight: 600 !important;
}
.fw-b {
  font-weight: 700 !important;
}
.fw-eb {
  font-weight: 800 !important;
}
.fw-hb {
  font-weight: 900 !important;
}
.tit-sm small {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--hwf-color-text-subtler);
}
.tit-sm .desc {
  display: block;
  width: 100%;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--hwf-color-text-basic);
}
.txt-en {
  font-family: "Trust2ATRIAL", sans-serif;
  font-weight: 400;
}
.txt-gradient {
  width: -moz-fit-content;
  width: fit-content;
  background: var(--hwf-color-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
@media (max-width: 640px) {
  .tit-xxlg {
    font-size: 4rem;
    line-height: 1.2;
  }
  .tit-xlg {
    font-size: 2.4rem;
    line-height: 1.5;
  }
  .tit-lg {
    font-size: 2.8rem;
    line-height: 1.5;
  }
  .tit-md {
    font-size: 2.8rem;
    line-height: 1.5;
  }
  .tit-sm {
    font-size: 2.4rem;
    line-height: 1.5;
  }
  .tit-xsm {
    font-size: 2.1rem;
    line-height: 1.5;
  }
  .tit-xxsm {
    font-size: 1.8rem;
    line-height: 1.5;
  }
  .txt-lg {
    font-size: 2.1rem;
    line-height: 1.5;
  }
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-bottom: 0.1rem solid #e6e5e5;
  transition: top 0.1s ease;
  z-index: 6;
}
.header.is-fixed {
  position: fixed !important;
}
.header.is-hide {
  top: -100% !important;
}
.header.is-show {
  top: 0 !important;
}
.header .inner {
  max-width: var(--hwf-content-wrap-width-large);
}
.header .logo {
  width: 19.2rem;
  height: 4.8rem;
  background: url(/assets/images/common/logo.svg) no-repeat center/cover;
}
.header .logo a {
  display: block;
  width: 100%;
  height: 100%;
}
.header .logo-plusetf a {
  flex-shrink: 0;
  width: 9.9rem;
  height: 1.2rem;
  background: url(/assets/images/common/logo-plus-etf.svg) no-repeat center/contain;
}
.header .logo-pine a {
  flex-shrink: 0;
  width: 4rem;
  height: 1rem;
  background: url(/assets/images/common/logo-pine.svg) no-repeat center/contain;
}
.header .header-top {
  display: flex;
  align-items: center;
  height: 4rem;
  border-bottom: 0.1rem solid #e6e5e5;
}
.header .header-top .link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header .header-top .link li {
  display: flex;
  align-items: center;
}
.header .header-top .link li:last-child::after {
  display: none;
}
.header .header-top .link li::after {
  content: "";
  display: inline-block;
  margin: 0 2.4rem;
  width: 0.1rem;
  height: 1.2rem;
  background-color: #e6e5e5;
}
.header .header-con .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 9.6rem;
}
.header .header-con .nav {
  height: 100%;
}
.header .header-con .nav .gnb-list {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8rem;
  font-size: 2.1rem;
  color: var(--hwf-color-text-strong);
  font-weight: 600;
}
.header .header-con .nav .gnb-list .gnb-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.header .header-con .nav .gnb-list .gnb-item .gnb-link {
  position: relative;
}
.header .header-con .nav .gnb-list .gnb-item.active {
  color: var(--hwf-color-text-primary);
}
.header .header-con .nav .gnb-list .gnb-item.focus {
  color: var(--hwf-color-text-primary);
}
.header .header-con .nav .gnb-list .gnb-item.focus .gnb-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1rem;
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--hwf-color-text-primary-dark);
}
.header .header-con .nav .gnb-list .gnb-item.focus .submenu {
  visibility: visible;
  opacity: 1;
}
.header .header-con .nav .gnb-list .submenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: -2.4rem;
  z-index: 6;
  padding: 0.4rem 0;
  background-color: #fff;
  border-radius: 0 0 0.3rem 0.3rem;
  border: 0.1rem solid #e6e5e5;
  border-top-width: 0;
  box-shadow:
    0 40px 60px 0 rgba(0, 0, 0, 0.06),
    0 12px 12px 0 rgba(0, 0, 0, 0.04);
  transition: all 0.3s;
}
.header .header-con .nav .gnb-list .submenu .submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 20.2rem;
  min-height: 4.8rem;
  padding: 1.1rem 2rem 1.1rem 2.4rem;
  color: var(--hwf-color-text-subtle);
  font-size: 1.7rem;
  font-weight: 400;
}
.header .header-con .nav .gnb-list .submenu .submenu-link:hover,
.header .header-con .nav .gnb-list .submenu .submenu-link:active {
  color: var(--hwf-color-text-primary);
  font-weight: 600;
  background-color: #fafafa;
}
.header .header-con .nav .gnb-list .submenu .submenu-link:hover::after,
.header .header-con .nav .gnb-list .submenu .submenu-link:active::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-up.svg);
  mask-image: url(/assets/images/icon/ico-arrow-up.svg);
  transform: rotate(90deg);
  background-color: var(--hwf-color-text-primary-dark);
}
.header .header-con .nav .gnb-list .submenu .submenu-link.active {
  color: var(--hwf-color-text-primary);
}
.header .header-con .util {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  height: 100%;
}
.header .header-con .util .lang {
  display: flex;
  height: 100%;
}
.header .header-con .util .lang .form-select.text .select-button .select-value {
  color: var(--hwf-color-text-strong);
}
.header .header-con .util .lang .form-select.text .select-button::after {
  color: var(--hwf-color-text-strong);
}
.header .header-con .util .lang .form-select.text .select-listbox {
  --hwf-form-select--size-height-small: 4.8rem;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0;
  border: 0.1rem solid #e6e5e5;
  border-top-width: 0;
  box-shadow:
    0 4rem 6rem 0 rgba(0, 0, 0, 0.06),
    0 12px 12px 0 rgba(0, 0, 0, 0.04);
}
.header .header-con .util .lang .form-select.text .select-listbox .select-option {
  padding: 1.1rem 3.2rem;
}
.header .header-con .util .lang .form-select.text .select-listbox .select-option:hover,
.header .header-con .util .lang .form-select.text .select-listbox .select-option:active {
  background-color: #fafafa;
}
.header .header-con .util .svg-icon {
  background-color: var(--hwf-color-text-strong);
}
@media (max-width: 1280px) {
  .header .header-con .nav .gnb-list {
    gap: 4rem;
  }
}
@media (max-width: 1024px) {
  .header .header-con .nav {
    display: none;
  }
  .header .header-con .util .lang {
    display: none;
  }
}
@media (max-width: 640px) {
  .header .logo {
    width: 12.8rem;
    height: 3.2rem;
  }
  .header .header-con .inner {
    height: 6.4rem;
  }
  .header .header-con .util .btn-search {
    width: 3.2rem;
    height: 3.2rem;
  }
  .header .header-con .util .btn-menu {
    width: 3.2rem;
    height: 3.2rem;
  }
  .header .header-con .util .btn.icon.xxlarge {
    width: 3.2rem;
    height: 3.2rem;
  }
}
.header .modal.header-search .modal-dialog .logo {
  width: 19.2rem;
  height: 4.8rem;
  background: url(/assets/images/common/logo.svg) no-repeat center/cover;
}
.header .modal.header-search .modal-dialog .search-wrap {
  margin-top: 0;
  background: rgba(0, 0, 0, 0);
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 640px) {
  .header .modal.header-search .modal-dialog .logo {
    width: 12.8rem;
    height: 3.2rem;
  }
  .header .modal.header-search .modal-dialog .search-wrap {
    padding-left: 0;
    padding-right: 0;
  }
}
.header .modal.sitemap .modal-dialog .modal-content {
  padding-top: 0;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
.header .modal.sitemap .modal-dialog .modal-header {
  padding: 0;
  max-width: 100%;
}
.header .modal.sitemap .modal-dialog .modal-conts {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
.header .modal.sitemap .modal-dialog .modal-conts + .btn-close {
  display: none;
}
.header .modal.sitemap .modal-dialog .icon.btn-close {
  position: static;
  width: var(--hwf-button--icon-size-xxlarge);
  height: var(--hwf-button--icon-size-xxlarge);
}
.header .modal.sitemap .header-top .logo-plusetf a {
  background: url(/assets/images/common/logo-plus-etf.svg) no-repeat center/contain;
}
.header .modal.sitemap .header-top .logo-pine a {
  background: url(/assets/images/common/logo-pine.svg) no-repeat center/contain;
}
.header .modal.sitemap .header-con .logo {
  background: url(/assets/images/common/logo.svg) no-repeat center/cover;
}
.header .modal.sitemap .header-con .logo-plusetf a {
  background: url(/assets/images/common/logo-plus-etf.svg) no-repeat center/cover;
}
.header .modal.sitemap .header-con .logo-pine a {
  background: url(/assets/images/common/logo-pine.svg) no-repeat center/cover;
}
.header .modal.sitemap .header-con .util .lang .form-select.text .select-listbox {
  border-top: 0.1rem solid #e6e5e5;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list {
  display: flex;
  justify-content: center;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item {
  margin-right: 8rem;
  min-width: 20rem;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item:last-child {
  margin-right: 0;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.company > .submenu {
  -moz-column-count: 2;
  column-count: 2;
  gap: 0 8rem;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.company > .submenu > li {
  -moz-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.company > .submenu > li:nth-child(5) {
  -moz-column-break-before: column;
  break-before: column;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item a {
  display: flex;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth1 {
  position: relative;
  margin-bottom: 2.4rem;
  padding-bottom: 2.4rem;
  color: var(--hwf-color-text-strong);
  font-size: 2.8rem;
  font-weight: 700;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth2 {
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 0;
  font-weight: 600;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth2:hover,
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth2:active {
  color: var(--hwf-color-text-primary);
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth2 .f-hanwha {
  transform: rotate(0.03deg);
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth3 {
  padding: 0.7rem 1.6rem;
  color: var(--hwf-color-text-subtler);
  font-size: 1.7rem;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth3:hover,
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth3:active {
  color: var(--hwf-color-text-primary);
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .link::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-link.svg);
  mask-image: url(/assets/images/icon/ico-link.svg);
  background-color: currentColor;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu {
  padding: 0 0.4rem;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu > li {
  margin-bottom: 0.8rem;
}
.header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu > li:last-child {
  margin-bottom: 0;
}
@media (max-width: 1400px) {
  .header .modal.sitemap .sitemap-wrap .sitemap-list {
    justify-content: space-between;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item {
    margin-right: 0;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.company > .submenu {
    gap: 0 4rem;
  }
}
@media (max-width: 1200px) {
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item {
    min-width: 15rem;
  }
}
@media (max-width: 1024px) {
  .header .modal.sitemap .modal-dialog .modal-content {
    min-height: 100vh;
    max-height: 100vh;
  }
  .header .modal.sitemap .modal-dialog .modal-conts {
    padding-top: 2.4rem;
    padding-bottom: 4.4rem;
  }
  .header .modal.sitemap .header-con .logo {
    display: none;
  }
  .header .modal.sitemap .header-con .util {
    width: 100%;
  }
  .header .modal.sitemap .header-con .util .lang {
    display: flex;
    margin-right: auto;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list {
    flex-direction: column;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item {
    min-width: 15rem;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.company > .submenu {
    -moz-column-count: auto;
    column-count: auto;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.company > .submenu > li:nth-child(5) {
    -moz-column-break-before: auto;
    break-before: auto;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    padding: 0 var(--hwf-content-padding-x);
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub .depth1 {
    font-weight: 600;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub .depth1::after {
    content: "";
    display: block;
    margin-left: auto;
    width: 3.2rem;
    height: 3.2rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(/assets/images/icon/ico-plus.svg);
    mask-image: url(/assets/images/icon/ico-plus.svg);
    background-color: currentColor;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub .depth1 > span {
    padding: 0 1rem;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub.active .depth1 {
    color: var(--hwf-color-text-primary);
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub.active .depth1 span {
    position: relative;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub.active .depth1 span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin-bottom: auto;
    margin-right: 0.4rem;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--hwf-color-text-primary-dark);
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.has-sub.active .depth1::after {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(/assets/images/icon/ico-minus.svg);
    mask-image: url(/assets/images/icon/ico-minus.svg);
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    padding: 0.8rem var(--hwf-content-padding-x);
    background-color: #f3f2f1;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu .has-sub .depth2::after {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(/assets/images/icon/ico-plus.svg);
    mask-image: url(/assets/images/icon/ico-plus.svg);
    background-color: currentColor;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu .has-sub.active .depth2 {
    color: var(--hwf-color-text-primary);
    font-weight: 600;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu .has-sub.active .depth2::after {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(/assets/images/icon/ico-minus.svg);
    mask-image: url(/assets/images/icon/ico-minus.svg);
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu li {
    margin-bottom: 0;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth1 {
    align-items: center;
    margin-bottom: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth1::before {
    display: none;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth2 {
    font-weight: 400;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .submenu,
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item.company .submenu {
    display: none;
  }
}
@media (max-width: 640px) {
  .header .modal.sitemap .header-con .util .lang .form-select.text .select-listbox {
    left: 0;
    transform: translateX(0);
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth1 {
    font-size: 2.1rem;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth2 {
    padding: 1.45rem 0.8rem;
    font-size: 1.8rem;
  }
  .header .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item > .submenu {
    padding: 0.8rem 2.4rem;
  }
}
html[lang="en"] .header .logo {
  width: 19.7rem;
  height: 4.8rem;
  background: url(/assets/images/common/en-logo2.svg) no-repeat center/contain;
}
html[lang="en"] .header .util .btn.icon[aria-controls="modalSearch"] {
  display: none;
}
html[lang="en"] .header .header-con .nav .gnb-list .submenu .submenu-link {
  min-width: 22.2rem;
}
@media (max-width: 1460px) {
  html[lang="en"] .header .header-con .nav .gnb-list {
    gap: 4rem;
    font-size: 1.8rem;
  }
}
@media (max-width: 1280px) {
  html[lang="en"] .header .header-con .nav {
    display: none;
  }
  html[lang="en"] .header .header-con .util .lang {
    display: none;
  }
}
@media (max-width: 640px) {
  html[lang="en"] .header .logo {
    width: 13.1rem;
    height: 3.1rem;
  }
}
html[lang="en"] .modal.sitemap .modal-header .header-con .logo {
  background: url(/assets/images/common/en-logo2.svg) no-repeat center/cover;
}
html[lang="en"] .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item .depth1 {
  white-space: nowrap;
}
@media (max-width: 1400px) {
  html[lang="en"] .modal.sitemap .sitemap-wrap .sitemap-list {
    gap: 2rem;
  }
  html[lang="en"] .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item {
    min-width: 25rem;
  }
}
@media (max-width: 1200px) {
  html[lang="en"] .modal.sitemap .sitemap-wrap .sitemap-list .sitemap-item {
    min-width: auto;
    flex: 1;
  }
}
html[lang="en"] .modal.header-search .logo {
  width: 46.6rem;
  height: 4.8rem;
  background: url(/assets/images/common/en-logo2.svg) no-repeat center/contain !important;
}
@media (max-width: 1550px) {
  html[lang="en"] .modal.header-search .logo {
    width: 35rem;
    height: 3.6rem;
  }
}
@media (max-width: 640px) {
  html[lang="en"] .modal.header-search .logo {
    width: 22.4rem;
    height: 2.3rem;
  }
}
.footer {
  --footer-top-button-position-right: calc((100% - var(--hwf-content-width-large)) / 2);
  --footer-top-button-position-bottom: 4rem;
  --footer-top-button-size: 6.4rem;
  position: relative;
  padding: 6rem 0;
  color: #fff;
  font-size: 1.6rem;
  background-color: #1a140f;
}
.footer .inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  max-width: var(--hwf-content-wrap-width-large);
}
.footer .footer-top .logo {
  width: 16rem;
  height: 4rem;
  background: url(/assets/images/common/logo-w.svg) no-repeat center/cover;
}
.footer .footer-con {
  display: flex;
  gap: 12rem;
}
.footer .footer-con .address {
  width: 100%;
}
.footer .footer-con .address li {
  margin-bottom: 1.2rem;
}
.footer .footer-con .address li:last-child {
  margin-bottom: 0;
}
.footer .footer-con .nav {
  display: flex;
  gap: 12rem;
  flex-shrink: 0;
}
.footer .footer-con .nav .link-list li {
  margin-bottom: 1.2rem;
}
.footer .footer-con .nav .link-list li a,
.footer .footer-con .nav .link-list li button {
  text-align: left;
}
.footer .footer-con .nav .link-list li.active {
  color: var(--hwf-color-text-primary);
  font-weight: 700;
}
.footer .footer-con .nav .link-list li:last-child {
  margin-bottom: 0;
}
.footer .footer-con .util {
  flex-shrink: 0;
}
.footer .footer-con .util .sns-list {
  margin-top: 4rem;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.footer .footer-con .util .family-site .form-select {
  min-width: clamp(15rem, 61.33vw, 23rem);
}
.footer .footer-bottom {
  padding-top: 2.4rem;
  border-top: 0.1rem solid hsla(0, 0%, 100%, 0.15);
}
.footer .footer-btn-top {
  position: absolute;
  top: calc(var(--footer-top-button-size) / 2 * -1);
  right: var(--footer-top-button-position-right);
  z-index: 1;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.footer .footer-btn-top.is-visible {
  opacity: 1;
  visibility: visible;
}
.footer .footer-btn-top.is-fixed {
  position: fixed;
  top: initial;
  bottom: var(--footer-top-button-position-bottom);
}
.footer .footer-btn-top .btn {
  flex-direction: column;
  gap: 0.25rem;
  padding: 0;
  width: var(--footer-top-button-size);
  height: var(--footer-top-button-size);
  background-color: #fe5b16;
  border-color: #fe5b16;
}
.footer .footer-btn-top .btn .icon-arrow-up {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-up.svg);
  mask-image: url(/assets/images/icon/ico-arrow-up.svg);
}
@media (max-width: 1760px) {
  .footer {
    --footer-top-button-position-right: var(--hwf-content-padding-x);
    --footer-top-button-position-bottom: var(--hwf-content-padding-x);
  }
}
@media (max-width: 1280px) {
  .footer .footer-con {
    gap: 8rem;
  }
}
@media (max-width: 1024px) {
  .footer .footer-con {
    --footer-gap: 4rem;
    flex-wrap: wrap;
    row-gap: var(--footer-gap);
  }
  .footer .footer-con .address {
    padding-bottom: var(--footer-gap);
    border-bottom: 0.1rem solid hsla(0, 0%, 100%, 0.15);
  }
  .footer .footer-con .nav {
    margin-left: 0;
  }
  .footer .footer-con .util {
    margin-left: auto;
  }
}
@media (max-width: 768px) {
  .footer .footer-con .nav {
    gap: 6rem;
  }
}
@media (max-width: 640px) {
  .footer {
    --footer-top-button-size: 4.8rem;
  }
  .footer .footer-con {
    flex-direction: column;
  }
  .footer .footer-con .address {
    width: 100%;
    border-bottom: 0.1rem solid hsla(0, 0%, 100%, 0.15);
  }
  .footer .footer-con .util {
    margin-left: 0;
  }
  .footer .footer-btn-top .btn .svg-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
  .footer .footer-btn-top .btn span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
html[lang="en"] .footer-top .logo {
  width: 38.8rem;
  height: 4rem;
  background: url(/assets/images/common/en-logo-w.svg) no-repeat center/cover;
}
@media (max-width: 640px) {
  html[lang="en"] .footer-top .logo {
    width: clamp(10rem, 82.93vw, 31.1rem);
    height: clamp(1rem, 8.53vw, 3.2rem);
  }
}
.page-main {
  --main-section-title-gap: 4rem;
  --main-section-title-font-size: 8rem;
  --main-section-sub-title-font-size: 4rem;
  --main-partner-title-font-size: 10rem;
  --main-message-title-font-size: 16rem;
  --main-banner-title-font-size: 9.6rem;
  --main-banner-desc-font-size: 3.2rem;
}
@media (max-width: 1024px) {
  .page-main {
    --main-section-title-font-size: 8rem;
    --main-section-sub-title-font-size: 2.8rem;
    --main-message-title-font-size: 10rem;
    --main-banner-title-font-size: 8rem;
  }
}
@media (max-width: 640px) {
  .page-main {
    --main-section-title-gap: 2.4rem;
    --main-section-title-font-size: 4rem;
    --main-section-sub-title-font-size: 2.4rem;
    --main-partner-title-font-size: 4rem;
    --main-message-title-font-size: 6.4rem;
    --main-banner-title-font-size: 4.8rem;
    --main-banner-desc-font-size: 1.8rem;
  }
}
.page-main {
  position: relative;
}
.page-main .inner {
  max-width: var(--hwf-content-wrap-width-large);
}
.page-main .header {
  position: fixed;
  border-bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(4rem);
}
.page-main .header:has(.modal.in),
.page-main .header:has(.modal.show),
.page-main .header:has(.modal[style*="display: block"]) {
  transform: none !important;
  backdrop-filter: none !important;
}
.page-main .header .logo {
  background: url(/assets/images/common/logo-w.svg) no-repeat center/cover;
}
.page-main .header .logo-plusetf a {
  background: url(/assets/images/common/logo-plus-etf-w.svg) no-repeat center/cover;
}
.page-main .header .logo-pine a {
  background: url(/assets/images/common/logo-pine-w.svg) no-repeat center/cover;
}
.page-main .header > .header-top {
  background-color: rgba(0, 0, 0, 0.6);
  border-bottom: 0;
}
.page-main .header > .header-top .link li::after {
  background-color: #d7d5d5;
}
.page-main .header > .header-con {
  background-color: rgba(0, 0, 0, 0.3);
}
.page-main .header > .header-con .nav .gnb-list {
  color: #fff;
}
.page-main .header > .header-con .nav .gnb-list .gnb-item.active {
  color: #ffa57f;
}
.page-main .header > .header-con .nav .gnb-list .gnb-item.focus {
  color: #ffa57f;
}
.page-main .header > .header-con .nav .gnb-list .submenu {
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
  box-shadow:
    0 4rem 6rem 0 rgba(0, 0, 0, 0.08),
    0 16px 16px 0 rgba(0, 0, 0, 0.06);
}
.page-main .header > .header-con .nav .gnb-list .submenu .submenu-link {
  color: #fff;
}
.page-main .header > .header-con .nav .gnb-list .submenu .submenu-link:hover,
.page-main .header > .header-con .nav .gnb-list .submenu .submenu-link:active {
  color: var(--hwf-color-text-primary);
  background: rgba(0, 0, 0, 0.5);
}
.page-main .header > .header-con .util .lang .form-select.text .select-button::after {
  background: #fff;
}
.page-main .header > .header-con .util .lang .form-select.text .select-button .select-value {
  color: #fff;
}
.page-main .header > .header-con .util .lang .form-select.text .select-listbox {
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
}
.page-main .header > .header-con .util .lang .form-select.text .select-listbox .select-option {
  color: #fff;
}
.page-main .header > .header-con .util .lang .form-select.text .select-listbox .select-option:hover,
.page-main .header > .header-con .util .lang .form-select.text .select-listbox .select-option:active {
  color: var(--hwf-color-text-primary);
  background: rgba(0, 0, 0, 0.5);
}
.page-main .header > .header-con .util .btn.icon .svg-icon {
  background-color: #fff;
}
.page-main .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: hsla(0, 0%, 100%, 0.1);
  backdrop-filter: blur(5rem);
}
.page-main .footer:has(.modal.in),
.page-main .footer:has(.modal.show),
.page-main .footer:has(.modal[style*="display: block"]) {
  backdrop-filter: none !important;
}
.page-main .main-tit-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--main-section-title-gap);
}
.page-main .main-tit-wrap .tit {
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 400;
  font-size: var(--main-section-title-font-size);
  line-height: 1.2;
  word-break: keep-all;
  background: var(--hwf-color-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  text-transform: capitalize;
}
.page-main .main-tit-wrap .tit:not(.txt-en) {
  font-weight: 600;
}
.page-main .main-tit-wrap .sub-tit {
  word-break: keep-all;
  color: var(--hwf-color-text-strong);
  font-size: var(--main-section-sub-title-font-size);
  font-weight: 600;
  text-transform: capitalize;
}
.page-main .main-tit-wrap .sub-tit.txt-en {
  font-weight: 400;
}
.page-main .section-visual {
  --main-visual-height: 56.25vw;
}
.page-main .section-visual .visual {
  height: var(--main-visual-height);
}
.page-main .section-visual .visual .inner {
  position: relative;
  padding-top: 13.6rem;
  height: 100%;
}
.page-main .section-visual .visual .tit-wrap {
  position: relative;
  z-index: 1;
  padding-bottom: 8rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-main .section-visual .visual .tit-wrap .num {
  margin-bottom: 1.6rem;
  color: #fff;
  font-weight: 500;
}
.page-main .section-visual .visual .tit-wrap .desc {
  padding-bottom: 6.4rem;
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
  word-break: keep-all;
}
.page-main .section-visual .visual .img-wrap,
.page-main .section-visual .visual .video-wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.page-main .section-visual .visual .img-wrap img,
.page-main .section-visual .visual .video-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.page-main .section-visual .visual .img-wrap video,
.page-main .section-visual .visual .video-wrap video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}
.page-main .section-visual .visual .img-mobile {
  display: none;
}
.page-main .section-visual .main-visual-swiper .swiper-horizontal > .swiper-pagination-bullets,
.page-main .section-visual .main-visual-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
  display: flex;
  margin: 0 var(--hwf-content-padding-x);
  max-width: var(--hwf-content-wrap-width-large);
  left: 50%;
  bottom: 8rem;
  transform: translateX(-50%);
}
.page-main .section-visual .main-visual-swiper .swiper-pagination-bullet {
  flex: 1;
  max-width: 8rem;
  height: 0.4rem;
  border-radius: 0;
  opacity: 1;
  background-color: hsla(0, 0%, 100%, 0.25);
}
.page-main .section-visual .main-visual-swiper .swiper-pagination-bullet-active {
  background-color: #fe5b16;
}
@media (max-width: 768px) {
  .page-main .section-visual {
    --main-visual-height: 218.93vw;
    font-size: 1.8rem;
  }
  .page-main .section-visual .visual .img-pc {
    display: none;
  }
  .page-main .section-visual .visual .img-mobile {
    display: block;
  }
}
@media (max-width: 640px) {
  .page-main .section-visual .visual .tit-wrap .num {
    font-size: 1.6rem;
  }
  .page-main .section-visual .visual .tit-wrap .desc {
    font-size: 1.6rem;
  }
  .page-main .section-visual .main-visual-swiper .swiper-horizontal > .swiper-pagination-bullets,
  .page-main .section-visual .main-visual-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
    margin: 0;
    max-width: calc(100% - var(--hwf-content-padding-x) * 2);
  }
}
.page-main .section-partner {
  --main-partner-padding-top: 14rem;
  --main-partner-padding-bottom: 14rem;
  --main-partner-dt-font-size: 3.2rem;
  --main-partner-dd-font-size: 20rem;
  --main-partner-dd-small-font-size: 12rem;
  padding: var(--main-partner-padding-top) 0 var(--main-partner-padding-bottom);
}
.page-main .section-partner .main-tit-wrap .tit {
  font-size: var(--main-partner-title-font-size);
}
.page-main .section-partner .info-wrap {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8rem;
  margin-top: 28rem;
}
.page-main .section-partner .info-wrap .img-wrap {
  flex-shrink: 0;
  position: relative;
  margin-left: 8.3%;
  width: 36.3%;
}
.page-main .section-partner .info-wrap .img-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: block;
  width: 39.4%;
  height: 36rem;
  background: url(/assets/images/common/obj-gradient.png) no-repeat center/cover;
}
.page-main .section-partner .info-wrap .img-wrap .img-list {
  overflow: hidden;
  position: relative;
}
.page-main .section-partner .info-wrap .img-wrap .img-list::before {
  content: "";
  padding-top: 121.6%;
  display: block;
}
.page-main .section-partner .info-wrap .img-wrap .img-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.page-main .section-partner .info-wrap .img-wrap .img-list li img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.page-main .section-partner .info-wrap .txt-wrap {
  display: flex;
  flex-direction: column;
  width: 45%;
}
.page-main .section-partner .info-wrap .txt-wrap dl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
}
.page-main .section-partner .info-wrap .txt-wrap dt {
  position: absolute;
  left: 0;
  display: flex;
  padding-right: 4rem;
  color: var(--hwf-color-text-strong);
  font-size: var(--main-partner-dt-font-size);
  font-weight: 600;
  white-space: nowrap;
}
.page-main .section-partner .info-wrap .txt-wrap dt::before {
  content: "";
  display: inline-block;
  margin-right: 0.4rem;
  width: 1.4rem;
  height: 1.4rem;
  vertical-align: top;
  background-color: var(--hwf-color-orange-dark);
}
.page-main .section-partner .info-wrap .txt-wrap dd {
  position: relative;
  display: flex;
  align-items: baseline;
  font-size: var(--main-partner-dd-font-size);
  font-family: "Trust2ATRIAL", sans-serif;
  line-height: 1;
  background: var(--hwf-color-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  text-transform: capitalize;
  white-space: nowrap;
}
.page-main .section-partner .info-wrap .txt-wrap dd .counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  text-align: right;
  min-width: 2ch;
}
.page-main .section-partner .info-wrap .txt-wrap dd small {
  font-size: var(--main-partner-dd-small-font-size);
  font-weight: 600;
}
.page-main .section-partner .info-wrap .txt-wrap dd::after {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  content: "";
  display: block;
  width: 100%;
  height: 33.3%;
  z-index: -1;
  background: url(/assets/images/main/partner-back.png) no-repeat center/cover;
}
@media (max-width: 1540px) {
  .page-main .section-partner {
    --main-partner-dt-font-size: 2.8rem;
    --main-partner-dd-font-size: 21rem;
    --main-partner-dd-small-font-size: 10rem;
  }
}
@media (max-width: 1280px) {
  .page-main .section-partner {
    --main-partner-dt-font-size: 2.1rem;
    --main-partner-dd-font-size: 15rem;
    --main-partner-dd-small-font-size: 5rem;
  }
}
@media (max-width: 1024px) {
  .page-main .section-partner {
    --main-partner-dt-font-size: 2.8rem;
    --main-partner-dd-font-size: 21rem;
    --main-partner-dd-small-font-size: 10rem;
  }
  .page-main .section-partner .info-wrap {
    flex-direction: column;
  }
  .page-main .section-partner .info-wrap .img-wrap {
    width: 70%;
  }
  .page-main .section-partner .info-wrap .txt-wrap {
    width: 85%;
  }
}
@media (max-width: 768px) {
  .page-main .section-partner .info-wrap .txt-wrap {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .page-main .section-partner {
    --main-partner-padding-top: 8rem;
    --main-partner-padding-bottom: 8rem;
    --main-partner-dt-font-size: 1.8rem;
    --main-partner-dd-font-size: 8rem;
    --main-partner-dd-small-font-size: 4rem;
  }
  .page-main .section-partner .info-wrap {
    gap: 4rem;
    margin-top: 11rem;
    padding: 0 1.6rem;
  }
  .page-main .section-partner .info-wrap .img-wrap {
    width: 85.5%;
  }
  .page-main .section-partner .info-wrap .img-wrap::before {
    left: 1.6rem;
    width: 36.6%;
    height: 13.8rem;
  }
  .page-main .section-partner .info-wrap .img-wrap .img-list {
    width: 100%;
  }
  .page-main .section-partner .info-wrap .txt-wrap dt {
    padding-right: 2.4rem;
  }
  .page-main .section-partner .info-wrap .txt-wrap dt::before {
    margin-right: 0.2rem;
    width: 0.6rem;
    height: 0.6rem;
  }
}
@media (max-width: 350px) {
  .page-main .section-partner .info-wrap .txt-wrap dl {
    flex-direction: column;
  }
  .page-main .section-partner .info-wrap .txt-wrap dt {
    position: initial;
    width: 100%;
  }
  .page-main .section-partner .info-wrap .txt-wrap dd {
    margin-left: auto;
  }
}
.page-main .section-message .tit {
  word-break: keep-all;
  font-family: "Trust2ATRIAL", sans-serif;
  font-weight: 400;
  font-size: var(--main-message-title-font-size);
  background: var(--hwf-color-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  text-transform: capitalize;
  text-align: center;
}
.page-main .section-business {
  position: relative;
  height: 108rem;
}
.page-main .section-business .inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10.8rem;
  padding-bottom: 10.8rem;
  height: 100%;
}
.page-main .section-business .img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.page-main .section-business .img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.page-main .section-business .accordion.translucent {
  --accordion-padding-y: 6rem;
  --accordion-padding-x: 8rem;
  --accordion-icon-size: 5.6rem;
  width: 68rem;
}
.page-main .section-business .accordion.translucent .accordion-item .btn-accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--accordion-padding-y) var(--accordion-padding-x);
}
.page-main .section-business .accordion.translucent .accordion-item .btn-accordion::after {
  position: initial;
  width: var(--accordion-icon-size);
  height: var(--accordion-icon-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-plus-large.svg);
  mask-image: url(/assets/images/icon/ico-plus-large.svg);
}
.page-main .section-business .accordion.translucent .accordion-item .btn-accordion .tit {
  display: flex;
  gap: 0.4rem;
  font-size: 4rem;
  font-weight: 700;
}
.page-main .section-business .accordion.translucent .accordion-item .btn-accordion .tit::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--hwf-color-orange-dark);
}
.page-main .section-business .accordion.translucent .accordion-item .btn-accordion .tit::after {
  background-color: #272626;
}
.page-main .section-business .accordion.translucent .accordion-item .accordion-body {
  padding: 4rem var(--accordion-padding-x) var(--accordion-padding-y) calc(var(--accordion-padding-x) + 1.6rem);
  font-size: 2.1rem;
}
.page-main .section-business .accordion.translucent .accordion-item.active .btn-accordion {
  padding-bottom: 0;
}
.page-main .section-business .accordion.translucent .accordion-item.active .btn-accordion::after {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-minus-large.svg);
  mask-image: url(/assets/images/icon/ico-minus-large.svg);
  background-color: #272626;
}
.page-main .section-business .accordion.translucent .accordion-item.is-static.active .btn-accordion::after {
  display: none;
}
@media (max-width: 1024px) {
  .page-main .section-business {
    height: auto;
  }
  .page-main .section-business .inner {
    padding: 0;
  }
  .page-main .section-business .img-wrap {
    position: inherit;
  }
  .page-main .section-business .img-wrap::before {
    content: "";
    display: block;
    padding-top: 83.3%;
  }
  .page-main .section-business .img-wrap img {
    position: absolute;
    top: 0;
  }
  .page-main .section-business .accordion.translucent {
    margin-top: -4rem;
    width: 100%;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(5rem);
  }
  .page-main .section-business .accordion.translucent .accordion-item {
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }
  .page-main .section-business .accordion.translucent .accordion-item .btn-accordion {
    flex-direction: row;
  }
  .page-main .section-business .accordion.translucent .accordion-item:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
  .page-main .section-business {
    --main-business-margin-top: 8rem;
  }
  .page-main .section-business .img-wrap::before {
    padding-top: 120%;
  }
  .page-main .section-business .accordion.translucent {
    --accordion-padding-y: 4rem;
    --accordion-padding-x: 3.2rem;
    --accordion-icon-size: 4rem;
  }
  .page-main .section-business .accordion.translucent .accordion-item .btn-accordion .tit {
    gap: 0.6rem;
    font-size: 2.8rem;
  }
  .page-main .section-business .accordion.translucent .accordion-item .btn-accordion .tit::before {
    width: 0.6rem;
    height: 0.6rem;
  }
  .page-main .section-business .accordion.translucent .accordion-item .accordion-body {
    padding-top: 2.4rem;
    font-size: 1.8rem;
  }
}
.page-main .section-trend .inner {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  padding-top: 12rem;
  padding-bottom: 12rem;
}
@media (max-width: 640px) {
  .page-main .section-trend .inner {
    gap: 4rem;
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.page-main .section-insight {
  --main-insight-news-list-txt-gap: 1.6rem;
  --main-insight-news-list-gap: 4em;
}
.page-main .section-insight .overlay-box-wrap .visual-box {
  position: relative;
  width: 59.31%;
  height: auto;
}
.page-main .section-insight .overlay-box-wrap .visual-box .main-tit-wrap {
  position: relative;
  z-index: 1;
}
.page-main .section-insight .overlay-box-wrap .visual-box .main-tit-wrap .tit {
  background: linear-gradient(270deg, #fff 0.02%, rgba(216, 58, 0, 0.9) 27.9%, #eb6c31 47.12%, #eec3b0 92.98%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  text-transform: capitalize;
}
.page-main .section-insight .overlay-box-wrap .visual-box .img-wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-main .section-insight .overlay-box-wrap .visual-box .img-wrap li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1);
}
.page-main .section-insight .overlay-box-wrap .visual-box .img-wrap li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.page-main .section-insight .overlay-box-wrap .visual-box .img-wrap li:nth-child(1) {
  animation: visualRoll 9s infinite 0s;
}
.page-main .section-insight .overlay-box-wrap .visual-box .img-wrap li:nth-child(2) {
  animation: visualRoll 9s infinite 3s;
}
.page-main .section-insight .overlay-box-wrap .visual-box .img-wrap li:nth-child(3) {
  animation: visualRoll 9s infinite 6s;
}
@keyframes visualRoll {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  16.6% {
    opacity: 1;
    transform: scale(1.1);
  }
  33.3% {
    opacity: 1;
    transform: scale(1.1);
  }
  50% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
  }
}
.page-main .section-insight .overlay-box-wrap .info-box {
  display: flex;
  flex-direction: column;
  gap: var(--main-insight-news-list-gap);
  margin-left: -6rem;
  margin-top: 0;
  width: 62.7%;
  min-width: 0;
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list {
  display: flex;
  flex-direction: column;
  gap: var(--main-insight-news-list-gap);
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item a {
  display: flex;
  flex-direction: column;
  gap: var(--main-insight-news-list-txt-gap);
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item a::after {
  content: "";
  display: inline-block;
  width: 5.6rem;
  height: 5.6rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-half.svg);
  mask-image: url(/assets/images/icon/ico-arrow-half.svg);
  background-color: var(--hwf-color-sub-80);
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item .news-top {
  display: flex;
  gap: 1.6rem;
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item .news-top .category {
  font-weight: 600;
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item .news-con {
  display: flex;
  flex-direction: column;
  gap: var(--main-insight-news-list-txt-gap);
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item .news-con .tit {
  word-break: keep-all;
  color: var(--hwf-color-text-strong);
  font-size: 3.2rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item .news-con .desc {
  color: var(--hwf-color-text-subtle);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.page-main .section-insight .overlay-box-wrap .info-box .btn-wrap .btn {
  justify-content: center;
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: 0;
}
@media (max-width: 1500px) {
  .page-main .section-insight .overlay-box-wrap {
    flex-direction: column;
  }
  .page-main .section-insight .overlay-box-wrap .visual-box {
    width: 100%;
    min-height: 60rem;
  }
  .page-main .section-insight .overlay-box-wrap .info-box {
    margin-top: -4rem;
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .page-main .section-insight .overlay-box-wrap .info-box {
    padding: 8rem;
  }
}
@media (max-width: 768px) {
  .page-main .section-insight .overlay-box-wrap .visual-box {
    min-height: 45rem;
  }
}
@media (max-width: 640px) {
  .page-main .section-insight .overlay-box-wrap .visual-box {
    padding: 4rem var(--hwf-content-padding-x);
  }
  .page-main .section-insight .overlay-box-wrap .info-box {
    padding: 6.4rem var(--hwf-content-padding-x) 4rem;
  }
  .page-main .section-insight .overlay-box-wrap .info-box .news-list {
    font-size: 1.6rem;
  }
  .page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item a::after {
    width: 4rem;
    height: 4rem;
  }
  .page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item .news-con .tit {
    font-size: 2.4rem;
  }
  .page-main .section-insight .overlay-box-wrap .info-box .news-list .news-item .news-con .desc {
    font-size: 1.8rem;
  }
}
.page-main .section-banner {
  --main-banner-margin-top: 8rem;
  --main-banner-footer-height: 45.7rem;
  --main-banner-padding-bottom: 31rem;
  margin-top: var(--main-banner-margin-top);
  background: url(/assets/images/main/banner-bg.png) no-repeat center/cover;
}
.page-main .section-banner .main-tit-wrap {
  padding: 20rem 0 calc(var(--main-banner-padding-bottom) + var(--main-banner-footer-height));
  text-align: center;
  gap: 1.6rem;
}
.page-main .section-banner .main-tit-wrap .tit {
  margin: 0 auto;
  color: rgba(0, 0, 0, 0);
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, #ff5532 0%, #04021e 50%, #ffffff 50%, #ffffff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  font-size: var(--main-banner-title-font-size);
}
.page-main .section-banner .main-tit-wrap .sub-tit {
  color: #fff;
  font-size: var(--main-banner-desc-font-size);
}
@media (max-width: 1500px) {
  .page-main .section-banner {
    --main-banner-margin-top: 0;
  }
}
@media (max-width: 640px) {
  .page-main .section-banner {
    --main-banner-padding-bottom: 20rem;
    background: url(/assets/images/main/mo-banner-bg.png) no-repeat center/cover;
  }
  .page-main .section-banner .main-tit-wrap {
    gap: 2.4rem;
    padding-top: 16rem;
  }
  .page-main .section-banner .main-tit-wrap .sub-tit {
    font-size: 1.8rem;
  }
}
.page-main.test .section-partner {
  --main-partner-padding-bottom: 0;
}
.page-company.test .company-main .section-mission {
  position: initial;
}
.page-company.test .company-main .section-slogan .deco-tit {
  transform: translateX(-50%);
}
html[lang="en"] .page-main {
  --main-section-title-font-size: 8rem;
}
@media (max-width: 640px) {
  html[lang="en"] .page-main {
    --main-section-title-font-size: 4rem;
  }
}
html[lang="en"] .page-main .header .logo {
  background: url(/assets/images/common/en-logo2-w.svg) no-repeat center/cover;
}
html[lang="en"] .page-main .main-tit-wrap .tit {
  font-family: "Trust2ATRIAL", sans-serif;
  font-weight: 400;
}
html[lang="en"] .page-main .section-network .main-tit-wrap {
  margin-bottom: 12rem;
}
html[lang="en"] .page-main .section-network .main-tit-wrap .tit {
  margin: 0 auto;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
}
html[lang="en"] .page-main .section-network .btn-wrap {
  margin-top: 4.8rem;
  text-transform: capitalize;
}
@media (max-width: 640px) {
  html[lang="en"] .page-main .section-network .global-network-map {
    padding-top: 8rem;
    padding-bottom: 27.6rem;
    background: url(/assets/images/main/mo-network-visual-bg-en.png) no-repeat center/cover;
  }
  html[lang="en"] .page-main .section-network .global-network-map .main-tit-wrap {
    margin-bottom: 0;
  }
}
html[lang="en"] .page-main .section-banner {
  margin-top: 0;
}
.page-fund .range-slider-wrap {
  position: relative;
  padding: 6.4rem 5.2% 0;
}
.page-fund .range-slider-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.2rem;
  border-radius: 0.3rem;
  background-color: #e7e5e4;
}
.page-fund .range-slider-wrap .range-slider {
  margin-top: 4rem;
  border: 0;
}
.page-fund .range-slider-wrap .range-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 4rem;
  height: 4rem;
  border: 0.1rem solid #d7d5d5;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.page-fund .range-slider-wrap .range-slider .ui-slider-handle .handle {
  width: 100%;
  height: 100%;
}
.page-fund .range-slider-wrap .range-slider .ui-slider-handle .amount {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.page-fund .range-slider-wrap .range-slider .ui-slider-range {
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.page-fund .range-slider-wrap .range-slider .range-legend {
  position: relative;
  z-index: 1;
  top: -4rem;
  display: flex;
}
.page-fund .range-slider-wrap .range-slider .range-legend span {
  position: absolute;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  font-family: "Pretendard", sans-serif;
  color: var(--hwf-color-text-subtler);
  font-size: 1.6rem;
}
.page-fund .range-slider-wrap .range-slider .range-legend span:first-child,
.page-fund .range-slider-wrap .range-slider .range-legend span:last-child {
  transform: translateX(-45%);
}
.page-fund .range-slider-wrap .range-slider .range-legend span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4.4rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #c7c1bd;
  z-index: 1;
}
@media (max-width: 768px) {
  .page-fund .range-slider-wrap .range-slider .ui-slider-handle {
    width: 3rem;
    height: 3rem;
    transform: translate(-10%, -50%);
  }
}
@media (max-width: 640px) {
  .page-fund .range-slider-wrap {
    padding-top: 3.2rem;
  }
  .page-fund .range-slider-wrap .range-slider {
    margin-top: 6.5rem;
  }
  .page-fund .range-slider-wrap .range-slider .range-legend {
    top: -4.8rem;
  }
  .page-fund .range-slider-wrap .range-slider .range-legend span:first-child,
  .page-fund .range-slider-wrap .range-slider .range-legend span:last-child {
    margin-top: -1.5rem;
  }
  .page-fund .range-slider-wrap .range-slider .range-legend span:first-child::after,
  .page-fund .range-slider-wrap .range-slider .range-legend span:last-child::after {
    margin-top: 1.5rem;
  }
  .page-fund .range-slider-wrap .range-slider .range-legend span:not(:first-child):not(:last-child) {
    transform: translateX(-1.5rem);
  }
  .page-fund .range-slider-wrap .range-slider .range-legend span::after {
    top: 5.4rem;
    width: 0.6rem;
    height: 0.6rem;
  }
}
@media (max-width: 640px) {
  .page-fund .chip-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .page-fund .chip-wrap label {
    width: 100%;
  }
  .page-fund .chip-wrap.col-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.page-fund .fund-content .total-count {
  margin-bottom: 2.4rem;
}
.page-fund .fund-content .fund-list {
  overflow-x: auto;
}
.page-fund .fund-content .fund-list + .btn-wrap {
  margin-top: 4rem;
}
.page-fund .fund-content .sort-wrap {
  background-color: #fff;
}
.page-fund .fund-content .sort-wrap.is-fixed {
  position: fixed;
  top: 0;
  z-index: 3;
  width: 130rem;
}
.page-fund .fund-content .sort-wrap.is-fixed .pc-only {
  justify-content: center;
}
.page-fund .fund-content .sort-wrap.is-fixed .pc-only::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: block;
  width: 105vw;
  height: 100%;
  background-color: #fafafa;
  border-bottom: 0.1rem solid #e6e5e5;
}
.page-fund .fund-content .sort-wrap.is-fixed .pc-only .sort-list {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.page-fund .fund-content .sort-wrap .sort-list {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0.1rem solid #e6e5e5;
  background-color: #fafafa;
  border-radius: 0.3rem;
}
.page-fund .fund-content .sort-wrap .sort-list .sort-item {
  display: flex;
  align-items: center;
  padding: 0 1.6rem;
  height: 100%;
}
.page-fund .fund-content .sort-wrap .sort-list .sort-item:not(.period) {
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex-shrink: 0;
  width: 17.6rem;
  height: calc(100% - 2.4rem);
}
.page-fund .fund-content .sort-wrap .sort-list .sort-item:first-child {
  width: 5.6rem;
}
.page-fund .fund-content .sort-wrap .sort-list .sort-item:nth-child(3) {
  width: 19.1rem;
}
.page-fund .fund-content .sort-wrap .sort-list .sort-item.period {
  width: 100%;
}
.page-fund .fund-content .sort-wrap .sort-list .sort-tit {
  padding: 0.8rem 1.2rem;
  min-height: 4rem;
  width: 100%;
  text-align: center;
}
.page-fund .fund-content .sort-wrap .sort-list .period {
  display: flex;
  flex-direction: column;
}
.page-fund .fund-content .sort-wrap .sort-list .period .tit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4rem;
  padding: 0 1.2rem;
}
.page-fund .fund-content .sort-wrap .sort-list .period .period-list {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.page-fund .fund-content .sort-wrap .sort-list .period .period-list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 0.1rem;
  background-color: #e6e5e5;
}
.page-fund .fund-content .sort-wrap .sort-list .period .period-list li {
  display: flex;
  align-items: center;
  flex: 1;
  text-align: center;
  min-height: 4.2rem;
}
.page-fund .fund-content .sort-wrap .sort-list .period .period-list li::after {
  height: 1.6rem;
}
.page-fund .fund-content .sort-wrap .sort-list .period .period-list .btn {
  padding: 0.8rem 1.6rem;
  min-width: 10rem;
}
.page-fund .fund-content .sort-wrap .sort-list li {
  color: var(--hwf-color-text-subtle);
  font-size: 1.5rem;
  justify-content: center;
  position: relative;
}
.page-fund .fund-content .sort-wrap .sort-list li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0.1rem;
  height: 100%;
  background-color: #e6e5e5;
}
.page-fund .fund-content .sort-wrap .sort-list li:last-child::after {
  display: none;
}
.page-fund .fund-content .sort-wrap .sort-list .btn {
  width: 100%;
  height: 100%;
  color: var(--hwf-color-text-subtle);
}
.page-fund .fund-content .sort-wrap .sort-list .btn::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-desc.svg);
  mask-image: url(/assets/images/icon/ico-desc.svg);
  transform: rotate(180deg);
  background-color: currentColor;
}
.page-fund .fund-content .sort-wrap .sort-list .btn.active {
  color: var(--hwf-color-text-primary-dark);
  font-weight: 600;
}
.page-fund .fund-content .sort-wrap .sort-list .btn.sort-asc::after {
  transform: rotate(0deg);
}
.page-fund .fund-content .fund-list-wrap .fund-item {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: 4rem 0;
  width: 100%;
  border-bottom: 0.1rem solid #d7d5d5;
}
.page-fund .fund-content .fund-list-wrap .fund-item:has(input[type="checkbox"]:checked) {
  background-color: #fafafa;
}
.page-fund .fund-content .fund-list-wrap .fund-item .form-check {
  margin: 0 1.6rem;
  flex-shrink: 0;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  height: 100%;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .tit-wrap {
  margin-top: 1.6rem;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .tit-wrap .tit {
  color: var(--hwf-color-text-strong);
  font-size: 2.4rem;
  font-weight: 600;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .tit-wrap .desc {
  margin-top: 0.8rem;
  color: var(--hwf-color-text-subtle);
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-chart {
  display: none;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con {
  display: flex;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con > .fund-txt {
  margin-right: 2.4rem;
  padding-right: 2.4rem;
  flex-shrink: 0;
  width: 15.5rem;
  border-right: 0.1rem solid #e6e5e5;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con > .fund-txt:nth-child(3) {
  margin-right: 0;
  width: 16.6rem;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .tit {
  display: none;
  color: var(--hwf-color-text-subtler);
  font-size: 1.6rem;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .val {
  font-size: 2.1rem;
  font-weight: 500;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .unit {
  display: none;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .revenue {
  display: none;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid {
  display: flex;
  justify-content: space-between;
  width: 86rem;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid .fund-txt {
  border-right: 0;
  flex: 1;
  min-width: 10rem;
  text-align: center;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid .up {
  color: var(--hwf-color-change-up);
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid .down {
  color: var(--hwf-color-change-down);
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid .fund-item {
  flex: 1;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid .fund-item .tit {
  text-align: center;
}
.page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid .fund-item .val {
  text-align: center;
}
.page-fund .fund-content .fund-list-wrap + .btn-wrap {
  margin-top: 4rem;
}
.page-fund .fund-content.type-view .sort-wrap .pc-only .sort-list .sort-item:first-child {
  display: none;
}
.page-fund .fund-content.type-view .sort-wrap .pc-only .sort-list .sort-item .btn {
  pointer-events: none;
  cursor: default;
}
.page-fund .fund-content.type-view .sort-wrap .pc-only .sort-list .sort-item .btn::after {
  display: none;
}
.page-fund .fund-content.type-view .sort-wrap .pc-only .sort-list .sort-item .btn.active {
  color: inherit;
  font-weight: 400;
}
.page-fund .fund-content.type-view .sort-wrap .pc-only .sort-list .period .period-list .btn {
  min-width: auto;
}
.page-fund .fund-content.type-view .fund-list-wrap .fund-item .form-check {
  display: none;
}
.page-fund .fund-content.type-view .fund-list-wrap .fund-item .fund-info .fund-con .period-grid {
  width: 100%;
}
.page-fund .fund-content.type-view .fund-list-wrap .fund-item .fund-info .fund-con .period-grid .fund-txt {
  flex: 1;
}
@media (max-width: 1400px) {
  .page-fund .fund-content {
    --fund-list-padding-x: var(--hwf-content-padding-x);
  }
  .page-fund .fund-content .pc-only {
    display: none !important;
  }
  .page-fund .fund-content .tablet-only {
    display: flex !important;
    justify-content: space-between;
  }
  .page-fund .fund-content .total-count {
    padding: 0 var(--fund-list-padding-x);
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
  }
  .page-fund .fund-content .sort-wrap {
    padding: 0 var(--fund-list-padding-x) 1.6rem;
  }
  .page-fund .fund-content .sort-wrap.is-fixed {
    position: static;
  }
  .page-fund .fund-content .sort-wrap .sort-list {
    width: -moz-fit-content;
    width: fit-content;
    border: 0;
    background-color: rgba(0, 0, 0, 0);
  }
  .page-fund .fund-content .sort-wrap .sort-list li {
    white-space: nowrap;
  }
  .page-fund .fund-content .sort-wrap .sort-list .sort-item:first-child {
    padding-left: 0;
    width: -moz-fit-content;
    width: fit-content;
  }
  .page-fund .fund-content .sort-wrap .sort-list .sort-item:first-child .btn::after {
    transform: rotate(0);
  }
  .page-fund .fund-content .sort-wrap .sort-list .sort-item:first-child .btn.sort-asc::after {
    transform: rotate(0);
  }
  .page-fund .fund-content .sort-wrap .sort-list .sort-item:nth-child(2) {
    padding-right: 0;
    width: -moz-fit-content;
    width: fit-content;
  }
  .page-fund .fund-content .sort-wrap .sort-list .sort-item:nth-child(2) .btn::after {
    transform: rotate(180deg);
  }
  .page-fund .fund-content .sort-wrap .sort-list .sort-item:nth-child(2) .btn.sort-asc::after {
    transform: rotate(180deg);
  }
  .page-fund .fund-content .sort-wrap .sort-list .sort-item::after {
    height: 1.6rem;
  }
  .page-fund .fund-content .sort-wrap .sort-item.select {
    max-width: 28rem;
    min-width: 14.5rem;
    width: 100%;
    margin-right: 2.4rem;
    padding-right: 0;
  }
  .page-fund .fund-content .sort-wrap .sort-item.select::after {
    display: none;
  }
  .page-fund .fund-content .fund-list-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 0;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2.4rem var(--fund-list-padding-x);
    border-bottom: 0;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item:has(input[type="checkbox"]:checked) {
    background-color: rgba(0, 0, 0, 0);
  }
  .page-fund .fund-content .fund-list-wrap .fund-item:nth-child(2n) {
    border-left: 0.1rem solid #d7d5d5;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .form-check {
    order: 1;
    margin: 0;
    width: 100%;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .form-check input:checked + label {
    color: #fff;
    font-weight: 600;
    border: 0.1rem solid #fe5b16;
    background-color: #fe5b16;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .form-check input:checked + label::after {
    background-color: currentColor;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .form-check label {
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0 2rem;
    width: 100%;
    height: 4rem;
    font-size: 1.6rem;
    border-radius: 0.3rem;
    border: 0.1rem solid #e6e5e5;
    background-color: #f5f4f4;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .form-check label .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .form-check label::before {
    display: none;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .form-check label::after {
    order: -1;
    position: static;
    transform: translate(0, 0);
    background-color: #969292;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-chart {
    display: block;
    margin-top: auto;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-chart .chart-area {
    position: relative;
    width: 100%;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-chart .chart-area::before {
    content: "";
    display: block;
    padding-top: 35.29%;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-chart .chart-area .chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con {
    flex-direction: column;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .revenue {
    display: flex;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .period-grid {
    display: none;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .fund-txt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-right: 0;
    margin-bottom: 1.2rem;
    padding: 0;
    width: 100%;
    border-right: 0;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .fund-txt.revenue {
    margin-bottom: 0.8rem;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .fund-txt.revenue .val {
    color: var(--hwf-color-text-subtle);
    font-size: 3.2rem;
    font-weight: 400;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .fund-txt.revenue .val small {
    font-size: 2.1rem;
    font-weight: 400;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .fund-txt.revenue .val.up {
    color: var(--hwf-color-change-up);
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .fund-txt.revenue .val.down {
    color: var(--hwf-color-change-down);
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .fund-txt:nth-child(3) {
    width: 100%;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .tit {
    display: block;
    color: var(--hwf-color-text-basic);
    font-size: 1.6rem;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .val {
    margin-top: 0;
    font-size: 1.6rem;
    font-weight: 600;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-con .unit {
    display: inline-block;
  }
  .page-fund .fund-content.type-view .sort-wrap {
    display: none;
  }
}
@media (max-width: 768px) {
  .page-fund .fund-content {
    --fund-list-padding-x: 0;
  }
  .page-fund .fund-content .fund-list-wrap {
    grid-template-columns: auto;
    border-top: 0.1rem solid #d7d5d5;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item {
    border-bottom: 0.1rem solid #d7d5d5;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item:nth-child(2n) {
    border-left: 0;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-content .fund-list-wrap {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
  }
  .page-fund .fund-content .fund-list-wrap .fund-item {
    padding: 2.4rem var(--hwf-content-padding-x);
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info {
    gap: 1.6rem;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .fund-top {
    margin-bottom: 0.8rem;
  }
  .page-fund .fund-content .fund-list-wrap .fund-item .fund-info .tit-wrap .tit {
    font-size: 2.1rem;
  }
}
@media (max-width: 375px) {
  .page-fund .fund-content .sort-wrap .sort-item.select {
    max-width: 40vw;
  }
}
@media (max-width: 355px) {
  .page-fund .fund-content .sort-wrap .tablet-only {
    flex-direction: column;
    row-gap: 2.4rem;
  }
  .page-fund .fund-content .sort-wrap .sort-item.select {
    max-width: 100%;
    width: 100%;
  }
}
.page-fund:has(.layout-sidebar) {
  --top-fixed-height: 0;
}
.page-fund:has(.layout-sidebar) .inner {
  max-width: var(--hwf-content-wrap-width-large);
}
.page-fund:has(.layout-sidebar):has(.top-fixed) {
  --top-fixed-height: 8rem;
}
@media (max-width: 1500px) {
  .page-fund:has(.layout-sidebar):has(.tab-area) {
    --top-fixed-height: 6.4rem;
  }
}
@media (max-width: 640px) {
  .page-fund:has(.layout-sidebar):has(.tab-area) {
    --top-fixed-height: 5.6rem;
  }
}
.page-fund .layout-sidebar {
  --layout-sidebar-nav-width: calc(26rem + var(--hwf-content-padding-x));
  --layout-content-gap: 2.4rem;
  --layout-content-bg: #fff;
  --layout-sidebar-bg: #f3f2f1;
  --layout-side-bar-tab-height: 14.4rem;
  background-color: var(--layout-sidebar-bg);
}
.page-fund .layout-sidebar .tab-area {
  --tab-conts-gap: 0;
  position: relative;
}
.page-fund .layout-sidebar .tab-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 50%;
  height: var(--layout-side-bar-tab-height);
  background-color: var(--layout-content-bg);
}
.page-fund .layout-sidebar .tab-area .tab {
  position: sticky;
  top: 0;
  z-index: 2;
  max-width: var(--hwf-content-wrap-width-large);
  width: 100%;
  margin: 0 auto;
}
.page-fund .layout-sidebar .tab-area .tab > ul {
  position: relative;
  margin-right: var(--layout-sidebar-nav-width);
  padding: 8rem var(--hwf-content-padding-x) var(--tab-conts-gap);
  width: calc(100% - var(--layout-sidebar-nav-width));
  background-color: #fff;
}
.page-fund .layout-sidebar .tab-area .tab > ul::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--tab-conts-gap);
  transform: translateX(-50%);
  display: block;
  width: calc(100% - var(--hwf-content-padding-x) * 2);
  height: 0.2rem;
  background-color: var(--hwf-tab--line-button-color-line);
}
.page-fund .layout-sidebar .tab-area .tab.is-sticky > ul {
  padding-top: 2rem;
}
.page-fund .layout-sidebar .tab-area .tab.line::before {
  display: none;
}
.page-fund .layout-sidebar .tab-area .tab-conts-wrap {
  margin-top: 0;
}
.page-fund .layout-sidebar .tab-area .tab-conts-wrap .tab-conts {
  margin-top: 0;
}
.page-fund .layout-sidebar .tab-area .cont-group:first-child {
  padding-top: 6.4rem;
}
.page-fund .layout-sidebar .tab-area .sidebar {
  margin-top: calc(var(--layout-side-bar-tab-height) * -1);
}
@media (max-width: 1500px) {
  .page-fund .layout-sidebar .tab-area .tab > ul {
    margin-right: 0;
    padding: 0;
    width: 100%;
  }
  .page-fund .layout-sidebar .tab-area .tab > ul::before {
    bottom: 0;
    width: 100%;
  }
  .page-fund .layout-sidebar .tab-area .tab.is-sticky > ul {
    padding-top: 0;
  }
  .page-fund .layout-sidebar .tab-area .tab .btn-tab {
    padding-top: 0.8rem;
  }
  .page-fund .layout-sidebar .tab-area .cont-group:first-child {
    padding-top: 8rem;
  }
  .page-fund .layout-sidebar .tab-area .sidebar {
    margin-top: 0;
  }
}
.page-fund .layout-sidebar .layout-inner {
  position: relative;
  max-width: var(--hwf-content-wrap-width-large);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.page-fund .layout-sidebar .sidebar {
  position: sticky;
  top: var(--top-fixed-height);
  z-index: 2;
  flex-shrink: 0;
  order: 1;
  padding: 6.4rem var(--hwf-content-padding-x) 6.4rem 0;
  width: var(--layout-sidebar-nav-width);
  font-size: 2.1rem;
  font-weight: 600;
}
.page-fund .layout-sidebar .sidebar li {
  position: relative;
  margin-bottom: 1.6rem;
}
.page-fund .layout-sidebar .sidebar li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(244, 178, 134, 0.7) 0%, rgba(223, 188, 165, 0) 100%);
  transition: var(--hwf-transition-base);
  z-index: -1;
}
.page-fund .layout-sidebar .sidebar li:last-child {
  margin-bottom: 0;
}
.page-fund .layout-sidebar .sidebar li a {
  display: flex;
  padding: 1.4rem 5.4rem;
  padding-right: 0;
  color: var(--hwf-color-text-subtler);
}
.page-fund .layout-sidebar .sidebar li a::before {
  content: "";
  display: inline-block;
  margin-right: 0.4rem;
  flex-shrink: 0;
  width: 0;
  height: 0.6rem;
  background-color: #f54500;
  vertical-align: top;
  transition: all 0.1s;
}
.page-fund .layout-sidebar .sidebar li.active::after {
  width: 100%;
}
.page-fund .layout-sidebar .sidebar li.active a {
  color: var(--hwf-color-text-basic);
}
.page-fund .layout-sidebar .sidebar li.active a::before {
  width: 0.6rem;
}
.page-fund .layout-sidebar .layout-content {
  position: relative;
  width: calc(100% - var(--layout-sidebar-nav-width));
  background-color: var(--layout-sidebar-bg);
}
.page-fund .layout-sidebar .layout-content .cont-group {
  position: relative;
  z-index: 1;
  padding: 8rem 6.81% 12rem var(--hwf-content-padding-x);
  width: 100%;
  background-color: var(--layout-content-bg);
  border-bottom: var(--layout-content-gap) solid var(--layout-sidebar-bg);
}
.page-fund .layout-sidebar .layout-content .cont-group[id] {
  scroll-margin-top: calc(var(--top-fixed-height) + var(--layout-content-gap));
}
.page-fund .layout-sidebar .layout-content .cont-group::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-color: var(--layout-content-bg);
}
@media (max-width: 1740px) {
  .page-fund .layout-sidebar .layout-content .cont-group {
    padding-right: var(--hwf-content-padding-x);
  }
}
@media (max-width: 1500px) {
  .page-fund .layout-sidebar .layout-inner {
    flex-direction: column;
  }
  .page-fund .layout-sidebar .sidebar {
    overflow-x: auto;
    order: -1;
    padding: 0;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    background-color: #f3f2f1;
    border-bottom: 0.1rem solid #e6e5e5;
    box-shadow: 0 0.2rem 1.6rem 0 rgba(0, 0, 0, 0.08);
  }
  .page-fund .layout-sidebar .sidebar ul {
    display: flex;
    min-width: -moz-max-content;
    min-width: max-content;
  }
  .page-fund .layout-sidebar .sidebar li {
    margin-bottom: 0;
  }
  .page-fund .layout-sidebar .sidebar li a {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
  .page-fund .layout-sidebar .layout-content {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .page-fund .layout-sidebar {
    --layout-sidebar-nav-width: 100%;
    --layout-sidebar-bg-width: 100%;
    --layout-sidebar-pos: 0;
    --layout-content-gap: 1.6rem;
    --layout-full-width: calc(var(--hwf-content-padding-x) * -1);
  }
  .page-fund .layout-sidebar .sidebar li a {
    font-size: 1.6rem;
    padding: 0.8rem 2.4rem;
  }
  .page-fund .layout-sidebar .layout-content .cont-group {
    padding-bottom: 8rem;
  }
}
.page-fund .fund-main .section-visual {
  padding: 10rem 0 8rem;
  background: url(/assets/images/fund/main-visual.png) no-repeat center/cover;
}
.page-fund .fund-main .section-visual .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-fund .fund-main .section-visual .fund-info {
  width: 58%;
}
.page-fund .fund-main .section-visual .fund-info:only-child {
  width: 100%;
}
.page-fund .fund-main .section-visual .fund-info:only-child .fund-summary {
  --fund-summary-li-gap: 4.8rem;
  justify-content: space-between;
}
.page-fund .fund-main .section-visual .fund-info:only-child .fund-summary li {
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: 100%;
}
.page-fund .fund-main .section-visual .fund-info:only-child .fund-summary .summary-con {
  justify-self: flex-end;
  display: flex;
  align-items: center;
}
.page-fund .fund-main .section-visual .fund-info:only-child .fund-summary .summary-con .change {
  order: -1;
  margin-right: 1.6rem;
}
.page-fund .fund-main .section-visual .fund-info .fund-category {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-bottom: 2.4rem;
}
.page-fund .fund-main .section-visual .fund-info .fund-category .btn-share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--hwf-radius-max);
  background-color: hsla(0, 0%, 100%, 0.2);
}
.page-fund .fund-main .section-visual .fund-info .fund-category .btn-share::after {
  content: "";
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-share.svg);
  mask-image: url(/assets/images/icon/ico-share.svg);
  width: 2.4rem;
  height: 2.4rem;
  background-color: #fff;
}
.page-fund .fund-main .section-visual .fund-info .fund-tit {
  margin-bottom: 4rem;
  font-size: 4.8rem;
  font-weight: 600;
  color: var(--hwf-color-text-strong);
}
.page-fund .fund-main .section-visual .fund-info .fund-actions {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 4rem;
}
.page-fund .fund-main .section-visual .fund-info .fund-actions .form-select {
  width: 48rem;
}
.page-fund .fund-main .section-visual .fund-info .fund-summary {
  --fund-summary-li-gap: 4.94%;
  display: flex;
  padding: 4rem;
  gap: var(--fund-summary-li-gap);
  background: hsla(0, 0%, 100%, 0.1);
  backdrop-filter: blur(2rem);
}
.page-fund .fund-main .section-visual .fund-info .fund-summary li {
  position: relative;
  padding-right: var(--fund-summary-li-gap);
}
.page-fund .fund-main .section-visual .fund-info .fund-summary li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 0.1rem;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.15);
}
.page-fund .fund-main .section-visual .fund-info .fund-summary li:last-child {
  padding-right: 0;
}
.page-fund .fund-main .section-visual .fund-info .fund-summary li:last-child::after {
  display: none;
}
.page-fund .fund-main .section-visual .fund-info .fund-summary .summary-tit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  color: hsla(0, 0%, 100%, 0.8);
}
.page-fund .fund-main .section-visual .fund-info .fund-summary .summary-con .value {
  display: flex;
  align-items: baseline;
  color: #fff;
  margin-bottom: 0.4rem;
  font-size: 4rem;
}
.page-fund .fund-main .section-visual .fund-info .fund-summary .summary-con .value strong {
  font-weight: 600;
}
.page-fund .fund-main .section-visual .fund-info .fund-summary .summary-con .value .unit {
  display: inline-block;
  margin-left: 0.2rem;
  margin-bottom: 0.8rem;
  font-size: 2.1rem;
  font-weight: 400;
}
.page-fund .fund-main .section-visual .fund-briefing {
  flex-shrink: 0;
  width: 33%;
}
.page-fund .fund-main .section-visual .fund-briefing .tit-wrap {
  padding: 2.1rem 3.2rem;
  border-top: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  border-right: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  border-left: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  background: rgba(251, 182, 182, 0.24);
  backdrop-filter: blur(2rem);
}
.page-fund .fund-main .section-visual .fund-briefing .tit-wrap .tit {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
}
.page-fund .fund-main .section-visual .fund-briefing .tit-wrap .tit::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-ai-star.svg);
  mask-image: url(/assets/images/icon/ico-ai-star.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-ai-star.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.page-fund .fund-main .section-visual .fund-briefing .desc-wrap {
  padding: 2.4rem 3.2rem;
  color: #fff;
  border-top: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  border-right: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  border-left: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  background: rgba(251, 182, 182, 0.12);
  backdrop-filter: blur(5rem);
}
.page-fund .fund-main .section-visual .fund-briefing .desc-wrap dt {
  margin-bottom: 1.6rem;
  font-weight: 700;
}
.page-fund .fund-main .section-visual .fund-briefing .desc-wrap dd {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.4rem;
}
.page-fund .fund-main .section-visual .fund-briefing .desc-wrap dd:last-child::before {
  margin-bottom: 0;
}
.page-fund .fund-main .section-visual .fund-briefing .desc-wrap dd::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 0;
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--hwf-radius-max);
  background-color: #fff;
}
@media (max-width: 1740px) {
  .page-fund .fund-main .section-visual .fund-info .fund-summary {
    --fund-summary-li-gap: 4.8rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary li:nth-child(2n)::after {
    display: none;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary {
    display: flex;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary li:nth-child(2)::after {
    display: block;
  }
}
@media (max-width: 1500px) {
  .page-fund .fund-main .section-visual .fund-briefing {
    width: 37%;
  }
}
@media (max-width: 1400px) {
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary .summary-con {
    justify-self: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary .summary-con .change {
    order: 0;
    margin-right: 0;
  }
}
@media (max-width: 1280px) {
  .page-fund .fund-main .section-visual {
    background: url(/assets/images/fund/mo-main-visual.png) no-repeat center/100% 100%;
  }
  .page-fund .fund-main .section-visual .inner {
    flex-direction: column;
    gap: 4rem;
  }
  .page-fund .fund-main .section-visual .fund-info {
    width: 100%;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-top {
    width: 100%;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary li:nth-child(2n)::after {
    display: none;
  }
  .page-fund .fund-main .section-visual .fund-briefing {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-main .section-visual {
    padding: 4rem 0;
  }
  .page-fund .fund-main .section-visual .inner {
    gap: 2.4rem;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-category {
    justify-content: space-between;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-tit {
    margin-bottom: 2.4rem;
    font-size: 2.8rem;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-actions {
    flex-direction: column;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-actions .form-select {
    width: 100%;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-actions .btn {
    width: 100%;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary {
    --fund-summary-li-gap: 1.6rem;
    grid-template-columns: 1fr;
    padding: 2.4rem;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary li {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 0;
    padding-bottom: var(--fund-summary-li-gap);
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary li::after {
    top: initial;
    bottom: 0;
    right: 0;
    transform: translateY(0);
    width: 100%;
    height: 0.1rem;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary li:nth-child(2n)::after {
    display: block;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary li:last-child::after {
    display: none;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary .summary-tit {
    margin-bottom: 0.4rem;
    align-self: flex-start;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary .summary-con {
    display: flex;
    flex-direction: column;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary .summary-con .value {
    margin-bottom: 0.4rem;
    font-size: 3.2rem;
  }
  .page-fund .fund-main .section-visual .fund-info .fund-summary .summary-con .change {
    margin-left: auto;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary {
    --fund-summary-li-gap: 1.6rem;
    grid-template-columns: 1fr;
    padding: 2.4rem;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary li {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 0;
    padding-bottom: var(--fund-summary-li-gap);
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary li::after {
    top: initial;
    bottom: 0;
    right: 0;
    transform: translateY(0);
    width: 100%;
    height: 0.1rem;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary li:nth-child(2n)::after {
    display: block;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary li:last-child::after {
    display: none;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary .summary-tit {
    margin-bottom: 0.4rem;
    align-self: flex-start;
  }
  .page-fund .fund-main .section-visual .fund-info:only-child .fund-summary .summary-con .value {
    margin-bottom: 0.4rem;
    font-size: 3.2rem;
  }
  .page-fund .fund-main .section-visual .fund-briefing .desc-wrap {
    padding: 2.4rem;
  }
}
.page-fund .fund-main .section-detail .top-fixed {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  height: var(--top-fixed-height);
  background-color: #fff;
  border-bottom: 0.1rem solid #e6e5e5;
}
.page-fund .fund-main .section-detail .top-fixed .inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.page-fund .fund-main .section-detail .top-fixed .summary {
  display: flex;
  align-items: center;
}
.page-fund .fund-main .section-detail .top-fixed .summary::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 2.7rem;
  height: 2.4rem;
  background: url(/assets/images/common/logo-symbol.svg) no-repeat center/cover;
}
.page-fund .fund-main .section-detail .top-fixed .summary .name {
  margin-left: 1.6rem;
  margin-right: 2.4rem;
}
.page-fund .fund-main .section-detail .top-fixed .btn-wrap {
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  gap: 4rem;
}
.page-fund .fund-main .section-detail .group-flex-wrap:has(.chart-wrap.pie) .group-wrap:only-child .chart-area {
  margin: 0 12rem;
  width: 28rem;
}
.page-fund .fund-main .section-detail .group-flex-wrap:has(.chart-wrap.pie) .group-wrap:only-child .chart-legend {
  padding-right: 12rem;
  width: 100%;
}
@media (max-width: 1280px) {
  .page-fund .fund-main .section-detail .group-flex-wrap:has(.chart-wrap.pie) .group-wrap:only-child .chart-area {
    margin: 0 4rem;
  }
  .page-fund .fund-main .section-detail .group-flex-wrap:has(.chart-wrap.pie) .group-wrap:only-child .chart-legend {
    padding-right: 0;
  }
}
.page-fund .fund-main .section-detail .chart-wrap .chart-top {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-con {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem 1.6rem;
  width: 100%;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-area {
  flex-shrink: 0;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-area .chart {
  width: 100%;
  height: 100%;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-summary {
  width: 43.38%;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-summary .txt-wrap {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-summary .desc {
  margin-top: 1.6rem;
  color: var(--hwf-color-text-subtle);
}
.page-fund .fund-main .section-detail .chart-wrap .chart-legend .legend-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 6.4rem;
  border-bottom: 0.1rem solid #e6e5e5;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-legend .legend-list li:last-child {
  border-bottom: 0;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-legend .legend-list .key {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.2rem;
  background-color: #ddd;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-legend .legend-list .value {
  margin-left: auto;
  font-weight: 700;
}
.page-fund .fund-main .section-detail .chart-wrap .chart-legend .date {
  margin-top: 1.6rem;
  text-align: right;
}
.page-fund .fund-main .section-detail .chart-wrap.line {
  align-items: flex-start;
  flex-direction: column;
  gap: 2.4rem;
}
.page-fund .fund-main .section-detail .chart-wrap.line .chart-con {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  gap: 4rem;
}
.page-fund .fund-main .section-detail .chart-wrap.line .chart-area {
  width: 100%;
  height: 44rem;
}
.page-fund .fund-main .section-detail .chart-wrap.line .chart-legend .legend-list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0 1.6rem;
  height: 4rem;
  border: 0.1rem solid #e0e0e0;
  border-radius: 0.2rem;
}
.page-fund .fund-main .section-detail .chart-wrap.line .chart-legend .legend-list li {
  gap: 0.8rem;
  border-bottom: 0;
  font-size: 1.4rem;
  color: var(--hwf-color-text-subtler);
}
.page-fund .fund-main .section-detail .chart-wrap.line .chart-legend .legend-list .key {
  width: 1.4rem;
  height: 0.4rem;
  border-radius: 0;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area {
  flex-shrink: 0;
  display: flex;
  gap: 0.4rem;
  width: 48.15%;
  height: 9.4rem;
  align-items: flex-end;
  text-align: center;
  background-color: #fff;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--hwf-color-text-subtler);
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level.active .bar {
  height: 6rem;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .bar {
  display: inline-block;
  width: 100%;
  height: 0.5rem;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .label {
  color: var(--hwf-color-text-subtler);
  font-size: 1.6rem;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level1 .bar {
  background-color: #f91d00;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level2 .bar {
  background-color: #ff4891;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level3 .bar {
  background-color: #fe6220;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level4 .bar {
  background-color: #ffb80d;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level5 .bar {
  background-color: #00cecf;
}
.page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .level6 .bar {
  background-color: #119eff;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-con {
  -moz-column-gap: 10rem;
  column-gap: 10rem;
  justify-content: center;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area {
  position: relative;
  width: 38rem;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area .doughnut-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area .doughnut-txt .label {
  font-weight: 500;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area .doughnut-txt .value {
  margin-top: 1.2rem;
  font-size: 5.6rem;
  font-weight: 600;
  line-height: 1;
}
.page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-legend {
  flex-shrink: 0;
  width: 24rem;
}
.page-fund .fund-main .section-detail .chart-wrap.pie .chart-area {
  position: relative;
  margin: 0 4rem;
  width: 20rem;
}
.page-fund .fund-main .section-detail .chart-wrap.pie .chart-area::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.page-fund .fund-main .section-detail .chart-wrap.pie .chart-area .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page-fund .fund-main .section-detail .chart-wrap .date {
  font-size: 1.6rem;
  color: var(--hwf-color-text-subtler);
}
.page-fund .fund-main .section-detail .tbl-wrap.scroll .tbl {
  min-width: 118rem;
}
.page-fund .fund-main .section-detail .box-wrap {
  display: flex;
  gap: 2.4rem;
}
.page-fund .fund-main .section-detail .box-wrap.bg-gray {
  padding: 2.4rem;
  background-color: #f3f2f1;
}
.page-fund .fund-main .section-detail .box-wrap.pd-lg {
  padding: 4rem;
}
.page-fund .fund-main .section-detail .box-wrap .box-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 3.2rem 2rem 0;
}
.page-fund .fund-main .section-detail .fee-wrap {
  display: flex;
  gap: 2.4rem;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 3.2rem 2rem 0;
  background: linear-gradient(180deg, rgba(232, 232, 232, 0.93) 0%, #fff 75%);
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .tit-sm {
  padding: 0 2rem;
  display: flex;
  gap: 1.6rem;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .icon-buy::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-buy.svg);
  mask-image: url(/assets/images/icon/ico-buy.svg);
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .icon-invest::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-invest.svg);
  mask-image: url(/assets/images/icon/ico-invest.svg);
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .icon-sell::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-sell.svg);
  mask-image: url(/assets/images/icon/ico-sell.svg);
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 2.4rem;
  padding: 2.4rem 1.6rem;
  height: 100%;
  text-align: center;
  background-color: #fff;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .txt-wrap::after {
  content: "";
  display: block;
  margin: 2.4rem 0;
  width: 100%;
  height: 0.1rem;
  background-color: #e6e5e5;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .txt-wrap:last-child::after {
  display: none;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .sub-txt-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .tit {
  font-size: 2.1rem;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .sub-txt {
  color: var(--hwf-color-text-primary);
  font-size: 3.2rem;
  font-weight: 700;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .desc {
  display: flex;
  gap: 0.8rem;
  padding: 0 0.4rem;
  font-size: 1.6rem;
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .desc dt {
  flex-shrink: 0;
  color: var(--hwf-color-text-subtle);
}
.page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .desc dd {
  width: 100%;
  font-weight: 600;
  text-align: right;
}
.page-fund .fund-main .section-detail .guide-wrap {
  display: flex;
  gap: 2.4rem;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .tit {
  padding: 1.4rem;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .tit.bg-orange {
  background-color: var(--hwf-color-orange-base);
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .tit.bg-indigo {
  background-color: var(--hwf-color-navy-base);
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box {
  display: flex;
  padding: 4rem 0;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dl {
  flex: 1;
  text-align: center;
  border-right: 0.1rem solid #e6e5e5;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dl:last-child {
  border-right: none;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dt {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dt.icon-day::before {
  content: "";
  display: block;
  margin: 0 auto 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-day.svg);
  mask-image: url(/assets/images/icon/ico-day.svg);
  background-color: currentColor;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dt.icon-night::before {
  content: "";
  display: block;
  margin: 0 auto 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-night.svg);
  mask-image: url(/assets/images/icon/ico-night.svg);
  background-color: currentColor;
}
.page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dd {
  margin-top: 0.8rem;
}
.page-fund .fund-main .section-detail .overlay-box-wrap .visual-box {
  background: url(/assets/images/fund/main-info-bg.png) no-repeat center/cover;
}
.page-fund .fund-main .section-detail .overlay-box-wrap .visual-box .pipe-list {
  margin-top: 4rem;
}
.page-fund .fund-main .section-detail .product-info-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 9rem;
}
.page-fund .fund-main .section-detail .product-info-wrap dl {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.page-fund .fund-main .section-detail .product-info-wrap dd {
  font-size: 2.1rem;
  font-weight: 600;
}
.page-fund .fund-main .section-detail .reference-wrap {
  display: flex;
  align-items: center;
  padding: 4rem;
  gap: 8rem;
  background-color: #f3f2f1;
}
.page-fund .fund-main .section-detail .reference-wrap .reference-box {
  padding: 4rem 4rem 0;
  flex-shrink: 0;
  width: 52.46%;
  background-color: #fff;
}
.page-fund .fund-main .section-detail .reference-wrap .reference-box .download-wrap {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
}
.page-fund .fund-main .section-detail .reference-wrap .reference-box .download-wrap .tit {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--hwf-color-text-strong);
}
.page-fund .fund-main .section-detail .reference-wrap .reference-box .download-wrap .desc {
  margin-top: 0.8rem;
  color: var(--hwf-color-text-subtler);
  font-size: 1.6rem;
}
.page-fund .fund-main .section-detail .reference-wrap .reference-box .btn-wrap.line {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 0.1rem solid #e6e5e5;
}
.page-fund .fund-main .section-detail .reference-wrap .reference-box .btn-wrap .btn.text {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.page-fund .fund-main .section-detail .reference-wrap .reference-box .btn-wrap .btn.text .icon-arrow-right {
  width: 1.6rem;
  height: 1.6rem;
}
@media (max-width: 1280px) {
  .page-fund .fund-main .section-detail .chart-wrap.pie .chart-con {
    flex-direction: column;
  }
  .page-fund .fund-main .section-detail .chart-wrap.pie .chart-area {
    width: 50%;
  }
  .page-fund .fund-main .section-detail .chart-wrap.pie .chart-legend {
    width: 80%;
  }
  .page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .sub-txt-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1024px) {
  .page-fund .fund-main .section-detail .top-fixed .btn-wrap {
    gap: 2rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.bar .chart-con {
    flex-direction: column;
  }
  .page-fund .fund-main .section-detail .chart-wrap.bar .chart-area {
    width: 100%;
    height: 11.8rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.bar .chart-area .label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.8rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.bar .chart-summary {
    padding-top: 2.4rem;
    width: 100%;
    border-top: 0.1rem solid #d7d5d5;
  }
  .page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-con {
    -moz-column-gap: 8rem;
    column-gap: 8rem;
  }
  .page-fund .fund-main .section-detail .fee-wrap {
    flex-direction: column;
  }
  .page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .sub-txt-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .desc {
    flex-direction: row;
    justify-content: center;
  }
  .page-fund .fund-main .section-detail .guide-wrap {
    flex-direction: column;
  }
  .page-fund .fund-main .section-detail .overlay-box-wrap .visual-box {
    height: 40rem;
    background: url(/assets/images/fund/mo-main-info-bg.png) no-repeat center/cover;
  }
  .page-fund .fund-main .section-detail .reference-wrap {
    flex-direction: column;
    gap: 4rem;
  }
  .page-fund .fund-main .section-detail .reference-wrap .reference-box {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .page-fund .fund-main .section-detail {
    --top-fixed-height: 0;
  }
  .page-fund .fund-main .section-detail .top-fixed {
    display: none;
  }
  .page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-con {
    justify-content: space-between;
    -moz-column-gap: 2.4rem;
    column-gap: 2.4rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area {
    width: 50%;
  }
  .page-fund .fund-main .section-detail .chart-wrap.pie .chart-legend {
    width: 100%;
  }
  .page-fund .fund-main .section-detail .group-flex-wrap {
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-main .section-detail .chart-wrap .chart-top {
    gap: 1.6rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.line .chart-con {
    gap: 2.4rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.bar .chart-con {
    gap: 4rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.bar .chart-summary {
    padding-top: 4rem;
  }
  .page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-con {
    flex-direction: column;
  }
  .page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-area {
    width: 69.3%;
  }
  .page-fund .fund-main .section-detail .chart-wrap.doughnut .chart-legend {
    width: 100%;
  }
  .page-fund .fund-main .section-detail .chart-wrap.pie .chart-con {
    padding-top: 1.6rem;
  }
  .page-fund .fund-main .section-detail .tbl-wrap.scroll .tbl {
    min-width: 96rem;
  }
  .page-fund .fund-main .section-detail .guide-wrap {
    gap: 0;
  }
  .page-fund .fund-main .section-detail .guide-wrap .guide-item:first-child.line-bottom::after,
  .page-fund .fund-main .section-detail .guide-wrap .box-list-wrap .guide-item.tit:first-child::after,
  .box-list-wrap .page-fund .fund-main .section-detail .guide-wrap .guide-item.tit:first-child::after {
    display: none;
  }
  .page-fund .fund-main .section-detail .guide-wrap .guide-item .tit {
    font-size: 2.1rem;
  }
  .page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box {
    flex-direction: column;
    gap: 2.4rem;
    padding-top: 2.4rem;
  }
  .page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dl {
    padding-bottom: 2.4rem;
    border-right: 0;
    border-bottom: 0.1rem solid #e6e5e5;
  }
  .page-fund .fund-main .section-detail .guide-wrap .guide-item .info-box dl:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  .page-fund .fund-main .section-detail .fee-wrap .fee-item .tit-sm {
    gap: 0.8rem;
  }
  .page-fund .fund-main .section-detail .product-info-wrap {
    flex-direction: column;
  }
  .page-fund .fund-main .section-detail .reference-wrap {
    padding: 2.4rem var(--hwf-content-padding-x) 4rem var(--hwf-content-padding-x);
    margin: 0 var(--layout-full-width);
  }
  .page-fund .fund-main .section-detail .reference-wrap .reference-box {
    padding: 2.4rem 2.4rem 0;
  }
  .page-fund .fund-main .section-detail .reference-wrap .reference-box .download-wrap {
    flex-direction: column;
  }
  .page-fund .fund-main .section-detail .reference-wrap .reference-box .btn-wrap.line {
    margin-top: 2.4rem;
    padding: 2.4rem 0;
  }
  .page-fund .fund-main .section-detail .box-wrap.bg-gray {
    margin: 0 var(--layout-full-width);
    padding: 3.2rem var(--hwf-content-padding-x);
  }
}
@media (max-width: 360px) {
  .page-fund .fund-main .section-detail .fee-wrap .fee-item .fee-box .sub-txt-wrap {
    grid-template-columns: auto;
  }
}
.page-fund .fund-main .section-trend .cont-group {
  padding: 12rem 0;
}
@media (max-width: 640px) {
  .page-fund .fund-main .section-trend .cont-group {
    padding: 8rem 0;
  }
}
.page-fund .fund-find .section-search {
  position: relative;
  padding: 8rem 0 4rem;
}
.page-fund .fund-find .section-search::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 45.2rem;
  background: linear-gradient(0deg, rgba(243, 242, 241, 0) 0%, #f3f2f1 100%);
  z-index: -1;
}
.page-fund .fund-find .section-search .section-tit-wrap {
  position: relative;
  z-index: 5;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap {
  position: absolute;
  left: 0;
  bottom: -3.2rem;
  width: 100%;
  z-index: 2;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-btn {
  display: flex;
  justify-content: flex-end;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-btn .btn {
  width: 19rem;
  font-weight: 600;
  background: linear-gradient(90deg, #ff5532 0%, #09021e 100%);
  border: 0;
  transition: width 0.4s;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-btn .btn.active {
  width: 100%;
  justify-content: flex-end;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-btn .btn.active .icon-plus {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-minus.svg);
  mask-image: url(/assets/images/icon/ico-minus.svg);
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-wrap {
  overflow: hidden;
  max-height: 0;
  transition:
    opacity 0s,
    max-height 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 6.4rem;
  padding: 4rem;
  width: 100%;
  border: 0.1rem solid #fe5b16;
  border-top: 0;
  background-color: #fff;
  box-shadow:
    0 12px 48px 0 rgba(0, 0, 0, 0.2),
    0 4px 12px 0 rgba(0, 0, 0, 0.08);
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-wrap.active {
  max-height: 200rem;
  visibility: visible;
  opacity: 1;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-wrap .option-item {
  margin-bottom: 6.4rem;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-wrap .option-tit {
  margin-bottom: 2.4rem;
  color: var(--hwf-color-text-strong);
  font-size: 2.1rem;
  font-weight: 600;
}
.page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-wrap .btn-wrap {
  padding-top: 4rem;
  border-top: 0.1rem solid #e6e5e5;
}
.page-fund .fund-find .section-search .promo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 7.2rem;
  min-height: 8rem;
  background: url(/assets/images/fund/banner-pension.png) no-repeat center/cover;
}
.page-fund .fund-find .section-search .promo-banner .txt-wrap {
  display: flex;
  justify-content: center;
  gap: 4rem;
}
.page-fund .fund-find .section-search .promo-banner .tit {
  color: var(--hwf-color-text-strong);
  font-size: 2.1rem;
  font-weight: 600;
  word-break: keep-all;
}
.page-fund .fund-find .section-search .promo-banner.pension::before {
  flex-shrink: 0;
  content: "";
  display: inline-block;
  width: 8rem;
  height: 8rem;
  background: url(/assets/images/icon/ico-pension.png) no-repeat center/cover;
}
.page-fund .fund-find .section-search .promo-banner.pension .tit {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media (max-width: 768px) {
  .page-fund .fund-find .section-search .search-wrap {
    padding-bottom: 4rem;
  }
  .page-fund .fund-find .section-search .promo-banner {
    gap: 1.6rem;
    padding: 1.6rem 1.6rem 1.6rem 1.2rem;
  }
  .page-fund .fund-find .section-search .promo-banner .txt-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-find .section-search {
    padding: 4rem 0 4.8rem;
  }
  .page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-btn .btn {
    width: auto;
  }
  .page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-btn .btn.active {
    width: auto;
    justify-content: center;
  }
  .page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-btn .btn.active .icon-plus {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(/assets/images/icon/ico-plus.svg);
    mask-image: url(/assets/images/icon/ico-plus.svg);
  }
  .page-fund .fund-find .section-search .search-wrap .detail-search-wrap .search-option-wrap.active {
    display: none;
  }
  .page-fund .fund-find .section-search .promo-banner {
    display: none;
    margin-top: 10.8rem;
  }
  .page-fund .fund-find .section-search .promo-banner .tit {
    font-size: 1.8rem;
  }
  .page-fund .fund-find .section-search .promo-banner .btn {
    font-size: 1.6rem;
  }
}
.page-fund .fund-find .section-detail {
  padding-bottom: 12rem;
}
.page-fund .fund-find .section-detail .fund-content {
  min-height: 50rem;
}
.page-fund .fund-find .section-detail .fund-compare-floating {
  position: fixed;
  left: 0;
  bottom: -100%;
  z-index: 2;
  padding: 1.6rem 0;
  width: 100%;
  background: var(--color-sub-sub-80, #2c2320);
  box-shadow: 0 -0.4rem 1.6rem 0 rgba(0, 0, 0, 0.2);
  transition: var(--hwf-transition-base);
}
.page-fund .fund-find .section-detail .fund-compare-floating.active {
  bottom: 0;
}
.page-fund .fund-find .section-detail .fund-compare-floating .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.page-fund .fund-find .section-detail .fund-compare-floating .compare-list {
  display: flex;
  gap: 0.8rem;
}
.page-fund .fund-find .section-detail .fund-compare-floating .compare-list .compare-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  flex: 1;
  min-height: 8rem;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 0.3rem;
  background: rgba(0, 0, 0, 0.25);
}
.page-fund .fund-find .section-detail .fund-compare-floating .compare-list .compare-item .btn.delete {
  flex-shrink: 0;
}
.page-fund .fund-find .section-detail .fund-compare-floating .compare-list .compare-item .btn.delete .icon-delete {
  background-color: currentColor;
}
.page-fund .fund-find .section-detail .fund-compare-floating .compare-btn-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media (max-width: 1280px) {
  .page-fund .fund-find .section-detail .fund-compare-floating .inner {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .page-fund .fund-find .section-detail .fund-compare-floating .compare-list {
    display: none;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-find .section-detail {
    padding-bottom: 8rem;
  }
}
.page-fund .fund-pension .list-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 32rem;
}
.page-fund .fund-pension .list-wrap .sub-tit {
  color: var(--hwf-color-text-strong);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
}
.page-fund .fund-pension .list-wrap .list {
  border-top: 0.1rem solid #c3c1c1;
  border-bottom: 0.1rem solid #c3c1c1;
}
.page-fund .fund-pension .list-wrap .list li {
  display: flex;
  padding: 1.2rem 0;
  border-bottom: 0.1rem solid #e7e5e4;
}
.page-fund .fund-pension .list-wrap .list li:last-child {
  border-bottom: 0;
}
.page-fund .fund-pension .list-wrap .list li span,
.page-fund .fund-pension .list-wrap .list li strong {
  flex: 1;
  text-align: center;
  font-size: 1.6rem;
}
.page-fund .fund-pension .list-wrap .list li strong {
  font-weight: 700;
}
.page-fund .fund-pension .list-wrap .list li.emphasis {
  background: rgba(208, 156, 88, 0.1);
}
@media (max-width: 1024px) {
  .page-fund .fund-pension .list-wrap {
    max-width: 100%;
  }
}
.page-fund .fund-pension .tit-icon {
  align-items: center;
  flex-wrap: nowrap;
  text-align: center;
  word-break: keep-all;
}
.page-fund .fund-pension .tit-icon .icon-arrow-right {
  width: 4.3rem;
  height: 2.1rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-txt-arrow.svg);
  mask-image: url(/assets/images/icon/ico-txt-arrow.svg);
  background-color: var(--hwf-color-text-basic);
}
@media (max-width: 1024px) {
  .page-fund .fund-pension .tit-icon {
    flex-direction: column;
  }
  .page-fund .fund-pension .tit-icon .icon-arrow-right {
    transform: rotate(90deg);
  }
}
.page-fund .fund-pension .txt-center {
  justify-content: center;
  align-items: center !important;
}
.page-fund .fund-pension .gray-box .img-box.scroll::-webkit-scrollbar-track {
  background-color: #fff;
}
.page-fund .fund-pension .gray-box .img-box.scroll::-webkit-scrollbar-button:horizontal:start:decrement,
.page-fund .fund-pension .gray-box .img-box.scroll::-webkit-scrollbar-button:horizontal:end:increment {
  display: block;
  width: var(--hwf-content-padding-x);
  height: 0.4rem;
  background-color: rgba(0, 0, 0, 0);
}
@media (max-width: 640px) {
  .page-fund .fund-pension .group-wrap:not(.spacing-xlg, .spacing-lg) {
    gap: 1.6rem;
  }
  .page-fund .fund-pension .group-wrap [class*="tit"] br {
    display: none;
  }
  .page-fund .fund-pension .group-wrap + .group-wrap {
    padding-top: 0;
  }
  .page-fund .fund-pension .gray-box {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    padding: 4rem var(--hwf-content-padding-x);
  }
  .page-fund .fund-pension .img-box.scroll {
    width: calc(100% + var(--hwf-content-padding-x) * 2);
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    padding-left: var(--hwf-content-padding-x);
    padding-right: var(--hwf-content-padding-x);
  }
  .page-fund .fund-pension .img-box.scroll img {
    min-width: 100rem;
  }
}
.page-fund .fund-pension .icon-feature-01::before {
  background: #fe5b16 url(/assets/images/fund/ico-pension-feature-01.svg) no-repeat center/2rem 2rem;
}
.page-fund .fund-pension .icon-feature-02::before {
  background: #fe5b16 url(/assets/images/fund/ico-pension-feature-02.svg) no-repeat center/2rem 2rem;
}
.page-fund .fund-pension .icon-feature-03::before {
  background: #fe5b16 url(/assets/images/fund/ico-pension-feature-03.svg) no-repeat center/2rem 2rem;
}
.page-fund .fund-pension .icon-feature-04::before {
  background: #fe5b16 url(/assets/images/fund/ico-pension-feature-04.svg) no-repeat center/2rem 2rem;
}
.page-fund .fund-pension .icon-feature-05::before {
  background: #fe5b16 url(/assets/images/fund/ico-pension-feature-05.svg) no-repeat center/2rem 2rem;
}
.page-fund .fund-pension .icon-feature-06::before {
  background: #fe5b16 url(/assets/images/fund/ico-pension-feature-06.svg) no-repeat center/2rem 2rem;
}
.page-fund .fund-pension .section-visual {
  overflow: hidden;
  position: relative;
  padding: 12rem 0;
  height: 72rem;
  background: linear-gradient(0deg, #06061b 0%, #06061b 100%), #170e05;
}
.page-fund .fund-pension .section-visual .inner {
  height: 100%;
}
.page-fund .fund-pension .section-visual .txt-wrap {
  display: flex;
  flex-direction: column;
  width: 46.5%;
  height: 100%;
  color: #fff;
  z-index: 1;
  word-break: keep-all;
}
.page-fund .fund-pension .section-visual .txt-wrap .sub-tit {
  margin-bottom: auto;
  font-size: 2.4rem;
}
.page-fund .fund-pension .section-visual .txt-wrap .tit {
  font-size: 7.6rem;
  font-weight: 700;
}
.page-fund .fund-pension .section-visual .txt-wrap .desc {
  margin-top: 2.4rem;
  font-size: 2.4rem;
}
.page-fund .fund-pension .section-visual .txt-wrap::after {
  content: "";
  display: block;
  margin-top: 4rem;
  width: 4rem;
  height: 4rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-scroll-down.svg);
  mask-image: url(/assets/images/icon/ico-scroll-down.svg);
  background-color: currentColor;
}
.page-fund .fund-pension .section-visual .img-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 51.1%;
  height: 100%;
}
.page-fund .fund-pension .section-visual .img-wrap img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 1280px) {
  .page-fund .fund-pension .section-visual .txt-wrap br {
    display: none;
  }
}
@media (max-width: 1024px) {
  .page-fund .fund-pension .section-visual {
    padding-top: 0;
    padding-bottom: 0;
    height: auto;
  }
  .page-fund .fund-pension .section-visual .inner {
    display: flex;
    flex-direction: column;
  }
  .page-fund .fund-pension .section-visual .txt-wrap {
    position: relative;
    padding: 4rem 0 4.6rem;
    width: 100%;
  }
  .page-fund .fund-pension .section-visual .img-wrap {
    overflow: hidden;
    position: relative;
    order: -1;
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    width: calc(100% + var(--hwf-content-padding-x) * 2);
    height: 60rem;
  }
  .page-fund .fund-pension .section-visual .img-wrap img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-pension .section-visual .txt-wrap .sub-tit {
    margin-bottom: 4.8rem;
    font-size: 1.6rem;
  }
  .page-fund .fund-pension .section-visual .txt-wrap .tit {
    font-size: 4rem;
  }
  .page-fund .fund-pension .section-visual .txt-wrap .desc {
    font-size: 1.8rem;
  }
  .page-fund .fund-pension .section-visual .txt-wrap::after {
    margin-top: 2.4rem;
  }
  .page-fund .fund-pension .section-visual .img-wrap {
    height: 27.2rem;
  }
}
.page-fund .fund-pension .section-detail {
  position: relative;
}
.page-fund .fund-pension .section-detail .img-wrap {
  margin: 0 auto;
}
.page-fund .fund-pension .section-detail .img-wrap img {
  width: 100%;
}
@media (max-width: 1024px) {
  .page-fund .fund-pension .section-detail .group-flex-wrap {
    flex-direction: column;
  }
}
.page-fund .fund-pension.personal .img-intro-01 {
  margin: 0 auto;
  max-width: 46.6rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.personal .img-intro-01 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.personal .img-intro-02 {
  margin: 0 auto;
  max-width: 77rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.personal .img-intro-02 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.personal .img-benefit {
  margin: 0 auto;
  max-width: 70rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.personal .img-benefit {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.personal .img-feature {
  margin: 0 auto;
  max-width: 60rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.personal .img-feature {
    max-width: 37.5rem;
  }
}
.page-fund .fund-pension.retire .check-point-wrap {
  gap: 6rem;
}
.page-fund .fund-pension.retire .check-point-wrap .img-wrap {
  flex-shrink: 0;
  width: 59.8%;
}
.page-fund .fund-pension.retire .check-point-wrap .txt-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.4rem;
}
.page-fund .fund-pension.retire .check-point-wrap .txt-wrap .txt {
  color: var(--hwf-color-text-strong);
  font-size: 2rem;
  font-weight: 500;
}
.page-fund .fund-pension.retire .check-point-wrap .txt-wrap .check-point .badge {
  margin-bottom: 1.6rem;
}
@media (max-width: 1024px) {
  .page-fund .fund-pension.retire .check-point-wrap .img-wrap {
    width: 100%;
  }
}
.page-fund .fund-pension.retire #strategy .invest-wrap {
  justify-content: space-around;
}
.page-fund .fund-pension.retire #strategy .invest-wrap > .img-wrap {
  margin: 0;
  width: 39%;
}
.page-fund .fund-pension.retire #strategy .invest-wrap .txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  width: 38.5%;
}
.page-fund .fund-pension.retire #strategy .group-flex-wrap {
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .page-fund .fund-pension.retire #strategy .invest-wrap {
    gap: 2.4rem;
  }
  .page-fund .fund-pension.retire #strategy .invest-wrap > .img-wrap {
    width: 100%;
  }
  .page-fund .fund-pension.retire #strategy .invest-wrap .txt-wrap {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire #strategy .group-wrap:not(.spacing-lg) {
    gap: 4rem;
  }
}
.page-fund .fund-pension.retire .img-intro-01 {
  margin: 0 auto;
  max-width: 74.5rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-intro-01 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.retire .img-intro-02 {
  margin: 0 auto;
  max-width: 66rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-intro-02 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.retire .img-intro-03 {
  margin: 0 auto;
  max-width: 114rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-intro-03 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.retire .img-intro-04 {
  margin: 0 auto;
  max-width: 114rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-intro-04 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.retire .img-intro-05 {
  margin: 0 auto;
  max-width: 81.7rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-intro-05 {
    max-width: 34.4rem;
  }
}
.page-fund .fund-pension.retire .img-feature {
  margin: 0 auto;
  max-width: 67rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-feature {
    max-width: 34.4rem;
  }
}
.page-fund .fund-pension.retire .img-strategy-01 {
  margin: 0 auto;
  max-width: 30.3rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-strategy-01 {
    max-width: 29.5rem;
  }
}
.page-fund .fund-pension.retire .img-strategy-02 {
  margin: 0 auto;
  max-width: 63rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-strategy-02 {
    max-width: 30.3rem;
  }
}
.page-fund .fund-pension.retire .img-strategy-03 {
  margin: 0 auto;
  max-width: 106rem;
}
@media (max-width: 1024px) {
  .page-fund .fund-pension.retire .img-strategy-03 {
    max-width: 40rem;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-strategy-03 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.retire .img-strategy-04 {
  margin: 0 auto;
  max-width: 40.2rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-strategy-04 {
    max-width: 29.5rem;
  }
}
.page-fund .fund-pension.retire .img-strategy-05 {
  margin: 0 auto;
  max-width: 42rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.retire .img-strategy-05 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.tdf .img-intro {
  margin: 0 auto;
  max-width: 107rem;
}
@media (max-width: 1024px) {
  .page-fund .fund-pension.tdf .img-intro {
    max-width: 50rem;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-pension.tdf .img-intro {
    max-width: 31.6rem;
  }
}
.page-fund .fund-pension.tdf .img-way {
  margin: 0 auto;
  max-width: 94.2rem;
}
@media (max-width: 1024px) {
  .page-fund .fund-pension.tdf .img-way {
    max-width: 50rem;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-pension.tdf .img-way {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.tdf .img-point-passive-01 {
  margin: 0 auto;
  max-width: 107.6rem;
}
@media (max-width: 1024px) {
  .page-fund .fund-pension.tdf .img-point-passive-01 {
    max-width: 50rem;
  }
}
@media (max-width: 640px) {
  .page-fund .fund-pension.tdf .img-point-passive-01 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.tdf .img-point-passive-02 {
  margin: 0 auto;
  max-width: 114rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.tdf .img-point-passive-02 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.tdf .img-point-discriminate-01 {
  margin: 0 auto;
  max-width: 114rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.tdf .img-point-discriminate-01 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.tdf .img-point-discriminate-02 {
  margin: 0 auto;
  max-width: 46.6rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.tdf .img-point-discriminate-02 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.tdf .img-point-discriminate-03 {
  margin: 0 auto;
  max-width: 114rem;
}
@media (max-width: 640px) {
  .page-fund .fund-pension.tdf .img-point-discriminate-03 {
    max-width: 34.3rem;
  }
}
.page-fund .fund-pension.tdf #point_invest .gray-box-wrap .gray-box {
  padding-bottom: 0;
}
.page-fund .fund-pension.tdf #point_invest .gray-box-wrap .gray-box .white-box {
  height: 100%;
}
.page-fund #mobileDetailSearchBottomSheet .accordion.list .accordion-item.active .btn-accordion::after {
  background-color: #272626;
}
.page-fund #mobileDetailSearchBottomSheet .accordion.list .accordion-item.active .btn-accordion .tit {
  font-size: 1.8rem;
}
.tbl-wrap.fund-list-wrap .tbl {
  min-width: 118rem;
  border-collapse: separate;
  border-spacing: 0;
}
.tbl-wrap.fund-list-wrap .tbl::before {
  display: none;
}
.tbl-wrap.fund-list-wrap thead {
  border-radius: 0.3rem;
}
.tbl-wrap.fund-list-wrap thead tr:first-child th {
  border-right: 0;
}
.tbl-wrap.fund-list-wrap thead tr:first-child th:first-child {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  border-left: 0.1rem solid #e6e5e5;
}
.tbl-wrap.fund-list-wrap thead tr:first-child th:last-child {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  border-right: 0.1rem solid #e6e5e5;
}
.tbl-wrap.fund-list-wrap thead tr:first-child th {
  border-top: 0.1rem solid #e6e5e5;
}
.tbl-wrap.fund-list-wrap thead tr:first-child th[rowspan="2"] {
  border-bottom: 0.1rem solid #e6e5e5;
}
.tbl-wrap.fund-list-wrap thead tr:nth-child(2) th:not([rowspan="2"]) {
  border-bottom: 0.1rem solid #e6e5e5;
}
.tbl-wrap.fund-list-wrap thead tr:nth-child(2) th:not([rowspan="2"])::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(100% - 3.2rem);
  height: 0.1rem;
  background-color: #e6e5e5;
}
.tbl-wrap.fund-list-wrap thead tr:nth-child(2) th:not([rowspan="2"])::after {
  top: 0;
}
.tbl-wrap.fund-list-wrap thead th {
  position: relative;
  color: var(--hwf-color-text-subtle);
  font-weight: 400;
  background-color: #fafafa;
}
.tbl-wrap.fund-list-wrap thead th:last-child[rowspan="2"]::after {
  display: none;
}
.tbl-wrap.fund-list-wrap thead th[rowspan="2"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 0.1rem;
  height: calc(100% - 1.6rem);
  background-color: #e6e5e5;
}
.tbl-wrap.fund-list-wrap thead th:not([rowspan="2"])::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 0.1rem;
  height: calc(100% - 0.8rem);
  background-color: #e6e5e5;
}
.tbl-wrap.fund-list-wrap tbody td {
  position: relative;
  padding: 2.4rem 0.8rem;
  height: -moz-fit-content;
  height: fit-content;
}
.tbl-wrap.fund-list-wrap tbody td .col {
  display: flex;
  flex-direction: column;
}
.tbl-wrap.fund-list-wrap tbody td .col span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.8rem;
  min-height: 5.6rem;
  border-bottom: 0.1rem solid #e6e5e5;
}
.tbl-wrap.fund-list-wrap tbody td .col span:last-child {
  border-bottom: 0;
}
.tbl-wrap.fund-list-wrap tbody td .fund-price span {
  justify-content: flex-end;
}
.tbl-wrap.fund-list-wrap .fund-name {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.tbl-wrap.fund-list-wrap .fund-name .txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: left;
}
.tbl-wrap.fund-list-wrap .fund-name .tit {
  color: var(--hwf-color-text-strong);
  font-size: 1.8rem;
  font-weight: 600;
}
.tbl-wrap.fund-list-wrap .fund-name .desc {
  color: var(--hwf-color-text-subtle);
  font-size: 1.6rem;
}
.tbl-wrap.fund-list-wrap .fund-chart .chart-area {
  position: relative;
  width: 100%;
}
.tbl-wrap.fund-list-wrap .fund-chart .chart-area::before {
  content: "";
  display: block;
  padding-top: 50%;
}
.tbl-wrap.fund-list-wrap .fund-chart .chart-area .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tbl-wrap.fund-list-wrap .fund-type,
.tbl-wrap.fund-list-wrap .fund-price {
  color: var(--hwf-color-text-basic);
}
.tbl-wrap.fund-list-wrap .fund-link {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.tbl-wrap.fund-list-wrap .fund-link::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-right.svg);
  mask-image: url(/assets/images/icon/ico-arrow-right.svg);
  background-color: currentColor;
}
.board-con {
  --board-con-gap: 2.4rem;
  --board-search-top: 1.6rem;
  --board-btn-wrap: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--board-con-gap);
}
.board-con .board-search {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.board-con .board-search .total {
  color: var(--hwf-color-text-subtler);
  font-size: 1.6rem;
}
.board-con .board-search .input {
  width: 36rem;
}
.board-con .board-search:not(:first-child) {
  margin-top: var(--board-search-top);
}
.board-con .board-list-wrap .num {
  flex-shrink: 0;
  width: 12.3%;
}
.board-con .board-list-wrap .category {
  flex-shrink: 0;
  width: 16.15%;
}
.board-con .board-list-wrap .tit {
  width: 100%;
}
.board-con .board-list-wrap .file {
  flex-shrink: 0;
  width: 9.2%;
}
.board-con .board-list-wrap .date {
  flex-shrink: 0;
  width: 16.15%;
}
.board-con .board-list-wrap .board-thead {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  background-color: #f3f2f1;
}
.board-con .board-list-wrap .board-thead .th {
  padding: 0.95rem 0;
  min-height: 4.2rem;
}
.board-con .board-list-wrap .board-tbody li {
  border-bottom: 0.1rem solid #e7e5e4;
}
.board-con .board-list-wrap .board-tbody li a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hwf-color-text-subtle);
  font-size: 1.8rem;
  text-align: center;
}
.board-con .board-list-wrap .board-tbody li .td {
  min-height: 6.4rem;
  padding: 1.85rem 2.4rem;
}
.board-con .board-list-wrap .board-tbody li .tit {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--hwf-color-text-subtle);
  text-align: left;
}
.board-con .board-list-wrap .board-tbody li .tit strong {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-con .board-list-wrap .board-tbody li .file .icon-file {
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--hwf-color-text-subtle);
}
.board-con .board-list-wrap .board-tbody li .date {
  color: var(--hwf-color-text-subtler);
}
.board-con .board-list-wrap .board-tbody li .badge {
  padding-top: 0.1rem;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 1.3rem;
  vertical-align: middle;
}
.board-con .board-list-wrap .board-tbody li.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.4rem;
  height: 25.6rem;
  color: var(--hwf-color-text-strong);
}
.board-con .board-list-wrap + .btn-wrap {
  margin-top: var(--board-btn-wrap);
}
.board-con .accordion {
  margin-top: var(--board-search-top);
}
.board-con .accordion .accordion-item .btn-accordion .category {
  min-width: 6.4rem;
}
.board-con .accordion + .btn-wrap {
  margin-top: var(--board-btn-wrap);
}
.board-con .accordion .accordion-body ul {
  list-style-type: disc;
  list-style-position: inside;
}
.board-con .accordion .accordion-body ul li {
  list-style-type: disc;
  list-style-position: inside;
}
.board-con .accordion .accordion-body ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.board-con .accordion .accordion-body ol li {
  list-style-type: decimal;
  list-style-position: inside;
}
.board-con .accordion .accordion-body em,
.board-con .accordion .accordion-body i,
.board-con .accordion .accordion-body cite {
  font-style: italic;
}
.board-con .accordion .accordion-body strong,
.board-con .accordion .accordion-body b {
  font-weight: 700;
}
.board-con .accordion .accordion-body s,
.board-con .accordion .accordion-body strike {
  text-decoration: line-through;
}
.board-con .accordion .accordion-body sub {
  vertical-align: sub;
}
.board-con .accordion .accordion-body sup {
  vertical-align: super;
}
.board-con .accordion .accordion-body h1,
.board-con .accordion .accordion-body h2,
.board-con .accordion .accordion-body h3,
.board-con .accordion .accordion-body h4,
.board-con .accordion .accordion-body h5,
.board-con .accordion .accordion-body h6 {
  font-size: revert;
  font-weight: 700;
}
.board-con .accordion .accordion-body pre {
  font-family: "Pretendard", sans-serif;
}
.board-con .accordion .accordion-body .marker {
  background-color: #ff0;
}
@media (max-width: 1024px) {
  .board-con .board-list-wrap .board-thead {
    display: none;
  }
  .board-con .board-list-wrap .board-tbody {
    --board-file-icon-size: 2.4rem;
    --board-padding-right: 1.6rem;
    --board-gap-txt-file: 1.6rem;
  }
  .board-con .board-list-wrap .board-tbody li a {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem calc(var(--board-padding-right) + var(--board-file-icon-size) + var(--board-gap-txt-file)) 2rem 0;
    text-align: left;
  }
  .board-con .board-list-wrap .board-tbody li .td {
    padding: 0;
    width: 100%;
    min-height: auto;
  }
  .board-con .board-list-wrap .board-tbody li .num {
    display: none;
  }
  .board-con .board-list-wrap .board-tbody li .category {
    font-size: 1.6rem;
  }
  .board-con .board-list-wrap .board-tbody li .tit {
    font-size: 1.8rem;
    color: var(--hwf-color-text-strong);
  }
  .board-con .board-list-wrap .board-tbody li .tit strong {
    font-weight: 500;
  }
  .board-con .board-list-wrap .board-tbody li .file {
    position: absolute;
    top: 50%;
    right: var(--board-padding-right);
    transform: translateY(-50%);
    width: var(--board-file-icon-size);
    height: var(--board-file-icon-size);
  }
  .board-con .board-list-wrap .board-tbody li .date {
    margin-top: 0.4rem;
    font-size: 1.4rem;
  }
}
@media (max-width: 640px) {
  .board-con {
    --board-con-gap: 1.6rem;
    --board-search-top: 0.8rem;
    --board-btn-wrap: 2.4rem;
  }
  .board-con .board-search {
    flex-direction: column;
    gap: 2.4rem;
  }
  .board-con .board-search .total {
    order: 1;
    align-self: self-start;
  }
  .board-con .board-search .input {
    width: 100%;
  }
}
.board-detail {
  --board-detail-cont-gap: 4rem;
  --board-detail-btn-gap: 4rem;
  --board-detail-nav-gap: 2rem;
  --board-detail-nav-padding: 4rem;
  --board-detail-nav-padding-x: calc(var(--board-detail-nav-padding) + var(--board-detail-nav-icon-size) + 1.6rem);
  --board-detail-nav-icon-size: 2.4rem;
  --board-detail-file-btn-padding: 2.4rem 4rem;
}
.board-detail .board-detail-top {
  padding-bottom: var(--board-detail-cont-gap);
}
.board-detail .board-detail-top .tit {
  font-size: 4.8rem;
  font-weight: 700;
  word-break: keep-all;
}
.board-detail .board-detail-top .date {
  margin-top: 2.4rem;
  color: var(--hwf-color-text-subtler);
  font-size: 1.8rem;
}
.board-detail .board-detail-con {
  padding: var(--board-detail-cont-gap) 0;
  min-height: 36rem;
  overflow-x: auto;
}
.board-detail .board-detail-con img {
  width: 100%;
}
.board-detail .board-detail-con img[alt*="다운로드"] {
  width: auto;
}
.board-detail .board-detail-con ul {
  list-style-type: disc;
  list-style-position: inside;
}
.board-detail .board-detail-con ul li {
  list-style-type: disc;
  list-style-position: inside;
}
.board-detail .board-detail-con ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.board-detail .board-detail-con ol li {
  list-style-type: decimal;
  list-style-position: inside;
}
.board-detail .board-detail-con em,
.board-detail .board-detail-con i,
.board-detail .board-detail-con cite {
  font-style: italic;
}
.board-detail .board-detail-con strong,
.board-detail .board-detail-con b {
  font-weight: 700;
}
.board-detail .board-detail-con s,
.board-detail .board-detail-con strike {
  text-decoration: line-through;
}
.board-detail .board-detail-con sub {
  vertical-align: sub;
}
.board-detail .board-detail-con sup {
  vertical-align: super;
}
.board-detail .board-detail-con h1,
.board-detail .board-detail-con h2,
.board-detail .board-detail-con h3,
.board-detail .board-detail-con h4,
.board-detail .board-detail-con h5,
.board-detail .board-detail-con h6 {
  font-size: revert;
  font-weight: 700;
}
.board-detail .board-detail-con pre {
  font-family: "Pretendard", sans-serif;
}
.board-detail .board-detail-con .marker {
  background-color: #ff0;
}
.board-detail .board-detail-file {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-bottom: var(--board-detail-cont-gap);
  border-bottom: 0.1rem solid #e6e5e5;
}
.board-detail .board-detail-file .btn-file {
  display: flex;
  align-items: center;
  padding: var(--board-detail-file-btn-padding);
  height: auto;
  border: 0;
  color: var(--hwf-color-text-basic);
  border-radius: 0.2rem;
}
.board-detail .board-detail-file .btn-file span {
  flex: 1;
  white-space: normal;
  width: calc(100% - 6.8rem);
}
.board-detail .board-detail-file .btn-file .icon-file {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
}
.board-detail .board-detail-file .btn-file .icon-download {
  flex-shrink: 0;
}
.board-detail .board-detail-file .btn-file .svg-icon {
  background-color: currentColor;
}
.board-detail .board-detail-file .btn-file[disabled] {
  background-color: var(--hwf-color-button-disabled-fill);
  border-color: var(--hwf-color-button-disabled-border);
  color: var(--hwf-color-button-text-disabled-on);
  pointer-events: none;
}
.board-detail .board-detail-file .btn-file[disabled]:hover {
  background-color: var(--hwf-color-button-disabled-fill);
  border-color: var(--hwf-color-button-disabled-border);
  color: var(--hwf-color-button-text-disabled-on);
}
.board-detail .board-detail-nav {
  display: flex;
  gap: var(--board-detail-nav-gap);
  margin-top: var(--board-detail-btn-gap);
}
.board-detail .board-detail-nav li {
  position: relative;
  flex: 1;
}
.board-detail .board-detail-nav li a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--board-detail-nav-padding);
  border-radius: 0.2rem;
  border: 0.1rem solid #e7e5e4;
  background: #fff;
}
.board-detail .board-detail-nav li a::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: var(--board-detail-nav-icon-size);
  height: var(--board-detail-nav-icon-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-arrow-right.svg);
  mask-image: url(/assets/images/icon/ico-arrow-right.svg);
  background-color: currentColor;
}
.board-detail .board-detail-nav li a:hover {
  background-color: #f3f2f1;
}
.board-detail .board-detail-nav li a[disabled] {
  pointer-events: none;
}
.board-detail .board-detail-nav li a[disabled]:hover {
  background-color: rgba(0, 0, 0, 0);
}
.board-detail .board-detail-nav li a[disabled]::before {
  background-color: var(--hwf-color-gray-30);
}
.board-detail .board-detail-nav li a[disabled] .txt,
.board-detail .board-detail-nav li a[disabled] .tit {
  color: var(--hwf-color-text-subtler);
  font-weight: 400;
}
.board-detail .board-detail-nav li.prev a {
  padding-left: var(--board-detail-nav-padding-x);
}
.board-detail .board-detail-nav li.prev a::before {
  left: var(--board-detail-nav-padding);
  transform: translateY(-50%) rotate(180deg);
}
.board-detail .board-detail-nav li.next a {
  text-align: right;
  padding-right: var(--board-detail-nav-padding-x);
}
.board-detail .board-detail-nav li.next a::before {
  right: var(--board-detail-nav-padding);
}
.board-detail .board-detail-nav .txt {
  display: none;
}
.board-detail .board-detail-nav .tit {
  font-weight: 600;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 100%;
}
.board-detail .board-detail-nav .desc {
  margin-top: 0.8rem;
  font-size: 1.6rem;
  color: var(--hwf-color-text-subtler);
}
.board-detail > .btn-wrap {
  margin-top: var(--board-detail-btn-gap);
}
.board-detail > .btn-wrap .btn {
  min-width: 11.2rem;
}
@media (max-width: 1024px) {
  .board-detail {
    --board-detail-nav-padding: 1.6rem;
  }
  .board-detail .board-detail-nav li a {
    padding: var(--board-detail-nav-padding);
  }
  .board-detail .board-detail-nav .txt {
    display: block;
  }
  .board-detail .board-detail-nav .tit,
  .board-detail .board-detail-nav .desc {
    display: none;
  }
}
@media (max-width: 640px) {
  .board-detail {
    --board-detail-cont-gap: 2.4rem;
    --board-detail-file-btn-padding: 2rem 1.6rem;
    --board-detail-nav-gap: 0.8rem;
  }
  .board-detail .board-detail-top .tit {
    font-size: 3.2rem;
  }
  .board-detail .board-detail-top .date {
    margin-top: 1.6rem;
  }
}
.business-news .board-con .board-list-wrap .category {
  width: 22%;
}
.page-policy .section-tit-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4rem 0.8rem;
}
.page-policy .section-tit-wrap .form-select {
  max-width: 100%;
  margin-left: auto;
  min-width: 33rem;
}
@media (max-width: 640px) {
  .page-policy .section-tit-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-policy .section-tit-wrap .form-select {
    width: 100%;
  }
}
.terms-group {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.terms-group + .terms-group {
  margin-top: 6.4rem;
}
.terms-group .terms-sub-group {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.terms-group .terms-tit {
  color: var(--hwf-color-text-strong);
  font-size: 2.8rem;
  font-weight: 700;
}
.terms-group .terms-txt-tit {
  color: var(--hwf-color-text-strong);
  font-size: 1.8rem;
  font-weight: 500;
}
.terms-group .terms-txt {
  font-size: 1.8rem;
}
.terms-group .terms-sub-tit {
  color: var(--hwf-color-text-strong);
  font-size: 2.1rem;
  font-weight: 600;
}
.terms-group .terms-form {
  --terms-form-gap: 2.4rem;
}
.terms-group .terms-form .form-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--terms-form-gap) 2rem;
  margin-top: var(--terms-form-gap);
  padding-top: var(--terms-form-gap);
  border-top: 0.1rem solid #e6e5e5;
}
.terms-group .terms-form .form-wrap .full {
  grid-column: -1/1;
}
.terms-group .terms-form .agree-chk-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: var(--terms-form-gap);
  padding: 2.4rem;
  background-color: #f3f2f1;
}
.terms-group .terms-form .btn-wrap {
  margin-top: 4rem;
}
.terms-group .terms-txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.terms-group .txt-appendix {
  color: #f94339;
  font-size: 1.6rem;
}
.terms-group .note-list .terms-txt {
  margin-top: 0.8rem;
}
.terms-group .note-list .tbl-wrap {
  margin-top: 2.4rem;
}
.terms-group .note-list .white-box {
  margin-top: 2.4rem;
}
.terms-group .tbl-wrap .note-list.depth-1 {
  margin-top: 0;
  gap: 0.4rem;
}
.terms-group .white-box {
  --li-list-gap: 4rem;
  display: flex;
  padding: 2.4rem;
  background-color: #fff;
}
.terms-group .white-box > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-right: var(--li-list-gap);
  padding-right: var(--li-list-gap);
  flex: 1;
  border-right: 0.1rem solid #e6e5e5;
}
.terms-group .white-box > li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
@media (max-width: 1024px) {
  .terms-group .white-box {
    --li-list-gap: 2.4rem;
    flex-direction: column;
  }
  .terms-group .white-box > li {
    margin-right: 0;
    padding-right: 0;
    margin-bottom: var(--li-list-gap);
    padding-bottom: var(--li-list-gap);
    border-right: 0;
    border-bottom: 0.1rem solid #e6e5e5;
  }
  .terms-group .white-box > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
}
@media (max-width: 768px) {
  .terms-group .terms-form .form-wrap {
    grid-template-columns: auto;
  }
  .terms-group .terms-form .agree-chk-wrap {
    flex-direction: column;
    gap: 1.6rem;
    align-items: flex-start;
  }
  .terms-group .terms-form .agree-chk-wrap .btn.text {
    margin-left: 3.2rem;
  }
}
@media (max-width: 640px) {
  .terms-group {
    gap: 2.4rem;
  }
  .terms-group + .terms-group {
    margin-top: 4rem;
  }
  .terms-group .terms-sub-group {
    gap: 1.6rem;
  }
  .terms-group .terms-tit {
    font-size: 2.4rem;
  }
  .terms-group .btn:has(.icon-download) {
    justify-content: space-between;
    width: 100%;
  }
}
.control-system-wrap {
  --control-system-li-gap-y: 4rem;
  --control-system-li-gap-x: 2rem;
  --control-system-template-columns: repeat(3, 1fr);
  --control-system-box-list-gap: 4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--control-system-li-gap-y);
}
.control-system-wrap::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.1rem;
  height: 100%;
  background-color: #c3c1c1;
  z-index: -1;
}
.control-system-wrap > li {
  position: relative;
  display: grid;
  grid-template-columns: var(--control-system-template-columns);
  gap: var(--control-system-li-gap-x);
}
.control-system-wrap > li:has(.box.right) {
  position: relative;
}
.control-system-wrap > li:has(.box.right)::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: 50%;
  height: 0.1rem;
  border-bottom: 0.1rem dashed #c3c1c1;
  z-index: -1;
}
.control-system-wrap .box {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
  padding: 2.4rem;
  text-align: center;
  word-break: keep-all;
  border-radius: 0.2rem;
  background-color: #f3f2f1;
}
.control-system-wrap .box.indigo {
  position: relative;
  grid-column: 3/4;
  color: #fff;
  background-color: #02204b;
}
.control-system-wrap .box.indigo .tit {
  color: #fff;
}
.control-system-wrap .box.orange {
  color: #fff;
  background-color: #fe5b16;
}
.control-system-wrap .box.orange .tit {
  color: #fff;
}
.control-system-wrap .box.center {
  grid-column: 2/3;
}
.control-system-wrap .box .tit {
  color: var(--hwf-color-text-strong);
  font-size: 2.1rem;
  font-weight: 600;
}
.control-system-wrap .box-list {
  position: relative;
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: var(--control-system-template-columns);
  gap: var(--control-system-li-gap-x);
}
.control-system-wrap .box-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc((100% - var(--control-system-li-gap-x) * 2) / 3 * 2 + var(--control-system-li-gap-x) * 2);
  height: 0.1rem;
  background-color: #c3c1c1;
}
.control-system-wrap .box-list .box {
  position: relative;
  margin-top: var(--control-system-box-list-gap);
  justify-content: flex-start;
  gap: 2.4rem;
}
.control-system-wrap .box-list .box:nth-child(2)::before {
  display: none;
}
.control-system-wrap .box-list .box::before {
  content: "";
  position: absolute;
  top: calc(var(--control-system-box-list-gap) * -1);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 0.1rem;
  height: var(--control-system-box-list-gap);
  background-color: #c3c1c1;
}
.control-system-wrap .box-list .box .note-list {
  text-align: left;
}
@media (max-width: 768px) {
  .control-system-wrap {
    --control-system-li-gap-y: 2.4rem;
    --control-system-li-gap-x: 2.4rem;
    --control-system-template-columns: repeat(2, 1fr);
  }
  .control-system-wrap > li:has(.box.right) {
    display: flex;
  }
  .control-system-wrap > li:has(.box.right) .box.indigo {
    width: calc(50% - 2rem);
    margin-left: auto;
  }
  .control-system-wrap .box.center {
    grid-column: 1/-1;
  }
  .control-system-wrap .box-list {
    grid-template-columns: auto;
  }
  .control-system-wrap .box-list .box {
    margin-top: 0;
  }
  .control-system-wrap .box-list .box::before {
    display: none;
  }
}
.page-search .section-tit-wrap {
  position: relative;
  z-index: 5;
}
@media (max-width: 640px) {
  .page-search .section-tit-wrap .desc {
    margin-top: 1.6rem;
  }
}
.page-search .section-search {
  position: relative;
  padding-top: 8rem;
}
.page-search .section-search::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 45.2rem;
  background: linear-gradient(0deg, rgba(243, 242, 241, 0) 0%, #f3f2f1 100%);
  z-index: -1;
}
@media (max-width: 640px) {
  .page-search .section-search {
    padding-top: 4rem;
  }
}
.page-search .section-result {
  overflow: hidden;
}
.page-search .section-result .result-txt {
  margin: 8rem 0;
  text-align: center;
  color: var(--hwf-color-text-strong);
  font-size: 2.8rem;
  font-weight: 600;
  word-break: keep-all;
}
.page-search .section-result .result-txt strong {
  color: var(--hwf-color-text-primary);
  font-weight: 600;
}
.page-search .section-result .no-result {
  --no-result-gap: 2.4rem;
  --no-result-padding-y: 20rem;
  --no-result-icon-size: 5.6rem;
  --no-result-font-size: 2.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--no-result-gap);
  padding: var(--no-result-padding-y) 0;
}
.page-search .section-result .no-result::before {
  content: "";
  display: block;
  width: var(--no-result-icon-size);
  height: var(--no-result-icon-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-no-result.svg);
  mask-image: url(/assets/images/icon/ico-no-result.svg);
  background-color: var(--hwf-color-gray-30);
}
.page-search .section-result .no-result .txt {
  font-size: var(--no-result-font-size);
}
.page-search .section-result .tab-conts-wrap {
  --tab-cont-wrap-margin-top: 8rem;
  margin-top: var(--tab-cont-wrap-margin-top);
}
.page-search .section-result .result-group {
  --result-group-tit-count-gap: 4rem;
  --result-group-tit-count-font-size: 4rem;
  --result-group-margin-top: 12rem;
  --result-group-card-list-padding: 4rem;
}
.page-search .section-result .result-group:last-child {
  margin-bottom: 12rem;
}
.page-search .section-result .result-group .tit-xlg {
  margin-bottom: var(--result-group-tit-count-gap);
}
.page-search .section-result .result-group .tit-xlg .count {
  color: var(--hwf-color-text-primary);
  font-size: var(--result-group-tit-count-font-size);
  font-weight: 500;
}
.page-search .section-result .result-group + .result-group {
  margin-top: var(--result-group-margin-top);
}
@media (max-width: 640px) {
  .page-search .section-result .result-txt {
    margin: 4rem 0;
    font-size: 1.8rem;
    font-weight: 400;
  }
  .page-search .section-result .no-result {
    --no-result-gap: 1.6rem;
    --no-result-padding-y: 10rem;
    --no-result-icon-size: 4rem;
    --no-result-font-size: 1.8rem;
  }
  .page-search .section-result .tab-conts-wrap {
    --tab-cont-wrap-margin-top: 4rem;
  }
  .page-search .section-result .result-group {
    --result-group-tit-count-gap: 2.4rem;
    --result-group-tit-count-font-size: 2.4rem;
    --result-group-margin-top: 8rem;
  }
  .page-search .section-result .result-group:last-child {
    margin-bottom: 8rem;
  }
}
.page-search .section-trend {
  overflow: hidden;
}
.page-company .tab-conts .cont-group {
  padding: 0;
}
.page-company .grid-list-wrap {
  --grid-list-tit-gap: 2.4rem;
  --grid-list-txt-gap: 4rem;
  --grid-list-li-gap: 4rem;
  counter-reset: list-number;
}
.page-company .grid-list-wrap > li {
  position: relative;
  display: grid;
  grid-template-columns: 36.92% auto;
  gap: var(--grid-list-txt-gap);
  margin-bottom: var(--grid-list-li-gap);
  padding-bottom: var(--grid-list-li-gap);
  counter-increment: list-number;
}
.page-company .grid-list-wrap > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.page-company .grid-list-wrap > li:last-child::after {
  display: none;
}
.page-company .grid-list-wrap > li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  grid-column: -1/1;
  width: 100%;
  height: 0.1rem;
  background-color: #e6e5e5;
}
.page-company .grid-list-wrap > li .tit-wrap .tit {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--hwf-color-text-primary-dark);
  font-size: 2.4rem;
  font-weight: 600;
}
.page-company .grid-list-wrap > li .tit-wrap .tit + .desc {
  margin-top: var(--grid-list-tit-gap);
}
.page-company .grid-list-wrap > li .tit-wrap .tit::before {
  content: "";
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
}
.page-company .grid-list-wrap > li .tit-wrap .tit.num {
  align-items: flex-start;
  color: var(--hwf-color-text-strong);
}
.page-company .grid-list-wrap > li .tit-wrap .tit.num::before {
  content: counter(list-number, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  background-color: #52302e;
}
.page-company .grid-list-wrap > li .txt-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--grid-list-txt-gap);
}
.page-company .grid-list-wrap > li .txt-wrap .tit {
  margin-bottom: var(--grid-list-tit-gap);
  color: var(--hwf-color-text-strong);
  font-size: 2.1rem;
  font-weight: 600;
}
.page-company .grid-list-wrap .icon-welfare-01::before {
  background: #f54500 url(/assets/images/company/ico-welfare-01.png) no-repeat center/2rem 2rem;
}
.page-company .grid-list-wrap .icon-welfare-02::before {
  background: #f54500 url(/assets/images/company/ico-welfare-02.png) no-repeat center/2rem 2rem;
}
.page-company .grid-list-wrap .icon-welfare-03::before {
  background: #f54500 url(/assets/images/company/ico-welfare-03.png) no-repeat center/2rem 2rem;
}
.page-company .grid-list-wrap .icon-welfare-04::before {
  background: #f54500 url(/assets/images/company/ico-welfare-04.png) no-repeat center/2rem 2rem;
}
@media (max-width: 768px) {
  .page-company .grid-list-wrap > li {
    grid-template-columns: auto;
  }
}
@media (max-width: 640px) {
  .page-company .grid-list-wrap {
    --grid-list-tit-gap: 1.6rem;
    --grid-list-txt-gap: 1.6rem;
    --grid-list-li-gap: 3.2rem;
  }
  .page-company .grid-list-wrap > li .tit-wrap .tit {
    font-size: 2.1rem;
  }
  .page-company .grid-list-wrap:has(> li .tit-wrap .desc) {
    --grid-list-txt-gap: 2.4rem;
  }
}
.page-company:has(.company-main) .header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  border-bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(4rem);
}
.page-company:has(.company-main) .header:has(.modal.in),
.page-company:has(.company-main) .header:has(.modal.show),
.page-company:has(.company-main) .header:has(.modal[style*="display: block"]) {
  transform: none !important;
  backdrop-filter: none !important;
}
.page-company:has(.company-main) .header .logo {
  background: url(/assets/images/common/logo-w.svg) no-repeat center/cover;
}
.page-company:has(.company-main) .header .logo-plusetf a {
  background: url(/assets/images/common/logo-plus-etf-w.svg) no-repeat center/contain;
}
.page-company:has(.company-main) .header .logo-pine a {
  background: url(/assets/images/common/logo-pine-w.svg) no-repeat center/contain;
}
.page-company:has(.company-main) .header > .header-top {
  background-color: rgba(0, 0, 0, 0.6);
  border-bottom: 0;
}
.page-company:has(.company-main) .header > .header-top .link li::after {
  background-color: #d7d5d5;
}
.page-company:has(.company-main) .header > .header-con {
  background-color: rgba(0, 0, 0, 0.3);
}
.page-company:has(.company-main) .header > .header-con .nav .gnb-list {
  color: #fff;
}
.page-company:has(.company-main) .header > .header-con .nav .gnb-list .gnb-item.active {
  color: #ffa57f;
}
.page-company:has(.company-main) .header > .header-con .nav .gnb-list .gnb-item.focus {
  color: #ffa57f;
}
.page-company:has(.company-main) .header > .header-con .nav .gnb-list .submenu {
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
  box-shadow:
    0 4rem 6rem 0 rgba(0, 0, 0, 0.08),
    0 16px 16px 0 rgba(0, 0, 0, 0.06);
}
.page-company:has(.company-main) .header > .header-con .nav .gnb-list .submenu .submenu-link {
  color: #fff;
}
.page-company:has(.company-main) .header > .header-con .nav .gnb-list .submenu .submenu-link:hover,
.page-company:has(.company-main) .header > .header-con .nav .gnb-list .submenu .submenu-link:active {
  background: rgba(0, 0, 0, 0.5);
}
.page-company:has(.company-main) .header > .header-con .util .lang .form-select.text .select-button::after {
  background: #fff;
}
.page-company:has(.company-main) .header > .header-con .util .lang .form-select.text .select-button .select-value {
  color: #fff;
}
.page-company:has(.company-main) .header > .header-con .util .lang .form-select.text .select-listbox {
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
}
.page-company:has(.company-main) .header > .header-con .util .lang .form-select.text .select-listbox .select-option {
  color: #fff;
}
.page-company:has(.company-main) .header > .header-con .util .lang .form-select.text .select-listbox .select-option:hover,
.page-company:has(.company-main) .header > .header-con .util .lang .form-select.text .select-listbox .select-option:active {
  color: var(--hwf-color-text-primary);
  background: rgba(0, 0, 0, 0.5);
}
.page-company:has(.company-main) .header > .header-con .util .btn.icon .svg-icon {
  background-color: #fff;
}
.page-company:has(.company-main) .inner {
  max-width: var(--hwf-content-wrap-width-large);
}
.page-company:has(.company-main) .txt-gradient {
  margin: 0 auto;
  background: linear-gradient(270deg, rgba(216, 58, 0, 0.9) 0.02%, #eb6c31 15.02%, #eec3b0 40%, #fff 89.98%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.page-company:has(.company-main) .company-tit-wrap {
  text-align: center;
}
.page-company:has(.company-main) .company-tit-wrap .sub-desc {
  margin-bottom: 8rem;
  font-family: "Trust2ATRIAL", sans-serif;
  font-size: 3.2rem;
  text-transform: capitalize;
  word-break: keep-all;
}
.page-company:has(.company-main) .company-tit-wrap .tit {
  font-size: 9.6rem;
  font-weight: 600;
  word-break: keep-all;
}
.page-company:has(.company-main) .company-tit-wrap .tit + .sub-tit {
  margin-top: 1.6rem;
}
.page-company:has(.company-main) .company-tit-wrap .sub-tit {
  font-family: "Trust2ATRIAL", sans-serif;
  font-size: 6.4rem;
  text-transform: capitalize;
  word-break: keep-all;
}
.page-company:has(.company-main) .company-tit-wrap .desc {
  font-size: 6.4rem;
  font-weight: 600;
  word-break: keep-all;
}
.page-company:has(.company-main) .company-tit-wrap .desc-small {
  font-size: 4.8rem;
  font-weight: 500;
  word-break: keep-all;
}
.page-company:has(.company-main) .company-tit-wrap .tit.txt-en {
  font-weight: 400;
  text-transform: capitalize;
}
.page-company:has(.company-main) .company-tit-wrap.medium .tit {
  font-size: 6.4rem;
}
.page-company:has(.company-main) .company-tit-wrap.medium .tit + .sub-tit {
  margin-top: 4rem;
}
.page-company:has(.company-main) .company-tit-wrap.medium .sub-tit {
  font-size: 3.2rem;
}
@media (max-width: 640px) {
  .page-company:has(.company-main) .company-tit-wrap .sub-desc {
    margin-bottom: 6rem;
    font-size: 2.1rem;
  }
  .page-company:has(.company-main) .company-tit-wrap .tit {
    font-size: 4.8rem;
  }
  .page-company:has(.company-main) .company-tit-wrap .sub-tit {
    font-size: 3.2rem;
    word-break: keep-all;
  }
  .page-company:has(.company-main) .company-tit-wrap .sub-tit br {
    display: none;
  }
  .page-company:has(.company-main) .company-tit-wrap .desc {
    font-size: 3.2rem;
  }
  .page-company:has(.company-main) .company-tit-wrap .desc-small {
    font-size: 3.2rem;
  }
  .page-company:has(.company-main) .company-tit-wrap.medium .tit {
    font-size: 3.2rem;
  }
  .page-company:has(.company-main) .company-tit-wrap.medium .sub-tit {
    font-size: 2.1rem;
  }
}
.page-company .company-main section {
  min-height: 108rem;
}
@media (max-width: 640px) {
  .page-company .company-main section {
    min-height: 81.2rem;
  }
}
.page-company .company-main .img-wrap:has(.img-list) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.page-company .company-main .img-wrap:has(.img-list) .img-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s;
}
.page-company .company-main .img-wrap:has(.img-list) .img-list li:first-child {
  opacity: 1;
}
.page-company .company-main .img-wrap:has(.img-list) .img-list li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.page-company .company-main .section-vision {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #fff url(/assets/images/company/main-vision-bg.png) no-repeat center/cover;
  text-transform: capitalize;
}
.page-company .company-main .section-vision .inner {
  position: relative;
  z-index: 1;
}
.page-company .company-main .section-vision .dimmed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 0;
}
.page-company .company-main .section-vision .txt-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, #fff 0%, #eec3b0 15%, #eb6c31 35%, rgba(216, 58, 0, 0.9) 50%, #ffffff 50%, #ffffff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
}
@media (max-width: 640px) {
  .page-company .company-main .section-vision {
    background: #fff url(/assets/images/company/mo-main-vision-bg.png) no-repeat center/cover;
  }
}
.page-company .company-main .section-mission {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: url(/assets/images/company/main-mission-bg-01.png) no-repeat center/cover;
}
.page-company .company-main .section-slogan {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-company .company-main .section-slogan .txt-gradient {
  background: var(--hwf-color-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.page-company .company-main .section-slogan .deco-tit {
  position: relative;
  left: 50%;
  width: 100%;
  max-width: var(--hwf-content-wrap-width-large);
  padding: 0 var(--hwf-content-padding-x);
  font-family: "Trust2ATRIAL", sans-serif;
  font-size: 9.6rem;
  line-height: 1.2;
  text-transform: capitalize;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
}
@media (max-width: 1024px) {
  .page-company .company-main .section-slogan .deco-tit {
    font-size: 12rem;
  }
}
@media (max-width: 640px) {
  .page-company .company-main .section-slogan .deco-tit {
    font-size: 6.4rem;
  }
}
.page-company .company-main .section-value {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: url(/assets/images/company/main-value-bg-01.png) no-repeat center/cover;
}
.page-company .company-main .section-value .value-list {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.page-company .company-main .section-value .value-list li {
  flex: 1;
}
.page-company .company-main .section-value .value-list .tit {
  margin-bottom: 1.6rem;
  font-size: 6.4rem;
  font-weight: 600;
}
.page-company .company-main .section-value .value-list .desc {
  margin: 0 auto;
  font-family: "Trust2ATRIAL", sans-serif;
  font-size: 3.2rem;
  text-transform: capitalize;
}
@media (max-width: 1400px) {
  .page-company .company-main .section-value .value-list {
    flex-direction: column;
    gap: 5.4rem;
  }
}
@media (max-width: 640px) {
  .page-company .company-main .section-value .value-list .tit {
    font-size: 3.2rem;
  }
  .page-company .company-main .section-value .value-list .desc {
    font-size: 2.1rem;
  }
}
.page-company .company-main .section-info {
  display: flex;
  align-items: center;
  padding: 18rem 0;
  background: #04021e url(/assets/images/company/main-info-bg.png) no-repeat center/cover;
}
.page-company .company-main .section-info:has(.txt-wrap dl:only-child) {
  align-items: flex-start;
}
.page-company .company-main .section-info .inner {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}
.page-company .company-main .section-info .company-tit-wrap {
  margin: 0;
  text-align: left;
}
.page-company .company-main .section-info .company-tit-wrap .txt-gradient {
  margin: 0;
}
.page-company .company-main .section-info .txt-wrap {
  width: 42.85%;
}
.page-company .company-main .section-info .txt-wrap dl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  padding: 5rem 0;
}
.page-company .company-main .section-info .txt-wrap dl:first-child {
  padding-top: 0;
}
.page-company .company-main .section-info .txt-wrap dl:last-child {
  padding-bottom: 0;
}
.page-company .company-main .section-info .txt-wrap dl:last-child::after {
  display: none;
}
.page-company .company-main .section-info .txt-wrap dl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.page-company .company-main .section-info .txt-wrap dl:nth-child(2) dd .counter {
  min-width: 1ch;
}
.page-company .company-main .section-info .txt-wrap dl:nth-child(3) dd .counter {
  min-width: 1ch;
}
.page-company .company-main .section-info .txt-wrap dl:only-child {
  padding-bottom: 5rem;
}
.page-company .company-main .section-info .txt-wrap dl:only-child::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.page-company .company-main .section-info .txt-wrap dt {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: #fff;
  font-size: 3.2rem;
  font-weight: 600;
  word-break: keep-all;
}
.page-company .company-main .section-info .txt-wrap dt small {
  font-size: 1.8rem;
  font-weight: 400;
}
.page-company .company-main .section-info .txt-wrap dd {
  position: relative;
  display: flex;
  align-items: baseline;
}
.page-company .company-main .section-info .txt-wrap dd .counter {
  display: inline-block;
  min-width: 2ch;
  font-size: 16rem;
  font-family: "Trust2ATRIAL", sans-serif;
  line-height: 1;
  background: linear-gradient(270deg, #d83a00 0%, #eb6c31 36.54%, #eec3b0 63.46%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.page-company .company-main .section-info .txt-wrap dd .unit {
  color: #fff;
  font-size: 6.4rem;
}
@media (max-width: 1460px) {
  .page-company .company-main .section-info .inner {
    flex-direction: column;
  }
  .page-company .company-main .section-info .txt-wrap {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .page-company .company-main .section-info .txt-wrap dl {
    flex-wrap: wrap;
  }
  .page-company .company-main .section-info .txt-wrap dt {
    width: 100%;
  }
  .page-company .company-main .section-info .txt-wrap dd {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 640px) {
  .page-company .company-main .section-info {
    padding: 8rem 0;
    background: #04021e url(/assets/images/company/mo-main-info-bg.png) no-repeat center/cover;
  }
  .page-company .company-main .section-info .inner {
    gap: 6.4rem;
  }
  .page-company .company-main .section-info .txt-wrap dl {
    gap: 2.4rem;
    padding: 4rem 0;
  }
  .page-company .company-main .section-info .txt-wrap dl:first-child {
    padding-top: 0;
  }
  .page-company .company-main .section-info .txt-wrap dl:only-child {
    padding-bottom: 4rem;
  }
  .page-company .company-main .section-info .txt-wrap dt {
    font-size: 2.4rem;
  }
  .page-company .company-main .section-info .txt-wrap dd .counter {
    font-size: 9.6rem;
  }
  .page-company .company-main .section-info .txt-wrap dd .unit {
    margin-left: 0.8rem;
    font-size: 3.2rem;
  }
}
.page-company .company-main .section-history {
  overflow: hidden;
  padding: 16rem 0 20rem;
}
.page-company .company-main .section-history .message {
  padding-bottom: 20rem;
}
.page-company .company-main .section-history .message .company-tit-wrap .desc {
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, #ff5532 0%, #04021e 50%, #000000 50%, #000000 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
}
.page-company .company-main .section-history .timeline-wrap {
  --history-blur-box-padding-left: calc(28.8rem + 8rem);
  --history-list-padding: 8rem 16rem 8rem 8rem;
  --history-list-desc-gap: 2.4rem;
  --history-list-sub-desc-gap: 1.6rem;
  --history-txt-img-gap: -11.3%;
  display: flex;
  margin-bottom: 20rem;
}
.page-company .company-main .section-history .timeline-wrap:last-child {
  margin-bottom: 0;
}
.page-company .company-main .section-history .timeline-wrap.reverse {
  --history-list-padding: 8rem 8rem 8rem 16rem;
  --history-txt-img-gap: -11%;
}
.page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap {
  margin-left: var(--history-txt-img-gap);
  margin-right: 0;
}
.page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap::after {
  left: auto;
  right: var(--history-blur-box-padding-left);
}
.page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap .company-tit-wrap {
  text-align: right;
}
.page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap .blur-box {
  padding: 0;
  gap: 0.2rem;
}
.page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap .blur-box::before {
  left: 0;
}
.page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap .blur-box .timeline-list {
  --scroll-bg-color: #fff;
}
.page-company .company-main .section-history .timeline-wrap.reverse .img-wrap {
  order: -1;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap {
  position: relative;
  z-index: 1;
  margin-top: 15rem;
  margin-right: var(--history-txt-img-gap);
  width: 100%;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--history-blur-box-padding-left);
  width: 0.2rem;
  height: 100%;
  background: linear-gradient(180deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .company-tit-wrap {
  text-align: left;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box {
  display: flex;
  position: relative;
  padding-left: var(--history-blur-box-padding-left);
  backdrop-filter: blur(2rem);
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 100vw;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%);
  z-index: -1;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar {
  padding-top: 8rem;
  padding-left: 8rem;
  flex-shrink: 0;
  min-width: var(--history-blur-box-padding-left);
  order: 1;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar ul {
  overflow-x: auto;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar li {
  color: var(--hwf-color-text-subtler);
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar li.active {
  color: var(--hwf-color-text-strong);
  border-bottom: 0.2rem solid #fe5b16;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar li.active a::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #f54500;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar li a {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding: 1.4rem 4rem;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list {
  --scroll-bg-color: #f3f2f1;
  --scroll-bar-color: #fe5b16;
  position: relative;
  overflow-y: auto;
  padding: var(--history-list-padding);
  height: 72rem;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list::-webkit-scrollbar-track {
  background-color: var(--scroll-bg-color);
  border-radius: 0;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-color);
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list > li {
  display: flex;
  gap: var(--history-list-desc-gap);
  padding: 2.4rem 0;
  border-bottom: 0.1rem solid #d7d5d5;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .year {
  flex-shrink: 0;
  min-width: 10rem;
  color: var(--hwf-color-text-strong);
  font-size: 4rem;
  font-weight: 600;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .desc-wrap {
  display: flex;
  gap: 0.8rem;
  padding: 1.6rem 0;
  font-size: 2.1rem;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .desc-wrap .month {
  display: inline-block;
  padding: 0 0.8rem;
  font-weight: 600;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .desc-wrap .desc > p + p {
  margin-top: 1.6rem;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .sub-desc-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--history-list-sub-desc-gap);
  margin-top: var(--history-list-sub-desc-gap);
  font-size: 1.8rem;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .sub-desc-wrap .sub-tit {
  font-weight: 700;
}
.page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .sub-desc-wrap .sub-desc-list {
  display: flex;
  flex-direction: column;
  gap: var(--history-list-sub-desc-gap);
}
.page-company .company-main .section-history .timeline-wrap .img-wrap {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  width: 60rem;
  height: 100%;
}
.page-company .company-main .section-history .timeline-wrap .img-wrap::before {
  content: "";
  display: block;
  padding-top: 75%;
}
.page-company .company-main .section-history .timeline-wrap .img-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 1600px) {
  .page-company .company-main .section-history .timeline-wrap {
    --history-list-padding: 8rem;
  }
  .page-company .company-main .section-history .timeline-wrap.reverse {
    --history-list-padding: 8rem;
  }
}
@media (max-width: 1440px) {
  .page-company .company-main .section-history .timeline-wrap {
    --history-txt-img-gap: -30%;
  }
  .page-company .company-main .section-history .timeline-wrap.reverse {
    --history-txt-img-gap: -20%;
  }
}
@media (max-width: 1280px) {
  .page-company .company-main .section-history .timeline-wrap {
    --history-blur-box-padding-left: 0;
    flex-direction: column;
  }
  .page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap {
    margin-left: 0;
  }
  .page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap .blur-box {
    flex-direction: column;
  }
  .page-company .company-main .section-history .timeline-wrap.reverse .img-wrap {
    width: 100%;
    max-height: 50rem;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap {
    margin-top: -4rem;
    padding: 6.6rem var(--hwf-content-padding-x);
    backdrop-filter: blur(2rem);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%);
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap::after {
    display: none;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box {
    position: relative;
    padding-left: 0;
    backdrop-filter: none;
    margin-top: 2.4rem;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box::before {
    display: none;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: var(--history-blur-box-padding-left);
    width: 0.2rem;
    height: 100%;
    background: linear-gradient(180deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar {
    padding: 0 var(--hwf-content-padding-x) 1.6rem 0;
    order: -1;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar ul {
    display: flex;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar ul li {
    flex: 1;
    border-bottom: 0.2rem solid #e6e5e5;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar ul li.active {
    border-bottom-color: #fe5b16;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list {
    padding: 0;
    padding-right: var(--hwf-content-padding-x);
    width: calc(100% - 0.2rem);
  }
  .page-company .company-main .section-history .timeline-wrap .img-wrap {
    order: -1;
    width: 100%;
    max-height: 45rem;
  }
}
@media (max-width: 640px) {
  .page-company .company-main .section-history {
    padding: 8rem 0;
  }
  .page-company .company-main .section-history .message {
    padding-bottom: 8rem;
  }
  .page-company .company-main .section-history .timeline-wrap {
    --history-list-desc-gap: 1.6rem;
    --history-list-sub-desc-gap: 1.2rem;
    margin-bottom: 8rem;
  }
  .page-company .company-main .section-history .timeline-wrap.reverse .txt-wrap {
    margin-left: calc(var(--hwf-content-padding-x) * -1);
  }
  .page-company .company-main .section-history .timeline-wrap.reverse .img-wrap {
    width: calc(100% + var(--hwf-content-padding-x) * 2);
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap {
    margin-left: calc(var(--hwf-content-padding-x) * -1);
    margin-right: calc(var(--hwf-content-padding-x) * -1);
    padding-left: var(--hwf-content-padding-x);
    padding-right: var(--hwf-content-padding-x);
    padding-bottom: 2.4rem;
    width: calc(100% + var(--hwf-content-padding-x) * 2);
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box {
    margin-top: 1.6rem;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar li {
    font-size: 1.6rem;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-sidebar li a {
    padding: 1.6rem 1rem;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list > li {
    flex-direction: column;
    gap: 0.4rem;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .year {
    font-size: 2.1rem;
  }
  .page-company .company-main .section-history .timeline-wrap .txt-wrap .blur-box .timeline-list .desc-wrap {
    padding: 0.65rem;
    font-size: 1.8rem;
  }
  .page-company .company-main .section-history .timeline-wrap .img-wrap {
    margin-left: calc(var(--hwf-content-padding-x) * -1);
    margin-right: calc(var(--hwf-content-padding-x) * -1);
    width: calc(100% + var(--hwf-content-padding-x) * 2);
  }
}
.page-company .company-main .section-banner {
  padding: 20rem 0 12.6rem;
  min-height: auto;
  background: #fff url(/assets/images/company/main-banner-bg.png) no-repeat center/cover;
}
.page-company .company-main .section-banner .company-tit-wrap {
  margin: 0;
  text-align: left;
}
.page-company .company-main .section-banner .company-tit-wrap .txt-gradient {
  margin: 0;
}
.page-company .company-main .section-banner .blur-box {
  display: flex;
  gap: 8rem;
  margin-top: 25rem;
  padding: 8rem;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
}
.page-company .company-main .section-banner .blur-box .txt {
  font-size: 2.1rem;
}
.page-company .company-main .section-banner .blur-box .btn-wrap .btn {
  word-break: keep-all;
  white-space: normal;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2.4rem;
  min-width: 24rem;
  height: 100%;
  font-size: 2.1rem;
  text-align: left;
}
.page-company .company-main .section-banner .blur-box .btn-wrap .btn .svg-icon {
  width: 2.4rem;
  height: 2.4rem;
  align-self: end;
}
@media (max-width: 1300px) {
  .page-company .company-main .section-banner .company-tit-wrap {
    word-break: keep-all;
  }
  .page-company .company-main .section-banner .company-tit-wrap br {
    display: none;
  }
}
@media (max-width: 1280px) {
  .page-company .company-main .section-banner .blur-box {
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .page-company .company-main .section-banner {
    padding: 8rem 0 0;
    min-height: auto;
  }
  .page-company .company-main .section-banner .blur-box {
    gap: 4rem;
    margin-top: 16rem;
    margin-left: calc(var(--hwf-content-padding-x) * -1);
    margin-right: calc(var(--hwf-content-padding-x) * -1);
    padding: 4rem var(--hwf-content-padding-x) 8rem;
  }
  .page-company .company-main .section-banner .blur-box .txt {
    font-size: 1.8rem;
  }
  .page-company .company-main .section-banner .blur-box .btn-wrap .btn {
    min-width: auto;
  }
}
.page-company .company-map-wrap {
  --company-map-gap: 4rem;
  display: flex;
  flex-direction: column;
  gap: var(--company-map-gap);
}
.page-company .company-map-wrap .map-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.page-company .company-map-wrap .map-address .txt-wrap {
  width: 100%;
}
.page-company .company-map-wrap .map-address .txt-wrap .tit {
  color: var(--hwf-color-text-strong);
  font-size: 2.8rem;
  font-weight: 700;
}
.page-company .company-map-wrap .map-address .txt-wrap .desc-list {
  margin-top: 0.8rem;
  display: flex;
  color: var(--hwf-color-text-subtler);
}
.page-company .company-map-wrap .map-address .txt-wrap .desc-list li {
  display: flex;
  align-items: center;
}
.page-company .company-map-wrap .map-address .txt-wrap .desc-list li::after {
  content: "";
  display: block;
  margin: 0 0.8rem;
  width: 0.15rem;
  height: 1.8rem;
  background-color: #757070;
}
.page-company .company-map-wrap .map-address .txt-wrap .desc-list li:last-child::after {
  display: none;
}
.page-company .company-map-wrap .map-address .btn-wrap {
  flex-shrink: 0;
  width: -moz-fit-content;
  width: fit-content;
}
.page-company .company-map-wrap .map-area {
  overflow: hidden;
  position: relative;
  background-color: #d7d5d5;
  border-radius: 0.2rem;
}
.page-company .company-map-wrap .map-area::before {
  content: "";
  display: block;
  padding-top: 49.92%;
}
.page-company .company-map-wrap .map-info dl {
  display: flex;
  gap: var(--company-map-gap);
  border-bottom: 0.1rem solid #e7e5e4;
  margin-bottom: var(--company-map-gap);
}
.page-company .company-map-wrap .map-info dl:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
.page-company .company-map-wrap .map-info dt {
  flex-shrink: 0;
  width: 20rem;
  color: var(--hwf-color-text-strong);
  font-size: 2.8rem;
  font-weight: 700;
}
.page-company .company-map-wrap .map-info dd {
  width: 100%;
}
.page-company .company-map-wrap .map-info .tit {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
  color: var(--hwf-color-text-strong);
  font-size: 2.1rem;
  font-weight: 600;
}
.page-company .company-map-wrap .map-info .tit.icon-line1::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url(/assets/images/company/ico-line1.svg) no-repeat center/cover;
}
.page-company .company-map-wrap .map-info .tit.icon-line5::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url(/assets/images/company/ico-line5.svg) no-repeat center/cover;
}
.page-company .company-map-wrap .map-info .tit.icon-line9::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url(/assets/images/company/ico-line9.svg) no-repeat center/cover;
}
.page-company .company-map-wrap .map-info .tit.line1 {
  color: #263c96;
}
.page-company .company-map-wrap .map-info .tit.line5 {
  color: #8936e0;
}
.page-company .company-map-wrap .map-info .tit.line9 {
  color: #d1a62c;
}
.page-company .company-map-wrap .map-info .transport-list > li {
  margin-bottom: var(--company-map-gap);
}
.page-company .company-map-wrap .map-info .transport-list.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.page-company .company-map-wrap .map-info .gray-box {
  padding: 2.4rem;
  background-color: #f3f2f1;
}
.page-company .company-map-wrap .map-info .note-txt {
  margin-top: 2.4rem;
}
.page-company .company-map-wrap .root_daum_roughmap {
  width: 100%;
}
.page-company .company-map-wrap .root_daum_roughmap .wrap_btn_zoom {
  z-index: 2 !important;
}
@media (max-width: 1024px) {
  .page-company .company-map-wrap .map-address {
    flex-direction: column;
    gap: 2.4rem;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .page-company .company-map-wrap {
    --company-map-gap: 2.4rem;
  }
  .page-company .company-map-wrap .map-address .txt-wrap .tit {
    font-size: 2.4rem;
  }
  .page-company .company-map-wrap .map-address .txt-wrap .desc-list {
    flex-direction: column;
  }
  .page-company .company-map-wrap .map-address .txt-wrap .desc-list li::after {
    display: none;
  }
  .page-company .company-map-wrap .map-address .btn-wrap {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-company .company-map-wrap .map-address .btn-wrap .btn {
    flex: 1;
  }
  .page-company .company-map-wrap .map-info dl {
    flex-direction: column;
  }
  .page-company .company-map-wrap .map-info dt {
    font-size: 2.4rem;
    width: 100%;
  }
  .page-company .company-map-wrap .map-info .tit {
    margin-bottom: 1.6rem;
  }
  .page-company .company-map-wrap .map-info .transport-list.grid-2 {
    grid-template-columns: auto;
  }
}
.page-company .company-system .gray-box img {
  width: 100%;
}
.page-company .company-system .overlay-box-wrap.reverse .visual-box {
  width: 90.6%;
  height: 36rem;
}
.page-company .company-system .overlay-box-wrap.reverse .info-box {
  margin-top: 18rem;
  margin-left: 0;
  margin-right: -16rem;
  padding: 8rem;
}
.page-company .company-system .overlay-box-wrap .info-box {
  background: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(2rem);
}
.page-company .company-system .overlay-box-wrap .info-box > .tit {
  color: var(--hwf-color-text-strong);
  font-size: 3.2rem;
  font-weight: 600;
  word-break: keep-all;
}
.page-company .company-system .overlay-box-wrap .info-box > .tit .f-hanwha {
  font-weight: 400;
  vertical-align: bottom;
}
@media (max-width: 1024px) {
  .page-company .company-system .overlay-box-wrap.reverse .visual-box {
    margin-left: auto;
    width: 85.3%;
  }
  .page-company .company-system .overlay-box-wrap.reverse .info-box {
    margin-top: -4rem;
    margin-right: 0;
    padding: 4rem;
    width: 86.3%;
  }
}
@media (max-width: 640px) {
  .page-company .company-system .overlay-box-wrap {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
  }
  .page-company .company-system .overlay-box-wrap .info-box > .tit {
    word-break: keep-all;
    font-size: 2.1rem;
  }
  .page-company .company-system .overlay-box-wrap.reverse .visual-box {
    height: 20rem;
  }
  .page-company .company-system .gray-box {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    padding: 4rem var(--hwf-content-padding-x);
  }
}
@media (max-width: 360px) {
  .page-company .company-system .overlay-box-wrap .info-box > .tit br {
    display: none;
  }
}
.page-company .company-employ .section-employ {
  --section-tit-wrap-margin-bottom: 6.4rem;
}
@media (max-width: 640px) {
  .page-company .company-employ .section-employ {
    --section-tit-wrap-margin-bottom: 4rem;
  }
}
.page-company .company-employ .section-employ .value .section-tit-wrap .sub-tit {
  margin-bottom: 2.4rem;
}
@media (max-width: 640px) {
  .page-company .company-employ .section-employ .value .section-tit-wrap .sub-tit {
    margin-bottom: 1.6rem;
  }
  .page-company .company-employ .section-employ .value .section-tit-wrap .tit br {
    display: none;
  }
}
.page-company .company-employ .section-employ .recruit .process-wrap {
  padding: 8rem 6rem;
  background-color: #fafafa;
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list {
  --process-list-point-color: #f54500;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list.navy {
  --process-list-point-color: #02204b;
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list::before {
  content: "";
  position: absolute;
  top: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 94%;
  height: 0.1rem;
  background-color: var(--process-list-point-color);
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list li:first-child .num,
.page-company .company-employ .section-employ .recruit .process-wrap .process-list li:last-child .num {
  color: #fff;
  background-color: var(--process-list-point-color);
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list .num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  color: var(--process-list-point-color);
  font-size: 1.6rem;
  font-weight: 700;
  background-color: #fafafa;
  border: 0.1rem solid var(--process-list-point-color);
  border-radius: 0.2rem;
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list .tit {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
  color: var(--hwf-color-text-strong);
}
.page-company .company-employ .section-employ .recruit .process-wrap .process-list .tit small {
  color: var(--hwf-color-text-subtle);
  font-size: 1.6rem;
}
@media (max-width: 960px) {
  .page-company .company-employ .section-employ .recruit .process-wrap {
    padding: 6rem 4rem;
  }
}
@media (max-width: 768px) {
  .page-company .company-employ .section-employ .recruit .process-wrap {
    padding: 4rem 2.4rem;
  }
  .page-company .company-employ .section-employ .recruit .process-wrap br {
    display: none;
  }
  .page-company .company-employ .section-employ .recruit .process-wrap .process-list {
    flex-direction: column;
    gap: 4rem;
  }
  .page-company .company-employ .section-employ .recruit .process-wrap .process-list::before {
    top: 50%;
    left: 1.8rem;
    transform: translate(0, -50%);
    width: 0.1rem;
    height: 94%;
  }
  .page-company .company-employ .section-employ .recruit .process-wrap .process-list li {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.4rem;
  }
  .page-company .company-employ .section-employ .recruit .process-wrap .process-list .tit {
    padding-top: 0.4rem;
    text-align: left;
  }
}
.page-company .company-employ .section-banner {
  padding: 8rem 0;
  background: url(/assets/images/company/employ-banner.png) no-repeat center/cover;
}
.page-company .company-employ .section-banner .txt-wrap {
  color: #fff;
  text-align: center;
}
.page-company .company-employ .section-banner .txt-wrap .tit {
  margin-bottom: 2.4rem;
  font-size: 4.8rem;
  font-weight: 700;
  word-break: keep-all;
}
.page-company .company-employ .section-banner .txt-wrap .desc {
  margin: 0 auto;
  width: 80%;
  font-weight: 500;
  word-break: keep-all;
}
.page-company .company-employ .section-banner .txt-wrap .btn {
  margin-top: 6.4rem;
}
@media (max-width: 640px) {
  .page-company .company-employ .section-banner .txt-wrap .tit {
    font-size: 3.2rem;
  }
  .page-company .company-employ .section-banner .txt-wrap .btn {
    margin-top: 4rem;
  }
}
.page-company .company-network .section-detail .network-list > li {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.page-company .company-network .section-detail .network-list > li + li {
  margin-top: 8rem;
}
.page-company .company-network .section-detail .network-list > li .group-flex-wrap {
  gap: 6rem;
}
.page-company .company-network .section-detail .network-list > li .img-wrap {
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  width: 38.46%;
  height: 100%;
}
.page-company .company-network .section-detail .network-list > li .img-wrap::before {
  content: "";
  display: block;
  padding-top: 90.8%;
}
.page-company .company-network .section-detail .network-list > li .img-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.page-company .company-network .section-detail .network-list > li .txt-wrap {
  width: 100%;
}
.page-company .company-network .section-detail .network-list > li .txt-wrap.line-top::before {
  height: 0.2rem;
}
.page-company .company-network .section-detail .network-list > li .txt-wrap dl {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.8rem 0;
  border-bottom: 0.1rem solid #1a140f;
}
.page-company .company-network .section-detail .network-list > li .txt-wrap dl:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.page-company .company-network .section-detail .network-list > li .txt-wrap dt {
  color: var(--hwf-color-text-strong);
  font-size: 2.1rem;
  font-weight: 600;
}
.page-company .company-network .section-detail .network-list > li .txt-wrap dd {
  width: 64.45%;
}
@media (max-width: 1024px) {
  .page-company .company-network .section-detail .network-list > li .group-flex-wrap {
    flex-direction: column;
  }
  .page-company .company-network .section-detail .network-list > li .img-wrap {
    width: 50%;
  }
}
@media (max-width: 640px) {
  .page-company .company-network .section-detail .network-list > li {
    gap: 2.4rem;
  }
  .page-company .company-network .section-detail .network-list > li .group-flex-wrap {
    gap: 4rem;
  }
  .page-company .company-network .section-detail .network-list > li .img-wrap {
    width: 100%;
  }
  .page-company .company-network .section-detail .network-list > li .txt-wrap dl {
    flex-direction: column;
    gap: 1.6rem;
    padding: 2rem 0;
  }
  .page-company .company-network .section-detail .network-list > li .txt-wrap dd {
    width: 100%;
  }
}
.page-company .company-finance .section-intro {
  padding: 8rem 0;
  background-color: #f5f4f4;
}
.page-company .company-finance .section-intro .gray-box-wrap .tit-sm {
  margin-bottom: 1.6rem;
  font-weight: 700;
}
.page-company .company-finance .section-intro .gray-box-wrap .desc {
  margin-bottom: 0.8rem;
}
.page-company .company-finance .section-intro .gray-box-wrap .desc-small {
  margin-top: 0.8rem;
  color: var(--hwf-color-text-subtle);
  font-size: 1.6rem;
}
.page-company .company-finance .section-intro .gray-box-wrap .emphasis {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  justify-content: flex-end;
  color: var(--hwf-color-text-primary);
  font-family: "Trust2ATRIAL", sans-serif;
  font-size: 8rem;
  line-height: 1.2;
}
.page-company .company-finance .section-intro .gray-box-wrap .emphasis small {
  font-family: "Pretendard", sans-serif;
  font-size: 4rem;
  font-weight: 600;
}
.page-company .company-finance .section-intro .gray-box-wrap .gray-box {
  padding: 3.2rem 2rem 0;
}
.page-company .company-finance .section-intro .gray-box-wrap .white-box {
  margin-top: auto;
}
@media (max-width: 640px) {
  .page-company .company-finance .section-intro {
    padding: 4rem 0;
  }
  .page-company .company-finance .section-intro .gray-box-wrap .emphasis {
    font-size: 6rem;
  }
  .page-company .company-finance .section-intro .gray-box-wrap .emphasis small {
    font-size: 2.8rem;
  }
  .page-company .company-finance .section-intro .gray-box-wrap .gray-box {
    padding: 2.4rem 1.2rem 0;
  }
}
.page-company .company-finance .section-network .category-list {
  display: flex;
  gap: 2.4rem;
}
.page-company .company-finance .section-network .category-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 3rem;
  min-height: 3.2rem;
  color: #fff;
  font-size: 2.1rem;
  font-weight: 600;
  text-align: center;
  background-color: #f54500;
}
.page-company .company-finance .section-network .category-list li br {
  display: none;
}
.page-company .company-finance .section-network .img-wrap {
  width: 100%;
}
.page-company .company-finance .section-network .img-wrap img {
  width: 100%;
}
@media (max-width: 1024px) {
  .page-company .company-finance .section-network .category-list {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .page-company .company-finance .section-network .category-list li {
    justify-content: flex-start;
    flex: 1;
    text-align: left;
  }
  .page-company .company-finance .section-network .category-list li br {
    display: block;
  }
  .page-company .company-finance .section-network .category-list li:nth-child(4) {
    flex: none;
    width: calc(50% - 0.4rem);
  }
  .page-company .company-finance .section-network .category-list li:nth-child(5) {
    flex: none;
    width: calc(50% - 0.4rem);
  }
}
@media (max-width: 640px) {
  .page-company .company-finance .section-network .category-list li {
    padding: 0.8rem 1.2rem;
    font-size: 1.8rem;
  }
  .page-company .company-finance .section-network .img-wrap {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    width: calc(100% + var(--hwf-content-padding-x) * 2);
  }
}
html[lang="en"] .page-company:has(.company-main) .header .logo {
  background: url(/assets/images/common/en-logo2-w.svg) no-repeat center/cover;
}
html[lang="en"] .page-company:has(.company-main) .company-tit-wrap .tit {
  font-family: "Trust2ATRIAL", sans-serif;
  font-weight: 400;
}
html[lang="en"] .page-company .company-main .section-mission {
  text-transform: capitalize;
  letter-spacing: -0.068rem;
}
html[lang="en"] .page-company .company-main .section-value .value-list .tit {
  font-family: "Trust2ATRIAL", sans-serif;
  font-weight: 400;
  line-height: 1.2;
}
html[lang="en"] .page-company .company-main .section-info .company-tit-wrap .tit {
  font-size: 6.4rem;
  letter-spacing: -0.08rem;
}
html[lang="en"] .page-company .company-main .section-info .company-tit-wrap .tit .f-hanwha {
  font-size: 6rem;
}
html[lang="en"] .page-company .company-main .section-info .txt-wrap dd .unit {
  font-family: "Trust2ATRIAL", sans-serif;
  font-size: 10rem;
}
html[lang="en"] .page-company .company-main .section-info .txt-wrap dd .txt {
  display: inline-block;
  font-size: 16rem;
  font-family: "Trust2ATRIAL", sans-serif;
  line-height: 1;
  background: linear-gradient(270deg, #d83a00 0%, #eb6c31 49.04%, #eec3b0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  text-align: right;
}
html[lang="en"] .page-company .company-main .section-info .txt-wrap dl:nth-child(2) dt {
  max-width: 37rem;
}
html[lang="en"] .page-company .company-main .section-info .txt-wrap dl:nth-child(2) dd .counter {
  min-width: 1ch;
}
html[lang="en"] .page-company .company-main .section-info .txt-wrap dl:nth-child(3) dd .counter {
  min-width: 1ch;
}
html[lang="en"] .page-company .company-main .section-history .f-hanwha {
  font-size: 6rem;
}
html[lang="en"] .page-company .company-main .section-banner .company-tit-wrap .desc-small .f-hanwha {
  font-size: 4.4rem;
}
html[lang="en"] .page-company .company-main .section-banner .blur-box .btn-wrap .btn {
  min-width: 24rem;
}
html[lang="en"] .page-company .company-main .section-banner .blur-box .txt .f-hanwha {
  font-size: 2rem;
}
@media (max-width: 1400px) {
  html[lang="en"] .page-company .company-main .section-banner .company-tit-wrap br {
    display: none;
  }
}
@media (max-width: 640px) {
  html[lang="en"] .page-company .company-main .section-info .company-tit-wrap .tit {
    font-size: 4.8rem;
  }
  html[lang="en"] .page-company .company-main .section-info .company-tit-wrap .tit .f-hanwha {
    font-size: 4rem;
  }
  html[lang="en"] .page-company .company-main .section-info .txt-wrap dd .unit {
    font-size: 3.2rem;
  }
  html[lang="en"] .page-company .company-main .section-info .txt-wrap dd .txt {
    font-size: 9.6rem;
  }
  html[lang="en"] .page-company .company-main .section-history .f-hanwha {
    font-size: 3rem;
  }
  html[lang="en"] .page-company .company-main .section-banner .company-tit-wrap .desc-small .f-hanwha {
    font-size: 3rem;
  }
  html[lang="en"] .page-company .company-main .section-banner .blur-box .btn-wrap .btn {
    min-width: auto;
  }
  html[lang="en"] .page-company .company-main .section-banner .blur-box .txt .f-hanwha {
    font-size: 1.6rem;
    transform: rotate(0.03deg);
  }
}
html[lang="en"] .page-company .company-network .global-network-map .map-info-list > li:nth-child(3) {
  margin-left: 2.6%;
}
html[lang="en"] .page-company .company-network .global-network-map .map-info-list > li:nth-child(4) {
  margin-left: 2.4%;
}
html[lang="en"] .page-company .company-network .global-network-map .map-info-list > li:nth-child(5) {
  max-width: 18%;
  margin-left: 2%;
}
@media (max-width: 1200px) {
  html[lang="en"] .page-company .company-network .global-network-map .map-info-list > li:nth-child(3) {
    margin-left: 0;
  }
  html[lang="en"] .page-company .company-network .global-network-map .map-info-list > li:nth-child(4) {
    margin-left: 0;
  }
  html[lang="en"] .page-company .company-network .global-network-map .map-info-list > li:nth-child(5) {
    max-width: 100%;
    margin-left: 0;
  }
}
.page-error .error-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  text-align: center;
  padding: 24rem 0;
}
.page-error .error-wrap::before {
  content: "";
  margin: 0 auto;
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-alert-circle.svg);
  mask-image: url(/assets/images/icon/ico-alert-circle.svg);
  background-color: #fe5b16;
}
.page-error .error-wrap .tit {
  color: var(--hwf-color-text-strong);
  font-size: 3.2rem;
  font-weight: 700;
  word-break: keep-all;
}
.page-error .error-wrap .desc {
  word-break: keep-all;
}
.page-error .error-wrap .btn-wrap {
  margin-top: 4rem;
}
@media (max-width: 640px) {
  .page-error .error-wrap {
    gap: 1.6rem;
    padding: 16rem 0;
  }
  .page-error .error-wrap::before {
    width: 4rem;
    height: 4rem;
  }
  .page-error .error-wrap .tit {
    font-size: 2.4rem;
  }
  .page-error .error-wrap .desc {
    font-size: 1.6rem;
  }
  .page-error .error-wrap .btn-wrap {
    margin-top: 2.4rem;
  }
}
.page-business .business-list {
  --business-list-gap: 8rem;
  --business-list-li-gap: 6rem;
  --business-list-li-tit-line-gap: 4rem;
  --business-list-li-txt-line-gap: 2.8rem;
  --business-list-li-txt-button-gap: 4rem;
  display: flex;
  flex-direction: column;
  gap: var(--business-list-gap);
}
.page-business .business-list li {
  display: flex;
  gap: var(--business-list-li-gap);
}
.page-business .business-list li .img-wrap {
  flex-shrink: 0;
  width: 61.53%;
}
.page-business .business-list li .img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.page-business .business-list li .txt-wrap .line-bottom,
.page-business .business-list li .txt-wrap .box-list-wrap .tit,
.box-list-wrap .page-business .business-list li .txt-wrap .tit {
  padding-bottom: var(--business-list-li-tit-line-gap);
  margin-bottom: var(--business-list-li-txt-line-gap);
}
.page-business .business-list li .txt-wrap .line-bottom::after,
.page-business .business-list li .txt-wrap .box-list-wrap .tit::after,
.box-list-wrap .page-business .business-list li .txt-wrap .tit::after {
  height: 0.2rem;
}
.page-business .business-list li .txt-wrap .btn {
  margin-top: var(--business-list-li-txt-button-gap);
  white-space: normal;
}
@media (max-width: 1024px) {
  .page-business .business-list {
    --business-list-li-gap: 4rem;
  }
  .page-business .business-list li {
    flex-direction: column;
  }
  .page-business .business-list li .img-wrap {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .page-business .business-list {
    --business-list-li-tit-line-gap: 2.4rem;
    --business-list-li-txt-line-gap: 2rem;
    --business-list-li-txt-button-gap: 2.4rem;
  }
  .page-business .business-list li .img-wrap {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    width: calc(100% + var(--hwf-content-padding-x) * 2);
  }
}
body {
  --hwf-header-height: 13.7rem;
}
@media (max-width: 640px) {
  body {
    --hwf-header-height: 10.5rem;
  }
}
body:not(.page-main) .container {
  padding-top: var(--hwf-header-height);
}
body.page-company .company-main.container {
  padding-top: 0;
}
.container {
  min-height: calc(100vh - var(--hwf-header-height) - var(--hwf-footer-height));
  box-sizing: content-box;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--hwf-content-padding-x);
  max-width: var(--hwf-content-wrap-width);
  width: 100%;
}
section.bg-gray {
  background-color: #f3f2f1;
}
.overlay-box-wrap {
  --overlay-box-wrap-overlapping-gap: -4.8rem;
  display: flex;
}
.overlay-box-wrap .visual-box {
  overflow: hidden;
  position: relative;
  padding: 8rem;
  width: 56.002%;
  height: 48rem;
  background: #000;
}
.overlay-box-wrap .visual-box .tit-md {
  color: #fff;
}
.overlay-box-wrap .visual-box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.overlay-box-wrap .info-box {
  position: relative;
  margin-top: 6rem;
  margin-left: var(--overlay-box-wrap-overlapping-gap);
  padding: 8rem 12rem;
  width: 61.407%;
  z-index: 1;
  border-top: 0.1rem solid hsla(0, 0%, 100%, 0.3);
  border-right: 0.1rem solid hsla(0, 0%, 100%, 0.3);
  border-left: 0.1rem solid hsla(0, 0%, 100%, 0.3);
  background: rgba(225, 224, 224, 0.2);
  backdrop-filter: blur(5rem);
}
.overlay-box-wrap.reverse {
  flex-direction: row-reverse;
}
.overlay-box-wrap.reverse .info-box {
  margin-left: 0;
  margin-right: var(--overlay-box-wrap-overlapping-gap);
}
@media (max-width: 1024px) {
  .overlay-box-wrap {
    flex-direction: column;
  }
  .overlay-box-wrap .visual-box {
    width: 100%;
  }
  .overlay-box-wrap .info-box {
    margin-top: -4rem;
    margin-left: 0;
    width: 100%;
  }
  .overlay-box-wrap.reverse {
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .overlay-box-wrap {
    margin: 0 var(--layout-full-width);
  }
  .overlay-box-wrap .visual-box {
    padding: 4rem var(--hwf-content-padding-x);
  }
  .overlay-box-wrap .info-box {
    padding: 4rem var(--hwf-content-padding-x);
    background: linear-gradient(to bottom, rgba(225, 224, 224, 0.2) 0%, rgba(225, 224, 224, 0) 100%);
  }
}
.overlay-list-wrap,
.talent-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
.overlay-list-wrap .overlay-box-wrap,
.talent-list-wrap .overlay-box-wrap {
  --overlay-box-wrap-overlapping-gap: -6rem;
}
.overlay-list-wrap .overlay-box-wrap .visual-box,
.talent-list-wrap .overlay-box-wrap .visual-box {
  width: 56.5%;
  height: 44.8rem;
}
.overlay-list-wrap .overlay-box-wrap .info-box,
.talent-list-wrap .overlay-box-wrap .info-box {
  padding-left: 10rem;
  padding-right: 10rem;
  width: 63.3%;
  min-height: 44.8rem;
  background: rgba(225, 224, 224, 0.2);
  backdrop-filter: blur(3rem);
}
.overlay-list-wrap .overlay-box-wrap .info-box .tit-wrap,
.talent-list-wrap .overlay-box-wrap .info-box .tit-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.overlay-list-wrap .overlay-box-wrap .info-box .tit-wrap .sub-tit,
.talent-list-wrap .overlay-box-wrap .info-box .tit-wrap .sub-tit {
  color: var(--hwf-color-text-primary-dark);
  font-size: 1.8rem;
  font-weight: 600;
}
.overlay-list-wrap .overlay-box-wrap .info-box .tit-wrap .tit,
.talent-list-wrap .overlay-box-wrap .info-box .tit-wrap .tit {
  color: var(--hwf-color-text-strong);
  font-size: 3.6rem;
  font-weight: 700;
}
.overlay-list-wrap .overlay-box-wrap .info-box .tit-wrap + .note-list,
.talent-list-wrap .overlay-box-wrap .info-box .tit-wrap + .note-list {
  margin-top: 4rem;
}
.overlay-list-wrap .overlay-box-wrap .info-box .tit-wrap + .desc-wrap,
.talent-list-wrap .overlay-box-wrap .info-box .tit-wrap + .desc-wrap {
  margin-top: 4rem;
}
.overlay-list-wrap .overlay-box-wrap .info-box .desc-wrap,
.talent-list-wrap .overlay-box-wrap .info-box .desc-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
@media (max-width: 1024px) {
  .overlay-list-wrap .overlay-box-wrap .visual-box,
  .talent-list-wrap .overlay-box-wrap .visual-box {
    width: 100%;
  }
  .overlay-list-wrap .overlay-box-wrap .info-box,
  .talent-list-wrap .overlay-box-wrap .info-box {
    padding: 8rem;
    width: 100%;
    min-height: auto;
    background: hsla(0, 0%, 100%, 0.1);
  }
}
@media (max-width: 640px) {
  .overlay-list-wrap,
  .talent-list-wrap {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
    gap: 4rem;
  }
  .overlay-list-wrap .overlay-box-wrap .visual-box,
  .talent-list-wrap .overlay-box-wrap .visual-box {
    height: 30.3rem;
  }
  .overlay-list-wrap .overlay-box-wrap .info-box,
  .talent-list-wrap .overlay-box-wrap .info-box {
    padding: 4rem var(--hwf-content-padding-x);
  }
  .overlay-list-wrap .overlay-box-wrap .info-box .tit-wrap .tit,
  .talent-list-wrap .overlay-box-wrap .info-box .tit-wrap .tit {
    font-size: 2.8rem;
  }
  .overlay-list-wrap .overlay-box-wrap .info-box .desc-wrap,
  .talent-list-wrap .overlay-box-wrap .info-box .desc-wrap {
    gap: 1.6rem;
  }
}
sup {
  color: var(--hwf-color-text-primary-dark);
  vertical-align: sub;
}
.sup {
  position: relative;
  padding-left: 1rem;
  color: var(--hwf-color-text-subtle);
  font-size: 1.6rem;
}
.sup span {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--hwf-color-text-primary-dark);
}
.gray-box-wrap {
  display: flex;
  gap: 2.4rem;
}
.gray-box-wrap .gray-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 3.2rem 2rem 0;
  background: linear-gradient(180deg, rgba(232, 232, 232, 0.93) 0%, #fff 75%);
}
.gray-box-wrap .gray-box .tit-wrap {
  padding: 0 2rem;
  word-break: keep-all;
}
.gray-box-wrap .gray-box .tit-wrap .sub-tit {
  margin-bottom: 0.8rem;
  color: var(--hwf-color-text-primary-dark);
  font-size: 1.8rem;
  font-weight: 500;
}
.gray-box-wrap .gray-box .tit-wrap .tit-sm,
.gray-box-wrap .gray-box .tit-wrap .tit-xsm {
  font-weight: 600;
}
.gray-box-wrap .gray-box .white-box {
  padding: 2.4rem 2rem;
  word-break: keep-all;
  background-color: #fff;
}
.gray-box-wrap .gray-box:not(.white-box) {
  padding: 4rem;
}
@media (max-width: 1024px) {
  .gray-box-wrap {
    flex-direction: column;
  }
}
@media (max-width: 640px) {
  .gray-box-wrap .gray-box {
    padding: 2.4rem 1.2rem 0;
  }
  .gray-box-wrap .gray-box .tit-wrap {
    padding: 0 1.2rem;
  }
  .gray-box-wrap .gray-box .tit-wrap br {
    display: none;
  }
  .gray-box-wrap .gray-box .white-box {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .gray-box-wrap .gray-box:not(.white-box) {
    padding: 2.4rem;
  }
}
.gray-box {
  padding: 8rem;
  background-color: #f5f4f4;
}
.gray-box.small {
  padding: 4rem;
}
.gray-box.bg-light-orange {
  background: #fdf5f1;
}
@media (max-width: 1024px) {
  .gray-box {
    padding: 4rem;
  }
  .gray-box.small {
    padding: 3.2rem var(--hwf-content-padding-x);
  }
}
.white-gradient-box {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 4rem;
  background: linear-gradient(180deg, #fff 10%, rgba(253, 252, 252, 0) 100%);
}
.white-gradient-box .tit-xxsm {
  text-align: center;
  justify-content: center;
}
@media (max-width: 640px) {
  .white-gradient-box {
    padding: 2.4rem;
  }
}
.box-list-wrap {
  display: flex;
  gap: 4.8rem;
}
.box-list-wrap li {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  flex: 1;
}
.box-list-wrap .tit {
  display: flex;
  gap: 1.2rem;
  padding-bottom: 1.6rem;
  color: var(--hwf-color-text-primary-dark);
  font-size: 2.4rem;
  font-weight: 600;
}
.box-list-wrap .tit::after {
  height: 0.2rem;
}
.box-list-wrap .tit[class*="icon-"]::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  background-color: #fe5b16;
}
@media (max-width: 1024px) {
  .box-list-wrap {
    flex-direction: column;
  }
}
.pipe-list {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
}
.pipe-list li {
  display: flex;
  align-items: center;
}
.pipe-list li:last-child::after {
  display: none;
}
.pipe-list li::after {
  content: "";
  display: inline-block;
  margin: 0 1.2rem;
  width: 0.1rem;
  height: 1.6rem;
  background-color: hsla(0, 0%, 100%, 0.3);
}
@media (max-width: 640px) {
  .pipe-list {
    font-size: 1.6rem;
  }
}
.info-txt-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.section-tit-wrap .sub-tit {
  margin-bottom: 0.8rem;
  font-size: 2.4rem;
  font-weight: 500;
}
.section-tit-wrap .tit {
  font-size: 4.8rem;
  font-weight: 700;
  color: #151414;
  word-break: keep-all;
}
.section-tit-wrap .tit.lg {
  font-size: 6.4rem;
}
.section-tit-wrap .tit.txt-en {
  font-size: 6.4rem;
  font-weight: 400;
  line-height: 1.1;
}
.section-tit-wrap .desc {
  margin-top: 2.4rem;
  font-size: 2.4rem;
}
.section-tit-wrap .sub-desc {
  margin-top: 4rem;
}
.section-tit-wrap .desc-small {
  margin-top: 2.4rem;
}
.section-tit-wrap + .card-list-wrap.bg-gray {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 640px) {
  .section-tit-wrap .sub-tit {
    margin-bottom: 0.4rem;
    font-size: 1.8rem;
  }
  .section-tit-wrap .tit {
    font-size: 3.2rem;
  }
  .section-tit-wrap .tit.lg {
    font-size: 4rem;
  }
  .section-tit-wrap .tit.txt-en {
    font-size: 4rem;
  }
  .section-tit-wrap .sub-desc {
    margin-top: 2.4rem;
  }
  .section-tit-wrap .desc {
    margin-top: 0.8rem;
    font-size: 1.8rem;
  }
}
.cont-group {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  padding: 8rem 0 12rem;
}
@media (max-width: 640px) {
  .cont-group {
    gap: 4rem;
    padding: 4rem 0 8rem;
  }
  .cont-group > .group-wrap + .group-wrap {
    padding-top: 0;
  }
}
.scroll {
  overflow: auto hidden;
}
.scroll::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
}
.scroll::-webkit-scrollbar-track {
  background-color: #f3f2f1;
  border-radius: 0;
}
.scroll::-webkit-scrollbar-thumb {
  background-color: #fe5b16;
}
.scroll.has-scroll {
  padding-bottom: 1.6rem;
}
.group-flex-wrap {
  display: flex;
  gap: 4.8rem;
}
.group-flex-wrap .group-wrap {
  flex: 1;
}
.group-flex-wrap.small {
  gap: 4rem;
}
.group-flex-wrap.large {
  gap: 6rem;
}
@media (max-width: 640px) {
  .group-flex-wrap {
    gap: 4rem;
  }
  .group-flex-wrap .group-wrap + .group-wrap {
    padding-top: 0;
  }
  .group-flex-wrap.small {
    gap: 2.4rem;
  }
}
.group-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.group-wrap > [class*="tit-"] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2.4rem 1.6rem;
  word-break: keep-all;
}
.group-wrap > [class*="tit-"]:has(.badge) {
  gap: 1.2rem;
  align-items: center;
}
.group-wrap.spacing-sm {
  gap: 2.4rem;
}
.group-wrap.spacing-lg {
  gap: 4rem;
}
.group-wrap.spacing-xlg {
  gap: 6.4rem;
}
.group-wrap.spacing-xxlg {
  gap: 8rem;
}
@media (max-width: 640px) {
  .group-wrap > [class*="tit-"] br {
    display: none;
  }
  .group-wrap + .group-wrap {
    padding-top: 4rem;
  }
  .group-wrap.spacing-sm {
    gap: 1.6rem;
  }
  .group-wrap.spacing-lg {
    gap: 2.4rem;
  }
  .group-wrap.spacing-xlg {
    gap: 4rem;
  }
  .group-wrap.spacing-xxlg {
    gap: 4rem;
  }
  .group-wrap [class*="tit-"]:not(.tit-wrap) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.6rem;
  }
}
.group-wrap .img-wrap img,
.gray-box .img-wrap img {
  width: 100%;
}
.change {
  display: inline-flex;
  align-items: center;
}
.change.up {
  color: var(--hwf-color-change-up);
}
.change.up::before {
  content: "";
  display: inline-block;
  margin-right: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-triangle.svg);
  mask-image: url(/assets/images/icon/ico-triangle.svg);
  background-color: currentColor;
}
.change.down {
  color: var(--hwf-color-change-down);
}
.change.down::before {
  content: "";
  display: inline-block;
  margin-right: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-triangle.svg);
  mask-image: url(/assets/images/icon/ico-triangle.svg);
  transform: rotate(-180deg);
  background-color: currentColor;
}
.change.bg {
  padding: 0 0.8rem;
  height: 3.2rem;
  color: #fff;
  border-radius: 0.2rem;
  background-color: rgba(0, 0, 0, 0.4);
}
.change.bg.up {
  color: #ff6d41;
}
.change.bg.down {
  color: #04c0ff;
}
.filter-period {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 2.4rem;
  width: 100%;
}
.filter-period .scroll-wrap {
  width: 100%;
}
.filter-period .form-input-group .calendar {
  width: 18.1rem;
}
.filter-period .segment-control {
  width: 100%;
}
@media (max-width: 1024px) {
  .filter-period {
    flex-direction: column;
  }
  .filter-period .form-input-group {
    width: 100%;
  }
  .filter-period .form-input-group .calendar {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .filter-period {
    gap: 1.6rem;
  }
}
.card-list-wrap {
  position: relative;
}
.card-list-wrap.bg-gray {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.card-list-wrap.bg-gray::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-color: #f3f2f1;
}
.card-list-wrap.bg-gray .card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}
.card-list-wrap.bg-gray .card-list .card-item {
  background-color: #fff;
  border: 0.1rem solid #e6e5e5;
}
.card-list-wrap.bg-gray .card-list .card-item:last-child {
  border-right-color: #e6e5e5;
}
.card-list-wrap.bg-gray .card-list .card-item a {
  padding: 2.4rem;
}
.card-list-wrap.bg-gray .card-list .card-item .card-top {
  margin-bottom: 2.4rem;
}
.card-list-wrap.bg-gray .card-list .card-item .tit {
  font-size: 2.4rem;
}
.card-list-wrap.bg-gray .btn-wrap .btn.tertiary {
  background-color: #e7e5e4;
}
.card-list-wrap .card-list {
  display: flex;
}
.card-list-wrap .card-list .card-item {
  position: relative;
  border-left: 0.1rem solid #dcd8d6;
  flex: 1;
}
.card-list-wrap .card-list .card-item:last-child {
  border-right: 0.1rem solid #dcd8d6;
}
.card-list-wrap .card-list .card-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 2.4rem 4rem;
}
.card-list-wrap .card-list .card-item .card-top {
  margin-bottom: 4rem;
}
.card-list-wrap .card-list .card-item .tit {
  margin: 2.4rem 0 0.8rem;
  color: var(--hwf-color-text-strong);
  font-size: 2.8rem;
  font-weight: 600;
}
.card-list-wrap .card-list .card-item .desc {
  color: var(--hwf-color-text-subtle);
}
.card-list-wrap .card-list .card-item .chart-area {
  position: relative;
  width: 100%;
}
.card-list-wrap .card-list .card-item .chart-area::before {
  content: "";
  display: block;
  padding-top: 35.29%;
}
.card-list-wrap .card-list .card-item .chart-area .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card-list-wrap .card-list .card-item .info-list {
  margin-top: 1.6rem;
}
.card-list-wrap .card-list .card-item .info-list dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.card-list-wrap .card-list .card-item .info-list dl.txt-emphasis {
  margin-bottom: 0.8rem;
}
.card-list-wrap .card-list .card-item .info-list dl.txt-emphasis dd {
  color: var(--hwf-color-text-subtle);
  font-size: 4rem;
  font-weight: 400;
}
.card-list-wrap .card-list .card-item .info-list dl.txt-emphasis dd small {
  font-size: 2.1rem;
  font-weight: 400;
}
.card-list-wrap .card-list .card-item .info-list dl.txt-emphasis.down dd {
  color: var(--hwf-color-change-down);
}
.card-list-wrap .card-list .card-item .info-list dl.txt-emphasis.up dd {
  color: var(--hwf-color-change-up);
}
.card-list-wrap .card-list .card-item .info-list dt {
  font-size: 1.6rem;
}
.card-list-wrap .card-list .card-item .info-list dd {
  font-size: 1.6rem;
  font-weight: 600;
}
.card-list-wrap .btn-wrap {
  margin-top: 4rem;
}
@media (max-width: 1280px) {
  .card-list-wrap {
    margin: 0 calc(var(--hwf-content-padding-x) * -1);
  }
  .card-list-wrap.no-scroll .card-list {
    overflow: visible;
    grid-template-columns: repeat(2, 1fr);
  }
  .card-list-wrap .card-list {
    overflow: auto hidden;
    padding: 0 var(--hwf-content-padding-x);
  }
  .card-list-wrap .card-list .card-item {
    min-width: 36.1rem;
  }
}
@media (max-width: 768px) {
  .card-list-wrap.no-scroll .card-list {
    grid-template-columns: auto;
  }
}
@media (max-width: 640px) {
  .card-list-wrap.bg-gray::before {
    display: none;
  }
  .card-list-wrap.bg-gray .card-list {
    gap: 1.6rem;
  }
  .card-list-wrap.bg-gray .card-list .card-item {
    border-width: 0;
  }
  .card-list-wrap.bg-gray .card-list .card-item .tit {
    margin-top: 1.6rem;
    font-size: 2.1rem;
  }
  .card-list-wrap.bg-gray .card-list .card-item .info-list {
    margin-top: 1.6rem;
  }
  .card-list-wrap.no-scroll {
    padding-top: 0;
    padding-bottom: 0;
  }
  .card-list-wrap.no-scroll .card-list {
    gap: 0;
    padding: 0;
  }
  .card-list-wrap.no-scroll .card-list .card-item {
    border-top-width: 0.1rem;
  }
  .card-list-wrap.no-scroll .card-list .card-item:last-child {
    border-bottom-width: 0.1rem;
  }
  .card-list-wrap.no-scroll .card-list .card-item a {
    padding-left: var(--hwf-content-padding-x);
    padding-right: var(--hwf-content-padding-x);
  }
  .card-list-wrap .card-list .card-item a {
    padding: 2.4rem;
  }
  .card-list-wrap .card-list .card-item .card-top {
    margin-bottom: 2.4rem;
  }
  .card-list-wrap .card-list .card-item .tit {
    font-size: 2.1rem;
  }
  .card-list-wrap .card-list .card-item .chart-area::before {
    padding-top: 45.62%;
  }
}
.thumb-list-wrap .thumb-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem 2.4rem;
}
.thumb-list-wrap .thumb-list.col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.thumb-list-wrap .thumb-list.link .thumb-item a::after {
  content: "";
  display: none;
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 3.2rem;
  height: 3.2rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-link.svg);
  mask-image: url(/assets/images/icon/ico-link.svg);
  background-color: var(--hwf-color-text-primary);
}
.thumb-list-wrap .thumb-list.link .thumb-item a:hover::after {
  display: block;
}
.thumb-list-wrap .thumb-list.link .thumb-item a:hover .thumb-img::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.thumb-list-wrap .thumb-list .thumb-item a {
  position: relative;
  display: block;
  height: 100%;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img {
  overflow: hidden;
  position: relative;
  border-radius: 0.2rem;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img::before {
  content: "";
  display: block;
  padding-top: 71.33%;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img .source {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  width: 4rem;
  height: 4rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img .source::before {
  width: 2rem;
  height: 2rem;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img .source.youtube::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-youtube.svg);
  mask-image: url(/assets/images/icon/ico-youtube.svg);
  background-image: none;
  background-color: #fff !important;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img .source.blog::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-blog.svg);
  mask-image: url(/assets/images/icon/ico-blog.svg);
  background-image: none;
  background-color: #fff !important;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-img .source.instagram::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-instagram.svg);
  mask-image: url(/assets/images/icon/ico-instagram.svg);
  background-image: none;
  background-color: #fff !important;
}
.thumb-list-wrap .thumb-list .thumb-item .thumb-con {
  margin-top: 1.6rem;
}
.thumb-list-wrap .thumb-list .thumb-item .source {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  color: #494646;
  font-size: 1.6rem;
}
.thumb-list-wrap .thumb-list .thumb-item .source::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
}
.thumb-list-wrap .thumb-list .thumb-item .source.youtube::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-youtube-fill2.svg);
  mask-image: url(/assets/images/icon/ico-youtube-fill2.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-youtube-fill2.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.thumb-list-wrap .thumb-list .thumb-item .source.blog::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-blog-fill2.svg);
  mask-image: url(/assets/images/icon/ico-blog-fill2.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-blog-fill2.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.thumb-list-wrap .thumb-list .thumb-item .source.instagram::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-instagram-fill2.svg);
  mask-image: url(/assets/images/icon/ico-instagram-fill2.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-instagram-fill2.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.thumb-list-wrap .thumb-list .thumb-item .tit {
  color: #151414;
  font-size: 2.1rem;
  font-weight: 500;
}
.thumb-list-wrap .thumb-list .thumb-item .date {
  margin-top: 0.4rem;
  color: #757070;
  font-size: 1.8rem;
}
.thumb-list-wrap .btn-wrap {
  margin-top: 4rem;
}
@media (max-width: 1280px) {
  .thumb-list-wrap .thumb-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .thumb-list-wrap .thumb-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .thumb-list-wrap .thumb-list.col-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .thumb-list-wrap .thumb-list.link .thumb-item a::after {
    display: block;
    background-color: #333;
  }
  .thumb-list-wrap .thumb-list.link .thumb-item a:hover::after {
    background-color: #333;
  }
  .thumb-list-wrap .thumb-list.link .thumb-item a:hover .thumb-img::after {
    display: none;
  }
}
@media (max-width: 640px) {
  .thumb-list-wrap .thumb-list {
    grid-template-columns: auto;
  }
  .thumb-list-wrap .thumb-list.col-3 {
    grid-template-columns: auto;
  }
}
.share-sns-list {
  display: flex;
  gap: 1.6rem;
}
.share-sns-list li a,
.share-sns-list li button {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 8rem;
  text-align: center;
}
.share-sns-list li a::before,
.share-sns-list li button::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
}
.share-sns-list li.kakao a::before,
.share-sns-list li.kakao button::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-kakao-fill.svg);
  mask-image: url(/assets/images/icon/ico-kakao-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-kakao-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.share-sns-list li.blog a::before,
.share-sns-list li.blog button::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-blog-fill.svg);
  mask-image: url(/assets/images/icon/ico-blog-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-blog-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.share-sns-list li.facebook a::before,
.share-sns-list li.facebook button::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-facebook-fill.svg);
  mask-image: url(/assets/images/icon/ico-facebook-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-facebook-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
.share-sns-list li.copy a::before,
.share-sns-list li.copy button::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(/assets/images/icon/ico-copy-fill.svg);
  mask-image: url(/assets/images/icon/ico-copy-fill.svg);
  -webkit-mask-image: none;
  mask-image: none;
  background-image: url(/assets/images/icon/ico-copy-fill.svg);
  background-color: rgba(0, 0, 0, 0) !important;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 480px) {
  .share-sns-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.search-wrap {
  position: relative;
  z-index: 4;
  margin-top: -4rem;
  padding: 8rem;
}
.search-wrap.obj::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6%;
  transform: translateY(-50%);
  display: block;
  width: 14rem;
  height: 18rem;
  background: url(/assets/images/common/obj-gradient.png) no-repeat center/cover;
  z-index: -2;
}
.search-wrap.obj::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.04) 20%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(4rem);
  z-index: -1;
}
.search-wrap .input.search {
  position: relative;
  border: 0;
}
.search-wrap .input.search input {
  font-weight: 600;
}
.search-wrap .input.search input::-moz-placeholder {
  font-weight: 400;
}
.search-wrap .input.search input::placeholder {
  font-weight: 400;
}
.search-wrap .input.search::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  background: linear-gradient(90deg, #ff4d32 25%, #803c4a 50%, #022a62 100%);
}
.search-wrap .search-con {
  margin: 0 auto;
  max-width: 72rem;
}
.search-wrap .search-con .tag-wrap {
  margin-top: 2.4rem;
  justify-content: center;
  color: var(--hwf-color-text-strong);
}
@media (max-width: 1500px) {
  .search-wrap.obj::before {
    right: calc(var(--hwf-content-padding-x) * -1);
  }
}
@media (max-width: 768px) {
  .search-wrap {
    margin-top: 1.6rem;
    padding: 2.4rem var(--hwf-content-padding-x) 1.6rem;
  }
  .search-wrap.obj::before {
    width: 8rem;
  }
  .search-wrap .search-con .tag-wrap {
    margin-top: 1.6rem;
  }
}
.btn .page-num strong {
  font-weight: 400;
}
.modal .download-list li {
  border-top: 0.1rem solid #e6e5e5;
}
.modal .download-list li:last-child {
  border-bottom: 0.1rem solid #e6e5e5;
}
.modal .download-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem;
  height: 6.4rem;
}
.modal .download-list li a:hover,
.modal .download-list li a:active {
  background-color: #f3f2f1;
}
.modal .download-list li a:hover .date,
.modal .download-list li a:active .date {
  font-weight: 700;
}
.modal .download-list li .download {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.modal .download-list li .icon-download {
  background-color: currentColor;
}
.modal .filter-period .segment-control {
  overflow-x: initial;
}
@media (max-width: 1400px) {
  .modal .filter-period .segment-control {
    overflow-x: auto;
  }
}
.global-network-map {
  padding: 24rem 0 20rem;
  background: url(/assets/images/company/network-visual-bg.png) no-repeat center/cover;
}
.global-network-map .inner {
  max-width: 178.2rem;
  padding: 0 4rem;
}
.global-network-map .map-info-list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
}
.global-network-map .map-info-list > li {
  padding-left: 2rem;
  border-left: 0.2rem solid #fe5b16;
  word-break: keep-all;
}
.global-network-map .map-info-list > li:nth-child(1) {
  max-width: 18%;
}
.global-network-map .map-info-list > li:nth-child(2) {
  margin-top: 15.4rem;
  margin-left: 2.2%;
  max-width: 16.5%;
}
.global-network-map .map-info-list > li:nth-child(3) {
  margin-top: 19.4rem;
  margin-left: 6.6%;
  max-width: 21%;
}
.global-network-map .map-info-list > li:nth-child(4) {
  margin-top: 19.4rem;
  margin-left: 4.4%;
  max-width: 18%;
}
.global-network-map .map-info-list > li:nth-child(5) {
  margin-left: 4%;
  max-width: 9%;
}
.global-network-map .map-info-list .tit {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.4rem;
}
.global-network-map .map-info-list .tit small {
  font-size: 1.8rem;
}
.global-network-map .map-info-list .tit strong {
  font-size: 2.8rem;
  font-weight: 700;
}
@media (max-width: 1500px) {
  .global-network-map .map-info-list > li:nth-child(2) {
    margin-left: 1.8%;
  }
  .global-network-map .map-info-list > li:nth-child(3) {
    margin-left: 5%;
  }
  .global-network-map .map-info-list > li:nth-child(4) {
    margin-left: 2.8%;
  }
  .global-network-map .map-info-list > li:nth-child(5) {
    margin-left: 2.8%;
    max-width: 12%;
  }
}
@media (max-width: 1280px) {
  .global-network-map .inner {
    padding-left: var(--hwf-content-padding-x);
    padding-right: var(--hwf-content-padding-x);
  }
  .global-network-map .map-info-list {
    justify-content: space-between;
  }
  .global-network-map .map-info-list > li:nth-child(2) {
    margin-left: 0;
  }
  .global-network-map .map-info-list > li:nth-child(3) {
    margin-left: 0;
  }
  .global-network-map .map-info-list > li:nth-child(4) {
    margin-left: 0;
  }
  .global-network-map .map-info-list > li:nth-child(5) {
    margin-left: 0;
  }
}
@media (max-width: 1200px) {
  .global-network-map {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .global-network-map .map-info-list {
    flex-direction: column;
    gap: 4rem;
  }
  .global-network-map .map-info-list > li:nth-child(1) {
    max-width: 100%;
    width: 100%;
  }
  .global-network-map .map-info-list > li:nth-child(2) {
    margin-top: 0;
    max-width: 100%;
    width: 100%;
  }
  .global-network-map .map-info-list > li:nth-child(3) {
    margin-top: 0;
    max-width: 100%;
    width: 100%;
  }
  .global-network-map .map-info-list > li:nth-child(4) {
    margin-top: 0;
    max-width: 100%;
    width: 100%;
  }
  .global-network-map .map-info-list > li:nth-child(5) {
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .global-network-map {
    padding-top: 0;
    padding-bottom: 0;
  }
  .global-network-map .inner {
    min-height: 17.6rem;
  }
  .global-network-map .map-info-list {
    display: none;
  }
}
html[lang="en"] .global-network-map .map-info-list > li:nth-child(5) {
  max-width: 15%;
}
@media (max-width: 1200px) {
  html[lang="en"] .global-network-map .map-info-list > li:nth-child(5) {
    max-width: 100%;
  }
}
.popup-main-notice {
  --popup-today-btn-wrap-padding: 2.4rem;
  --popup-swiper-bullet-position-bottom: 2.4rem;
  --popup-btn-font-size: 1.8rem;
}
.popup-main-notice.modal .modal-dialog .modal-content {
  overflow: hidden;
}
.popup-main-notice.modal .modal-dialog .modal-conts {
  padding: 0;
}
.popup-main-notice a {
  display: block;
  width: 100%;
}
.popup-main-notice a img {
  width: 100%;
}
.popup-main-notice .today-btn-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--popup-today-btn-wrap-padding);
  background-color: #f5f4f4;
}
.popup-main-notice .today-btn-wrap .check-wrap {
  display: flex;
  align-items: center;
}
.popup-main-notice .today-btn-wrap .check-wrap label {
  font-size: var(--popup-btn-font-size);
  align-items: center;
}
.popup-main-notice .today-btn-wrap .check-wrap label::before {
  margin-top: 0;
}
.popup-main-notice .today-btn-wrap .btn-wrap {
  width: -moz-fit-content;
  width: fit-content;
}
.popup-main-notice .today-btn-wrap .btn-wrap .btn {
  font-size: var(--popup-btn-font-size);
}
.popup-main-notice .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  bottom: var(--popup-swiper-bullet-position-bottom);
}
.popup-main-notice .swiper-pagination .swiper-pagination-bullet {
  margin: 0;
  width: 4rem;
  height: 0.4rem;
  border-radius: 0;
  background-color: #e7e5e4;
  opacity: 1;
}
.popup-main-notice .swiper-pagination .swiper-pagination-bullet-active {
  background: #fe5b16;
}
@media (max-width: 640px) {
  .popup-main-notice {
    --popup-today-btn-wrap-padding: 2.4rem 1.6rem;
    --popup-swiper-bullet-position-bottom: 1.6rem;
    --popup-btn-font-size: 1.6rem;
  }
}