/* XXX */
/* =============================================================== */
/* Never change, edit any properties in this file.               */
/* =============================================================== */

/* ROOT */
:root {
  /* ================================================ COLOR PALETTE  */
  /* ================================= MAIN COLOR PALETTE  */
  --primary : #419298;
  --secondary : #52B9C0;
  --tertiary : #387E83;
  --quaternary : #378186;
  --light-brand-color : #F1F7F6;

  /* ================================= TEXT COLOR PALETTE  */
  --text-primary : #212121;
  --text-secondary : #363636;
  --text-tertiary : #333333;
  --text-link : #212121;
  /* ============================ GrayScale COLOR PALETTE  */
  --gray-01: #fbfbfb;
  --gray-05: #888888;
  --gray-06: #AAAAAA;
  --gray-07: #E0E0E0;

  /* ============================ ETC COLOR PALETTE  */
  --white: #ffffff;

  /* ============================ LAYOUT  */
  --max-width: 1320px; /* project inner width */
  --safe-padding:0 20px;

  /* ============================ LAYOUT - ZINDEX */
  --header-z : 1000;
  --fixed-menu : 950;
  --sticky-z : 900;
  --mapInfo-z : 100;

  /* --text-secondary : #; */
  /* --text-tertiary : #; */
  /* --red: #e9462b; */
  /* --black-01: #000000; */
  /* --black-02: #242424; */

  /* --outline-02: #efefef; */
/*
  --blue-01: #18256b;
  --blue-02: #263cab;
  --blue-03: #2e49d1;
  --blue-m: #3454eb;
  --blue-05: #2475ee;
  --blue-06: #d2e4ff;
  --blue-07: #ebf3ff;
  --blue-08: #f4f9ff;

  --pink-01: #ff9e8c;
  --pink-02: #d48379;
  --pink-m: #e9736b;
  --pink-04: #ff6c69;
  --pink-05: #ed616e; */


  /* ================================================ BORDER RADIUS */
  --common-radius: 10px;
  --btn-radius: 40px;
  --faq-radius: 8px;

  /* ================================================ BORDER COLOR */
  --border-01:#E0E0E0;
}

/* =============================================================== */
/* ======================================================= LAYOUT  */
/* =============================================================== */
.FULL_WIDTH {width:100%; max-width: 100%;}

.SIDE_PADDING {padding-left: 10px;padding-right: 10px;}
.TEXT_LINE_ELLIPSIS {width: 98%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;line-height: 160%; }
.TEXT_LINE_ELLIPSIS.FULL_WIDTH {width: 100%;}
.TWO_LINE {-webkit-line-clamp: 2;}

/* =============================================================== */
/* ============================================== LAYOUT - SECTION */
/* =============================================================== */
.section {min-height: auto;  max-width: var(--max-width); margin:0 auto;}

/* =============================================================== */
/* ============================================== LAYOUT - ARTICLE */
/* =============================================================== */
.article { height: 100%; padding-left: 20px; padding-right: 20px;}
.article-title {font-size: 20px;  text-transform: uppercase; font-weight: bold;}




/* =============================================================== */
/* ===================================================== FLEX BOX  */
/* =============================================================== */
.FLEX_BOX {
  width: 100%;
  display: flex;
}
.FLEX_BOX.AUTO {
  width: auto;
  display: flex;
}
.ALIGN_START {
  align-items: flex-start;
}
.ALIGN_CENTER {
  align-items: center;
}
.ALIGN_END {
  align-items: flex-end;
}

.JUSTIFY_START {
  justify-content: flex-start;
}
.JUSTIFY_CENTER {
  justify-content: center;
}
.JUSTIFY_END {
  justify-content: flex-end;
}
.JUSTIFY_SPACE {
  justify-content: space-between;
}

.FLEX_DIR_COL {
  flex-direction: column;
}
.FLEX_DIR_ROW {
  flex-direction: row;
}
.FLEX_1 {
  flex: 1;
}
.FLEX_2 {
  flex: 2;
}

.GAP_5 {
  gap: 5px;
}

.FULL_HEIGHT {
  height: 100%;
}

/* =============================================================== */
/* ======================================================== INPUT  */
/* =============================================================== */

/* =============================================================== */
/* ========================================================= LINK  */
/* =============================================================== */
.link {
  color: var(--text-primary);
}
.link.under {
  text-decoration: underline;
}


/* =============================================================== */
/* ======================================================= BUTTON  */
/* =============================================================== */

.common-btn {
  width: 100%;
  display: flex;
  gap:10px;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 20px;
  padding: 20px 0px;
  border-radius: var(--btn-radius);
  line-height: 1.4;
  border: 1px solid transparent;
  background:var(--primary);
}
.common-btn .icon {width: 14px;}
/* PRIMARY Btn */
.common-btn.primary {
  background:var(--primary);
  color: var(--white);
  border: 1px solid transparent;
  max-width: 290px;
}
/* SECONDARY Btn */
.common-btn.secondary {
  background: var(--secondary);
  color: var(--white);

  max-width: 190px;
}
/* GRAY Btn */
.common-btn.gray {
  background: var(--gray-01);
  color: var(--gray-11);
  border-color: var(--gray-06);
}
/* LINE Btn */
.common-btn.line {
  background: var(--white);
  color: var(--blue-m);

}
.btn_L {
  width: 160px;
}
.btn_M {
  width: 140px;
  padding: 12px 0;
  font-size: 18px;
}
.btn_S {
  width: 80px;
  padding: 7px 0;
  font-size: 12px;
}
.btn_XS {
  width: 56px;
  padding: 3px 0;
  font-size: 12px;
}

.pg_wrap {float: none; margin-top: 50px; width: 100%;}
.pg_wrap:after {display: none}
.pg_wrap .pg {display: flex; align-items: center; justify-content: center; gap: 10px}
.pg_wrap .pg .pg_page {width: 28px; height: 28px; font-size: 18px; line-height: 28px; font-weight: 400; color: #000; background: transparent; border: 0; text-align: center;}
.pg_wrap .pg .pg_page.pg_start {background: url('../img/sub/icon_arrow_double_pagination_1.svg') no-repeat center/contain}
.pg_wrap .pg .pg_page.pg_prev {background: url('../img/sub/icon_arrow_pagination_1.svg') no-repeat center/contain; margin-right: 20px;}
.pg_wrap .pg .pg_page.pg_next {background: url('../img/sub/icon_arrow_pagination_2.svg') no-repeat center/contain; margin-left: 20px}
.pg_wrap .pg .pg_page.pg_end {background: url('../img/sub/icon_arrow_double_pagination_2.svg') no-repeat center/contain}
.pg_wrap .pg .pg_current {width: 28px; height: 28px; line-height: 28px; background: var(--quaternary); border: 0; border-radius: 50%; text-align: center; font-weight: bold; color: #fff}