@charset "UTF-8";
/** BEIS DEFAULT **/
/************************************************************************************/
/*************************************** Form ***************************************/
/************************************************************************************/
/* absolute-center */
/* transition */
/* font-size */
:root {
  --border-radius: 20px;
  --border-radius-s: 10px;
  --gap: 32px;
}
@media (max-width: 1280px) {
  :root {
    --border-radius: 12px;
    --border-radius-s: 8px;
    --gap: 24px;
  }
}
@media (max-width: 767px) {
  :root {
    --border-radius: 8px;
    --border-radius-s: 6px;
    --gap: 16px;
  }
}

/* disabled */
*:disabled {
  opacity: 1;
  cursor: default;
  background-color: var(--gray-100);
}

div:has(> input:disabled) label,
div:has(> select:disabled) label,
div:has(> testarea:disabled) label {
  opacity: 1;
  cursor: default;
}

/* 주소입력창 */
.adderss-wrap > input {
  border-radius: 10px 0 0 10px;
}
.adderss-wrap > button {
  color: var(--white);
  border-radius: 0 10px 10px 0;
  background: var(--point-color);
  padding: 0 2rem;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border-color);
  padding: var(--input-padding-height) var(--input-padding-width);
}

textarea {
  padding: 1em;
  border-radius: var(--border-radius-s);
}
textarea.no-resize {
  resize: none;
}

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + label {
  padding-left: calc(32px + 0.5em);
  position: relative;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  input[type=checkbox] + label {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  input[type=checkbox] + label {
    font-size: 1.4rem;
  }
}
input[type=checkbox] + label::before {
  display: block;
  content: "";
  width: 32px;
  aspect-ratio: 1;
  border: 1px solid var(--brd-c1);
  background: var(--white) url("/images/common/unchecked.png") no-repeat center;
  position: absolute;
  top: -6px;
  left: 0;
}
input[type=checkbox]:checked + label::before {
  outline: 1px solid var(--point-color);
  background: var(--point-color) url("/images/common/checked.png") no-repeat center;
}
@media (max-width: 767px) {
  input[type=checkbox] + label {
    padding-left: calc(24px + 0.5em);
  }
  input[type=checkbox] + label::before {
    width: 24px;
    top: -3px;
  }
}

input[type=radio] {
  display: none;
}
input[type=radio] + label {
  position: relative;
  margin-right: 2em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
input[type=radio] + label::before, input[type=radio] + label::after {
  content: "";
  border-radius: 50%;
  display: block;
}
input[type=radio] + label::after {
  position: absolute;
}
input[type=radio] + label::before {
  width: 32px;
  aspect-ratio: 1;
  margin-right: 0.5em;
  margin-top: -2px;
  background: var(--white);
  left: 0;
  border: 1px solid var(--brd-c1);
}
input[type=radio]:checked + label::after {
  width: 16px;
  aspect-ratio: 1;
  background: var(--primary);
  top: 50%;
  left: 8px;
  margin-top: -1px;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  input[type=radio] + label::before {
    width: 24px;
    top: 0;
  }
  input[type=radio]:checked + label::after {
    width: 12px;
    left: 6px;
  }
}

input[type=file] {
  border-radius: 1rem;
  padding-top: 1rem;
}

.select-wrap {
  position: relative;
}
.select-wrap input {
  background: url("/images/management/common/arrow_down.png") no-repeat 1em center;
  cursor: pointer;
}
.select-wrap .select-option {
  width: 100%;
  background: var(--white);
  position: absolute;
  z-index: 50;
  display: none;
}
.select-wrap .select-option a {
  display: block;
}

input::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--gray-500);
}
input.error,
select.error,
textarea.error {
  border-color: var(--bs-danger) !important;
}
input.valid,
select.valid,
textarea.valid {
  border-color: var(--bs-success) !important;
}
input.error ~ label.error,
select.error ~ label.error,
textarea.error ~ label.error {
  position: absolute;
  width: auto;
  top: 100%;
  z-index: 5;
  display: block !important;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 1.4rem !important;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
}

