@charset "UTF-8";
/************************************************************************************/
/*************************************** 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);
}

select {
  background: #fff url(/images/common/arw_select.svg) no-repeat center right 1.1em/24px 24px;
}

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

.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 {
  padding: 0.6em 1.25em;
  border-radius: var(--border-radius-s);
}
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: 10px;
}

.btn-sty {
  min-height: 64px;
  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-500);
  color: var(--white);
}
.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;
  color: #202AEA;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .info-notice {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .info-notice {
    font-size: 1.4rem;
  }
}

.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;
  }
}

/* ----------------------------------------
* 서브 검색
* ----------------------------------------*/
/* ----------------------------------------
* 페이징
* ----------------------------------------*/
.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 {
  margin-top: 2em;
  font-weight: 500;
  font-size: 3.2rem;
}
@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;
}

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

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

input,
textarea,
select {
  width: 100%;
  border: 0px;
  border-radius: 8px;
  background-color: #fff;
  padding: 1em;
  min-height: 3.56em;
  border: 1px solid var(--brd-c1);
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--gray-500);
}
input.error,
textarea.error,
select.error {
  border-color: var(--bs-danger) !important;
}
input.valid,
textarea.valid,
select.valid {
  border-color: var(--bs-success) !important;
  background-color: #f3f3f3;
}
input.error ~ label.error,
textarea.error ~ label.error,
select.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);
}
input[readonly],
textarea[readonly],
select[readonly] {
  background-color: var(--gray-100);
  color: var(--gray-500);
}

select {
  background: url(/images/tfsp/common/arw_select.svg) no-repeat center right 1.1em/24px 24px;
}

select option {
  background: #f3f3f3;
}

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

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

/* common */
.form-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.78em 20px;
}

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

.block-address {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 767px) {
  .block-address {
    width: 100%;
  }
}

/* form layout */
.form-cont {
  display: flex;
  gap: 1em 20px;
}
.form-cont .block {
  width: calc((100% - 20px) / 2);
}
.form-cont .block-full {
  width: 100%;
}
.form-cont .block-3 {
  width: 33.33%;
}
.form-cont .block-4 {
  width: 25%;
}
.form-cont.company-block .block:nth-child(1) {
  max-width: 460px;
}
.form-cont.company-block .block:nth-child(2) {
  max-width: 340px;
}
@media (max-width: 1280px) {
  .form-cont {
    gap: 1em 16px;
  }
  .form-cont.file-cont .block {
    width: 60%;
  }
}
@media (max-width: 767px) {
  .form-cont {
    gap: 1em 8px;
    flex-wrap: wrap;
  }
  .form-cont .block,
  .form-cont .block-3,
  .form-cont .block-4 {
    width: calc((100% - 8px) / 2);
  }
  .form-cont.file-cont .block {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .form-cont .block,
  .form-cont .block-3,
  .form-cont .block-4 {
    width: 100%;
  }
}

/* 신청 품목 수정 행 간격 */
.item-detail > .form-cont + .form-cont {
  margin-top: 1.67em;
}
.item-detail .form-tab2 {
  margin-bottom: 0;
}

/* label */
.info-notice {
  margin-top: 0.5em;
  color: #202AEA;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .info-notice {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .info-notice {
    font-size: 1.4rem;
  }
}

.info-notice-red {
  margin-top: 0.5em;
  color: #ED0000;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .info-notice-red {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .info-notice-red {
    font-size: 1.4rem;
  }
}

/* label */
.label-h {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .label-h {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .label-h {
    font-size: 1.7rem;
  }
}

.label-h-ti {
  display: block;
  font-weight: 500;
  margin-top: 1.1em;
  margin-bottom: 1.1em;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .label-h-ti {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .label-h-ti {
    font-size: 1.7rem;
  }
}

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

.label-hidden {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  font-size: 1px;
  line-height: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px;
  padding: 0;
  border: 0;
}

.form-tab {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.1em;
}

.form-tab2 {
  display: flex;
  flex-wrap: wrap;
  gap: 1.67em;
  margin-bottom: 1.1em;
}

.input-add-txt {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.input-add-txt2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-add-txt2 label {
  white-space: nowrap;
}

/* checkbox */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 2.65em;
}

.label-checkbox {
  display: inline-flex;
  cursor: pointer;
}
.label-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.label-checkbox input:focus + span::before, .label-checkbox input:focus-visible + span::before {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.label-checkbox span {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 28px;
}
.label-checkbox span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid #d2d2d2;
  background: #fff url("/images/tfsp/common/icon_check.svg") no-repeat center/100% auto;
  transform: translateY(-50%);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.label-checkbox span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-65%) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.label-checkbox input:checked + span::before {
  background: var(--text-color) url("/images/tfsp/common/icon_checked.svg") no-repeat center/100% auto;
  border-color: var(--text-color);
}
.label-checkbox input:checked + span::after {
  transform: translateY(-65%) rotate(45deg) scale(1);
}
.label-checkbox input:disabled + span {
  color: #999;
  cursor: not-allowed;
}
.label-checkbox input:disabled + span::before {
  background: #f5f5f5;
  border-color: #e5e5e5;
}
.label-checkbox input:disabled:checked + span::before {
  background: #ccc;
  border-color: #ccc;
}

/* radio */
.label-radio input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.label-radio input[type=radio]:focus + span, .label-radio input[type=radio]:focus-visible + span {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.label-radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 48px;
  padding-inline: 1em 1.2em;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.label-radio span::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background: url("/images/tfsp/common/icon_check.svg") no-repeat center/100% auto;
}
.label-radio input[type=radio]:checked + span {
  background: var(--text-color);
  border-color: var(--text-color);
  color: var(--white);
}
.label-radio input[type=radio]:checked + span::before {
  background-image: url("/images/tfsp/common/icon_checked.svg");
}
.label-radio input[type=radio]:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.label-radio-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.label-radio-circle input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.label-radio-circle input[type=radio]:focus + span::before, .label-radio-circle input[type=radio]:focus-visible + span::before {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.label-radio-circle span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.label-radio-circle span::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--brd-c1);
  border-radius: 50%;
  background: var(--white);
  transition: all 0.2s ease;
}
.label-radio-circle span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  left: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.label-radio-circle input[type=radio]:checked + span::after {
  background: var(--text-color);
}
.label-radio-circle input[type=radio]:focus-visible + span::before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.label-radio-circle input[type=radio]:disabled + span {
  color: #999;
  cursor: not-allowed;
}
.label-radio-circle input[type=radio]:disabled + span::before {
  border-color: #ddd;
  background: #f5f5f5;
}
.label-radio-circle input[type=radio]:disabled:checked + span::after {
  background: #999;
}

input[type=file] {
  width: 100%;
  color: var(--text-color);
  padding: 4px 1em 4px 4px;
}
input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 4px 0.87em;
  min-height: 3.22em;
  border: 1px solid var(--brd-c1);
  border-radius: 8px;
  background: #f3f3f3;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.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;
}

