:root {
  --font-pri: "Inter", sans-serif;
  --font-sec: "Manrope", sans-serif;
  --font-third: "Open Sans", sans-serif; }

.row {
  --col-gap: 2.4rem;
  --row-gap: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--col-gap) / 2 * -1) calc(var(--row-gap) * -1); }

.col {
  width: 100%;
  padding: 0 calc(var(--col-gap) / 2);
  margin-bottom: var(--row-gap); }
  .col-11 {
    width: calc(11/12 * 100%); }
  .col-10 {
    width: calc(10/12 * 100%); }
  .col-9 {
    width: calc(9/12 * 100%); }
  .col-8 {
    width: calc(8/12 * 100%); }
  .col-7 {
    width: calc(7/12 * 100%); }
  .col-6 {
    width: 50%; }
  .col-5 {
    width: calc(5/12 * 100%); }
  .col-4 {
    width: calc(4/12 * 100%); }
  .col-3 {
    width: calc(3/12 * 100%); }
  .col-2 {
    width: calc(2/12 * 100%); }
  .col-1 {
    width: calc(1/12 * 100%); }

/*------------------------------------------------------------
	Clearfix
------------------------------------------------------------*/
/*------------------------------------------------------------
	Font
------------------------------------------------------------*/
/*------------------------------------------------------------
	Media
------------------------------------------------------------*/
/*------------------------------------------------------------
	Flex Box
------------------------------------------------------------*/
.branch {
  padding-top: 6.4rem;
  overflow: hidden; }
  @media screen and (max-width: 575.98px) {
    .branch {
      padding-top: 3.2rem; } }

.branch-wrap {
  margin-top: 4.8rem;
  display: flex;
  flex-direction: column;
  row-gap: 2.4rem; }
  @media screen and (max-width: 575.98px) {
    .branch-wrap {
      margin-top: 0; } }

.branch-filter {
  display: flex;
  align-items: center;
  justify-content: end; }
  .branch-filter .form-label {
    width: 20%;
    margin-bottom: 0;
    min-width: 8rem; }
    @media screen and (max-width: 575.98px) {
      .branch-filter .form-label {
        width: fit-content; } }
  .branch-filter .select2-container {
    width: 100% !important; }
  @media screen and (max-width: 575.98px) {
    .branch-filter .select2-container--default .select2-selection--single {
      border: 0; } }
  @media screen and (max-width: 575.98px) {
    .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__arrow {
      border: 0;
      width: 1rem;
      height: 4px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url("../images/branch/arrow.svg");
      top: 1.2rem;
      transition: 0.3s ease; }
      .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__arrow b {
        display: none; } }
  @media screen and (max-width: 575.98px) {
    .branch-filter .select2-container .select2-selection--single .select2-selection__rendered {
      padding-right: 1.2rem; } }
  .branch-filter .select2.select2-container.select2-container--default.select2-container--below.select2-container--focus.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(-180deg); }
  .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__placeholder,
  .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__rendered {
    color: #0f0f0f;
    font-size: 1.6rem; }
    @media screen and (max-width: 575.98px) {
      .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__placeholder,
      .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__rendered {
        font-size: 1.4rem; } }
    @media screen and (max-width: 575.98px) {
      .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__placeholder,
      .branch-filter .select2-container--default
.select2-selection--single
.select2-selection__rendered {
        font-size: 1.2rem; } }

.branch-img {
  width: 14rem;
  height: 14rem;
  border-radius: 4px;
  overflow: hidden; }
  .branch-img iframe {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media screen and (max-width: 575.98px) {
    .branch-img {
      height: 7rem;
      width: 7rem; } }

.branch-list {
  row-gap: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  margin-right: -1.2rem;
  margin-left: -1.2rem; }
  @media screen and (max-width: 575.98px) {
    .branch-list {
      row-gap: 0.8rem; } }

.branch-item {
  width: 50%;
  padding: 0 1.2rem; }
  @media screen and (max-width: 991.98px) {
    .branch-item {
      width: 100%; } }

.p-branch {
  background: #fff; }