.col-ect {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.col-ect .col-cont {
  width: calc(50% - 0.5em);
}
.col-ect .col-cont .cont {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.col-ect .col-cont .cont input {
  max-width: 318px;
}
.col-ect.col-add, .col-ect.col-cal {
  flex-wrap: nowrap;
}
.col-ect.col-add .col-cont, .col-ect.col-cal .col-cont {
  width: auto;
}
.col-ect.col-add .col-cont .cont, .col-ect.col-cal .col-cont .cont {
  flex-wrap: nowrap;
}
@media (max-width: 480px) {
  .col-ect .col-cont {
    flex: 1;
  }
  .col-ect.col-add, .col-ect.col-cal {
    flex-wrap: wrap;
  }
  .col-ect.col-add .col-cont, .col-ect.col-cal .col-cont {
    width: auto;
  }
  .col-ect.col-add .col-cont .cont, .col-ect.col-cal .col-cont .cont {
    flex-wrap: wrap;
  }
}

.col-radio {
  margin-block: 0.8em 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em 0;
}

.col-wrap .col-ect,
.col-wrap .col {
  margin-bottom: 2em;
}

/* common */
html {
  font-size: 62.5%;
}

body {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.025em;
  word-break: keep-all;
  color: var(--text-color);
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  body {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}
body a {
  color: var(--black);
  text-decoration: none;
}
body a:hover {
  text-decoration: none;
}
body a.default {
  color: #0e6ffc;
  text-decoration: underline;
}
body a.default:hover {
  text-decoration: none;
}
body:has(#modal.show) {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  color: var(--black);
}

a, input, button, select {
  outline-offset: 2px;
  outline-color: var(--black);
}

input,
select,
.input-group > .form-control {
  min-width: 120px;
  min-height: 40px;
  padding: 0.6em 1em;
  border: 1px solid var(--brd-c1);
  border-radius: var(--border-radius-s);
}
@media (max-width: 1280px) {
  input,
  select,
  .input-group > .form-control {
    min-height: 48px;
  }
}
@media (max-width: 767px) {
  input,
  select,
  .input-group > .form-control {
    padding-block: 0.6em;
    min-height: 42px;
  }
}

button {
  min-width: 160px;
  min-height: 52px;
  padding: 0.6em 1.25em;
  border-radius: var(--border-radius-s);
}
@media (max-width: 1280px) {
  button {
    min-width: 128px;
    min-height: 48px;
  }
}
@media (max-width: 767px) {
  button {
    min-width: 100px;
    min-height: 42px;
  }
}

select {
  background: var(--white) url(/images/beis/common/arw_select.svg) no-repeat center right 1.25em/12px 8px;
}

/* table */
table {
  width: 100%;
}

/* loading */
.loading {
  width: 100%;
  height: 100%;
  font-size: 0.85em;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}
.loading.show {
  display: flex !important;
}

/* ----------------------------------------
* common
* ----------------------------------------*/
/* tab */
.tab-com {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 3.75em;
}
.tab-com li a {
  min-width: 180px;
  min-height: 52px;
  padding: 0.8em 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-s);
  background-color: var(--gray-200);
  font-size: 1.7rem;
}
@media (max-width: 1280px) {
  .tab-com li a {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .tab-com li a {
    font-size: 1.4rem;
  }
}
.tab-com li.active a {
  background-color: var(--secondary1);
  color: var(--white);
}
@media (max-width: 1280px) {
  .tab-com {
    gap: 8px;
  }
  .tab-com li a {
    min-width: 128px;
    min-height: 48px;
  }
}
@media (max-width: 767px) {
  .tab-com {
    gap: 6px;
  }
  .tab-com li a {
    min-width: 100px;
    min-height: 42px;
  }
}

/* margin-bottom-common */
.mb-20 {
  margin-bottom: 1.25em !important; /* 40px */
}
@media (max-width: 767px) {
  .mb-20 {
    margin-bottom: 1em !important;
  }
}

.mb-40 {
  margin-bottom: 2.5em !important; /* 40px */
}
@media (max-width: 767px) {
  .mb-40 {
    margin-bottom: 2em !important;
  }
}

.mb-60 {
  margin-bottom: 3.875em !important; /* 60px */
}
@media (max-width: 767px) {
  .mb-60 {
    margin-bottom: 2.4em !important;
  }
}

.mb-80 {
  margin-bottom: 5em !important; /* 80px */
}
@media (max-width: 767px) {
  .mb-80 {
    margin-bottom: 3em !important;
  }
}

/* common */
.h-sty01 {
  margin-bottom: 0.6em;
  font-weight: 500;
  font-size: 2.6rem;
}
@media (max-width: 1280px) {
  .h-sty01 {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .h-sty01 {
    font-size: 2rem;
  }
}

.h-sty02 {
  margin-bottom: 0.6em;
  font-weight: 500;
  font-size: 1.1em;
}

.h-sty02-1 {
  margin-bottom: 0.6em;
  font-weight: 500;
  font-size: 1.3em;
}

.h-sty03 {
  margin-bottom: 0.6em;
  font-weight: 500;
  font-size: 1.8rem;
}
@media (max-width: 1280px) {
  .h-sty03 {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .h-sty03 {
    font-size: 1.5rem;
  }
}

.h-sty-line {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.h-sty-required {
  display: flex;
  align-items: flex-end;
}
.h-sty-required .required {
  color: var(--gray-500);
}
.h-sty-required span {
  margin-left: 0.5em;
  margin-bottom: 3px;
  font-weight: 400;
  font-size: 1.4rem;
}
@media (max-width: 1280px) {
  .h-sty-required span {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .h-sty-required span {
    font-size: 1.2rem;
  }
}

.h-sty-label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 500;
  font-size: 1.8rem;
}
@media (max-width: 1280px) {
  .h-sty-label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .h-sty-label {
    font-size: 1.5rem;
  }
}

.h-sty-member {
  margin-bottom: 0.2em;
}

.box-cont {
  padding: 1.25em;
  background-color: var(--gray-100);
  border-radius: 10px;
}
@media (max-width: 767px) {
  .box-cont {
    padding: 1.6em 2em;
  }
}

.box-cont-large {
  line-height: 1.6;
  padding: 1.5em 2em;
  background-color: var(--gray-100);
  border-radius: 10px;
}
@media (max-width: 480px) {
  .box-cont-large {
    padding: 1.2em 1.4em;
  }
}

/* text */
.ta-left {
  text-align: left;
}

.ta-center {
  text-align: center;
}

.t-pri {
  color: var(--primary);
}

.t-secon1 {
  color: var(--secondary1);
}

.t-secon2 {
  color: var(--secondary2);
}

.t-gray {
  color: var(--gray-500);
}

.t-red {
  color: var(--c-red);
}

.fs-16 {
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .fs-16 {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .fs-16 {
    font-size: 1.4rem;
  }
}

.fs-18 {
  font-size: 1.8rem;
}
@media (max-width: 1280px) {
  .fs-18 {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .fs-18 {
    font-size: 1.5rem;
  }
}

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

.fw-401 {
  font-weight: 401;
}

.fw-402 {
  font-weight: 402;
}

.fw-403 {
  font-weight: 403;
}

.fw-404 {
  font-weight: 404;
}

.fw-405 {
  font-weight: 405;
}

.fw-406 {
  font-weight: 406;
}

.fw-407 {
  font-weight: 407;
}

.fw-408 {
  font-weight: 408;
}

.fw-409 {
  font-weight: 409;
}

.fw-410 {
  font-weight: 410;
}

.fw-411 {
  font-weight: 411;
}

.fw-412 {
  font-weight: 412;
}

.fw-413 {
  font-weight: 413;
}

.fw-414 {
  font-weight: 414;
}

.fw-415 {
  font-weight: 415;
}

.fw-416 {
  font-weight: 416;
}

.fw-417 {
  font-weight: 417;
}

.fw-418 {
  font-weight: 418;
}

.fw-419 {
  font-weight: 419;
}

.fw-420 {
  font-weight: 420;
}

.fw-421 {
  font-weight: 421;
}

.fw-422 {
  font-weight: 422;
}

.fw-423 {
  font-weight: 423;
}

.fw-424 {
  font-weight: 424;
}

.fw-425 {
  font-weight: 425;
}

.fw-426 {
  font-weight: 426;
}

.fw-427 {
  font-weight: 427;
}

.fw-428 {
  font-weight: 428;
}

.fw-429 {
  font-weight: 429;
}

.fw-430 {
  font-weight: 430;
}

.fw-431 {
  font-weight: 431;
}

.fw-432 {
  font-weight: 432;
}

.fw-433 {
  font-weight: 433;
}

.fw-434 {
  font-weight: 434;
}

.fw-435 {
  font-weight: 435;
}

.fw-436 {
  font-weight: 436;
}

.fw-437 {
  font-weight: 437;
}

.fw-438 {
  font-weight: 438;
}

.fw-439 {
  font-weight: 439;
}

.fw-440 {
  font-weight: 440;
}

.fw-441 {
  font-weight: 441;
}

.fw-442 {
  font-weight: 442;
}

.fw-443 {
  font-weight: 443;
}

.fw-444 {
  font-weight: 444;
}

.fw-445 {
  font-weight: 445;
}

.fw-446 {
  font-weight: 446;
}

.fw-447 {
  font-weight: 447;
}

.fw-448 {
  font-weight: 448;
}

.fw-449 {
  font-weight: 449;
}

.fw-450 {
  font-weight: 450;
}

.fw-451 {
  font-weight: 451;
}

.fw-452 {
  font-weight: 452;
}

.fw-453 {
  font-weight: 453;
}

.fw-454 {
  font-weight: 454;
}

.fw-455 {
  font-weight: 455;
}

.fw-456 {
  font-weight: 456;
}

.fw-457 {
  font-weight: 457;
}

.fw-458 {
  font-weight: 458;
}

.fw-459 {
  font-weight: 459;
}

.fw-460 {
  font-weight: 460;
}

.fw-461 {
  font-weight: 461;
}

.fw-462 {
  font-weight: 462;
}

.fw-463 {
  font-weight: 463;
}

.fw-464 {
  font-weight: 464;
}

.fw-465 {
  font-weight: 465;
}

.fw-466 {
  font-weight: 466;
}

.fw-467 {
  font-weight: 467;
}

.fw-468 {
  font-weight: 468;
}

.fw-469 {
  font-weight: 469;
}

.fw-470 {
  font-weight: 470;
}

.fw-471 {
  font-weight: 471;
}

.fw-472 {
  font-weight: 472;
}

.fw-473 {
  font-weight: 473;
}

.fw-474 {
  font-weight: 474;
}

.fw-475 {
  font-weight: 475;
}

.fw-476 {
  font-weight: 476;
}

.fw-477 {
  font-weight: 477;
}

.fw-478 {
  font-weight: 478;
}

.fw-479 {
  font-weight: 479;
}

.fw-480 {
  font-weight: 480;
}

.fw-481 {
  font-weight: 481;
}

.fw-482 {
  font-weight: 482;
}

.fw-483 {
  font-weight: 483;
}

.fw-484 {
  font-weight: 484;
}

.fw-485 {
  font-weight: 485;
}

.fw-486 {
  font-weight: 486;
}

.fw-487 {
  font-weight: 487;
}

.fw-488 {
  font-weight: 488;
}

.fw-489 {
  font-weight: 489;
}

.fw-490 {
  font-weight: 490;
}

.fw-491 {
  font-weight: 491;
}

.fw-492 {
  font-weight: 492;
}

.fw-493 {
  font-weight: 493;
}

.fw-494 {
  font-weight: 494;
}

.fw-495 {
  font-weight: 495;
}

.fw-496 {
  font-weight: 496;
}

.fw-497 {
  font-weight: 497;
}

.fw-498 {
  font-weight: 498;
}

.fw-499 {
  font-weight: 499;
}

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

.fw-501 {
  font-weight: 501;
}

.fw-502 {
  font-weight: 502;
}

.fw-503 {
  font-weight: 503;
}

.fw-504 {
  font-weight: 504;
}

.fw-505 {
  font-weight: 505;
}

.fw-506 {
  font-weight: 506;
}

.fw-507 {
  font-weight: 507;
}

.fw-508 {
  font-weight: 508;
}

.fw-509 {
  font-weight: 509;
}

.fw-510 {
  font-weight: 510;
}

.fw-511 {
  font-weight: 511;
}

.fw-512 {
  font-weight: 512;
}

.fw-513 {
  font-weight: 513;
}

.fw-514 {
  font-weight: 514;
}

.fw-515 {
  font-weight: 515;
}

.fw-516 {
  font-weight: 516;
}

.fw-517 {
  font-weight: 517;
}

.fw-518 {
  font-weight: 518;
}

.fw-519 {
  font-weight: 519;
}

.fw-520 {
  font-weight: 520;
}

.fw-521 {
  font-weight: 521;
}

.fw-522 {
  font-weight: 522;
}

.fw-523 {
  font-weight: 523;
}

.fw-524 {
  font-weight: 524;
}

.fw-525 {
  font-weight: 525;
}

.fw-526 {
  font-weight: 526;
}

.fw-527 {
  font-weight: 527;
}

.fw-528 {
  font-weight: 528;
}

.fw-529 {
  font-weight: 529;
}

.fw-530 {
  font-weight: 530;
}

.fw-531 {
  font-weight: 531;
}

.fw-532 {
  font-weight: 532;
}

.fw-533 {
  font-weight: 533;
}

.fw-534 {
  font-weight: 534;
}

.fw-535 {
  font-weight: 535;
}

.fw-536 {
  font-weight: 536;
}

.fw-537 {
  font-weight: 537;
}

.fw-538 {
  font-weight: 538;
}

.fw-539 {
  font-weight: 539;
}

.fw-540 {
  font-weight: 540;
}

.fw-541 {
  font-weight: 541;
}

.fw-542 {
  font-weight: 542;
}

.fw-543 {
  font-weight: 543;
}

.fw-544 {
  font-weight: 544;
}

.fw-545 {
  font-weight: 545;
}

.fw-546 {
  font-weight: 546;
}

.fw-547 {
  font-weight: 547;
}

.fw-548 {
  font-weight: 548;
}

.fw-549 {
  font-weight: 549;
}

.fw-550 {
  font-weight: 550;
}

.fw-551 {
  font-weight: 551;
}

.fw-552 {
  font-weight: 552;
}

.fw-553 {
  font-weight: 553;
}

.fw-554 {
  font-weight: 554;
}

.fw-555 {
  font-weight: 555;
}

.fw-556 {
  font-weight: 556;
}

.fw-557 {
  font-weight: 557;
}

.fw-558 {
  font-weight: 558;
}

.fw-559 {
  font-weight: 559;
}

.fw-560 {
  font-weight: 560;
}

.fw-561 {
  font-weight: 561;
}

.fw-562 {
  font-weight: 562;
}

.fw-563 {
  font-weight: 563;
}

.fw-564 {
  font-weight: 564;
}

.fw-565 {
  font-weight: 565;
}

.fw-566 {
  font-weight: 566;
}

.fw-567 {
  font-weight: 567;
}

.fw-568 {
  font-weight: 568;
}

.fw-569 {
  font-weight: 569;
}

.fw-570 {
  font-weight: 570;
}

.fw-571 {
  font-weight: 571;
}

.fw-572 {
  font-weight: 572;
}

.fw-573 {
  font-weight: 573;
}

.fw-574 {
  font-weight: 574;
}

.fw-575 {
  font-weight: 575;
}

.fw-576 {
  font-weight: 576;
}

.fw-577 {
  font-weight: 577;
}

.fw-578 {
  font-weight: 578;
}

.fw-579 {
  font-weight: 579;
}

.fw-580 {
  font-weight: 580;
}

.fw-581 {
  font-weight: 581;
}

.fw-582 {
  font-weight: 582;
}

.fw-583 {
  font-weight: 583;
}

.fw-584 {
  font-weight: 584;
}

.fw-585 {
  font-weight: 585;
}

.fw-586 {
  font-weight: 586;
}

.fw-587 {
  font-weight: 587;
}

.fw-588 {
  font-weight: 588;
}

.fw-589 {
  font-weight: 589;
}

.fw-590 {
  font-weight: 590;
}

.fw-591 {
  font-weight: 591;
}

.fw-592 {
  font-weight: 592;
}

.fw-593 {
  font-weight: 593;
}

.fw-594 {
  font-weight: 594;
}

.fw-595 {
  font-weight: 595;
}

.fw-596 {
  font-weight: 596;
}

.fw-597 {
  font-weight: 597;
}

.fw-598 {
  font-weight: 598;
}

.fw-599 {
  font-weight: 599;
}

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

.fw-601 {
  font-weight: 601;
}

.fw-602 {
  font-weight: 602;
}

.fw-603 {
  font-weight: 603;
}

.fw-604 {
  font-weight: 604;
}

.fw-605 {
  font-weight: 605;
}

.fw-606 {
  font-weight: 606;
}

.fw-607 {
  font-weight: 607;
}

.fw-608 {
  font-weight: 608;
}

.fw-609 {
  font-weight: 609;
}

.fw-610 {
  font-weight: 610;
}

.fw-611 {
  font-weight: 611;
}

.fw-612 {
  font-weight: 612;
}

.fw-613 {
  font-weight: 613;
}

.fw-614 {
  font-weight: 614;
}

.fw-615 {
  font-weight: 615;
}

.fw-616 {
  font-weight: 616;
}

.fw-617 {
  font-weight: 617;
}

.fw-618 {
  font-weight: 618;
}

.fw-619 {
  font-weight: 619;
}

.fw-620 {
  font-weight: 620;
}

.fw-621 {
  font-weight: 621;
}

.fw-622 {
  font-weight: 622;
}

.fw-623 {
  font-weight: 623;
}

.fw-624 {
  font-weight: 624;
}

.fw-625 {
  font-weight: 625;
}

.fw-626 {
  font-weight: 626;
}

.fw-627 {
  font-weight: 627;
}

.fw-628 {
  font-weight: 628;
}

.fw-629 {
  font-weight: 629;
}

.fw-630 {
  font-weight: 630;
}

.fw-631 {
  font-weight: 631;
}

.fw-632 {
  font-weight: 632;
}

.fw-633 {
  font-weight: 633;
}

.fw-634 {
  font-weight: 634;
}

.fw-635 {
  font-weight: 635;
}

.fw-636 {
  font-weight: 636;
}

.fw-637 {
  font-weight: 637;
}

.fw-638 {
  font-weight: 638;
}

.fw-639 {
  font-weight: 639;
}

.fw-640 {
  font-weight: 640;
}

.fw-641 {
  font-weight: 641;
}

.fw-642 {
  font-weight: 642;
}

.fw-643 {
  font-weight: 643;
}

.fw-644 {
  font-weight: 644;
}

.fw-645 {
  font-weight: 645;
}

.fw-646 {
  font-weight: 646;
}

.fw-647 {
  font-weight: 647;
}

.fw-648 {
  font-weight: 648;
}

.fw-649 {
  font-weight: 649;
}

.fw-650 {
  font-weight: 650;
}

.fw-651 {
  font-weight: 651;
}

.fw-652 {
  font-weight: 652;
}

.fw-653 {
  font-weight: 653;
}

.fw-654 {
  font-weight: 654;
}

.fw-655 {
  font-weight: 655;
}

.fw-656 {
  font-weight: 656;
}

.fw-657 {
  font-weight: 657;
}

.fw-658 {
  font-weight: 658;
}

.fw-659 {
  font-weight: 659;
}

.fw-660 {
  font-weight: 660;
}

.fw-661 {
  font-weight: 661;
}

.fw-662 {
  font-weight: 662;
}

.fw-663 {
  font-weight: 663;
}

.fw-664 {
  font-weight: 664;
}

.fw-665 {
  font-weight: 665;
}

.fw-666 {
  font-weight: 666;
}

.fw-667 {
  font-weight: 667;
}

.fw-668 {
  font-weight: 668;
}

.fw-669 {
  font-weight: 669;
}

.fw-670 {
  font-weight: 670;
}

.fw-671 {
  font-weight: 671;
}

.fw-672 {
  font-weight: 672;
}

.fw-673 {
  font-weight: 673;
}

.fw-674 {
  font-weight: 674;
}

.fw-675 {
  font-weight: 675;
}

.fw-676 {
  font-weight: 676;
}

.fw-677 {
  font-weight: 677;
}

.fw-678 {
  font-weight: 678;
}

.fw-679 {
  font-weight: 679;
}

.fw-680 {
  font-weight: 680;
}

.fw-681 {
  font-weight: 681;
}

.fw-682 {
  font-weight: 682;
}

.fw-683 {
  font-weight: 683;
}

.fw-684 {
  font-weight: 684;
}

.fw-685 {
  font-weight: 685;
}

.fw-686 {
  font-weight: 686;
}

.fw-687 {
  font-weight: 687;
}

.fw-688 {
  font-weight: 688;
}

.fw-689 {
  font-weight: 689;
}

.fw-690 {
  font-weight: 690;
}

.fw-691 {
  font-weight: 691;
}

.fw-692 {
  font-weight: 692;
}

.fw-693 {
  font-weight: 693;
}

.fw-694 {
  font-weight: 694;
}

.fw-695 {
  font-weight: 695;
}

.fw-696 {
  font-weight: 696;
}

.fw-697 {
  font-weight: 697;
}

.fw-698 {
  font-weight: 698;
}

.fw-699 {
  font-weight: 699;
}

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

.line {
  height: 1px;
  padding-top: 2em;
  border-bottom: 1px solid var(--brd-c1);
}

/* ----------------------------------------
* li-sty
* ----------------------------------------*/
.li-sty-dot {
  display: flex;
  flex-direction: column;
  gap: 0.62em;
}
.li-sty-dot > li {
  position: relative;
  padding-left: 0.6em;
}
.li-sty-dot > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: var(--black);
}

.li-sty-line {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.li-sty-line li {
  position: relative;
  padding-left: 1em;
}
.li-sty-line li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 2px;
  background-color: var(--gray-500);
}
.li-sty-line.li-sty-line-in {
  margin-top: 0.7em;
}

/* ----------------------------------------
* btn
* ----------------------------------------*/
.btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-sty {
  min-height: 52px;
  padding: 0.6em 1.25em;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-s);
}
.btn-sty.btn-pri {
  background-color: var(--primary);
  color: var(--white);
}
.btn-sty.btn-secon1 {
  background-color: var(--secondary1);
  color: var(--white);
}
.btn-sty.btn-secon2 {
  background-color: var(--secondary2);
  color: var(--white);
}
.btn-sty.btn-gray {
  background-color: var(--gray-300);
  color: var(--gray-500);
}
.btn-sty.btn-black {
  background-color: var(--black);
  color: var(--white);
}
.btn-sty.btn-line-pri {
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-sty.btn-line-secon1 {
  border: 1px solid var(--secondary1);
  color: var(--secondary1);
}
.btn-sty.btn-line-black {
  border: 1px solid var(--black);
}
.btn-sty.btn-line-gray {
  border: 1px solid var(--gray-400);
  color: var(--black);
}
.btn-sty.btn-line-gray2 {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  color: var(--black);
}
.btn-sty.btn-down {
  display: flex;
  align-items: center;
  border: 1px solid var(--brd-c1);
  background-color: var(--gray-100);
}
.btn-sty.btn-down::after {
  content: "";
  display: block;
  width: 18px;
  height: 16px;
  margin-left: 0.63em;
  background: url(/images/common/i_down.svg) no-repeat center/100% 100%;
}
.btn-sty.btn-sty-s {
  min-width: 128px;
  min-height: 48px;
}
.btn-sty.btn-sty-ws {
  min-width: 100px;
  min-height: 42px;
}
@media (max-width: 1280px) {
  .btn-sty {
    min-width: 128px;
    min-height: 48px;
  }
  .btn-sty.btn-sty-s {
    min-width: 100px;
    min-height: 42px;
  }
}
@media (max-width: 767px) {
  .btn-sty {
    min-width: 100px;
    min-height: 42px;
  }
}
.btn-sty:disabled {
  cursor: not-allowed;
  color: var(--gray-500);
  background-color: var(--gray-400);
}

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

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

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

.flex-a-start {
  align-items: flex-start;
}

.flex-a-center {
  align-items: flex-end;
}

.flex-a-end {
  align-items: flex-end;
}

/* ----------------------------------------
* table
* ----------------------------------------*/
.tbl-com {
  width: 100%;
  border-top: 2px solid var(--black);
}
.tbl-com td,
.tbl-com th {
  padding: 0.9em 1.25em;
  border-right: 1px solid var(--brd-c1);
  border-bottom: 1px solid var(--brd-c1);
  vertical-align: middle;
}
.tbl-com td:last-child,
.tbl-com th:last-child {
  border-right: 0;
}
.tbl-com thead th {
  font-weight: 500;
  background-color: var(--primary-100);
}
.tbl-com tbody th {
  font-weight: 500;
  background-color: var(--gray-100);
}

/* tbl-scroll */
.tbl-scl-info {
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  border-radius: var(--border-radius);
  background-color: var(--gray-100);
  text-align: center;
  display: none;
  font-size: 1.4rem;
}
@media (max-width: 1280px) {
  .tbl-scl-info {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .tbl-scl-info {
    font-size: 1.2rem;
  }
}
@media (max-width: 767px) {
  .tbl-scl-info {
    display: block;
  }
}

@media (max-width: 767px) {
  .tbl-scl-wrap {
    overflow-x: auto;
  }
  .tbl-scl-wrap .tbl-w767 {
    min-width: 767px;
  }
  .tbl-scl-wrap .tbl-com {
    margin-bottom: 1em;
  }
}

/* ----------------------------------------
* input
* ----------------------------------------*/
.info-notice {
  margin-top: 0.8em;
  font-size: 1.4rem;
}
@media (max-width: 1280px) {
  .info-notice {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .info-notice {
    font-size: 1.2rem;
  }
}

.col-ect {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.col-ect .col-cont {
  width: calc(50% - 0.5em);
}
.col-ect .col-cont .cont {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.col-ect .col-cont .cont input {
  max-width: 318px;
}
.col-ect.col-full, .col-ect.col-full-wrap {
  flex-wrap: nowrap;
}
.col-ect.col-full .col-cont, .col-ect.col-full-wrap .col-cont {
  width: 100%;
}
.col-ect.col-full .col-cont .cont, .col-ect.col-full-wrap .col-cont .cont {
  flex-wrap: nowrap;
}
.col-ect.col-full-wrap .col-cont .cont input {
  max-width: calc(50% - 0.5em);
}
.col-ect.col-sample .col-cont .cont input:nth-child(2) {
  margin-right: 1.5em;
}
.col-ect.col-sample .col-cont .cont input:nth-child(4) {
  max-width: 120px;
}
@media (max-width: 560px) {
  .col-ect .col-cont {
    flex: 1;
  }
  .col-ect.col-full {
    flex-wrap: wrap;
  }
  .col-ect.col-full .col-cont {
    width: 100%;
  }
  .col-ect.col-full .col-cont .cont {
    flex-wrap: wrap;
  }
  .col-ect.col-full-wrap .col-cont .cont input {
    max-width: 100%;
  }
  .col-ect.col-sample .col-cont .cont input:nth-child(2) {
    max-width: calc(100% - 50px);
    margin-right: 0;
  }
}
@media (max-width: 340px) {
  .col-ect .col-cont {
    flex: 0 0 auto;
    width: 100%;
  }
  .col-ect.col-full-wrap {
    flex-wrap: wrap;
  }
  .col-ect.col-full-wrap .col-cont {
    width: 100%;
  }
  .col-ect.col-full-wrap .col-cont .cont {
    flex-wrap: wrap;
  }
}

/* ----------------------------------------
* finish-cont
* ----------------------------------------*/
.finish-wrap {
  max-width: 540px;
  margin: 0 auto;
}
.finish-wrap .finish-head {
  text-align: center;
}
.finish-wrap .finish-head .img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  margin: 0 auto 1.75em;
  aspect-ratio: 1;
}
.finish-wrap .finish-head .img img {
  width: 92%;
}
.finish-wrap .finish-cont {
  padding: 2.5em;
  background-color: var(--gray-100);
  border-radius: var(--border-radius-s);
}
.finish-wrap .finish-cont .cont1 {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid var(--brd-c1);
}
.finish-wrap .finish-cont .cont1 .tbl-fin th {
  width: 140px;
}
.finish-wrap .finish-cont .cont2 .tbl-fin th {
  width: 100px;
}
.finish-wrap .finish-cont.member-fin {
  text-align: center;
  word-break: break-all;
}
@media (max-width: 767px) {
  .finish-wrap .finish-head .img {
    width: 48px;
    margin-bottom: 1em;
  }
  .finish-wrap .finish-cont {
    padding: 2em;
  }
  .finish-wrap .finish-cont .cont1 .tbl-fin th {
    width: 120px;
  }
  .finish-wrap .finish-cont .cont2 .tbl-fin th {
    width: 80px;
  }
}

.tbl-fin td, .tbl-fin th {
  padding: 0.4em;
  text-align: left;
}
.tbl-fin th {
  font-weight: 500;
}
@media (max-width: 320px) {
  .tbl-fin tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
  }
  .tbl-fin tr:last-child {
    margin-bottom: 0;
  }
  .tbl-fin td, .tbl-fin th {
    padding: 0.2em;
    word-break: break-all;
    vertical-align: top;
  }
}

/* 파일박스 */
.filebox-wrap {
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: var(--white);
  padding: 2em 1em;
  cursor: pointer;
}
.filebox-wrap input[type=file] {
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  margin: -1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.filebox-wrap .drop_message {
  font-size: 2em;
  margin-bottom: 0.5em;
}
.filebox-wrap .progress {
  font-size: 1.3rem;
  height: 20px;
  margin: 2em 0;
}
.filebox-wrap .bar {
  width: 0%;
  height: 20px;
  border-radius: 5px;
  background-color: var(--percent-color);
}
.filebox-wrap .percent {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.file-container {
  margin: 4px 0;
}
.file-container .file-item {
  margin: 0 4px;
}
.file-container .file-item .file-item-thumb {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 100%;
  margin-bottom: 5px;
}
.file-container .file-item .file-item-thumb.thumbnail {
  box-shadow: 0 0 0 3px #4872f4 inset;
  outline: 5px solid green;
  outline-offset: -5px;
}

/* ----------------------------------------
* 서브 검색
* ----------------------------------------*/
.search-container {
  padding: 1em;
  margin-bottom: 3.2em;
  display: flex;
  align-items: center;
  gap: var(--gap);
  border-radius: var(--border-radius-s);
  background-color: var(--gray-100);
}
.search-container .search-cont {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-container .search-cont select,
.search-container .search-cont input {
  border: 0;
}
.search-container .search-cont select {
  width: 200px;
}
.search-container .search-cont input {
  width: 280px;
}
.search-container .total {
  margin-left: auto;
}
@media (max-width: 1024px) {
  .search-container .search-cont select {
    width: 180px;
  }
  .search-container .search-cont input {
    width: 252px;
  }
}
@media (max-width: 767px) {
  .search-container {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 1.2em;
  }
  .search-container .search-cont {
    width: 100%;
  }
  .search-container .search-cont select,
  .search-container .search-cont input,
  .search-container .search-cont button {
    min-width: 0;
  }
  .search-container .search-cont select {
    width: 30%;
  }
  .search-container .search-cont input {
    width: 55%;
  }
  .search-container .search-cont button {
    width: 15%;
  }
}
@media (max-width: 480px) {
  .search-container {
    padding: 1.6em 1.6em 1em;
  }
  .search-container .search-cont {
    flex-wrap: wrap;
    justify-content: center;
  }
  .search-container .search-cont select {
    width: 100%;
  }
  .search-container .search-cont input {
    flex: 1;
  }
  .search-container .search-cont button {
    width: 80px;
  }
}

/* ----------------------------------------
* 페이징
* ----------------------------------------*/
.pagination-wrap {
  margin-top: 5em;
}
.pagination-wrap .page-item .page-link,
.pagination-wrap .pagination-item .page-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  aspect-ratio: 1;
  border: 0;
  background-color: var(--white);
  color: var(--black);
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .pagination-wrap .page-item .page-link,
  .pagination-wrap .pagination-item .page-link {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .pagination-wrap .page-item .page-link,
  .pagination-wrap .pagination-item .page-link {
    font-size: 1.4rem;
  }
}
.pagination-wrap .page-item .page-link::after,
.pagination-wrap .pagination-item .page-link::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--white);
}
.pagination-wrap .page-item.active .page-link::after {
  background-color: var(--black);
}
.pagination-wrap .page-item.prev-block .page-link {
  background: url(/images/common/arw_page_first.svg) no-repeat center/12px 12px;
}
.pagination-wrap .page-item.prev-page .page-link {
  background: url(/images/common/arw_page_prev.svg) no-repeat center/8px 12px;
}
.pagination-wrap .page-item.next-block .page-link {
  background: url(/images/common/arw_page_last.svg) no-repeat center/12px 12px;
}
.pagination-wrap .page-item.next-page .page-link {
  background: url(/images/common/arw_page_next.svg) no-repeat center/8px 12px;
}
.pagination-wrap .pagination-item {
  width: 30px;
}
@media (max-width: 768px) {
  .pagination-wrap .pagination {
    flex-wrap: wrap;
  }
  .pagination-wrap .pagination .page-item .page-link,
  .pagination-wrap .pagination .pagination-item .page-link {
    width: 32px;
  }
  .pagination-wrap .pagination .page-item .page-link::after,
  .pagination-wrap .pagination .pagination-item .page-link::after {
    bottom: 2px;
  }
}

/* 페이지 준비중입니다. */
.soon {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.soon > div {
  width: 60%;
  max-width: 500px;
}
.soon h2 {
  font-size: 3.2rem;
  font-weight: 500;
  margin-top: 2em;
}
@media (max-width: 1280px) {
  .soon h2 {
    font-size: 2.6rem;
  }
}
@media (max-width: 768px) {
  .soon h2 {
    font-size: 2.2rem;
  }
}
.soon h2 span {
  color: #ff9318;
}

/* common */
body {
  font-family: "NotoSansKR", sans-serif !important;
  font-weight: 300 !important;
}

.wrap-in {
  max-width: 1408px;
  margin: 0 auto;
}
@media (max-width: 1460px) {
  .wrap-in {
    max-width: 96%;
  }
}
@media (max-width: 767px) {
  .wrap-in {
    max-width: 94%;
  }
}
@media (max-width: 480px) {
  .wrap-in {
    max-width: 92%;
  }
}

/*----------------------------- header ------------------------------*/
:root {
  --header-height: 100px;
  --header-padding: 32px;
  --border-radius: 20px;
  --border-radius-s: 10px;
  --gap: 32px;
  --gap2: 20px;
}
@media (max-width: 1460px) {
  :root {
    --header-padding: 2%;
  }
}
@media (max-width: 1280px) {
  :root {
    --border-radius: 12px;
    --border-radius-s: 8px;
    --gap: 24px;
    --gap2: 16px;
  }
}
@media (max-width: 1024px) {
  :root {
    --header-height: 80px;
    --breadcrumb-height: 56px;
  }
}
@media (max-width: 767px) {
  :root {
    --header-height: 68px;
    --header-padding: 3%;
    --breadcrumb-height: 48px;
    --border-radius: 8px;
    --border-radius-s: 6px;
    --gap: 16px;
    --gap2: 12px;
  }
}
@media (max-width: 480px) {
  :root {
    --header-padding: 4%;
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 32px;
  height: var(--header-height);
  background-color: var(--white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
  z-index: 100;
  /* nav */
  /* util */
}
header .logo {
  flex: 1;
}
header .logo a {
  display: block;
  width: 266px;
  height: 34px;
  background: url("/images/beis/common/logo.png") no-repeat center/100% 100%;
}
header .gnb-bg {
  display: none;
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: 224px;
  background-color: var(--white);
  border-top: 1px solid var(--brd-c3);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.03);
}
header .header-gnb {
  flex: 1;
  height: 100%;
}
header .header-gnb .gnb {
  min-width: 800px;
  height: 100%;
  display: flex;
  transition: 0.4s;
}
header .header-gnb .gnb .gnb-dep1 {
  width: 25%;
  position: relative;
}
header .header-gnb .gnb .gnb-dep1 > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  font-weight: 500;
  font-size: 2rem;
  transition: all 0.4s ease;
}
@media (max-width: 1280px) {
  header .header-gnb .gnb .gnb-dep1 > a {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  header .header-gnb .gnb .gnb-dep1 > a {
    font-size: 1.7rem;
  }
}
header .header-gnb .gnb .gnb-dep1 > a::after {
  content: "";
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
  display: block;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s ease;
}
header .header-gnb .gnb .gnb-dep1:hover > a, header .header-gnb .gnb .gnb-dep1.active > a {
  color: var(--primary);
}
header .header-gnb .gnb .gnb-dep1:hover > a::after, header .header-gnb .gnb .gnb-dep1.active > a::after {
  border-top: 6px solid var(--primary);
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid transparent;
}
header .header-gnb .gnb .gnb-dep1.active > a::after {
  animation-name: moves-arrow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
header .header-gnb .gnb .gnb-dep1.--nav-open > a::after {
  background-image: url(/images/beis/common/arw_up_b.svg);
}
header .header-gnb .gnb .gnb-dep1.--nav-open .gnb-dep2 {
  display: block !important;
}
header .header-gnb .gnb .gnb-dep2 {
  display: none;
  width: 100%;
  position: absolute;
  top: var(--header-height);
  padding-top: 1.6em;
}
header .header-gnb .gnb .gnb-dep2 li a {
  width: 100%;
  text-align: center;
  display: block;
  padding: 0.4em;
  font-weight: 400;
  transition: all 0.4s ease;
}
header .header-gnb .gnb .gnb-dep2 li a span {
  display: inline-block;
  position: relative;
}
header .header-gnb .gnb .gnb-dep2 li a span::after {
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1.5px solid var(--primary);
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  transform: scale(0);
  transform-origin: bottom right;
  transition: transform 0.4s ease;
}
header .header-gnb .gnb .gnb-dep2 li a:hover {
  color: var(--primary);
}
header .header-gnb .gnb .gnb-dep2 li a:hover span::after {
  transform: scale(1);
  transform-origin: bottom left;
}
header .header-gnb .gnb .gnb-dep2 li.active a {
  color: var(--primary);
}
header .header-gnb .gnb .gnb-dep2 li.active a span::after {
  transform: scale(1);
}
header .util {
  position: relative;
  flex: 1;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 40px;
}
header .util .icon-layout a {
  display: flex;
  align-items: center;
  gap: 8px;
}
header .util .icon-layout a::before {
  content: "";
  display: block;
  width: 40px;
  aspect-ratio: 1;
  background-color: var(--black);
}
header .util .icon-layout.search a::before {
  background: url(/images/beis/common/i_search_g.svg) no-repeat center/65% 65%;
}
header .util .icon-layout.login a::before {
  background: url(/images/beis/common/i_login_g.svg) no-repeat center/65% 65%;
}
header .util .burger-menu a {
  width: var(--header-height);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
}
header .util .burger-menu .burger-in {
  position: relative;
  width: 32%;
  height: 22px;
}
header .util .burger-menu .burger-in span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  transition: 0.3s ease-in-out;
}
header .util .burger-menu .burger-in span:nth-child(2) {
  top: 10px;
}
header .util .burger-menu .burger-in span:nth-child(3) {
  top: auto;
  bottom: 0;
}
header .util .burger-menu.--burger-open .burger-in span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}
header .util .burger-menu.--burger-open .burger-in span:nth-child(2) {
  transform: rotate(-45deg);
  top: 10px;
}
header .util .burger-menu.--burger-open .burger-in span:nth-child(3) {
  opacity: 0;
}
@media (max-width: 1460px) {
  header {
    /* nav */
    /* util */
  }
  header .header-gnb .gnb {
    min-width: 680px;
  }
  header .util {
    gap: 16px;
  }
  header .util .icon-layout a span {
    display: none;
  }
  header .util .burger-menu {
    padding-left: 10px;
  }
}
@media (max-width: 1280px) {
  header {
    /* nav */
  }
  header .gnb-bg {
    display: none;
    height: calc(100vh - var(--header-height));
    background-color: var(--black);
    border-top: 0;
    box-shadow: none;
    opacity: 0.5;
  }
  header .header-gnb {
    display: none;
    flex: 0;
    width: 70%;
    height: calc(100vh - var(--header-height));
    top: var(--header-height);
    right: 0;
    position: absolute;
    background-color: var(--white);
    z-index: 90;
  }
  header .header-gnb .gnb {
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: block;
  }
  header .header-gnb .gnb .gnb-dep1 {
    width: 100%;
  }
  header .header-gnb .gnb .gnb-dep1 > a {
    position: relative;
    display: block;
    padding: 1em 2em;
    text-align: left;
    font-size: 2.4rem;
  }
}
@media (max-width: 1280px) and (max-width: 1280px) {
  header .header-gnb .gnb .gnb-dep1 > a {
    font-size: 2rem;
  }
}
@media (max-width: 1280px) and (max-width: 768px) {
  header .header-gnb .gnb .gnb-dep1 > a {
    font-size: 1.8rem;
  }
}
@media (max-width: 1280px) {
  header .header-gnb .gnb .gnb-dep1 > a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: 0.3s ease-in-out;
    left: auto;
    right: 2em;
    width: 19px;
    height: 7px;
    background: url(/images/beis/common/arw_down_b.svg) no-repeat center/100% 100%;
    border: none !important;
    animation-name: moves-arrow-mobile !important;
  }
  header .header-gnb .gnb .gnb-dep1.--nav-open > a::after {
    background-image: url(/images/beis/common/arw_up_b.svg);
  }
  header .header-gnb .gnb .gnb-dep1.--nav-open .gnb-dep2 {
    display: block !important;
  }
  header .header-gnb .gnb .gnb-dep2 {
    position: static;
    background-color: var(--brd-c3);
    padding: 1.6em 3em;
  }
  header .header-gnb .gnb .gnb-dep2 li a {
    text-align: left;
  }
}
@media (max-width: 1024px) {
  header {
    /* util */
  }
  header .logo a {
    width: 220px;
    height: 27px;
  }
  header .util .burger-menu .burger-in {
    width: 36%;
    height: 18px;
  }
  header .util .burger-menu .burger-in span:nth-child(2) {
    top: 8px;
  }
}
@media (max-width: 767px) {
  header {
    padding-inline: 24px 16px;
    /* nav */
    /* util */
  }
  header .logo a {
    width: 159px;
    height: 20px;
  }
  header .gnb-bg {
    display: none;
  }
  header .header-gnb {
    width: 100%;
    border-top: 1px solid var(--brd-c3);
  }
  header .util {
    gap: 4px;
  }
  header .util .icon-layout a {
    gap: 0;
  }
  header .util .burger-menu {
    padding-left: 0;
  }
  header .util .burger-menu a {
    width: 48px;
    background-color: transparent;
  }
  header .util .burger-menu .burger-in {
    width: 60%;
    height: 22px;
  }
  header .util .burger-menu .burger-in span {
    background-color: var(--primary);
    border-radius: 4px;
  }
  header .util .burger-menu .burger-in span:nth-child(2) {
    top: 10px;
  }
}
@media (max-width: 480px) {
  header {
    padding-inline: 20px 10px;
    /* util */
  }
  header .util .icon-layout a::before {
    width: 32px;
  }
  header .util .burger-menu a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  header .util .burger-menu .burger-in {
    height: 18px;
  }
  header .util .burger-menu .burger-in span:nth-child(2) {
    top: 8px;
  }
}
@media (max-width: 320px) {
  header {
    /* util */
  }
  header .logo {
    flex: 0 1 auto;
  }
  header .logo a {
    width: 133px;
    height: 17px;
  }
  header .util {
    flex: 0 1 auto;
  }
}
@media (max-width: 280px) {
  header .logo a {
    aspect-ratio: 88/26;
    width: 31.43vw;
    height: 26px;
    background: url("/images/beis/common/logo_m2.png") no-repeat left center/contain;
  }
}

/* ----------------------------------------
* logo-link
* ----------------------------------------*/
.logo-link-wrap {
  border-top: 1px solid var(--brd-c1);
  overflow: hidden;
}
.logo-link-wrap .logo-link {
  max-width: 1168px;
  margin: 0 auto;
  padding-block: 1.875em;
}
.logo-link-wrap .logo-link a {
  text-align: center;
  display: block;
  padding-inline: 0.8em;
}
@media (max-width: 480px) {
  .logo-link-wrap .logo-link {
    padding-block: 1.2em;
  }
}

/* ----------------------------------------
* footer
* ----------------------------------------*/
footer {
  padding-block: 4em;
  background-color: #f6f8fb;
}
footer .f-top {
  padding-inline: 1.25em;
  padding-bottom: 3em;
  margin-bottom: 3em;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--brd-c2);
}
footer .f-top .logo {
  width: 310px;
  height: 34px;
  background: url("/images/beis/common/logo_f.png") no-repeat center/100% 100%;
}
footer .f-top .f-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4em;
  font-weight: 500;
}
footer .f-cont {
  padding-inline: 1.25em;
  display: flex;
}
footer .f-cont .address dl {
  display: flex;
  margin-bottom: 0.5em;
  gap: 1.25em;
}
footer .f-cont .address dl dt {
  margin-bottom: 0;
  color: var(--primary);
  font-weight: 500;
}
footer .f-cont .address dl dd {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.8em;
}
footer .f-cont .copyright {
  margin-left: auto;
  color: var(--gray-500);
  text-align: right;
}
@media (max-width: 1280px) {
  footer .f-top {
    display: block;
  }
  footer .f-top .logo {
    width: 248px;
    height: 27px;
  }
  footer .f-top .f-nav {
    margin-top: 2em;
    margin-left: 0;
  }
  footer .f-cont {
    display: block;
  }
  footer .f-cont .copyright {
    margin-top: 2em;
    margin-left: 0;
    text-align: left;
  }
}
@media (max-width: 1280px) {
  footer .f-top .logo {
    width: 217px;
    height: 24px;
  }
}
@media (max-width: 767px) {
  footer {
    padding-block: 3.2em;
  }
  footer .f-top {
    padding-inline: 0.5em;
    padding-bottom: 2em;
    margin-bottom: 2em;
  }
  footer .f-top .logo {
    width: 186px;
    height: 20px;
    margin: 0 auto;
  }
  footer .f-top .f-nav {
    flex-wrap: wrap;
    gap: 0.5em;
  }
  footer .f-top .f-nav li {
    width: calc((100% - 0.5em) / 2);
    text-align: center;
    background-color: var(--white);
    border-radius: 20px;
  }
  footer .f-top .f-nav li a {
    display: block;
    padding: 0.8em 1em;
  }
  footer .f-cont {
    padding-inline: 0.5em;
  }
  footer .f-cont .address dl {
    display: block;
    text-align: center;
  }
  footer .f-cont .address dl dd {
    justify-content: center;
  }
  footer .f-cont .copyright {
    text-align: center;
  }
}
@media (max-width: 320px) {
  footer .f-top .f-nav {
    flex-direction: column;
  }
  footer .f-top .f-nav li {
    width: 100%;
  }
  footer .f-top .f-nav li a {
    padding: 0.5em 1em;
  }
}

@keyframes moves-arrow {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 15%);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes moves-arrow-mobile {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(0);
  }
}
/************************************************************************************/
/************************************* Colors *************************************/
/************************************************************************************/
:root {
  --white:#fff;
  --black:#000;
  --border-color:#cccccc;
  --bg-color:#fafbfd;
  --point-color:#3853c9;
  --point-over-color: #010A65;
  --point-sub-color:#ec5300;
  --point-color-bg: #f0f1fa;
  --point-sub-color-bg: #fff5ef;
  --bg-color:#fafbfd;
  --table-header:#f2f2f2;
  --top-navigation-bg-color:#2d3134;
  --left-menu-bg-color:#f0f3f8;
  --prev-menu-bg-color:#72809d;
  --depth1-bg-color:#d7e1ea;
  --percent-color: #77ea3b;
  --gray-e5:#e5e5e5;
  --gray-fa:#fafafa;
  --gray-f8:#f8f8f8;
  --gray-7c:#7c7c7c;
  --gray-d5:#d5d5d5;
  /* btn color */
  --btn-white-over-color: #f1edef;
  --btn-secondary-color:#673fe9;
  --btn-secondary-over-color: #3d278d;
  --btn-third-color:#75777e;
  --btn-third-over-color: #5d5e64;
  /* color */
  --text-color:#1A1A1A;
  --primary: #014099;
  --primary-400: #678cc2;
  --primary-300: #99b3d6;
  --primary-200: #ccd9eb;
  --primary-100: #e5ecf5;
  --primary-000: #f2f5fa;
  --secondary1: #00a1de;
  --secondary2: #01a8ae;
  --gray-100: #f3f4f7;
  --gray-200: #ebedf0;
  --gray-300: #dfe2e6;
  --gray-400: #bfc5cd;
  --gray-500: #666666;
  --brd-c1: #bfc5cd;
  --brd-c2: #dfe2e6;
  --brd-c3: #f3f4f7;
  --brd-c4: #d4dfed;
  --c-red: #ec0000;
  --hover: var(--white);
}

/* ----------------------------------------
* search-wrap
* ----------------------------------------*/
.search-wrap {
  position: relative;
  margin-top: var(--header-height);
  padding-block: 4em;
}
.search-wrap::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 10.83%;
  background: url(/images/beis/main/body_bg.png) no-repeat top center/100% 100%;
}
.search-wrap .cont-wrap {
  display: flex;
  align-items: flex-start;
}
.search-wrap .cont-wrap .cont {
  flex: 1;
}
.search-wrap .cont-wrap .cont h2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-left: 8px;
  font-weight: 700;
  font-size: clamp(4rem, 3.8889vw, 5rem);
}
.search-wrap .cont-wrap .cont h2 div {
  padding-right: 6.39%;
  position: relative;
  z-index: 1;
  background-color: var(--white);
}
.search-wrap .cont-wrap .cont h2::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  width: 90%;
  height: 1px;
  margin-bottom: 18px;
  background-color: #d3d3d3;
}
.search-wrap .cont-wrap .num {
  margin-block: 6px 3.125em;
  padding-left: 8px;
  font-weight: 500;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .search-wrap .cont-wrap .num {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .search-wrap .cont-wrap .num {
    font-size: 1.7rem;
  }
}
.search-wrap .cont-wrap .num span {
  font-weight: 700;
  color: var(--primary);
}
.search-wrap .cont-wrap .search-cont {
  position: relative;
  max-width: 780px;
  height: 70px;
}
.search-wrap .cont-wrap .search-cont::before {
  content: "";
  display: block;
  position: absolute;
  left: 2.2em;
  top: 50%;
  margin-top: -13px;
  width: 26px;
  height: 26px;
  background: url("/images/beis/main/i_search_b.svg") no-repeat center/100% 100%;
}
.search-wrap .cont-wrap .search-cont .main-search {
  width: 100%;
  height: 100%;
  padding-left: 4em;
  border: 2px solid var(--black);
  border-radius: 100px;
  font-size: 1.8rem;
}
@media (max-width: 1280px) {
  .search-wrap .cont-wrap .search-cont .main-search {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .search-wrap .cont-wrap .search-cont .main-search {
    font-size: 1.5rem;
  }
}
.search-wrap .cont-wrap .search-cont .main-search-btn {
  position: absolute;
  top: 0;
  right: 4px;
  width: 110px;
  height: 100%;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .search-wrap .cont-wrap .search-cont .main-search-btn {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .search-wrap .cont-wrap .search-cont .main-search-btn {
    font-size: 1.7rem;
  }
}
.search-wrap .cont-wrap .search-cont .main-search-btn::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -16px;
  width: 2px;
  height: 32px;
  background-color: var(--brd-c1);
}
.search-wrap .quick-btn {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 2em;
  margin-right: 2em;
  width: 164px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--secondary1), var(--primary));
  z-index: 2;
}
.search-wrap .quick-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: -17px;
  left: -17px;
  width: calc(100% + 34px);
  aspect-ratio: 1;
  border: 4px dotted #e3ebee;
  border-radius: 50%;
  -webkit-animation: rotate-center 18s linear infinite both;
  animation: rotate-center 18s linear infinite both;
}
.search-wrap .quick-btn .btn-in {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: var(--white);
  line-height: 1.3;
  font-weight: 600;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .search-wrap .quick-btn .btn-in {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .search-wrap .quick-btn .btn-in {
    font-size: 1.7rem;
  }
}
.search-wrap .quick-btn .btn-in strong {
  font-weight: 700;
  font-size: 2.2rem;
}
@media (max-width: 1280px) {
  .search-wrap .quick-btn .btn-in strong {
    font-size: 1.9rem;
  }
}
@media (max-width: 768px) {
  .search-wrap .quick-btn .btn-in strong {
    font-size: 1.8rem;
  }
}
@media (max-width: 1440px) {
  .search-wrap .cont-wrap {
    padding-left: 1em;
  }
}
@media (max-width: 1280px) {
  .search-wrap .cont-wrap .search-cont {
    max-width: 640px;
    height: 72px;
  }
}
@media (max-width: 1024px) {
  .search-wrap .cont-wrap .cont h2 {
    align-items: center;
  }
  .search-wrap .cont-wrap .cont h2 span {
    display: block;
  }
  .search-wrap .cont-wrap .cont h2::after {
    width: 80%;
  }
  .search-wrap .cont-wrap .num {
    margin-top: 1em;
  }
  .search-wrap .cont-wrap .search-cont {
    height: 64px;
  }
  .search-wrap .quick-btn {
    width: 136px;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .search-wrap .cont-wrap .cont h2::after {
    width: 65%;
  }
  .search-wrap .cont-wrap .search-cont {
    max-width: 767px;
    width: 100%;
  }
  .search-wrap .quick-btn {
    position: absolute;
    top: -1em;
    right: 0;
    width: 120px;
  }
}
@media (max-width: 560px) {
  .search-wrap .cont-wrap {
    padding-inline: 0.4em;
  }
  .search-wrap .cont-wrap .cont h2 {
    font-size: clamp(3rem, 6.875vw, 4rem);
  }
  .search-wrap .cont-wrap .cont h2::after {
    width: 90%;
    bottom: 0;
  }
  .search-wrap .cont-wrap .num {
    margin-bottom: 2em;
  }
  .search-wrap .cont-wrap .search-cont {
    height: 54px;
  }
  .search-wrap .cont-wrap .search-cont::before {
    left: 1em;
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }
  .search-wrap .cont-wrap .search-cont .main-search {
    padding-left: 2.8em;
    font-size: 1.6rem;
  }
  .search-wrap .cont-wrap .search-cont .main-search-btn {
    width: 60px;
    top: 2px;
    border-radius: 0 50px 50px 0;
    height: calc(100% - 4px);
    background-color: var(--white);
  }
  .search-wrap .cont-wrap .search-cont .main-search-btn::before {
    height: 28px;
    margin-top: -14px;
  }
  .search-wrap .quick-btn {
    width: 90px;
    top: -72px;
    margin-right: 1.5em;
  }
  .search-wrap .quick-btn::before {
    top: -11px;
    left: -11px;
    width: calc(100% + 22px);
  }
  .search-wrap .quick-btn .btn-in {
    font-size: 1.4rem;
  }
}
@media (max-width: 360px) {
  .search-wrap .cont-wrap .cont h2::after {
    display: none;
  }
}

/* ----------------------------------------
* box-content
* ----------------------------------------*/
.box-content-wrap {
  position: relative;
}
.box-content-wrap::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 9.16%;
  background: url(/images/beis/main/body_bg_bottom.png) no-repeat bottom center/100% 100%;
}

.box-content {
  position: relative;
  padding-bottom: 6.25em;
  display: flex;
  gap: 32px;
  z-index: 1;
}
.box-content .cont-inner {
  flex-shrink: 0;
  width: calc((100% - 64px) / 3);
}
.box-content .cont-inner.box-beis, .box-content .cont-inner.box-notice {
  padding: 2em 2.5em 2.5em;
  border-radius: var(--border-radius);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  background-color: var(--white);
  transition: all 0.4s ease;
}
.box-content .cont-inner.box-beis a, .box-content .cont-inner.box-notice a {
  text-decoration: none;
}
.box-content .cont-inner.box-beis:hover, .box-content .cont-inner.box-notice:hover {
  background-color: var(--primary);
}
.box-content .cont-inner.box-beis:hover a, .box-content .cont-inner.box-notice:hover a {
  color: var(--hover);
}
.box-content .cont-inner.box-beis:hover .more::before, .box-content .cont-inner.box-beis:hover .more::after, .box-content .cont-inner.box-notice:hover .more::before, .box-content .cont-inner.box-notice:hover .more::after {
  background-color: var(--hover);
}
.box-content .cont-inner.box-notice {
  width: calc((100% - 64px) / 3 + 100px);
}
.box-content .m-h2-sty {
  position: relative;
  padding-left: 6px;
  margin-bottom: 0.686em;
  font-family: "Freesentation";
  font-weight: 500;
  font-size: 2.8rem;
}
@media (max-width: 1280px) {
  .box-content .m-h2-sty {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .box-content .m-h2-sty {
    font-size: 2rem;
  }
}
.box-content .m-h2-sty a {
  display: flex;
  align-items: center;
}
.box-content .m-h2-sty .more {
  position: relative;
  width: 20px;
  margin-left: auto;
  margin-right: 8px;
  aspect-ratio: 1;
}
.box-content .m-h2-sty .more::before, .box-content .m-h2-sty .more::after {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--secondary1);
}
.box-content .m-h2-sty .more::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  margin-top: -1px;
}
.box-content .m-h2-sty .more::after {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  margin-left: -1px;
}
.box-content .equiment-sld figure a {
  display: block;
  position: relative;
  padding-top: 61.41%;
  overflow: hidden;
}
.box-content .equiment-sld figure a::before {
  content: "";
  display: block;
  width: 100%;
  height: 33%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.box-content .equiment-sld figure a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}
.box-content .equiment-sld figure a figcaption {
  width: 100%;
  padding: 1em 1.5em;
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--white);
  font-weight: 600;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.05) 80%, rgba(0, 0, 0, 0) 100%);
  font-size: 2.2rem;
  transition: all 0.4s ease;
}
@media (max-width: 1280px) {
  .box-content .equiment-sld figure a figcaption {
    font-size: 1.9rem;
  }
}
@media (max-width: 768px) {
  .box-content .equiment-sld figure a figcaption {
    font-size: 1.8rem;
  }
}
.box-content .equiment-sld figure a:hover img {
  transform: translate(-50%, -50%) scale(1.2);
}
.box-content .equiment-sld figure a:hover figcaption {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.5);
}
.box-content .box-banner {
  width: calc((100% - 64px) / 3 - 100px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.box-content .box-banner .banner {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 2.2em 3em;
  border-radius: var(--border-radius);
  background-color: var(--primary-100);
  transition: all 0.4s ease;
}
.box-content .box-banner .banner .tit {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.box-content .box-banner .banner h3 {
  font-family: "Freesentation";
  font-weight: 600;
  font-size: 2.8rem;
  transition: all 0.4s ease;
}
@media (max-width: 1280px) {
  .box-content .box-banner .banner h3 {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .box-content .box-banner .banner h3 {
    font-size: 2rem;
  }
}
.box-content .box-banner .banner p {
  margin-top: 0.4em;
  font-size: 1.8rem;
}
@media (max-width: 1280px) {
  .box-content .box-banner .banner p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .box-content .box-banner .banner p {
    font-size: 1.5rem;
  }
}
.box-content .box-banner .banner figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.box-content .box-banner .banner figure img {
  animation-iteration-count: infinite;
  animation-duration: 2s;
}
.box-content .box-banner .banner figure.notice-icon img {
  animation-name: notice-rotate;
}
.box-content .box-banner .banner figure.webzine-icon img {
  animation-name: moves;
}
.box-content .box-banner .banner:nth-child(1) figure img {
  width: 100px;
  margin-bottom: -5px;
}
.box-content .box-banner .banner:nth-child(2) figure img {
  width: 92px;
}
.box-content .box-banner .banner:hover {
  color: var(--hover);
  background-color: var(--primary);
}
.box-content .box-banner .banner:hover h3 {
  color: var(--hover);
}
@media (max-width: 1280px) {
  .box-content .box-banner .banner {
    padding-inline: 2em;
  }
}
@media (max-width: 1024px) {
  .box-content {
    flex-wrap: wrap;
    gap: 24px;
  }
  .box-content .cont-inner {
    width: calc((100% - 24px) / 2);
  }
  .box-content .box-banner {
    width: 100%;
    flex-direction: row;
  }
  .box-content .box-banner .banner {
    flex: 1;
  }
}
@media (max-width: 767px) {
  .box-content {
    gap: 16px;
  }
  .box-content .cont-inner {
    width: 100% !important;
  }
  .box-content .cont-inner.box-beis, .box-content .cont-inner.box-notice {
    padding: 1.5em 2em 2em;
  }
  .box-content .m-h2-sty {
    padding-left: 0;
  }
  .box-content .m-h2-sty .more {
    margin-right: 0;
  }
  .box-content .box-banner .banner {
    padding: 1.5em 2em;
  }
  .box-content .box-banner .banner:nth-child(1) figure img {
    width: 80px;
  }
  .box-content .box-banner .banner:nth-child(2) figure img {
    width: 72px;
  }
}
@media (max-width: 480px) {
  .box-content .box-banner {
    flex-direction: column;
  }
}

/*----------------------------- box-banner ------------------------------*/
/*----------------------------- box-beis ------------------------------*/
.box-beis .equiment-wrap {
  position: relative;
}
.box-beis .equiment-wrap .arw {
  display: block;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  background: url(/images/beis/main/arw_next_w.svg) no-repeat center/16px 30px;
}
.box-beis .equiment-wrap .arw.main-arw-prev {
  left: 0.5em;
  background-image: url(/images/beis/main/arw_prev_w.svg);
}
.box-beis .equiment-wrap .arw.main-arw-next {
  right: 0.5em;
}

/*----------------------------- box-notice ------------------------------*/
.box-notice {
  display: flex;
  flex-direction: column;
}
.box-notice .cont-list {
  flex: 1;
  margin-top: 1.1em;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box-notice .cont-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  font-size: 1.8rem;
}
@media (max-width: 1280px) {
  .box-notice .cont-list li a {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .box-notice .cont-list li a {
    font-size: 1.5rem;
  }
}
.box-notice .cont-list li a span {
  display: block;
}
.box-notice .cont-list li a span.subject {
  width: calc(100% - 110px);
}
.box-notice .cont-list li a span.date {
  margin-left: auto;
}
.box-notice .cont-list li a::after {
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--white);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0);
  transform-origin: bottom right;
  transition: transform 0.4s ease;
}
.box-notice .cont-list li a:hover::after {
  transform: scale(1);
  transform-origin: bottom left;
}
@media (max-width: 767px) {
  .box-notice .cont-list {
    margin-block: 0.2em 0;
    gap: 0.5em;
  }
}

/* ----------------------------------------
* main-icon-wrap
* ----------------------------------------*/
.main-icon-wrap {
  padding-block: 4em;
}
.main-icon-wrap h2 {
  padding-bottom: 1.5em;
  text-align: center;
  color: var(--white);
  font-weight: 600;
  font-family: "Freesentation";
  font-size: 4rem;
}
@media (max-width: 1280px) {
  .main-icon-wrap h2 {
    font-size: 3rem;
  }
}
@media (max-width: 768px) {
  .main-icon-wrap h2 {
    font-size: 2.6rem;
  }
}
.main-icon-wrap .main-icon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: 32px;
}
.main-icon-wrap .main-icon .cont {
  width: auto;
  display: flex;
  text-align: center;
}
.main-icon-wrap .main-icon .cont a {
  position: relative;
  display: block;
  width: 100%;
  padding: 1.5em;
  color: #dedede;
  border: 2px dotted rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  font-size: 1.8rem;
  transition: all 0.4s ease;
}
@media (max-width: 1280px) {
  .main-icon-wrap .main-icon .cont a {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .main-icon-wrap .main-icon .cont a {
    font-size: 1.5rem;
  }
}
.main-icon-wrap .main-icon .cont a h3 {
  color: var(--white);
  font-weight: 500;
  font-size: 2.2rem;
}
@media (max-width: 1280px) {
  .main-icon-wrap .main-icon .cont a h3 {
    font-size: 1.9rem;
  }
}
@media (max-width: 768px) {
  .main-icon-wrap .main-icon .cont a h3 {
    font-size: 1.8rem;
  }
}
.main-icon-wrap .main-icon .cont a h3::after {
  content: "";
  display: block;
  opacity: 0.5;
  width: 64px;
  height: 64px;
  margin: 0.4em auto;
}
.main-icon-wrap .main-icon .cont a p span {
  display: block;
}
.main-icon-wrap .main-icon .cont a::before, .main-icon-wrap .main-icon .cont a::after {
  content: "";
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 20px;
  margin: 0;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
  will-change: clip-path;
  transform: translateZ(0);
  position: absolute;
  top: -1px;
  left: -1px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.main-icon-wrap .main-icon .cont a::before {
  animation-delay: -4s;
}
.main-icon-wrap .main-icon .cont a:hover {
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}
.main-icon-wrap .main-icon .cont a:hover::before, .main-icon-wrap .main-icon .cont a:hover::after {
  opacity: 1;
}
.main-icon-wrap .main-icon .cont:nth-child(1) a h3::after {
  background: url(/images/beis/main/i_main01.svg) no-repeat center/79.7% 53.1%;
}
.main-icon-wrap .main-icon .cont:nth-child(2) a h3::after {
  background: url(/images/beis/main/i_main02.svg) no-repeat center/73.4% 50%;
}
.main-icon-wrap .main-icon .cont:nth-child(3) a h3::after {
  background: url(/images/beis/main/i_main03.svg) no-repeat center/73.4% 45.3%;
}
.main-icon-wrap .main-icon .cont:nth-child(4) a h3::after {
  background: url(/images/beis/main/i_main04.svg) no-repeat center/73.4% 50%;
}
.main-icon-wrap .dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, #042654, #05082b);
  overflow-x: hidden;
}
@media (max-width: 1280px) {
  .main-icon-wrap {
    padding-top: 5.2em;
  }
  .main-icon-wrap .main-icon {
    padding-inline: 2em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
  }
  .main-icon-wrap .main-icon .cont {
    width: auto;
  }
}
@media (max-width: 767px) {
  .main-icon-wrap {
    padding-block: 4.2em;
  }
  .main-icon-wrap h2 {
    padding-bottom: 1em;
  }
  .main-icon-wrap .main-icon {
    gap: 16px;
  }
  .main-icon-wrap .main-icon .cont {
    width: auto;
  }
  .main-icon-wrap .main-icon .cont a {
    padding: 1.7em 1.6em;
    backdrop-filter: blur(5px);
  }
  .main-icon-wrap .main-icon .cont a:hover {
    backdrop-filter: blur(10px);
  }
  .main-icon-wrap .main-icon .cont a h3::after {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 640px) {
  .main-icon-wrap .main-icon .cont a p span {
    display: inline;
  }
}
@media (max-width: 480px) {
  .main-icon-wrap .main-icon {
    padding-inline: 0;
    grid-template-columns: repeat(2, calc((100% - 16px) / 2));
    grid-template-rows: repeat(2, auto);
  }
  .main-icon-wrap .main-icon .cont a {
    padding: 2em 1em;
  }
  .main-icon-wrap .main-icon .cont a p {
    word-break: break-all;
  }
}
@media (max-width: 360px) {
  .main-icon-wrap .main-icon {
    padding: 1em 1em;
    display: block;
    gap: 0;
    border: 2px dotted rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    backdrop-filter: blur(10px);
  }
  .main-icon-wrap .main-icon .cont a {
    padding: 1.5em 1em;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .main-icon-wrap .main-icon .cont a h3::after {
    width: 48px;
    height: 48px;
  }
  .main-icon-wrap .main-icon .cont a p {
    word-break: keep-all;
  }
  .main-icon-wrap .main-icon .cont:nth-child(4n) a {
    border-bottom: 0;
  }
}

/* ----------------------------------------
* animation rotate-center
* ----------------------------------------*/
@-webkit-keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes moves {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes notice-rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes clipMe {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px);
  }
  25% {
    clip-path: polygon(0 0, 2px 0, 2px 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 calc(100% - 2px), 100% calc(100% - 2px), 100% 100%, 0 100%);
  }
  75% {
    clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, calc(100% - 2px) 100%);
  }
}