/* common */
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.8rem;
}
@media (max-width: 1280px) {
  body {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 1.5rem;
  }
}

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

.wrap-in {
  max-width: 1416px;
  margin: 0 auto;
}
@media (max-width: 1440px) {
  .wrap-in {
    max-width: 96%;
  }
}
@media (max-width: 767px) {
  .wrap-in {
    max-width: 94%;
  }
}
@media (max-width: 560px) {
  .wrap-in {
    max-width: 92%;
  }
}

/*----------------------------- header ------------------------------*/
:root {
  --header-height: 96px;
  --border-radius: 20px;
  --border-radius-s: 16px;
  --gap: 24px;
}
@media (max-width: 1460px) {
  :root {
    --header-padding: 2%;
  }
}
@media (max-width: 1280px) {
  :root {
    --border-radius: 16px;
    --gap: 20px;
  }
}
@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
  }
}
@media (max-width: 767px) {
  :root {
    --header-height: 64px;
    --border-radius: 12px;
    --border-radius-s: 8px;
    --gap: 16px;
  }
}
@media (max-width: 560px) {
  :root {
    --gap: 12px;
  }
}

/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
  z-index: 100;
  /* nav */
  /* util */
}
header .wrap-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
}
header .logo {
  flex: 1;
}
header .logo a {
  display: block;
  width: 260px;
  height: 51px;
  background: url(/images/tfsp/common/logo.svg) 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 .mobile-icon-layout {
  display: none;
}
header .header-gnb .gnb {
  width: auto;
  height: 100%;
  display: flex;
  gap: 4.5833vw;
  transition: 0.4s;
}
header .header-gnb .gnb .gnb-dep1 {
  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;
  transition: all 0.4s ease;
  white-space: nowrap;
}
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:nth-child(2) > a span, header .header-gnb .gnb .gnb-dep1:nth-child(4) > a span {
  display: flex;
  align-items: center;
  gap: 10px;
}
header .header-gnb .gnb .gnb-dep1:nth-child(2) > a span::after, header .header-gnb .gnb .gnb-dep1:nth-child(4) > a span::after {
  content: "";
  display: block;
  width: 24px;
  aspect-ratio: 1;
  background: url(/images/tfsp/common/nav_arrow.svg) no-repeat center/100% 100%;
}
header .header-gnb .gnb .gnb-dep1.--nav-open .gnb-dep2 {
  display: block !important;
}
header .header-gnb .gnb .gnb-dep2 {
  display: none;
  width: 200%;
  position: absolute;
  top: var(--header-height);
  left: 50%;
  margin-left: -0.5em;
  transform: translateX(-50%);
  padding-block: 1.6em;
  background-color: var(--white);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.06);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
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;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  header .header-gnb .gnb .gnb-dep2 li a {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  header .header-gnb .gnb .gnb-dep2 li a {
    font-size: 1.4rem;
  }
}
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: 0;
  height: 1px;
  border-bottom: 1.5px solid var(--primary);
  display: block;
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 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 {
  width: 100%;
}
header .header-gnb .gnb .gnb-dep2 li.active a {
  color: var(--primary);
}
header .header-gnb .gnb .gnb-dep2 li.active a span::after {
  width: 100%;
}
header .util {
  position: relative;
  flex: 1;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 20px;
}
header .util .icon-layout {
  display: flex;
  align-items: center;
  gap: 1.33em;
}
header .util .icon-layout a {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  font-size: 1.2rem;
  font-weight: 300;
}
header .util .icon-layout a::before {
  content: "";
  display: block;
  width: 24px;
  aspect-ratio: 1;
}
header .util .icon-layout a.login::before {
  background: url(/images/tfsp/common/icon_lock.svg) no-repeat center/100% 100%;
}
header .util .icon-layout a.logout::before {
  background: url(/images/tfsp/common/icon_logout.svg) no-repeat center/100% 100%;
}
header .util .icon-layout a.join::before {
  background: url(/images/tfsp/common/icon_join.svg) no-repeat center/100% 100%;
}
header .util .burger-menu {
  display: none;
}
@media (max-width: 1280px) {
  header .logo a {
    width: 214px;
    height: 42px;
  }
}
@media (max-width: 1024px) {
  header {
    /* nav */
    /* util */
  }
  header .wrap-in {
    max-width: 100%;
    padding-inline: 2%;
  }
  header .logo a {
    width: 187px;
    height: 36px;
  }
  header .gnb-bg {
    width: 100%;
    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;
    border-top: 1px solid var(--gray-200);
  }
  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: 1024px) and (max-width: 1280px) {
  header .header-gnb .gnb .gnb-dep1 > a {
    font-size: 2rem;
  }
}
@media (max-width: 1024px) and (max-width: 768px) {
  header .header-gnb .gnb .gnb-dep1 > a {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  header .header-gnb .gnb .gnb-dep1 > a span {
    display: flex;
    align-items: center;
  }
  header .header-gnb .gnb .gnb-dep1 > a span::after {
    content: "";
    display: block;
    margin-left: auto;
    transform: rotate(-90deg);
    transition: 0.3s ease-in-out;
  }
  header .header-gnb .gnb .gnb-dep1.--nav-open > a span::after {
    transform: rotate(0);
  }
  header .header-gnb .gnb .gnb-dep1.--nav-open .gnb-dep2 {
    display: block !important;
  }
  header .header-gnb .gnb .gnb-dep2 {
    width: 100%;
    position: static;
    padding: 0.8em 2.4em;
    margin-left: 0;
    box-shadow: 0 0 0;
    transform: translateX(0);
    background-color: var(--gray-100);
    border-radius: 0;
  }
  header .header-gnb .gnb .gnb-dep2 li {
    width: 100%;
  }
  header .header-gnb .gnb .gnb-dep2 li a {
    text-align: left;
    color: var(--gray-600);
  }
  header .util .burger-menu {
    display: block;
  }
  header .util .burger-menu a {
    width: 48px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header .util .burger-menu .burger-in {
    position: relative;
    width: 36px;
    height: 22px;
  }
  header .util .burger-menu .burger-in span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    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: 767px) {
  header {
    /* nav */
    /* util */
  }
  header .wrap-in {
    padding-inline: 3%;
  }
  header .logo a {
    width: 160px;
    height: 31px;
  }
  header .gnb-bg {
    display: none;
  }
  header .header-gnb {
    width: 100%;
  }
  header .util {
    gap: 1em;
  }
  header .util .icon-layout {
    gap: 1em;
  }
  header .util .burger-menu a {
    width: 40px;
  }
  header .util .burger-menu .burger-in {
    width: 30px;
    height: 18px;
  }
  header .util .burger-menu .burger-in span:nth-child(2) {
    top: 8px;
  }
  header .util .burger-menu.--burger-open .burger-in span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
  }
  header .util .burger-menu.--burger-open .burger-in span:nth-child(2) {
    transform: rotate(-45deg);
    top: 8px;
  }
  header .util .burger-menu.--burger-open .burger-in span:nth-child(3) {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  header {
    /* util */
  }
  header .wrap-in {
    padding-inline: 4%;
  }
  header .header-gnb {
    border-top: 1px solid var(--border-color1);
  }
  header .header-gnb .mobile-icon-layout {
    padding: 1em 1em 0.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
  }
  header .header-gnb .mobile-icon-layout a {
    padding: 0.5em;
    border: 1px solid var(--border-color1);
    border-radius: 100px;
    text-align: center;
  }
  header .header-gnb .gnb {
    border-top: 0;
  }
  header .header-gnb .gnb .gnb-dep1 > a {
    padding: 1.2em;
    font-size: 1.7rem;
  }
  header .header-gnb .gnb .gnb-dep2 {
    padding-inline: 2.2em;
  }
  header .util {
    gap: 0.5em;
  }
  header .util .icon-layout {
    display: none;
    gap: 0.5em;
  }
  header .util .icon-layout a {
    font-size: 1.2rem;
  }
  header .util .icon-layout a::before {
    display: none;
  }
}
@media (max-width: 360px) {
  header .util .burger-menu a {
    width: 24px;
  }
  header .util .burger-menu .burger-in {
    width: 24px;
  }
}
/* ----------------------------------------
* footer
* ----------------------------------------*/
.footer-link {
  display: flex;
  justify-content: center;
  padding-block: 1.78em;
  border-top: 1px solid var(--border-color1);
  overflow: hidden;
}
.footer-link .footer-link-slide .slick-list {
  margin-inline: -52px;
}
.footer-link .footer-link-slide .slick-track {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 52px;
}
.footer-link .footer-link-slide a img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 1024px) {
  .footer-link .footer-link-slide .slick-list {
    margin-inline: -12px;
  }
  .footer-link .footer-link-slide .slick-track {
    gap: 12px;
  }
}
@media (max-width: 767px) {
  .footer-link {
    padding-block: 1em;
  }
  .footer-link .footer-link-slide {
    display: block;
    padding-inline: 5%;
  }
  .footer-link .footer-link-slide .slick-list {
    margin-inline: 0;
  }
  .footer-link .footer-link-slide .slick-track {
    gap: 0;
  }
  .footer-link .footer-link-slide .slick-slide {
    padding: 0 4px;
    box-sizing: border-box;
  }
  .footer-link .footer-link-slide .slick-prev,
  .footer-link .footer-link-slide .slick-next {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    width: 36px;
    height: 36px;
  }
  .footer-link .footer-link-slide .slick-prev {
    left: -16px;
  }
  .footer-link .footer-link-slide .slick-next {
    right: -16px;
  }
  .footer-link .footer-link-slide .slick-prev::before,
  .footer-link .footer-link-slide .slick-next::before {
    content: "";
    width: 100%;
    aspect-ratio: 1;
    background: url(/images/tfsp/common/chevron-next.svg) no-repeat center/100%;
  }
  .footer-link .footer-link-slide .slick-prev::before {
    background-image: url(/images/tfsp/common/chevron-prev.svg);
  }
}

footer {
  border-top: 1px solid var(--border-color1);
  padding-block: 3.33em;
  background-color: #ffffff;
}
footer .footer-content01 {
  display: flex;
  align-items: center;
}
footer .footer-content01 .tel {
  display: flex;
  align-items: center;
  gap: 12px;
}
footer .footer-content01 .tel span {
  font-weight: 500;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  footer .footer-content01 .tel span {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  footer .footer-content01 .tel span {
    font-size: 1.7rem;
  }
}
footer .footer-content01 .tel strong {
  color: var(--secondary1);
  font-weight: 600;
  font-size: 2.8rem;
}
@media (max-width: 1280px) {
  footer .footer-content01 .tel strong {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  footer .footer-content01 .tel strong {
    font-size: 2rem;
  }
}
footer .footer-content01 .footer-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
footer .footer-content01 .footer-nav a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--primary);
  font-weight: 500;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  footer .footer-content01 .footer-nav a {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  footer .footer-content01 .footer-nav a {
    font-size: 1.4rem;
  }
}
footer .footer-content02 {
  margin-top: 1.11em;
  color: var(--gray-600);
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  footer .footer-content02 {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  footer .footer-content02 {
    font-size: 1.4rem;
  }
}
footer .footer-content02 .footer-info {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
@media (max-width: 767px) {
  footer {
    text-align: center;
  }
  footer .footer-content01 {
    flex-direction: column;
    gap: 1em;
  }
  footer .footer-content01 .footer-nav {
    margin-left: 0;
    gap: 1em;
  }
  footer .footer-content02 .footer-info {
    justify-content: center;
  }
  footer .footer-content02 .copyright {
    margin-top: 2em;
  }
}

.sub-container {
  margin-top: var(--header-height);
  padding-bottom: 8em;
}
@media screen and (max-width: 500px) {
  .sub-container {
    padding-bottom: 5em;
  }
}

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

.h-sty-item {
  margin-bottom: 1em;
}
.h-sty-item span {
  padding: 4px 0.89em;
  display: inline-block;
  border: 1px solid var(--text-color);
}

.h-info {
  color: #ed0000;
  font-weight: 400;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .h-info {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .h-info {
    font-size: 1.4rem;
  }
}

.txt-red {
  color: #ed0000;
}

.txt-medium {
  font-weight: 500;
}

.txt-bold {
  font-weight: 600;
}

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

.btn-sty {
  min-height: 64px;
  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-500);
  color: var(--white);
}
.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);
}

/************************************************************************************/
/************************************* 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:#121212;
  --primary: #1C217E;
  --primary-400: #526fdf;
  --primary-300: #829be9;
  --primary-200: #b1c6f3;
  --primary-100: #e1effc;
  --primary-000: #f2f5fa;
  --secondary1: #4D6EDB;
  --secondary2: #00A5A5;
  --gray-100: #f5f5f5;
  --gray-200: #ebedf0;
  --gray-300: #dfe2e6;
  --gray-400: #bfc5cd;
  --gray-500: #767676;
  --gray-600: #555555;
  --border-color1: #dddddd;
  --border-color2: #dfe2e6;
  --c-red: #ec0000;
  --hover: var(--white);
}

/*----------------------------- default로 옮기기 ------------------------------*/
/*----------------------------- main-top-content ------------------------------*/
.main-top-content {
  margin-top: calc(var(--header-height) + 3.33em);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(336px, 1fr);
  grid-template-rows: 480px;
  gap: var(--gap);
}
@media (max-width: 1460px) {
  .main-top-content {
    grid-template-rows: clamp(400px, 32.8767vw, 480px);
  }
}
@media (max-width: 1024px) {
  .main-top-content {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(360px, 39.06vw, 400px) 200px;
    height: auto;
  }
}
@media (max-width: 767px) {
  .main-top-content {
    grid-template-rows: clamp(360px, 39.06vw, 400px) auto;
    height: auto;
  }
}
@media (max-width: 480px) {
  .main-top-content {
    grid-template-rows: clamp(480px, 39.06vw, 520px) auto;
    height: auto;
  }
}

/*----------------------------- main-visual ------------------------------*/
.main-visual {
  position: relative;
  border-radius: var(--border-radius);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--primary-100);
  /****************************************
  비주얼 슬라이드 컨트롤
  ****************************************/
  /****************************************
  비주얼 슬라이드 페이지
  ****************************************/
  /****************************************
  비주얼 슬라이드 재생·정지
  ****************************************/
}
.main-visual .visual-slider-control {
  position: absolute;
  z-index: 10;
  bottom: 1em;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0;
  transform: translateX(-50%);
}
.main-visual .visual-slider-dots .slick-dots {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-visual .visual-slider-dots .slick-dots ul {
  display: flex;
  align-items: center;
}
.main-visual .visual-slider-dots .slick-dots li {
  width: 12px;
  height: 12px;
  margin: 0;
  transition: width 0.35s ease;
}
.main-visual .visual-slider-dots .slick-dots li.slick-active {
  width: 36px;
}
.main-visual .visual-slider-dots .slick-dots li button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--white);
  font-size: 0;
  cursor: pointer;
}
.main-visual .visual-slider-dots .slick-dots li button::before {
  display: none;
}
.main-visual .visual-slider-dots .slick-dots li.slick-active button {
  background: var(--text-color);
}
.main-visual .visual-slider-toggle {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  width: 40px;
  aspect-ratio: 1;
  background: url(/images/tfsp/main/slide_pause2.svg) no-repeat center/20px 20px;
  cursor: pointer;
}
.main-visual .visual-slider-toggle.is-paused {
  background-image: url(/images/tfsp/main/slide_play2.svg);
}
.main-visual .visual-slide,
.main-visual .visual-slide .slick-list,
.main-visual .visual-slide .slick-track,
.main-visual .visual-slide .slick-slide,
.main-visual .visual-slide .slick-slide > div {
  height: 100%;
}
.main-visual .visual-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.main-visual .visual-slide .visual-item {
  width: 100%;
  height: 100%;
}
.main-visual .visual-slide .visual-item .txt-in {
  padding: 5.44em 5.11em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.main-visual .visual-slide .visual-item .txt-in .title {
  font-weight: 500;
  font-size: clamp(3.4rem, 2.5vw, 4.8rem);
}
.main-visual .visual-slide .visual-item .txt-in .title span {
  display: block;
}
.main-visual .visual-slide .visual-item .txt-in p {
  margin-top: 1.33em;
  max-width: 57%;
}
.main-visual .visual-slide .visual-item .txt-in figure {
  position: absolute;
  width: 43.93%;
  height: 100%;
  right: 0;
  top: 0;
}
.main-visual .visual-slide .visual-item .txt-in figure img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.main-visual .visual-slide .visual-item.visual01 {
  background: url(/images/tfsp/main/vi01_bg.jpg) no-repeat center/cover;
}
.main-visual .visual-slide .visual-item.visual02 {
  background: url(/images/tfsp/main/vi02_bg.jpg) no-repeat center/cover;
}
@media (max-width: 1460px) {
  .main-visual .visual-slide .visual-item .txt-in {
    padding: clamp(3.264em, 6.0938vw, 4.33em) clamp(3.066em, 5.7031vw, 4.06em);
  }
}
@media (max-width: 767px) {
  .main-visual .visual-slide .visual-item .txt-in .title {
    font-size: clamp(2.8rem, 4.4329vw, 3.4rem);
  }
  .main-visual .visual-slide .visual-item .txt-in .title span {
    display: block;
  }
}
@media (max-width: 767px) {
  .main-visual .visual-slide .visual-item .txt-in {
    padding: clamp(36px, 5.7366vw, 44px) clamp(28px, 4.6936vw, 36px);
  }
  .main-visual .visual-slide .visual-item .txt-in figure img {
    top: auto;
    bottom: 2em;
    transform: translateY(0);
  }
}
@media (max-width: 480px) {
  .main-visual .visual-slider-control {
    bottom: 4px;
  }
  .main-visual .visual-slide .visual-item .txt-in {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .main-visual .visual-slide .visual-item .txt-in p {
    max-width: 100%;
    margin-bottom: 0;
  }
  .main-visual .visual-slide .visual-item .txt-in figure {
    position: static;
    width: 82%;
    height: auto;
    margin-left: auto;
    margin-top: auto;
    transform: translateY(0);
  }
  .main-visual .visual-slide .visual-item .txt-in figure img {
    margin-top: 0;
    position: static;
  }
}
@media (max-width: 320px) {
  .main-visual .visual-slide .visual-item .txt-in .title span {
    display: inline;
  }
}

.purchase-wrap {
  padding: 3.11em 2.67em;
  background: linear-gradient(180deg, rgba(77, 110, 219, 0.5) 0%, rgba(16, 24, 183, 0.5) 100%), #4D6EDB;
  border-radius: var(--border-radius);
}
.purchase-wrap .title {
  color: var(--white);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.4583vw, 2.8rem);
  margin-bottom: 0.67em;
}
.purchase-wrap p {
  color: var(--white);
}
.purchase-wrap > img {
  margin-top: 1em;
  max-width: 184px;
  animation: purchase-float 3s ease-in-out infinite;
  will-change: transform;
}
.purchase-wrap .more-btn {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}
.purchase-wrap .more-btn img {
  max-width: 112px;
}
@media (max-width: 1024px) {
  .purchase-wrap > img {
    position: absolute;
    right: 4em;
    top: 50%;
    margin-top: 10px;
    transform: translateY(calc(-50% - 12px));
    animation: purchase-float-m 3s ease-in-out infinite;
  }
}
@media (max-width: 767px) {
  .purchase-wrap {
    padding: clamp(36px, 5.7366vw, 44px) clamp(28px, 4.6936vw, 36px);
  }
  .purchase-wrap p {
    padding-right: clamp(20px, 19.296vw, 148px);
    margin-bottom: 0;
  }
  .purchase-wrap > img {
    max-width: clamp(20px, 19.296vw, 148px);
  }
  .purchase-wrap .more-btn {
    bottom: -0.1px;
    right: -0.1px;
  }
  .purchase-wrap .more-btn img {
    width: 84px;
  }
}
@media (max-width: 560px) {
  .purchase-wrap > img {
    max-width: clamp(20px, 19.296vw, 148px);
    top: 2em;
    right: 2em;
    transform: translateY(0);
    animation: purchase-float 3s ease-in-out infinite;
  }
}

@keyframes purchase-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes purchase-float-m {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% - 12px));
  }
}
/*----------------------------- import-status-wrap ------------------------------*/
.import-status-wrap {
  margin-top: 2.89em;
}
.import-status-wrap .title-content {
  display: flex;
  align-items: flex-end;
  margin-bottom: 1.11em;
  padding-inline: 8px;
}
.import-status-wrap .title-content h2 {
  font-weight: 600;
  font-size: 2.4rem;
}
@media (max-width: 1280px) {
  .import-status-wrap .title-content h2 {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .import-status-wrap .title-content h2 {
    font-size: 1.8rem;
  }
}
.import-status-wrap .title-content .side-info {
  margin-left: auto;
  color: var(--gray-600);
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .import-status-wrap .title-content .side-info {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .import-status-wrap .title-content .side-info {
    font-size: 1.4rem;
  }
}
.import-status-wrap .state-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.import-status-wrap .state-content .item {
  padding: 1.33em 1.78em;
  border-radius: var(--border-radius);
  background: var(--white);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.import-status-wrap .state-content .item h3 {
  margin-bottom: 0.6em;
  font-weight: 500;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .import-status-wrap .state-content .item h3 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .import-status-wrap .state-content .item h3 {
    font-size: 1.7rem;
  }
}
.import-status-wrap .state-content .item .cont {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .import-status-wrap .state-content .item .cont {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .import-status-wrap .state-content .item .cont {
    font-size: 1.4rem;
  }
}
.import-status-wrap .state-content .item .cont:last-child {
  margin-bottom: 0;
}
.import-status-wrap .state-content .item .cont .title {
  margin-right: 1.11em;
}
.import-status-wrap .state-content .item .cont .price {
  font-weight: 600;
}
.import-status-wrap .state-content .item .cont .increase {
  color: #E91D1D;
}
.import-status-wrap .state-content .item .cont .decrease {
  color: #585EC1;
}
@media (max-width: 1460px) {
  .import-status-wrap .state-content .item .cont {
    flex-wrap: wrap;
    gap: 0 10px;
    margin-bottom: 1em;
  }
  .import-status-wrap .state-content .item .cont .title {
    margin-right: 0;
    padding: 1px 0.5em;
    border-radius: 100px;
    background-color: var(--gray-200);
  }
  .import-status-wrap .state-content .item .cont .result {
    width: 100%;
    padding-left: 80px;
  }
}
@media (max-width: 1024px) {
  .import-status-wrap .state-content .item .cont {
    flex-wrap: wrap;
    gap: 0 10px;
    margin-bottom: 1em;
  }
  .import-status-wrap .state-content .item .cont .title {
    margin-bottom: 0.5em;
  }
  .import-status-wrap .state-content .item .cont .price {
    width: 100%;
  }
  .import-status-wrap .state-content .item .cont .result {
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .import-status-wrap .state-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .import-status-wrap .state-content .item .cont {
    flex-wrap: nowrap;
    gap: 0 10px;
    margin-bottom: 1em;
  }
  .import-status-wrap .state-content .item .cont .title {
    margin-bottom: 0;
  }
  .import-status-wrap .state-content .item .cont .price,
  .import-status-wrap .state-content .item .cont .result {
    width: auto;
  }
}
@media (max-width: 560px) {
  .import-status-wrap .title-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .import-status-wrap .title-content .side-info {
    margin-left: 0;
  }
  .import-status-wrap .state-content {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 400px) {
  .import-status-wrap .state-content .item .cont {
    flex-wrap: wrap;
    gap: 0 10px;
    margin-bottom: 1em;
  }
  .import-status-wrap .state-content .item .cont .title {
    margin-right: 0;
    padding: 1px 0.5em;
    border-radius: 100px;
    background-color: var(--gray-200);
  }
  .import-status-wrap .state-content .item .cont .result {
    width: 100%;
    padding-left: 70px;
  }
}

/*----------------------------- system-wrap ------------------------------*/
.system-wrap {
  margin-top: 5.56em;
  position: relative;
}
.system-wrap .text-cont {
  position: relative;
}
.system-wrap .text-cont::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 59.48%;
  height: 100%;
  border-radius: 0 200px 0 0;
  background: url(/images/tfsp/main/system_bg.jpg) no-repeat center/100% 100%;
}
.system-wrap .text-cont .txt {
  position: relative;
  padding-block: 6.11em 7.11em;
  z-index: 1;
}
.system-wrap .text-cont .txt h2 {
  color: var(--primary);
  font-weight: 600;
  font-size: 3.6rem;
}
@media (max-width: 1280px) {
  .system-wrap .text-cont .txt h2 {
    font-size: 2.8rem;
  }
}
@media (max-width: 768px) {
  .system-wrap .text-cont .txt h2 {
    font-size: 2.4rem;
  }
}
.system-wrap .text-cont .txt h3 {
  margin-block: 1em 0.5em;
  font-weight: 500;
  font-size: 2.4rem;
}
@media (max-width: 1280px) {
  .system-wrap .text-cont .txt h3 {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .system-wrap .text-cont .txt h3 {
    font-size: 1.8rem;
  }
}
.system-wrap .text-cont .txt p {
  color: var(--gray-600);
}
.system-wrap .text-cont .txt p span {
  display: block;
}
.system-wrap .text-cont .txt .more-btn {
  margin-top: 3.56em;
  padding-block: 0.78em;
  padding-inline: 1.78em 1.33em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--white);
  background-color: var(--primary);
  border-radius: 100px;
}
.system-wrap .text-cont .txt .more-btn::after {
  content: "";
  display: block;
  width: 24px;
  aspect-ratio: 1;
  background: url(/images/tfsp/main/arrow_trend_on.svg) no-repeat center/cover;
}
.system-wrap .image-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 49.79%;
  height: 77%;
  border-radius: 200px 0 0 0;
  background: url(/images/tfsp/main/system_img.jpg) no-repeat center/cover;
}
.system-wrap .item01,
.system-wrap .item02 {
  position: absolute;
  z-index: 0;
}
.system-wrap .item01 {
  width: 20%;
  bottom: -10%;
  left: 0;
  --circle-x: 0%;
  --circle-y: 31%;
  --circle-start: 180deg;
  --draw-range: 90deg;
}
.system-wrap .item02 {
  width: 26%;
  top: -23%;
  right: 0;
  --circle-x: 50%;
  --circle-y: 50%;
  --circle-start: 220deg;
  --draw-range: 270deg;
}
@media (max-width: 1440px) {
  .system-wrap .text-cont .txt {
    padding-left: 2em;
    padding-bottom: 5.4em;
  }
  .system-wrap .text-cont .txt p {
    padding-right: 56%;
  }
  .system-wrap .text-cont .txt p span {
    display: inline;
  }
  .system-wrap .text-cont .txt .more-btn {
    margin-top: 2em;
  }
}
@media (max-width: 1280px) {
  .system-wrap .item01 {
    width: 28%;
  }
  .system-wrap .item02 {
    top: -30%;
    width: 36.4%;
  }
}
@media (max-width: 767px) {
  .system-wrap .text-cont::before {
    width: 100%;
    border-radius: 0 100px 0 0;
  }
  .system-wrap .text-cont .txt {
    padding-inline: 1em;
  }
  .system-wrap .text-cont .txt p {
    padding-right: 0;
  }
  .system-wrap .text-cont .txt .more-btn::after {
    width: 20px;
  }
  .system-wrap .image-bg {
    bottom: -20%;
    width: 60%;
    height: 50%;
    border-radius: 200px 0 0 200px;
  }
  .system-wrap .item01 {
    width: 28%;
  }
  .system-wrap .item02 {
    width: 36.4%;
  }
}
@media (max-width: 560px) {
  .system-wrap .item01 {
    width: 35%;
  }
  .system-wrap .item02 {
    width: 48%;
    top: -22%;
  }
}

/* circle-img 애니메이션 */
@property --draw-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/*
  공통 애니메이션
*/
.draw-circle > img {
  --draw-angle: 0deg;
  display: block;
  width: 100%;
  opacity: 0;
  -webkit-mask-image: conic-gradient(from var(--circle-start) at var(--circle-x) var(--circle-y), transparent 0deg, transparent calc(360deg - var(--draw-angle)), #000 calc(360deg - var(--draw-angle)), #000 360deg);
  mask-image: conic-gradient(from var(--circle-start) at var(--circle-x) var(--circle-y), transparent 0deg, transparent calc(360deg - var(--draw-angle)), #000 calc(360deg - var(--draw-angle)), #000 360deg);
}
.draw-circle.is-active > img {
  animation: circle-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes circle-draw {
  0% {
    --draw-angle: 0deg;
    opacity: 1;
  }
  100% {
    --draw-angle: var(--draw-range);
    opacity: 1;
  }
}
/*----------------------------- main-trends ------------------------------*/
.main-trends-section {
  margin-top: 4.67em;
  overflow: hidden;
  /* 슬라이드 컨트롤 */
  /* 일시정지 아이콘 */
}
.main-trends-section .title-content {
  display: flex;
  align-items: center;
}
.main-trends-section .title-content h2 {
  font-weight: 600;
  font-size: clamp(2.4rem, 1.875vw, 3.6rem);
}
.main-trends-section .title-content .more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.63em;
  border: 1px solid var(--primary);
  margin-left: auto;
  padding: 0.63em 1.5em 0.63em 2em;
  border-radius: 100px;
  font-weight: 500;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .main-trends-section .title-content .more-btn {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .main-trends-section .title-content .more-btn {
    font-size: 1.4rem;
  }
}
.main-trends-section .title-content .more-btn::after {
  content: "";
  display: block;
  width: 20px;
  aspect-ratio: 1;
  background: url(/images/tfsp/main/arrow_more.svg) no-repeat center/100% 100%;
}
.main-trends-section .trends-slider-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 2em;
}
.main-trends-section .trends-slider-control button {
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.main-trends-section .trends-slider-prev {
  width: 32px;
  aspect-ratio: 1;
  background: url(/images/tfsp/main/chevron_prev.svg) no-repeat center/100% 100%;
}
.main-trends-section .trends-slider-next {
  width: 32px;
  aspect-ratio: 1;
  background: url(/images/tfsp/main/chevron_next.svg) no-repeat center/100% 100%;
}
.main-trends-section .trends-slider-toggle {
  width: 24px;
  aspect-ratio: 1;
  background: url(/images/tfsp/main/slide_pause.svg) no-repeat center/100% 100%;
  /* 정지 상태: 재생 아이콘 */
}
.main-trends-section .trends-slider-toggle.is-paused {
  background-image: url(/images/tfsp/main/slide_play.svg);
}
.main-trends-section .trends-list {
  margin-left: calc((100% - 1416px) / 2 - clamp(24px, 2.08vw, 40px));
  display: flex;
  gap: var(--gap);
}
.main-trends-section .trends-list .slick-list {
  padding-left: clamp(24px, 2.08vw, 40px);
}
.main-trends-section .trends-list .trends-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(290px, 17.5vw, 336px) !important;
  min-height: clamp(320px, 18.75vw, 360px);
  margin-inline: clamp(12px, 1.04vw, 20px);
  margin-block: 1em 2em;
  padding: clamp(28px, 1.67vw, 32px);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-color1);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.main-trends-section .trends-list .trends-item .trends-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #151515;
  font-size: clamp(2rem, 1.25vw, 2.4rem);
  font-weight: 500;
  line-height: 1.55;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.main-trends-section .trends-list .trends-item .trends-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.main-trends-section .trends-list .trends-item .trends-company {
  color: var(--primary);
  font-weight: 500;
}
.main-trends-section .trends-list .trends-item .trends-date {
  font-weight: 500;
}
.main-trends-section .trends-list .trends-item .trends-more {
  display: block;
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 56px;
  aspect-ratio: 1;
  background: #DBDDFF url(/images/tfsp/main/arrow_trend01.svg) no-repeat center/24px 24px;
  border-radius: var(--border-radius) 0 0 0;
  z-index: 10;
}
.main-trends-section .trends-list .trends-item:nth-child(2n+1) .trends-more {
  background-color: #C6FBFB;
  background-image: url(/images/tfsp/main/arrow_trend02.svg);
}
.main-trends-section .trends-list .trends-item:hover {
  box-shadow: inset 0 0 0 1px var(--border-color1), 0 4px 30px rgba(25, 37, 142, 0.1);
}
.main-trends-section .trends-list .trends-item.is-current {
  box-shadow: inset 0 0 0 3px var(--secondary1), 0 4px 30px rgba(25, 37, 142, 0.1);
}
.main-trends-section .trends-list .trends-item.is-current .trends-more {
  background-color: var(--secondary1);
  background-image: url(/images/tfsp/main/arrow_trend_on.svg);
}
@media (max-width: 1440px) {
  .main-trends-section .trends-list {
    margin-left: 0;
  }
  .main-trends-section .trends-list .slick-list {
    padding-left: 2%;
  }
}
@media (max-width: 1280px) {
  .main-trends-section .trends-list .trends-item {
    width: 272px !important;
    min-height: clamp(300px, 25.3125vw, 324px);
  }
}
@media (max-width: 767px) {
  .main-trends-section {
    margin-top: 10em;
  }
  .main-trends-section .title-content .more-btn::after {
    width: 16px;
  }
  .main-trends-section .trends-list .slick-list {
    padding-left: 3%;
  }
  .main-trends-section .trends-list .trends-item {
    width: 256px !important;
    min-height: 280px;
  }
}
@media (max-width: 560px) {
  .main-trends-section {
    margin-top: 10em;
  }
  .main-trends-section .title-content {
    flex-wrap: wrap;
  }
  .main-trends-section .trends-slider-control {
    position: absolute;
    bottom: -40px;
    left: 0;
    margin-left: 0;
  }
  .main-trends-section .trends-list {
    padding-top: 2.5em;
  }
  .main-trends-section .trends-list .slick-list {
    padding-left: 4%;
  }
  .main-trends-section .trends-list .trends-item {
    width: 272px !important;
  }
  .main-trends-section .trends-list .trends-item .trends-more {
    width: 48px;
  }
}

/*----------------------------- main-bottom-content ------------------------------*/
.main-bottom-content {
  padding-block: 5.56em 6.56em;
  background: url(/images/tfsp/main/bottom_bg.jpg) no-repeat top center/cover;
}
.main-bottom-content .main-bottom-in {
  display: flex;
  gap: var(--gap);
}
.main-bottom-content .main-bottom-in .trade-info-wrap {
  display: flex;
  flex-direction: column;
  padding: 2.22em;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  background-color: var(--white);
}
.main-bottom-content .main-bottom-in .trade-info-wrap .title-content {
  margin-bottom: 0.6em;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.main-bottom-content .main-bottom-in .trade-info-wrap h2 {
  font-weight: 500;
  font-size: 2.4rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-info-wrap h2 {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-info-wrap h2 {
    font-size: 1.8rem;
  }
}
.main-bottom-content .main-bottom-in .trade-info-wrap h2 span {
  color: var(--primary);
}
.main-bottom-content .main-bottom-in .trade-info-wrap .side-info {
  margin-left: auto;
  color: var(--gray-600);
  text-align: right;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-info-wrap .side-info {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-info-wrap .side-info {
    font-size: 1.4rem;
  }
}
.main-bottom-content .main-bottom-in .trade-info-wrap:first-child {
  width: 56%;
}
.main-bottom-content .main-bottom-in .trade-info-wrap:last-child {
  flex: 1;
}
.main-bottom-content .main-bottom-in .exchange-rate {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}
.main-bottom-content .main-bottom-in .exchange-rate .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.56em 1.11em;
  background-color: var(--gray-100);
  border-radius: var(--border-radius-s);
}
.main-bottom-content .main-bottom-in .exchange-rate .item .title {
  margin-bottom: 0.5em;
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .title {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .title {
    font-size: 1.4rem;
  }
}
.main-bottom-content .main-bottom-in .exchange-rate .item .exchange {
  font-weight: 600;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .exchange {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .exchange {
    font-size: 1.7rem;
  }
}
.main-bottom-content .main-bottom-in .exchange-rate .item .result {
  color: var(--gray-600);
  font-size: 1.4rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .result {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .result {
    font-size: 1.2rem;
  }
}
.main-bottom-content .main-bottom-in .exchange-rate .item .result span {
  font-size: 1.2rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .result span {
    font-size: 1.1rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .exchange-rate .item .result span {
    font-size: 1rem;
  }
}
.main-bottom-content .main-bottom-in .exchange-rate .item .result.decrease {
  color: #2930B4;
}
.main-bottom-content .main-bottom-in .exchange-rate .item .result.increase {
  color: #E91D1D;
}
.main-bottom-content .main-bottom-in .trade-statistics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  height: 100%;
}
.main-bottom-content .main-bottom-in .trade-statistics .item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  text-align: center;
}
.main-bottom-content .main-bottom-in .trade-statistics .item .total {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  flex-direction: column;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total {
    font-size: 1.7rem;
  }
}
.main-bottom-content .main-bottom-in .trade-statistics .item .total span {
  font-weight: 600;
  font-size: 2.8rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total span {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total span {
    font-size: 2rem;
  }
}
.main-bottom-content .main-bottom-in .trade-statistics .item .result {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.11em 1em;
  background-color: var(--gray-100);
  border-radius: var(--border-radius);
}
.main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2px;
}
.main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont1 {
  font-weight: 600;
  font-size: 2rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont1 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont1 {
    font-size: 1.7rem;
  }
}
.main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont2,
.main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont4 {
  font-size: 1.6rem;
}
@media (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont2,
  .main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont4 {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont2,
  .main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont4 {
    font-size: 1.4rem;
  }
}
.main-bottom-content .main-bottom-in .trade-statistics .item .result .cont-in .cont3 {
  font-weight: 500;
}
.main-bottom-content .main-bottom-in .trade-statistics .item.decrease .total span {
  color: #1C217E;
}
.main-bottom-content .main-bottom-in .trade-statistics .item.decrease .result {
  background-color: #DBDDFF;
}
.main-bottom-content .main-bottom-in .trade-statistics .item.increase .total span {
  color: #D20A0D;
}
.main-bottom-content .main-bottom-in .trade-statistics .item.increase .result {
  background-color: #FFDDDD;
}
@media (max-width: 1440px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total {
    font-size: 1.8rem;
  }
}
@media (max-width: 1440px) and (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total {
    font-size: 1.6rem;
  }
}
@media (max-width: 1440px) and (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total {
    font-size: 1.5rem;
  }
}
@media (max-width: 1440px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total span {
    font-size: 2.4rem;
  }
}
@media (max-width: 1440px) and (max-width: 1280px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total span {
    font-size: 2rem;
  }
}
@media (max-width: 1440px) and (max-width: 768px) {
  .main-bottom-content .main-bottom-in .trade-statistics .item .total span {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .main-bottom-content .main-bottom-in {
    flex-direction: column;
  }
  .main-bottom-content .main-bottom-in .trade-info-wrap:first-child {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .main-bottom-content {
    padding-top: 3.2em;
  }
}
@media (max-width: 560px) {
  .main-bottom-content .main-bottom-in .trade-info-wrap {
    padding: 1.77em;
  }
  .main-bottom-content .main-bottom-in .trade-info-wrap:last-child .title-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .main-bottom-content .main-bottom-in .trade-info-wrap:last-child .title-content .side-info {
    margin-left: 0;
  }
  .main-bottom-content .main-bottom-in .exchange-rate {
    grid-template-columns: repeat(2, 1fr);
  }
  .main-bottom-content .main-bottom-in .exchange-rate .item {
    padding: 1.11em;
    align-items: center;
  }
  .main-bottom-content .main-bottom-in .trade-statistics {
    gap: 12px;
  }
}
@media (max-width: 320px) {
  .main-bottom-content .main-bottom-in .trade-statistics {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}