@charset "UTF-8";
@import url(./fonts.css);


* {
  margin: 0;
  padding: 0;
  letter-spacing: -0.32px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact;
  word-break: keep-all;
  overflow-wrap: break-word;
}

html {
  width: 100%;
  height: 100%;
  font-size: 0.052vw;
}

body {
  position: relative;
  font-family: "Pretendard-Regular", sans-serif;
  font-weight: normal;
  font-size: 16rem;
  letter-spacing: 0;
  color: var(--Color-Gray-900);
  line-height: 130%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
p,
form,
fieldset,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul,
ol,
li {
  list-style: none;
}

img,
fieldset {
  border: none;
  vertical-align: top;
}

legend,
caption,
.hide-lable {
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

textarea,
button {
  vertical-align: middle;
}

option {
  padding: 10px;
}

input[type="radio"],
input[type="checkbox"] {
  border: 0;
  padding: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

select {
  padding: 5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  padding: 20rem;
  vertical-align: middle;
  background: #fff;
  border: 1px solid #E0E0E0;
  font-family: "Pretendard-Regular", sans-serif;
  color: var(--Color-Gray-900);
  ;
  letter-spacing: -.04rem;
  font-size: max(16rem, 12px);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  resize: vertical;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: visible;
  white-space: nowrap;
  font-size: max(16rem, 12px);
  font-family: "Pretendard-Regular", sans-serif;
  color: #000;
}

button:active {
  outline: none;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

strong,
b {
  font-family: "Pretendard-Regular", sans-serif;
}

th {
  font-family: "Pretendard-Regular", sans-serif;
}

input:focus,
select:focus,
option:focus,
button:focus {
  outline: none;
}

textarea:focus {
  outline: 1px solid #00AD1D;
}

textarea::placeholder {
  color: #919593;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

/* input reset */
button,
select {
  cursor: pointer;
}

input:disabled,
textarea:disabled,
button:disabled,
select:disabled {
  cursor: default;
}

input:read-only,
textarea:read-only {
  cursor: default;
}

textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-shadow: none;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  resize: none;
}

input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input::-ms-clear {
  display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type="password"]::-ms-reveal {
  display: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  font-family: "Inter-Regular", "NotoSansKR-Regular", sans-serif;
  font-weight: 400;
}

select::-ms-expand {
  display: none;
}

select {
  background: transparent;
  border: none;
}

input {
  padding: 0;
  margin: 0;
  border: none;
}

input:focus,
input:active {
  outline: none;
}

select:focus,
select:active {
  outline: none;
}

option:focus,
option:active {
  outline: none;
}

textarea:focus,
textarea:active {
  outline: none;
}

/* 읽기전용 */
input[type="text"][readonly],
input[type="text"]:-moz-read-only,
input[type="password"][readonly],
input[type="password"]:-moz-read-only,
input[type="tel"][readonly],
input[type="tel"]:-moz-read-only,
input[type="number"][readonly],
input[type="number"]:-moz-read-only {}

/* placeholder */
input[type="text"]::placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="text"]::-moz-placeholder,
input[type="text"]::-ms-input-placeholder,
input[type="password"]::placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="password"]::-moz-placeholder,
input[type="password"]::-ms-input-placeholder,
input[type="tel"]::placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="tel"]::-ms-input-placeholder,
input[type="number"]::placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="number"]::-moz-placeholder,
input[type="number"]::-ms-input-placeholder {}

/* disabled */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
select:disabled {}

/* disabled - placeholer */
input[type="text"]:disabled::placeholder,
input[type="text"]:disabled::-webkit-input-placeholder,
input[type="text"]:disabled::-moz-placeholder,
input[type="text"]:disabled::-ms-input-placeholder,
input[type="password"]:disabled::placeholder,
input[type="password"]:disabled::-webkit-input-placeholder,
input[type="password"]:disabled::-moz-placeholder,
input[type="password"]:disabled::-ms-input-placeholder,
input[type="tel"]:disabled::placeholder,
input[type="tel"]:disabled::-webkit-input-placeholder,
input[type="tel"]:disabled::-moz-placeholder,
input[type="tel"]:disabled::-ms-input-placeholder,
input[type="number"]:disabled::placeholder,
input[type="number"]:disabled::-webkit-input-placeholder,
input[type="number"]:disabled::-moz-placeholder,
input[type="number"]:disabled::-ms-input-placeholder {}


a {
  text-decoration: none;
  color: var(--Color-Gray-900);
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: "NotoSansKR-Regular", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  cursor: pointer;
  overflow: visible;
  white-space: nowrap;
  color: var(--Color-Gray-90);
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}


/* --------------------------------------------- Common START --------------------------------------------- */
:root {
  /* color */
  --Color-Gray-900: #1A1A1A;
  --Color-Gray-800: #4D4D4D;
  --Color-Gray-700: #666;
  --Color-Gray-500: #999;
  --Color-Gray-400: #CCC;
  --Color-Gray-300: #D9D9D9;
  --Color-Gray-200: #E5E5E5;
  --Color-Gray-100: #F0F0F0;
  --Color-Gray-50: #F5F5F5;
  --Color-Gray-White: #FFF;
  --Color-Gray-Black: #000;

  --Color-Green-Primary: #008233;
  --Color-Blue-Primary: #003087;
  --Color-Blue-Light: #F1F4F8;

  --Color-Red: #EC0808;
  --Color-Orange: #C25400;

  --Color-Blue-900: #001023;
  --Color-Blue-700: #002260;
  --Color-Blue-500: #002554;
  --Color-Blue-400: #33599F;
  --Color-Blue-300: #5474AF;

  --Color-Green-500: #00AD1D;
  --Color-Green-Eco: #00E600;

  /* border-radius */
  --border-radius-xs: 4rem;
  --border-radius-sm: 8rem;
  --border-radius-md: 12rem;
  --border-radius-lg: 24rem;
  --border-radius-full: 50%;

  /* transition */
  --transition-icon: all 0.4s ease;
  --transition-default: all 1s ease;
}

.stop-scroll {
  overflow: hidden;
  height: 100%;
  min-height: 100%;
  touch-action: none;
}

.inner {
  width: 1530rem;
  margin: 0 auto;
}

/* @ 브라우저 높이보다 컨텐츠양이 적을때 경우 대비 min-height추가 */
#contents {
  /*overflow:hidden;*/
  padding: 260rem 0 200rem;
  width: 100%;
  min-height: calc(100dvh - 270rem)
    /* footer height 270 */
  ;
}

.sub-visual #contents {
  padding-top: 0;
}

#wrap {
  overflow: hidden;
  position: relative;
}

.only-mo {
  display: none !important;
}

.only-pc {
  display: block !important;
}

.no-pb {
  padding-bottom: 0 !important;
}

.no-pt {
  padding-top: 0 !important;
}

.no-ptb {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.sub-tit-area .f-d2 {
  margin-bottom: 80rem;
  /* margin-bottom: 120rem; */
}

.sub-tit-area .sub-text {
  margin-top: 120rem;
}

.sub-tit-area:has(.border-tab-menu),
.sub-tit-area:has(.bg-tab-menu) {
  margin-bottom: 120rem;
}

.sub-tit-area:has(.bg-tab-menu) .f-d2 {
  margin-bottom: 60rem;
}

.sub-tit-area .border-tab-menu {
  margin-top: 24rem;
}

.cont-area:not(:first-child) {
  margin-top: 240rem;
}

.cont-area.mt-140 {
  margin-top: 140rem;
}

.cont-sec:not(:first-child) {
  margin-top: 160rem;
}

.cont-sec.bg-sec {
  position: relative;
  padding: 160rem 0;
}

.cont-sec.blue-bg {
  position: relative;
  padding: 160rem 0;
}

.cont-sec.blue-bg:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--Color-Blue-Light);
  z-index: -1;
}

.sub-tit-area+.cont-sec {
  margin-top: 0 !important;
}

.cont-box:not(:first-child) {
  margin-top: 100rem;
}

.cont-div:not(:first-child) {
  margin-top: 80rem;
}

.article-area .cont-div:not(:first-child) {
  margin-top: 60rem;
}

.sub-tit-area+.cont-sec {
  transition-delay: 0.3s !important;
}

.sub-tit-area+.cont-sec .cont-div:first-child {
  transition-delay: 0.3s !important;
}

.sub-tit-area:has(.border-tab-menu)+.cont-sec {
  transition-delay: 0.45s !important;
}

.sub-tit-area:has(.border-tab-menu)+.cont-sec .cont-div:first-child {
  transition-delay: 0.45s !important;
}

.align-right {
  justify-content: flex-end !important;
}

.align-center {
  justify-content: center !important;
}

.align-left {
  justify-content: flex-start !important;
}

.align-space-between {
  justify-content: space-between !important;
}

.f-black {
  color: var(--Color-Gray-900);
}

.f-gray {
  color: var(--Color-Gray-700);
}

@media screen and (max-width: 1024px) {
  :root {
    --border-radius-lg: 16rem;
  }

  html {
    font-size: .130vw;
  }

  #wrap {
    overflow: hidden;
  }

  #contents {
    padding: 150rem 0 120rem;
  }

  .inner {
    width: calc(100% - 32rem);
  }

  .only-mo {
    display: block !important;
  }

  .only-pc {
    display: none !important;
  }

  /* .sub-tit-area .f-d2{margin-bottom:60rem;} */
  .sub-tit-area .sub-text {
    margin-top: 80rem;
  }

  .sub-tit-area:has(.border-tab-menu),
  .sub-tit-area:has(.bg-tab-menu) {
    margin-bottom: 80rem;
  }

  .sub-tit-area:has(.bg-tab-menu) .f-d2 {
    margin-bottom: 32rem;
  }

  .sub-tit-area .border-tab-menu {
    margin-top: 20rem;
  }

  .cont-area:not(:first-child) {
    margin-top: 120rem;
  }

  .cont-sec:not(:first-child) {
    margin-top: 120rem;
  }

  .cont-sec.blue-bg {
    padding: 120rem 0;
  }

  .cont-box:not(:first-child) {
    margin-top: 80rem;
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size: .28vw;
  }
}

/* --------------------------------------------- Common End --------------------------------------------- */





/* --------------------------------------------- ScrollMotion Start --------------------------------------------- */
/* scroll-motion */
/* @ 기본 모션 */
.scroll-motion:not(.each) {
  position: relative;
  opacity: 0;
  top: 80rem;
  transition: top 1s ease, opacity 1s ease;
}

.scroll-motion.active:not(.each) {
  opacity: 1;
  top: 0;
}

/* scroll-motion each */
/* @ scroll-motion.each 바로 아래 컨텐츠들이 각각 딜레이로 모션 */
.scroll-motion.each>* {
  position: relative;
  opacity: 0;
  top: 80rem;
  transition: top 1s ease, opacity 1s ease;
}

.scroll-motion.active>* {
  opacity: 1;
  top: 0;
}

.scroll-motion.each>*:nth-child(2) {
  transition-delay: .15s;
}

.scroll-motion.each>*:nth-child(3) {
  transition-delay: .3s;
}

.scroll-motion.each>*:nth-child(4) {
  transition-delay: .45s;
}

.scroll-motion.each>*:nth-child(5) {
  transition-delay: .6s;
}

/* scroll-motion list 3단 */
/* @ 3단 item 부모에 scroll-scrol클래스 추가하고, item에 scroll-motion클래스 추가 : 아이템들이 각각 딜레이로 모션 */
.scroll-3col .scroll-motion:nth-child(3n-1) {
  transition-delay: .15s;
}

.scroll-3col .scroll-motion:nth-child(3n) {
  transition-delay: .3s;
}

@media all and (max-width: 1024px) {
  .scroll-3col .scroll-motion:nth-child(3n-1) {
    transition-delay: 0s;
  }

  .scroll-3col .scroll-motion:nth-child(3n) {
    transition-delay: 0s;
  }

  .scroll-3col .scroll-motion:nth-child(2n-1) {
    transition-delay: .15s;
  }

  .scroll-3col .scroll-motion:nth-child(2n) {
    transition-delay: .3s;
  }
}

@media all and (max-width: 600px) {
  .scroll-3col .scroll-motion:nth-child(2n-1) {
    transition-delay: 0s;
  }

  .scroll-3col .scroll-motion:nth-child(2n) {
    transition-delay: 0s;
  }
}

/* scroll-motion list 2단 */
/* @ 2단 item 부모에 scroll-scrol클래스 추가하고, item에 scroll-motion클래스 추가 : 아이템들이 각각 딜레이로 모션 */
.scroll-2col .scroll-motion:nth-child(2n) {
  transition-delay: .15s;
}

@media all and (max-width: 600px) {
  .scroll-2col .scroll-motion:nth-child(2n) {
    transition-delay: 0s;
  }
}

/* --------------------------------------------- ScrollMotion End --------------------------------------------- */





/* ----------------------------------------- Skip Start ----------------------------------------- */
#skipNavi {
  position: fixed;
  top: -9999px;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  padding: 10rem 20rem;
  text-align: center;
  background-color: #000;
}

#skipNavi a {
  color: #fff;
  font-size: 12rem;
}

#skipNavi:has(a:focus) {
  top: 0;
}

/* ----------------------------------------- Skip End ----------------------------------------- */





/* ----------------------------------------- Header Start ----------------------------------------- */
/* [ Header Font ] */
#header nav .menu-list>li .one-dept {
  font-size: 18rem;
  font-family: "Pretendard-Bold";
  color: var(--Color-Gray-900);
  line-height: 110%;
  letter-spacing: -0.36rem;
  transition: color .2s ease;
}

#header nav .menu-list>li .two-menu-list>li .two-dept {
  font-size: 16rem;
  font-family: "Pretendard-Bold";
  color: var(--Color-Gray-900);
  line-height: 160%;
  letter-spacing: -0.32rem;
  transition: color .2s ease, background .2s ease;
}

#header nav .menu-list>li .two-menu-list>li .thr-menu-list>li .thr-dept {
  font-size: 16rem;
  font-family: "Pretendard-Medium";
  color: var(--Color-Gray-800);
  line-height: 160%;
  letter-spacing: -0.32rem;
  transition: color .2s ease, background .2s ease;
}

/* [ Header ] */
/* @ font motion 0.2s, header motion 0.3s */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100rem;
  padding: 0 80rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  background-color: #fff;
  transition: top .3s ease, background .3s ease, border .3s ease;
}

#header .logo a {
  display: block;
  width: 183rem;
  height: 28rem;
  background: url("/common/en/images/icon-logo.svg") no-repeat center center / 100% auto;
}

#header nav {
  height: 100%;
}

#header nav .menu-list>li .depth-btn {
  display: none;
}

#header nav .menu-list {
  display: flex;
  align-items: center;
  height: 100%;
}

#header nav .menu-list>li {
  position: relative;
  height: 100%;
}

#header nav .menu-list>li .one-dept {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24rem;
}

#header nav .menu-list>li .two-menu-wrap {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  padding: 24rem;
  border: 1px solid var(--Color-Gray-200);
  border-top: none;
  border-radius: 0 0 16rem 16rem;
  background-color: var(--Color-Gray-White);
  overflow: hidden;
}

#header nav .menu-list>li .two-menu-wrap:before {
  display: block;
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--Color-Gray-White);
}

#header nav .menu-list>li .two-menu-list {
  position: relative;
  display: inline-block;
  min-width: 128rem;
}

#header nav .menu-list>li .two-menu-list::before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  right: -24rem;
  width: 1px;
  height: 100%;
  background-color: var(--Color-Gray-200);
  transition: opacity .3s ease;
}

#header nav .menu-list>li .two-menu-list:has(> li.on .thr-menu-list)::before {
  opacity: 1;
}

#header nav .menu-list>li .two-menu-list>li .two-dept {
  position: relative;
  display: block;
  padding: 14rem 16rem;
  width: max-content;
  min-width: 100%;
  border-radius: var(--border-radius-sm);
}

#header nav .menu-list>li .two-menu-list>li:has(.thr-menu-list) .two-dept {
  padding-right: 40rem;
}

#header nav .menu-list>li .two-menu-list>li:has(.thr-menu-list) .two-dept::after {
  content: "";
  position: absolute;
  top: 18rem;
  right: 16rem;
  width: 16rem;
  height: 16rem;
  background: url("/common/en/images/icon-txt-btn-arrow-black.svg") no-repeat center center / 100% auto;
  transition: background .2s ease;
}

#header nav .menu-list>li .two-menu-list>li:has(.thr-menu-list) .two-dept::before {
  content: "";
  position: absolute;
  right: -24rem;
  top: 0;
  bottom: 0;
  width: 24rem;
  height: 100%;
}

#header nav .menu-list>li .two-menu-list>li .thr-menu-list {
  display: none;
  position: absolute;
  top: -24rem
    /* padding 24rem */
  ;
  left: calc(100% + 24rem);
  transform: translateX(-40rem);
  width: auto;
  /* height: calc(100% + 24rem + 24rem); */
  height: fit-content;
  padding: 24rem;
  transition: transform .4s ease;
}

#header nav .menu-list>li .two-menu-list>li.on .thr-menu-list {
  transform: translateX(0);
}

#header nav .menu-list>li .two-menu-list>li .thr-menu-list>li {
  min-width: 120rem;
  width: max-content;
}

#header nav .menu-list>li .two-menu-list>li .thr-menu-list>li .thr-dept {
  display: block;
  width: 100%;
  padding: 14rem 16rem;
  border-radius: var(--border-radius-sm);
}

#header .util {
  display: flex;
  gap: 24rem;
  align-items: center;
}

#header .util .lang-wrap {
  position: relative;
}

#header .util .lang-wrap .lang-btn {
  position: relative;
  padding-right: 25rem;
}

#header .util .lang-wrap .lang-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 20rem;
  height: 20rem;
  background: url("/common/en/images/icon-select20.svg") no-repeat center center / 100% auto;
  transition: transform .2s ease;
}

#header .util .lang-wrap .lang-btn.on::before {
  transform: translateY(-50%) rotate(180deg);
}

#header .util .lang-wrap .lang-box {
  display: none;
  position: absolute;
  top: calc(100% + 16rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 80rem;
  padding: 16rem 20rem 14rem 20rem;
  border: 1px solid var(--Color-Gray-200);
  border-radius: var(--border-radius-md);
  background-color: var(--Color-Gray-White);
}

#header .util .lang-wrap .lang-box::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 17rem;
}

#header .util .lang-wrap .lang-box .lang {
  display: block;
  width: 100%;
}

#header .util .lang-wrap .lang-box .lang:not(:first-child) {
  margin-top: 8rem;
}

#header .util .lang-wrap .lang-box .lang.on {
  font-family: "Pretendard-Bold";
}

#header .allmenu-wrap {
  display: none;
}

/* [ Header Hide ] */
#header.hide {
  top: -110rem;
}

/* [ Header Border ] */
#header.bdr {
  border-bottom: 1px solid var(--Color-Gray-200);
}

/* [ Header White ] */
#header.wht:not(.on, .active) {
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
}

#header.wht:not(.on, .active) .logo a {
  background-image: url("/common/en/images/icon-logo-white.svg");
}

#header.wht:not(.on, .active) nav .menu-list>li .one-dept {
  color: #fff;
}

#header.wht:not(.on, .active) .util .lang-wrap .lang-btn {
  color: #fff;
}

#header.wht:not(.on, .active) .util .lang-wrap .lang-btn::before {
  background-image: url("/common/en/images/icon-select20-wht.svg");
}

#header.wht:not(.on, .active) .util .family-wrap .family-btn {
  color: #fff;
  background-image: url("/common/en/images/icon-family-site-plus-wht.svg");
}

#header.wht:not(.on, .active) .allmenu-wrap .allmenu-btn {
  background-image: url("/common/en/images/icon-ham-wht.svg");
}

/* [ Header Hover ] */
#header :is(.logo, nav, .util) {
  padding-top: 12rem;
  transition: padding .3s ease;
}

#header.active {
  background-color: var(--Color-Gray-White);
  border-bottom: 1px solid var(--Color-Gray-200);
}

#header.active :is(.logo, nav, .util) {
  padding: 0;
}

@media screen and (min-width: 1025px) {

  /* [ Header Li ON ] */
  #header nav .menu-list>li.on .one-dept {
    color: var(--Color-Green-Primary);
  }

  #header nav .menu-list>li .two-menu-list>li.on .two-dept {
    color: var(--Color-Green-Primary);
    background-color: var(--Color-Blue-Light);
  }

  #header nav .menu-list>li .two-menu-list>li.on:has(.thr-menu-list) .two-dept::after {
    background-image: url("/common/en/images/icon-txt-btn-arrow-green.svg");
  }

  #header nav .menu-list>li .two-menu-list>li .thr-menu-list>li .thr-dept:hover {
    color: var(--Color-Green-Primary);
    background-color: var(--Color-Blue-Light);
  }
}

@media screen and (max-width: 1024px) {

  /* [ Header Font ] */
  #header nav .menu-list>li .one-dept {
    line-height: 150%;
  }

  #header nav .menu-list>li .two-menu-list>li .two-dept {
    line-height: 110%;
  }

  #header nav .menu-list>li .two-menu-list>li .thr-menu-list>li .thr-dept {
    font-size: 15rem;
    font-family: "Pretendard-Regular";
    color: var(--Color-Gray-900);
  }

  /* [ Header ] */
  #header {
    height: 70rem;
    padding: 0 16rem;
  }

  #header.on .util {
    display: flex;
  }

  #header .logo {
    position: relative;
    z-index: 1;
  }

  #header .logo a {
    width: 161rem;
    height: 24rem;
  }

  #header nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 70rem !important;
    padding-bottom: 64rem;
    background-color: var(--Color-Gray-White);
  }

  #header nav .menu-list {
    display: block;
    overflow-y: auto;
    height: 100%;
    padding-top: 40rem;
  }

  #header nav .menu-list>li {
    position: relative;
    height: auto;
    overflow: hidden;
  }

  #header nav .menu-list>li .depth-btn {
    position: absolute;
    display: block;
  }

  #header nav .menu-list>li>.depth-btn {
    top: 2rem;
    right: 16rem;
    width: 48rem;
    height: 48rem;
  }

  #header nav .menu-list>li>.depth-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 16rem;
    height: 16rem;
    background: url("/common/en/images/icon-accor-arrow.svg") no-repeat right center / 100% auto;
    transition: transform .2s ease;
  }

  #header nav .menu-list>li.on>.depth-btn::before {
    transform: translateY(-50%) rotate(180deg);
  }

  #header nav .menu-list>li .two-menu-list>li .depth-btn {
    top: 0;
    right: 0;
    width: 48rem;
    height: 48rem;
    background: url("/common/en/images/icon-accor-arrow-20.svg") no-repeat center center / 20rem auto;
    transition: transform .2s ease;
  }

  #header nav .menu-list>li .two-menu-list>li.on .depth-btn {
    transform: rotate(180deg);
  }

  #header nav .menu-list>li .one-dept {
    display: block;
    min-height: 52rem;
    height: auto;
    padding: 13rem 72rem 13rem 16rem;
  }

  #header nav .menu-list>li .two-menu-wrap {
    padding: 24rem 16rem;
    position: unset;
    border: none;
    border-radius: 0;
    background-color: var(--Color-Gray-50);
  }

  #header nav .menu-list>li .two-menu-list {
    display: block;
    min-width: unset;
  }

  #header nav .menu-list>li .two-menu-list::before {
    display: none;
  }

  #header nav .menu-list>li .two-menu-list>li .two-dept {
    padding: 15rem 16rem;
    width: 100%;
    min-width: unset;
    border-radius: 0;
  }

  #header nav .menu-list>li .two-menu-list>li {
    position: relative;
  }

  #header nav .menu-list>li .two-menu-list>li:has(.thr-menu-list) .two-dept {
    min-height: 48rem;
    padding-right: 48rem;
  }

  #header nav .menu-list>li .two-menu-list>li:has(.thr-menu-list) .two-dept::after {
    display: none;
  }

  #header nav .menu-list>li .two-menu-list>li:has(.thr-menu-list) .two-dept::before {
    display: none;
  }

  #header nav .menu-list>li .two-menu-list>li .thr-menu-list {
    position: unset;
    transform: unset;
    width: 100%;
    height: auto;
    padding: 16rem;
    border-top: 1px solid var(--Color-Gray-200);
    border-bottom: 1px solid var(--Color-Gray-200);
  }

  #header nav .menu-list>li .two-menu-list>li .thr-menu-list>li {
    min-width: unset;
    width: 100%;
  }

  #header nav .menu-list>li .two-menu-list>li .thr-menu-list>li .thr-dept {
    padding: 12rem 16rem;
    border-radius: 0;
  }

  #header .util {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: space-between;
    height: 64rem;
    padding: 0 16rem;
    border-top: 1px solid var(--Color-Gray-200);
  }

  #header .util .lang-wrap .lang-box {
    top: unset;
    left: 0;
    bottom: calc(100% + 13rem);
    padding: 16rem 20rem;
    transform: none;
  }

  #header .util .lang-wrap .lang-box::before {
    display: none;
  }

  #header .util .lang-wrap .lang-box .lang {
    font-size: 15rem;
  }

  #header .allmenu-wrap {
    display: block;
    position: relative;
    z-index: 1;
  }

  #header .allmenu-wrap :is(.allmenu-btn, .close-btn) {
    width: 48rem;
    height: 48rem;
    background: url("") no-repeat right center / 24rem auto;
  }

  #header .allmenu-wrap .allmenu-btn {
    display: block;
    background-image: url("/common/en/images/icon-ham.svg");
  }

  #header .allmenu-wrap .close-btn {
    display: none;
    background-image: url("/common/en/images/icon-close-btn-24.svg");
  }

  #header.on .allmenu-wrap .allmenu-btn {
    display: none;
    ;
  }

  #header.on .allmenu-wrap .close-btn {
    display: block;
  }

  /* [ Header Hide ] */
  #header.hide {
    top: -80rem;
  }

  /* [ Header Hover ] */
  #header :is(.logo, nav, .util) {
    padding-top: 0;
  }
}

/* [ Header Family ] */
.family-menu {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

.family-menu>li {
  border: 1px solid var(--Color-Gray-300);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.family-menu>li .one-dept {
  position: relative;
  display: block;
  padding: 25rem 72rem 25rem 40rem;
  font-family: "Pretendard-Bold";
  font-size: 20rem;
  line-height: 150%;
}

.family-menu>li .one-dept::after {
  content: "";
  position: absolute;
  top: 32rem;
  right: 40rem;
  width: 16rem;
  height: 16rem;
  background: url("") no-repeat center center / 100% auto;
}

.family-menu>li:has(.two-menu-wrap) .one-dept::after {
  background-image: url("/common/en/images/icon-accor-arrow.svg");
  transition: transform .2s ease;
}

.family-menu>li.on:has(.two-menu-wrap) .one-dept::after {
  transform: rotate(180deg);
}

.family-menu>li:not(:has(.two-menu-wrap)) {
  background-color: var(--Color-Blue-500);
}

.family-menu>li:not(:has(.two-menu-wrap)) .one-dept {
  color: var(--Color-Gray-White);
}

.family-menu>li:not(:has(.two-menu-wrap)) .one-dept::after {
  background-image: url("/common/en/images/icon-link-arrow-wht.svg");
}

.family-menu>li .two-menu-wrap {
  display: none;
  padding: 40rem;
  border-top: 1px solid var(--Color-Gray-300);
}

.family-menu>li .two-menu-wrap .two-menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rem 60rem;
}

.family-menu>li .two-menu-wrap .two-menu-list>li .two-dept {
  display: block;
  width: 100%;
  padding-right: 32rem;
  font-family: "Pretendard-Medium";
  font-size: 18rem;
  line-height: 160%;
  background: url("/common/en/images/icon-link-arrow.svg") no-repeat right top 5rem / 16rem 16rem;
}

@media screen and (max-width: 1024px) {

  /* [ Header Family ] */
  .family-menu {
    gap: 8rem;
  }

  .family-menu>li .one-dept {
    padding: 22rem 56rem 22rem 24rem;
    font-size: 18rem;
  }

  .family-menu>li .one-dept::after {
    top: 28rem;
    right: 24rem;
  }

  .family-menu>li .two-menu-wrap {
    padding: 24rem;
  }

  .family-menu>li .two-menu-wrap .two-menu-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }

  .family-menu>li .two-menu-wrap .two-menu-list>li .two-dept {
    padding: 9rem 32rem 9rem 0;
    font-size: 16rem;
    background-position: right top 14rem;
  }
}

/* ----------------------------------------- Header End ----------------------------------------- */





/* ----------------------------------------- Footer Start ----------------------------------------- */
footer {
  border-top: 1px solid var(--Color-Gray-200);
}

footer .inner {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 60rem 0;
  width: 1760rem;
}

footer .inner .left {
  display: flex;
  flex-direction: column;
  gap: 80rem;
}

footer .inner .left .link-wrap {
  display: flex;
  gap: 24rem;
}

footer .inner .left .link-wrap .f-d1-b {
  color: var(--Color-Gray-900);
}

footer .inner .left .link-wrap .f-d1-r {
  color: var(--Color-Gray-800);
}

footer .inner .left .info .f-d1-r {
  color: var(--Color-Gray-800);
}

footer .inner .left .info .f-d1-r .only-pc {
  display: inline !important;
}

.family-btn {
  padding-right: 28rem;
  background: url("/common/en/images/icon-family-site-plus.svg") no-repeat right center / 20rem auto;
}


footer .inner .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

footer .inner .right .sns-list ul {
  display: flex;
  align-items: center;
  gap: 3rem;
}

footer .inner .right .sns-list a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 100%;

}

footer .inner .right .sns-list a.blog {
  background: url(/common/en/images/icon-sns-blog.svg)no-repeat center / contain;
}

footer .inner .right .sns-list a.youtube {
  background: url(/common/en/images/icon-sns-youtube.svg)no-repeat center / contain;
}

footer .inner .right .sns-list a.insta {
  background: url(/common/en/images/icon-sns-insta.svg)no-repeat center / contain;
}

footer .inner .right .sns-list a.linkdin {
  background: url(/common/en/images/icon-sns-linkdin.svg)no-repeat center / contain;
}

@media screen and (max-width: 1024px) {
  footer .inner {
    flex-direction: column;
    gap: 40rem;
    justify-content: flex-start;
    width: calc(100% - 32rem);
  }

  footer .inner .left {
    gap: 60rem;
  }

  footer .inner .left .link-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16rem;
  }

  footer .inner .left .info .f-d1-r .only-pc {
    display: none !important;
  }

  footer .inner .right {
    align-items: flex-start;
    gap: 20rem;
  }


}

/* ----------------------------------------- Footer End ----------------------------------------- */





/* ----------------------------------------- Font Start ----------------------------------------- */
/* font align */
.ta-left {
  text-align: left !important;
}

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

.ta-right {
  text-align: right !important;
}

/* info text */
.icon-info-txt {
  padding-left: 20rem;
  background: url("/common/en/images/icon-info-black.svg") no-repeat left top/16rem auto;
}

.icon-info-txt.white {
  background: url("/common/en/images/icon-info-white.svg") no-repeat left top/16rem auto;
}

.icon-info-txt.f-d1-r {
  background-position: left top 3rem;
}

.icon-info-txt.f-d2-r {
  background-position: left top 1rem;
}

@media screen and (max-width: 1024px) {
  .icon-info-txt.f-d1-r {
    background-position: left top 2rem;
  }
}

/* -- HD HYUNDAI -- */
/* Display */
.f-hd-d1 {
  font-size: 64rem;
  font-family: "HDfont-Bold";
  line-height: 130%;
  letter-spacing: -1px;
}

.f-hd-d2 {
  font-size: 56rem;
  font-family: "HDfont-Bold";
  line-height: 130%;
  letter-spacing: -1px;
}

/* Title */
.f-hd-t1 {
  font-size: 44rem;
  font-family: "HDfont-Bold";
  line-height: 130%;
  letter-spacing: -1px;
}

.f-hd-t2 {
  font-size: 36rem;
  font-family: "HDfont-Bold";
  line-height: 140%;
  letter-spacing: -1px;
}

/* -- Pretendard -- */
/* Display */
.f-d1 {
  font-size: 96rem;
  font-family: "Pretendard-Bold";
  line-height: 130%;
  letter-spacing: -1px;
}

.f-d2 {
  font-size: 64rem;
  font-family: "Pretendard-Bold";
  line-height: 130%;
  letter-spacing: -1px;
}

.f-d3 {
  font-size: 38rem;
  font-family: "Pretendard-Bold";
  line-height: 130%;
  letter-spacing: -1px;
}

/* Title */
.f-t1 {
  font-size: 44rem;
  font-family: "Pretendard-Bold";
  line-height: 140%;
  letter-spacing: -1px;
}

.f-t2 {
  font-size: 32rem;
  font-family: "Pretendard-Bold";
  line-height: 140%;
  letter-spacing: -1px;
}

.f-t3 {
  font-size: 23rem;
  font-family: "Pretendard-Bold";
  line-height: 150%;
  letter-spacing: -1px;
}

/* Head */
.f-h1 {
  font-size: 28rem;
  font-family: "Pretendard-Bold";
  line-height: 150%;
  letter-spacing: -1px;
}

.f-h2 {
  font-size: 24rem;
  font-family: "Pretendard-Bold";
  line-height: 150%;
  letter-spacing: -1px;
}

.f-h3 {
  font-size: 20rem;
  font-family: "Pretendard-Bold";
  line-height: 150%;
  letter-spacing: -1px;
}

/* Body */
.f-b1-r {
  font-size: 24rem;
  font-family: "Pretendard-Regular";
  line-height: 150%;
  letter-spacing: -1px;
}

.f-b2-r {
  font-size: 20rem;
  font-family: "Pretendard-Regular";
  line-height: 160%;
  letter-spacing: -1px;
}

.f-b3-b {
  font-size: 18rem;
  font-family: "Pretendard-Bold";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-b3-m {
  font-size: 18rem;
  font-family: "Pretendard-Medium";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-b3-r {
  font-size: 18rem;
  font-family: "Pretendard-Regular";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-b4-b {
  font-size: 16rem;
  font-family: "Pretendard-Bold";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-b4-m {
  font-size: 16rem;
  font-family: "Pretendard-Medium";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-b4-r {
  font-size: 16rem;
  font-family: "Pretendard-Regular";
  line-height: 160%;
  letter-spacing: -0.5px;
}

/* Description */
.f-d1-b {
  font-size: 14rem;
  font-family: "Pretendard-Bold";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-d1-m {
  font-size: 14rem;
  font-family: "Pretendard-Medium";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-d1-r {
  font-size: 14rem;
  font-family: "Pretendard-Regular";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-d2-b {
  font-size: 12rem;
  font-family: "Pretendard-Bold";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-d2-r {
  font-size: 12rem;
  font-family: "Pretendard-Regular";
  line-height: 160%;
  letter-spacing: -0.5px;
}

.f-hd {
  font-family: "HDfont-Bold" !important;
}

@media screen and (max-width: 1024px) {

  /* -- HD HYUNDAI -- */
  /* Display */
  .f-hd-d1 {
    font-size: 32rem;
  }

  .f-hd-d2 {
    font-size: 28rem;
  }

  /* Title */
  .f-hd-t1 {
    font-size: 24rem;
  }

  .f-hd-t2 {
    font-size: 24rem;
  }

  /* -- Pretendard -- */
  /* Display */
  .f-d1 {
    font-size: 48rem;
  }

  .f-d2 {
    font-size: 32rem;
  }

  .f-d3 {
    font-size: 28rem;
  }

  /* Title */
  .f-t1 {
    font-size: 24rem;
  }

  .f-t2 {
    font-size: 20rem;
  }

  .f-t3 {
    font-size: 18rem;
  }

  /* Head */
  .f-h1 {
    font-size: 24rem;
  }

  .f-h2 {
    font-size: 20rem;
  }

  .f-h3 {
    font-size: 18rem;
  }

  /* Body */
  .f-b1-r {
    font-size: 20rem;
  }

  .f-b2-r {
    font-size: 18rem;
  }

  .f-b3-b {
    font-size: 16rem;
  }

  .f-b3-m {
    font-size: 16rem;
  }

  .f-b3-r {
    font-size: 16rem;
  }

  .f-b4-b {
    font-size: 15rem;
  }

  .f-b4-r {
    font-size: 15rem;
  }

  /* Description */
  .f-d1-b {
    font-size: 13rem;
  }

  .f-d1-m {
    font-size: 13rem;
  }

  .f-d1-r {
    font-size: 13rem;
  }

  .f-d2-b {
    font-size: 12rem;
  }

  .f-d2-r {
    font-size: 12rem;
  }
}

/* ----------------------------------------- Font End ----------------------------------------- */





/* ----------------------------------------- Button Start ----------------------------------------- */
.btn-wrap {
  display: flex;
  justify-content: center;
  gap: 8rem;
  margin-top: 80rem;
}



@media screen and (max-width: 1024px) {
  .btn-wrap {
    margin-top: 60rem;
  }

  .btn-wrap.grid2 {
    flex-direction: column;
    align-items: center;
  }

  .btn-wrap.grid2 a {
    width: 100%;
    max-width: 174rem;
  }
}

/* color button */
.color-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rem;
  min-width: 120rem;
  height: 56rem;
  border-radius: 28rem;
  transition: background 0.4s ease;
}

.color-btn span {
  color: var(--Color-Gray-White);
  font-size: 18rem;
  line-height: 110%;
  letter-spacing: -0.5px;
  font-family: "Pretendard-Medium";
}

.color-btn.blue {
  background: var(--Color-Blue-Primary)
}

.color-btn.blue:hover {
  background: #33599F;
}

.color-btn.blue:active {
  background: #002260;
}

.color-btn.green {
  background: var(--Color-Green-Primary)
}

.color-btn.green:hover {
  background: #339B5C;
}

.color-btn.green:active {
  background: #005C24;
}

.color-btn.disabled {
  background: var(--Color-Gray-500) !important;
  cursor: auto;
}

.color-btn.disabled:hover {
  background: var(--Color-Gray-500) !important
}

.color-btn.disabled:active {
  background: var(--Color-Gray-500) !important
}

.color-btn.arrow span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-arrow-white.svg") no-repeat right center/20rem auto;
}

@media all and (max-width: 1024px) {
  .color-btn span {
    font-size: 15rem;
  }
}


/* border button */
.border-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18rem 32rem;
  min-width: 120rem;
  border-radius: 28rem;
  transition: background 0.4s ease;
  border: 1px solid var(--Color-Gray-300);
  background: var(--Color-Gray-White)
}

.border-btn span {
  color: var(--Color-Gray-900);
  font-size: 16rem;
  line-height: 110%;
  letter-spacing: -0.5px;
  font-family: "Pretendard-Medium";
}

.border-btn:hover {
  background: var(--Color-Gray-50)
}

.border-btn:active {
  background: var(--Color-Gray-100) !important;
}

.border-btn.disabled {
  background: var(--Color-Gray-50) !important;
  cursor: auto;
}

.border-btn.disabled:active {
  background: var(--Color-Gray-100) !important;
}

.border-btn.disabled span {
  color: var(--Color-Gray-500) !important;
}

.border-btn.arrow span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-arrow-black.svg") no-repeat right center/20rem auto;
}

.border-btn.download span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-file-download.svg") no-repeat right center/20rem auto;
}

.border-btn.disabled.arrow span {
  background: url("/common/en/images/icon-btn-arrow-disabled.svg") no-repeat right center/20rem auto !important;
}

.border-btn.file span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-file-black.svg") no-repeat right center/20rem auto;
}

.border-btn.plus span {

  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-plus-black.svg") no-repeat right center/20rem auto;
}

.border-btn.white {
  border: 1px solid var(--Color-Gray-White);
  background-color: transparent;
}

.border-btn.white span {
  color: var(--Color-Gray-White);
  transition: color 0.4s ease, background 0.4s ease;
}

.border-btn.white:hover {
  background-color: var(--Color-Gray-White);
}

.border-btn.white:hover span {
  color: var(--Color-Gray-900);
}

.border-btn.white:active {
  border: 1px solid var(--Color-Gray-100);
}

.border-btn.white:active span {
  color: var(--Color-Gray-900);
}

.border-btn.white.arrow span {
  background-image: url("/common/en/images/icon-btn-arrow-white.svg");
}

.border-btn.white.arrow:hover span {
  background-image: url("/common/en/images/icon-btn-arrow-black.svg");
}

.border-btn.white.plus span {
  background-image: url("/common/en/images/icon-btn-plus-white.svg");
}

.border-btn.white.plus:hover span {
  background-image: url("/common/en/images/icon-btn-plus-black.svg");
}

.border-btn.white.disabled {
  border: 1px solid var(--Color-Gray-50);
}

.border-btn.black {
  border: 1px solid var(--Color-Gray-900);
}

.border-btn.black.link span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-link-black.svg") no-repeat right center/20rem auto;
}

.border-btn.white.link span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-link-white.svg") no-repeat right center/20rem auto;
}

.border-btn.white.link:hover span {
  background: url("/common/en/images/icon-btn-link-black.svg") no-repeat right center/20rem auto;
}

.border-btn.black.disabled {
  border: 1px solid var(--Color-Gray-300);
}

@media all and (max-width: 1024px) {
  .border-btn span {
    font-size: 15rem;
  }
}

/* square color button */
.square-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80rem;
  min-height: 56rem;
  padding: 0 20rem;
  border-radius: 4rem;
  transition: background 0.4s ease;
}

.square-btn span {
  color: var(--Color-Gray-White);
  font-size: 16rem;
  line-height: 110%;
  letter-spacing: -0.5px;
  font-family: "Pretendard-Medium";
}

.square-btn.blue {
  background: var(--Color-Blue-Primary)
}

.square-btn.blue:hover {
  background: #33599F;
}

.square-btn.blue:active {
  background: #002260;
}

.square-btn.green {
  background: var(--Color-Green-Primary)
}

.square-btn.green:hover {
  background: #339B5C;
}

.square-btn.green:active {
  background: #005C24;
}

.square-btn.black {
  background: var(--Color-Gray-900)
}

.square-btn.black:hover {
  background: var(--Color-Gray-700)
}

.square-btn.black:active {
  background: var(--Color-Gray-800);
}

.square-btn.light-blue {
  background: #E6EAF3
}

.square-btn.light-blue:hover {
  background: var(--Color-Blue-Light);
}

.square-btn.light-blue:active {
  background: #B0BFDA;
}

.square-btn.light-blue span {
  color: var(--Color-Blue-500)
}

.square-btn.light-green {
  background: #E6F3EB
}

.square-btn.light-green:hover {
  background: #F1F8F4;
}

.square-btn.light-green:active {
  background: #B0D8C0;
}

.square-btn.light-green span {
  color: #005C24
}

.square-btn.small {
  padding: 14rem 16rem;
  min-height: 48rem;
}

.square-btn.light-disabled {
  background: var(--Color-Gray-100) !important;
  cursor: default;
}

.square-btn.light-disabled span {
  color: var(--Color-Gray-500) !important;
}

.square-btn.disabled {
  background: var(--Color-Gray-500);
  cursor: default;
}

.square-btn:disabled {
  background: var(--Color-Gray-500) !important;
  cursor: default;
}

.square-btn.arrow {
  border-radius: var(--border-radius-md);
}

.square-btn.arrow span {
  width: 100%;
  padding-right: 24rem;
  background: url("/common/en/images/icon-arrow-right-wht.svg") no-repeat right center/20rem auto;
}

@media all and (max-width: 1024px) {
  .square-btn {
    height: 48rem;
    min-height: 48rem;
    padding: 0 16rem;
  }

  .square-btn span {
    font-size: 15rem;
  }
}

/* square border button */
.square-border-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80rem;
  padding: 18rem 20rem;
  border-radius: 4rem;
  transition: background 0.4s ease;
  border: 1px solid var(--Color-Gray-300);
  background: var(--Color-Gray-White)
}

.square-border-btn span {
  color: var(--Color-Gray-900);
  font-size: 16rem;
  line-height: 110%;
  letter-spacing: -0.5px;
  font-family: "Pretendard-Medium";
}

.square-border-btn:hover {
  background: var(--Color-Gray-50)
}

.square-border-btn:active {
  background: var(--Color-Gray-100)
}

.square-border-btn.black {
  border: 1px solid var(--Color-Gray-Black)
}

.square-border-btn.disabled {
  background: var(--Color-Gray-50);
  cursor: auto;
}

.square-border-btn.disabled span {
  color: var(--Color-Gray-500)
}

.square-border-btn.small {
  padding: 14rem 16rem;
}

.square-border-btn.note span {
  padding-right: 28rem;
  background: url("/common/en/images/icon-note.svg") no-repeat right center/20rem auto;
}

.square-border-btn.download span {
  padding-right: 28rem;
  background: url("/common/en/images/icon-file-download.svg") no-repeat right center/20rem auto;
}

.square-border-btn.down span {
  padding-right: 28rem;
  background: url("/common/en/images/icon-file-download-20.svg") no-repeat right center/20rem auto;
}

.square-border-btn.file span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-file-black.svg") no-repeat right center/20rem auto;
}

.square-border-btn.link span {
  padding-right: 24rem;
  background: url("/common/en/images/icon-btn-link-black.svg") no-repeat right center/20rem auto;
}

@media all and (max-width: 1024px) {
  .square-border-btn span {
    font-size: 15rem;
  }
}


/* circle button */

.btn-box {
  display: flex;
}

.circle-btn {
  display: flex;
  align-items: center;
  gap: 16rem;
  color: var(--Color-Gray-800);
}

.circle-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  padding: 12rem;
  box-sizing: border-box;
  border-radius: 100rem;
  transition: background 0.4s ease;
}

.circle-btn.download span {
  background: url("/common/en/images/icon-file-download.svg") no-repeat center/24rem auto, var(--Color-Gray-50);
}

.circle-btn.download:hover span {
  background: url("/common/en/images/icon-file-download-wht.svg") no-repeat center/24rem auto, var(--Color-Blue-Primary);
}


@media (width <=1024px) {}

/* text button */
.txt-btn {
  display: inline-flex;
  transition: background 0.4s ease;
}

.txt-btn:hover {
  background: var(--Color-Gray-100)
}

.txt-btn.arrow span {
  background: url("/common/en/images/icon-txt-btn-arrow-black.svg") no-repeat center center / 16rem auto;
}

.txt-btn.arrow.wht span {
  background-image: url("/common/en/images/icon-txt-btn-arrow-wht.svg");
}

.txt-btn.wht:hover {
  background: rgba(255, 255, 255, .2);
}

.txt-btn.wht span {
  color: var(--Color-Gray-White)
}

.txt-btn.left span {
  padding-left: 18rem;
  background-position: left center;
}

.txt-btn.right span {
  padding-right: 18rem;
  background-position: right center;
}

.txt-btn.large span {
  font-size: 16rem;
}

.txt-btn.medium span {
  font-size: 14rem;
}

.txt-btn.small span {
  font-size: 12rem;
}

.txt-btn span {
  font-family: "Pretendard-Medium";
  line-height: 110%;
}

@media all and (max-width: 1024px) {
  .txt-btn.large span {
    font-size: 15rem;
  }
}


.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 20rem;
  margin: 0 auto;
  background: url("/common/en/images/icon-download.svg")no-repeat center /20rem;
}

/* paging */
.paging {
  display: flex;
  justify-content: center;
  gap: 8rem;
  margin-top: 80rem;
}

.paging .prev-btn {
  width: 40rem;
  height: 40rem;
  border-radius: 4rem;
  border: 1px solid var(--Color-Gray-White);
  background: url("/common/en/images/icon-paging-prev.svg") no-repeat center center/20rem auto var(--Color-Gray-White);
  transition: var(--transition-icon)
}

.paging .prev-btn:hover {
  border: 1px solid var(--Color-Gray-400);
  background: url("/common/en/images/icon-paging-prev.svg") no-repeat center center/20rem auto var(--Color-Gray-50);
}

.paging .prev-btn:active {
  border: 1px solid var(--Color-Gray-400);
  background: url("/common/en/images/icon-paging-prev.svg") no-repeat center center/20rem auto var(--Color-Gray-100);
}

.paging .prev-btn.disabled {
  cursor: auto;
  background: url("/common/en/images/icon-paging-prev-disabled.svg") no-repeat center center/20rem auto;
}

.paging .prev-btn.disabled:hover {
  border: 1px solid var(--Color-Gray-White);
  background: url("/common/en/images/icon-paging-prev-disabled.svg") no-repeat center center/20rem auto;
}

.paging .prev-btn.disabled:active {
  border: 1px solid var(--Color-Gray-White);
  background: url("/common/en/images/icon-paging-prev-disabled.svg") no-repeat center center/20rem auto;
}

.paging .next-btn {
  width: 40rem;
  height: 40rem;
  border-radius: 4rem;
  border: 1px solid var(--Color-Gray-White);
  background: url("/common/en/images/icon-paging-next.svg") no-repeat center center/20rem auto var(--Color-Gray-White);
  transition: var(--transition-icon)
}

.paging .next-btn:hover {
  border: 1px solid var(--Color-Gray-400);
  background: url("/common/en/images/icon-paging-next.svg") no-repeat center center/20rem auto var(--Color-Gray-50);
}

.paging .next-btn:active {
  border: 1px solid var(--Color-Gray-400);
  background: url("/common/en/images/icon-paging-next.svg") no-repeat center center/20rem auto var(--Color-Gray-100);
}

.paging .next-btn.disabled {
  cursor: auto;
  background: url("/common/en/images/icon-paging-next-disabled.svg") no-repeat center center/20rem auto;
}

.paging .next-btn.disabled:hover {
  border: 1px solid var(--Color-Gray-White);
  background: url("/common/en/images/icon-paging-next-disabled.svg") no-repeat center center/20rem auto;
}

.paging .next-btn.disabled:active {
  border: 1px solid var(--Color-Gray-White);
  background: url("/common/en/images/icon-paging-next-disabled.svg") no-repeat center center/20rem auto;
}

.paging .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 40rem;
  border-radius: 4rem;
  border: 1px solid var(--Color-Gray-400);
  background: var(--Color-Gray-White);
  transition: background 0.4s ease;
}

.paging .num span {
  font-size: 16rem;
  line-height: 110%;
  letter-spacing: -0.5px;
  font-family: "Pretendard-Medium";
  color: var(--Color-Gray-700)
}

.paging .num:has(span:empty) {
  border: 0;
  background: url("/common/en/images/icon-paging-dot.svg") no-repeat center center / 20rem auto var(--Color-Gray-White);
  cursor: default;
}

.paging .num.disabled {
  cursor: default;
  background: var(--Color-Gray-50);
  border: 1px solid var(--Color-Gray-200)
}

.paging .num.disabled span {
  color: var(--Color-Gray-500);
}

.paging .num.on {
  border: 1px solid var(--Color-Blue-Primary);
  background: var(--Color-Blue-Primary);
}

.paging .num.on span {
  color: var(--Color-Gray-White);
}

.paging .num:hover {
  background: var(--Color-Gray-50)
}

.paging .num:active {
  background: var(--Color-Gray-100)
}

.paging .num.on:hover {
  background: var(--Color-Blue-Primary);
}

.paging .num.on:active {
  background: var(--Color-Blue-Primary);
}

@media all and (max-width: 1024px) {
  .paging {
    gap: 6rem;
    margin-top: 60rem;
  }
}

/* top btn */
.btn-top {
  display: none;
  position: fixed;
  bottom: 40rem;
  right: 40rem;
  width: 56rem;
  height: 56rem;
  background: url("/common/en/images/icon-btn-top.svg") no-repeat center center/56rem auto;
  transition: background 0.4s ease;
  cursor: pointer;
  z-index: 10;
}

.btn-top:hover {
  background: url("/common/en/images/icon-btn-top-on.svg") no-repeat center center/56rem auto;
}

@media all and (max-width: 1024px) {
  .btn-top {
    bottom: 16rem;
    right: 16rem;
    width: 48rem;
    height: 48rem;
    background: url("/common/en/images/icon-btn-top.svg") no-repeat center center/48rem auto;
    transition: none;
  }

  .btn-top:hover {
    background-image: url("/common/en/images/icon-btn-top.svg");
    background-size: 48rem auto;
  }
}

/* --------------------------------------------- Button End --------------------------------------------- */





/* --------------------------------------------- Tab START --------------------------------------------- */
/* 배경형 탭 */
.bg-tab-menu .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2rem;
  padding: 13rem;
  min-width: 160rem;
  width: auto;
  background: var(--Color-Blue-Light);
}

.bg-tab-menu .swiper-slide:last-child {
  margin-right: 0;
}

.bg-tab-menu .swiper-slide span {
  color: var(--Color-Blue-500)
}

.bg-tab-menu .swiper-slide.on {
  background: var(--Color-Blue-500)
}

.bg-tab-menu .swiper-slide.on span {
  color: var(--Color-Gray-White)
}

@media all and (max-width: 1024px) {
  .bg-tab-menu .swiper-slide {
    min-width: 120rem;
    padding: 11rem;
  }
}


/* 보더형 탭 */
.border-tab-menu .swiper-slide {
  padding: 6rem 4rem;
  margin-right: 24rem;
  width: auto;
}

.border-tab-menu .swiper-slide:last-child {
  margin-right: 0;
}

.border-tab-menu .swiper-slide span {
  color: var(--Color-Gray-500)
}

.border-tab-menu .swiper-slide.on {
  border-bottom: 2px solid var(--Color-Blue-500)
}

.border-tab-menu .swiper-slide.on span {
  color: var(--Color-Blue-500)
}

/* 남색 배경, 초록 글씨 형태 탭 */
.navy-bg-tab-menu {
  position: relative;
  height: 80rem;
}

.navy-bg-tab-menu:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--Color-Blue-500)
}

.navy-bg-tab-menu .swiper-slide {
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 32rem;
  width: auto;
}

.navy-bg-tab-menu .swiper-slide:last-child {
  margin-right: 0;
}

.navy-bg-tab-menu .swiper-slide:after {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--Color-Green-Eco);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.navy-bg-tab-menu .swiper-slide span {
  color: var(--Color-Gray-White);
  transition: var(--transition-icon)
}

.navy-bg-tab-menu .swiper-slide.on:after {
  opacity: 1;
}

.navy-bg-tab-menu .swiper-slide.on span {
  color: var(--Color-Green-Eco);
  transition: var(--transition-icon)
}

@media all and (max-width: 1024px) {
  .navy-bg-tab-menu .swiper-slide {
    margin-right: 16rem;
  }
}

/* fixed tab */
.fixed-tab-wrap {
  height: 80rem;
}

.fixed-tab-wrap .fixed-tab {
  background: var(--Color-Blue-500);
}

.fixed-tab-wrap .fixed-tab .tab-btn-area {
  width: 1220rem;
  margin: 0 auto;
}

.fixed-tab-wrap.fix .fixed-tab {
  position: fixed;
  top: 100rem;
  left: 0;
  right: 0;
  z-index: 11;
  transition: top .3s ease;
}

.fixed-tab-wrap.fix .fixed-tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80rem;
  width: 100%;
  height: 100rem;
  background-color: var(--Color-Blue-500);
}

#wrap:has(#header.hide) .fixed-tab-wrap.fix .fixed-tab {
  top: 0;
}

@media all and (max-width: 1024px) {
  .fixed-tab-wrap .fixed-tab .tab-btn-area {
    width: 100%;
  }

  .fixed-tab-wrap.fix .fixed-tab {
    top: 70rem;
    padding: 0 16rem;
  }

  .fixed-tab-wrap.fix .fixed-tab::before {
    height: 70rem;
  }
}

/* --------------------------------------------- Tab End --------------------------------------------- */





/* --------------------------------------------- Form START --------------------------------------------- */
textarea {
  border: none;
  background-color: transparent;
}

input {
  background-color: transparent;
}

select:disabled {
  opacity: 1;
}

/* input - formArea */
.form-area {
  position: relative;
}

.form-area .form-tit {
  margin-bottom: 8rem;
  font-family: "Pretendard-Medium";
  font-size: 16rem;
  line-height: 160%;
}

.form-area .form-tit .essential {
  color: #E90C0C;
}

.form-area .noti {
  margin-top: 8rem;
  font-size: 14rem;
  line-height: 160%;
  color: var(--Color-Gray-700);
}

@media all and (max-width: 1024px) {
  .form-area .form-tit {
    font-size: 15rem;
  }

  .form-area .noti {
    font-size: 13rem;
  }
}

/* input - formWrap */
.form-wrap {
  display: flex;
  gap: 8rem;
}

.form-wrap.wrap {
  flex-wrap: wrap;
}

.form-wrap .form-select {
  width: 160rem;
}

.form-wrap .form-select.full-w {
  width: 300rem;
}

/* [ font ] */
.form-input input,
.form-textarea textarea,
.form-select select {
  font-family: "Pretendard-Regular";
  font-size: 16rem;
  line-height: 150%;
  color: var(--Color-Gray-900);
}

.form-checkbox input+label span,
.form-radio input+label span {
  display: block;
  font-size: 16rem;
  line-height: 160%;
  color: var(--Color-Gray-70);
}

.form-textarea textarea::placeholder,
.form-input input::placeholder {
  font-size: 16rem;
  line-height: 150%;
  color: var(--Color-Gray-500);
}

@media all and (max-width: 1024px) {

  .form-input input,
  .form-textarea textarea,
  .form-select select {
    font-size: 15rem;
    line-height: 160%;
  }

  .form-textarea textarea::placeholder,
  .form-input input::placeholder {
    font-size: 15rem;
    line-height: 160%;
  }

  .form-wrap .form-textarea textarea::placeholder,
  .form-wrap .form-input input::placeholder {
    font-size: 14rem;
    line-height: 160%;
  }
}

/* [ Hover ] */
.form-input:has(input:hover),
.form-textarea:has(textarea:hover),
.form-select.active {
  border: 1px solid var(--Color-Gray-400) !important;
}

.form-input.err:has(input:hover),
.form-textarea.err:has(textarea:hover) {
  border: 1px solid #E90C0C !important
}

/* [ focus ] */
.form-input:has(input:focus),
.form-textarea:has(textarea:focus),
.form-select:has(select:focus) {
  border: 1px solid #000 !important;
}

.form-input.err:has(input:focus),
.form-textarea.err:has(textarea:focus),
.form-select.err:has(select:focus) {
  border: 1px solid #E90C0C !important
}

/* [ disabled & readonly ] */
.form-input:has(input:read-only),
.form-textarea:has(textarea:read-only),
.form-select:has(select.readyonly) {
  background-color: var(--Color-Gray-100);
  border: 1px solid transparent !important;
}

.form-input:has(input:disabled),
.form-textarea:has(textarea:disabled),
.form-select:has(select:disabled) {
  background-color: var(--Color-Gray-100);
}

.form-input:has(input:disabled) input,
.form-textarea:has(textarea:disabled) textarea,
.form-select:has(select:disabled) select {
  color: var(--Color-Gray-500);
}

select.readyonly {
  pointer-events: none;
}

.form-checkbox:has(input:disabled) input+label span {
  color: var(--Color-Gray-500);
}

.form-checkbox input:disabled {
  cursor: default;
}

.form-radio input:disabled {
  cursor: default;
}

.form-checkbox input:disabled+label {
  background-image: url("/common/en/images/icon-checked-disabled.svg");
  cursor: default;
}

.form-checkbox input:checked:disabled+label {
  background-image: url("/common/en/images/icon-checked-on-disabled.svg");
  cursor: default;
}

.form-radio input:disabled+label {
  background-image: url("/common/en/images/icon-radio-disabled.svg");
  cursor: default;
}

/* [ error ] */
.form-area:has(.err) .noti {
  color: var(--Color-Red-400);
}

.form-input.err,
.form-textarea.err,
.form-select.err {
  border: 1px solid #E90C0C;
}

/* input - text */
.form-input {
  position: relative;
  height: 56rem;
  padding: 0 16rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: 4rem;
  overflow: hidden;
  background-color: var(--Color-Gray-White);
}

.form-input input {
  width: 100%;
  height: 100%;
}

.form-input:has(.input-btn-wrap) {
  padding-right: 48rem;
}

.form-input .input-btn-wrap {
  position: absolute;
  right: 16rem;
  top: 50%;
  transform: translateY(-50%);
}

.form-input .input-btn-wrap .delete-btn {
  display: none;
  width: 24rem;
  height: 24rem;
  background: url("/common/en/images/icon-delete-btn-gray-bg.svg") no-repeat center center / 100% auto;
}

.form-input.small {
  height: 48rem;
}

.form-input.small .input-btn-wrap {
  right: 14rem;
}

.form-input.small .input-btn-wrap .delete-btn {
  width: 20rem;
  height: 20rem;
  background: url("/common/en/images/icon-delete-btn-gray-bg.svg") no-repeat center center / 100% auto;
}

.form-input.search {
  padding-right: 84rem;
}

.form-input.search .srch-btn {
  position: absolute;
  top: 50%;
  right: 16rem;
  transform: translateY(-50%);
  width: 24rem;
  height: 24rem;
  background: url("/common/en/images/icon-search-black.svg") no-repeat center center / 100% auto;
}

.form-input.search .input-btn-wrap {
  right: 48rem;
}

@media all and (max-width: 1024px) {
  .form-input {
    height: 48rem;
  }

  .form-input .input-btn-wrap .delete-btn {
    width: 20rem;
    height: 20rem;
  }

  .form-input.search {
    padding-right: 64rem;
  }

  .form-input.search .srch-btn {
    right: 12rem;
    width: 20rem;
    height: 20rem;
  }

  .form-input.search .input-btn-wrap {
    right: 38rem;
  }
}

/* input - checkbox */
.form-checkbox {
  display: inline-block;
  position: relative;
}

.form-checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24rem;
  height: 24rem;
  opacity: 0.001;
  cursor: pointer;
}

.form-checkbox input+label {
  display: block;
  min-height: 24rem;
  padding-left: 32rem;
  color: var(--Color-Gray-70);
  background: url("/common/en/images/icon-checked.svg") no-repeat left top / 24rem auto;
  cursor: pointer;
}

.form-checkbox input+label:not(:has(*)) {
  padding-left: 24rem;
}

.form-checkbox input:checked+label {
  background-image: url("/common/en/images/icon-checked-on.svg");
}

.form-checkbox.no-label input+label {
  padding-left: 24rem;
}

/* input - radio */
.form-radio {
  display: inline-block;
  position: relative;
}

.form-radio input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24rem;
  height: 24rem;
  opacity: 0.001;
  cursor: pointer;
}

.form-radio input+label {
  display: block;
  min-height: 24rem;
  padding-left: 32rem;
  background: url("/common/en/images/icon-radio.svg") no-repeat top left / 24rem auto;
  cursor: pointer;
}

.form-radio input+label:not(:has(*)) {
  padding-left: 24rem;
}

.form-radio input:checked+label {
  background-image: url("/common/en/images/icon-radio-on.svg");
}

/* input - select */
.form-select {
  position: relative;
  z-index: 1;
  display: flex;
  /* width: 300rem; */
  height: 56rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: 4rem;
  overflow: hidden;
  background-color: var(--Color-Gray-White);
}

.form-select select {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0 36rem 0 16rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.form-select:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 16rem;
  z-index: -1;
  transform: translateY(-50%) rotate(0);
  width: 20rem;
  height: 20rem;
  background: url("/common/en/images/icon-select.svg") no-repeat center center / 100%;
  transition: transform .2s ease;
}

.form-select.active:before {
  transform: translateY(-50%) rotate(180deg);
}

.form-select.err {
  border: 1px solid #E90C0C;
}

.form-select.err select {
  color: #E90C0C;
}

@media all and (max-width: 1024px) {
  .form-select {
    height: 48rem;
  }
}

/* input - textarea */
.form-textarea {
  position: relative;
  /* width: 480rem; */
  height: 160rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: 4rem;
  overflow: hidden;
  background-color: var(--Color-Gray-White);
}

.form-textarea textarea {
  width: 100%;
  height: 100%;
  padding: 16rem;
}

.form-textarea textarea::-webkit-scrollbar {
  width: 6rem;
  height: 6rem;
  background: var(--Color-Gray-100);
}

.form-textarea textarea::-webkit-scrollbar-thumb {
  background: var(--Color-Gray-500);
}

/* agree */
/* .agree-area .form-agree {
  height: 280rem;
  padding: 16rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: var(--border-radius-xs);
  overflow: auto;
  background-color: var(--Color-Gray-White);
} */
.agree-area .form-agree {
  height: 160rem;
  padding: 16rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: var(--border-radius-xs);
  background-color: var(--Color-Gray-White);
  overflow: hidden;
}

.agree-area .form-agree .scroll {
  overflow-y: auto;
  height: 100%;
}

.agree-area .form-agree .scroll::-webkit-scrollbar {
  width: 6rem;
  background: var(--Color-Gray-100);
}

.agree-area .form-agree .scroll::-webkit-scrollbar-thumb {
  background: var(--Color-Gray-500);
}

/* .agree-area .form-agree::-webkit-scrollbar {
  width: 6rem;
  background: var(--Color-Gray-100);
}

.agree-area .form-agree::-webkit-scrollbar-thumb {
  background: var(--Color-Gray-500);
} */

.agree-area .form-agree .agree-div+.agree-div {
  margin-top: 30rem;
}

.agree-area .form-agree .agree-div .txt-wrap {
  padding-left: 22rem;
  margin-top: 16rem;
}

.agree-area .form-agree .agree-div p {
  color: var(--Color-Gray-800);
}

.agree-area .form-agree .agree-div p:not(:first-child) {
  margin-top: 16rem;
}

.agree-area .form-agree .agree-div .txt-wrap p:not(:first-child) {
  margin-top: 8rem;
}

.agree-area .form-agree .agree-div .tit {
  color: var(--Color-Blue-900);
}

.agree-area .form-agree .agree-div .num {
  display: flex;
  gap: 8rem;
}

.agree-area .form-agree .agree-div .num span {
  flex-shrink: 0;
  color: var(--Color-Gray-900);
}

/* .agree-area .form-checkbox {
  margin-top: 16rem;
} */

/* form - file */
.form-file {
  display: flex;
  gap: 8rem;
}

.form-file .form-input:has(input:read-only) {
  flex: 1;
  background-color: var(--Color-Gray-White) !important;
  border: 1px solid var(--Color-Gray-300) !important;
}

.form-file:not(:has(input[type=file]:disabled)) .form-input:has(input:focus) {
  border: 1px solid #000 !important;
}

.form-file .form-input input {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.form-file .btns {
  flex-shrink: 0;
  position: relative;
}

.form-file .btns input[type=file] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
}

.form-file .btns input[type=file]::-webkit-file-upload-button {
  cursor: pointer;
}

.form-file:has(input[type=file]:disabled) .form-input {
  background-color: var(--Color-Gray-100) !important;
  border: 1px solid transparent !important;
}

.form-file:has(input[type=file]:disabled) .form-input .delete-btn {
  display: none !important;
}

.file-comment {
  margin-top: 8rem;
  color: var(--Color-Gray-700);
}

/* * + button form */
.form-btn {
  display: flex;
  gap: 8rem;
}

/* table */
.form-table .need-scroll {
  overflow-x: auto;
  padding-bottom: 8rem;
}

.form-table .need-scroll .basic-table {
  table-layout: fixed;
}

.form-table .need-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: transparent;
}

.form-table .need-scroll::-webkit-scrollbar-track {
  display: none;
}

.form-table .need-scroll::-webkit-scrollbar-thumb {
  background-color: var(--Color-Gray-300);
  border-radius: var(--border-radius-xs);
}

.form-table .need-scroll table {
  min-width: 1100rem;
}

.form-table .none-scroll table p {
  word-break: break-word;
  word-wrap: break-word;
}

.form-table .table-wrap table {
  position: relative;
}

.form-table .table-wrap table:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--Color-Gray-Black)
}

.form-table .bdr {
  border-right: 1px solid var(--Color-Gray-200) !important;
}

.form-table .bdb {
  border-bottom: 1px solid var(--Color-Gray-200) !important;
}

.form-table .no-bdr {
  border-right: 0 !important;
}

.form-table thead {
  background: var(--Color-Blue-Light);
}

.form-table thead tr {
  border-bottom: 1px solid var(--Color-Gray-200);
}

.form-table thead th {
  /* padding: 18rem 20rem; */
  padding: 15rem 20rem;
  color: var(--Color-Gray-Black);
  border-right: 1px solid var(--Color-Gray-200)
}

.form-table thead th:last-child {
  border-right: 0
}

.form-table tbody tr {
  border-bottom: 1px solid var(--Color-Gray-200);
}

.form-table tbody th {
  color: var(--Color-Gray-800);
  border-right: 1px solid var(--Color-Gray-200)
}

.form-table tbody td {
  padding: 18rem 20rem;
  text-align: center;
  color: var(--Color-Gray-800);
  word-wrap: break-word;
  word-break: break-word;
  border-right: 1px solid var(--Color-Gray-200)
}

.form-table tbody td:not(.date):last-child {
  border-right: 0;
  border-left: 1px solid var(--Color-Gray-200)
}

.form-table tbody:has(th) td {
  color: var(--Color-Gray-700)
}

.form-table .no-data-area {
  height: 284rem;
  border: 0;
}

.form-table.no-border .table-wrap table {
  border-top: 0;
}

.form-table.no-border table {
  table-layout: fixed;
}

.form-table.no-border .table-wrap table:before {
  display: none;
}

.form-table.no-border thead {
  border-bottom: 0;
}

.form-table.no-border thead tr {
  border-bottom: 0;
}

.form-table.no-border thead th {
  border-right: 0;
}

.form-table.no-border thead th:first-child {
  padding-left: 40rem;
}

.form-table.no-border thead th:last-child {
  padding-right: 40rem;
}

.form-table.no-border tbody td {
  border-right: 0;
}

.form-table.no-border tbody td {
  /* padding: 40rem 20rem */
  padding: 30rem 20rem
}

.form-table.no-border:has(.need-scroll) tbody td {
  padding: 18rem 20rem;
}

.form-table.no-border tbody td:first-child {
  padding-left: 40rem;
}

.form-table.no-border tbody td:last-child {
  padding-right: 40rem;
}

.form-table.no-border .f-h3 {
  color: var(--Color-Gray-900)
}

.form-table.no-border:has(:not(.link)) .f-h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
}

.form-table.no-border .f-h3+.f-b4-r {
  margin-top: 8rem;
  color: var(--Color-Gray-700)
}

.form-table.no-border .table-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40rem;
  width: 100%;
}

.form-table.no-border .table-list.link .f-h3 {
  width: 90%;
  text-align: left;
}

.form-table.no-border .table-list.link .f-b4-r {
  margin-top: 0;
  width: 10%;
  text-align: center;
  color: var(--Color-Gray-700);
}

@media all and (max-width: 1024px) {
  .form-table .table-wrap {
    width: calc(100% + 20rem);
    padding-right: 20rem;
  }

  .form-table .table-wrap table:before {
    background: var(--Color-Gray-400)
  }

  /* .form-table.no-border:not(:has(.need-scroll)) table{table-layout: auto;} */
  .form-table.no-border .table-wrap table:before {
    background: var(--Color-Gray-Black);
  }

  .form-table.no-border thead {
    display: none;
  }

  .form-table.no-border tbody td {
    padding: 24rem 16rem;
  }

  .form-table.no-border:has(.need-scroll) tbody td {
    padding: 18rem 20rem;
  }

  .form-table.no-border tbody td:first-child {
    padding-left: 16rem;
  }

  .form-table.no-border tbody td:last-child {
    padding-right: 16rem;
  }

  .form-table.no-border:has(.need-scroll) tbody td:first-child {
    padding-left: 40rem;
  }

  .form-table.no-border:has(.need-scroll) tbody td:last-child {
    padding-right: 40rem;
  }

  .form-table.no-border .table-wrap table:before {
    display: block;
  }

  .form-table.no-border .table-list {
    flex-direction: column;
    gap: 8rem;
  }

  .form-table.no-border .table-list.link .f-h3 {
    width: 100%;
  }

  .form-table.no-border .table-list.link .f-b4-r {
    width: 100%;
    text-align: left;
  }

  .form-table.no-border:has(.need-scroll) thead {
    display: table-header-group;
  }

  .form-table.no-border:has(.need-scroll) .table-wrap table:before {
    display: none;
  }
}

/* --------------------------------------------- Form END --------------------------------------------- */





/* --------------------------------------------- Swiper START --------------------------------------------- */
/* swiper btn */
.swiper-control {
  display: flex;
  align-items: center;
}

.swiper-control :is(.swiper-button-next, .swiper-button-prev) {
  flex-shrink: 0;
  position: unset;
  margin: unset;
  background: url("") no-repeat center center / 100% auto;
  transition: var(--transition-icon);
}

.swiper-control .swiper-button-next {
  order: 2;
}

.swiper-control .swiper-button-prev {
  order: 1;
}

.swiper-control .swiper-pagination {
  order: 2;
  position: unset;
}

/* circle wht */
.swiper-control.circle-wht {
  gap: 8rem;
}

.swiper-control.circle-wht :is(.swiper-button-next, .swiper-button-prev) {
  width: 56rem;
  height: 56rem;
}

.swiper-control.circle-wht .swiper-button-next {
  background-image: url("/common/en/images/icon-swiper-btn-next.svg");
}

.swiper-control.circle-wht .swiper-button-prev {
  background-image: url("/common/en/images/icon-swiper-btn-prev.svg");
}

.swiper-control.circle-wht .swiper-button-next:hover {
  background-image: url("/common/en/images/icon-swiper-btn-next-hover.svg");
}

.swiper-control.circle-wht .swiper-button-prev:hover {
  background-image: url("/common/en/images/icon-swiper-btn-prev-hover.svg");
}

/* circle black */
.swiper-control.circle-black {
  gap: 8rem;
}

.swiper-control.circle-black :is(.swiper-button-next, .swiper-button-prev) {
  width: 56rem;
  height: 56rem;
}

.swiper-control.circle-black .swiper-button-next {
  background-image: url("/common/en/images/icon-swiper-btn-next-black.svg");
}

.swiper-control.circle-black .swiper-button-prev {
  background-image: url("/common/en/images/icon-swiper-btn-prev-black.svg");
}

.swiper-control.circle-black .swiper-button-next:hover {
  background-image: url("/common/en/images/icon-swiper-btn-next-black-hover.svg");
}

.swiper-control.circle-black .swiper-button-prev:hover {
  background-image: url("/common/en/images/icon-swiper-btn-prev-black-hover.svg");
}

/* wht arrow 16 */
.swiper-control.wht-arrow :is(.swiper-button-next, .swiper-button-prev) {
  width: 16rem;
  height: 16rem;
}

.swiper-control.wht-arrow .swiper-button-next {
  background-image: url("/common/en/images/icon-swiper-btn-next-arrow.svg");
}

.swiper-control.wht-arrow .swiper-button-prev {
  background-image: url("/common/en/images/icon-swiper-btn-prev-arrow.svg");
}

/* wht arrow 20 */
.swiper-control.arrow :is(.swiper-button-next, .swiper-button-prev) {
  width: 20rem;
  height: 20rem;
}

.swiper-control.arrow .swiper-button-prev {
  background-image: url("/common/en/images/icon-prev-wht.svg");
}

.swiper-control.arrow .swiper-button-next {
  background-image: url("/common/en/images/icon-next-wht.svg");
}

/* wht arrow 48 */
.swiper-control.arrow48 :is(.swiper-button-next, .swiper-button-prev) {
  width: 48rem;
  height: 48rem;
}

.swiper-control.arrow48 .swiper-button-prev {
  background-image: url("/common/en/images/icon-swiper-btn-prev-arrow-circle.svg");
}

.swiper-control.arrow48 .swiper-button-next {
  background-image: url("/common/en/images/icon-swiper-btn-next-arrow-circle.svg");
}


/* gray border swiper */
.gray-border-swiper .swiper-slide {
  margin-right: 8rem;
  width: auto;
}

.gray-border-swiper .swiper-slide:last-child {
  margin-right: 0;
}

@media all and (max-width: 1024px) {
  .swiper-control.circle-wht :is(.swiper-button-next, .swiper-button-prev) {
    width: 48rem;
    height: 48rem;
  }

  /* ios 기기 background transition issue */
  .swiper-control .swiper-button-next {
    transition: none !important;
  }

  .swiper-control .swiper-button-prev {
    transition: none !important;
  }

  .swiper-control.circle-wht .swiper-button-next:hover {
    background-image: url("/common/en/images/icon-swiper-btn-next.svg");
  }

  .swiper-control.circle-wht .swiper-button-prev:hover {
    background-image: url("/common/en/images/icon-swiper-btn-prev.svg");
  }
}

/* --------------------------------------------- Swiper END --------------------------------------------- */





/* --------------------------------------------- Layout Start --------------------------------------------- */
/* 폼 필드 */
/* @ 폼 페이지는 form-field 한번 감싸기 */
.form-field .btn-wrap {
  margin-top: 100rem;
}

@media all and (max-width: 1024px) {

  /* 폼 필드 */
  .form-field .btn-wrap {
    margin-top: 60rem;
  }
}

/* half layout */
.half-layout {
  display: flex;
  justify-content: space-between;
  gap: 100rem;
}

.half-layout .half-tit .txts {
  margin-top: 24rem;
  color: var(--Color-Gray-800);
}

.half-layout .half-tit .disc {
  margin-top: 16rem;
  color: var(--Color-Gray-800);
}

.half-layout .half-tit .ir-contact {
  margin-top: 48rem;
}

.half-layout .half-tit .btns {
  margin-top: 40rem;
}

.half-layout .half-cont {
  flex-shrink: 0;
  width: 600rem;
}

.half-layout .half-cont .blue-bg-info {
  padding: 60rem;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20rem;
}

.half-layout .half-cont .blue-bg-info .date {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-top: 16rem;
}

.input-wrap {
  display: flex;
  flex-direction: column;
  gap: 48rem;
}

@media all and (max-width: 1024px) {

  /* half layout */
  .half-layout {
    display: block;
  }

  .half-layout .half-tit {
    margin-bottom: 40rem;
  }

  .half-layout .half-tit:has(.ir-contact, .btns) {
    margin-bottom: 60rem;
  }

  .half-layout .half-tit .txts {
    margin-top: 8rem;
  }

  .half-layout .half-tit .btns {
    margin-top: 32rem;
  }

  .half-layout .half-cont {
    width: 100%;
  }

  .half-layout .half-cont .blue-bg-info {
    padding: 24rem;
    gap: 10rem;
  }

  .input-wrap {
    gap: 32rem;
  }
}

/* card list */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card-list+.card-list {
  margin-top: 16rem;
}

.card-list .item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-list .item .img-wrap {
  flex-shrink: 0;
  overflow: hidden;
}

.card-list .item .img-wrap:not(:has(img)) {
  background: url("/common/en/images/icon-logo-noimg.svg") no-repeat center center / 54% auto #f7f7f7;
}

.card-list .item .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-icon);
}

.card-list .item:hover .img-wrap img {
  transform: scale(104%);
}

.card-list .item .txt-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  overflow: hidden;
}

.card-list .item .txt-wrap .tit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-list .item .txt-wrap .date {
  color: var(--Color-Gray-700);
}

.news-sec .card-list {
  gap: 40rem 20rem;
}

.news-sec .card-list .item .img-wrap {
  height: 262rem;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.news-sec .card-list .item .txt-wrap {
  padding: 24rem 24rem 32rem;
  border: 1px solid var(--Color-Gray-200);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  border-top: none;
}

.news-sec .card-list .item .txt-wrap .date {
  margin-top: 12rem;
}

.card-list:has(.download, .link) {
  gap: 16rem;
}

.card-list:has(.download, .link) .item {
  height: 280rem;
}

.card-list .item.download {
  background: url("/common/en/images/icon-gray-circle-download.svg") no-repeat right 32rem bottom 32rem/48rem auto;
}

.card-list .item.link {
  background: url("/common/en/images/icon-gray-circle-link.svg") no-repeat right 32rem bottom 32rem/48rem auto;
}

.card-list:has(.download, .link) .item .txt-wrap {
  display: block;
  padding: 32rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--Color-Gray-300);
  transition: var(--transition-icon)
}

.card-list:has(.download, .link) .item .txt-wrap:hover {
  border: 1px solid var(--Color-Blue-500);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

.card-list:has(.download, .link) .item .txt-wrap .tit {
  margin-top: 16rem;
  -webkit-line-clamp: 1;
}

.card-list:has(.download) .item .txt-wrap:not(:has(.date)) .tit {
  -webkit-line-clamp: 2;
  margin-top: 0;
}

.card-list:has(.annual) {
  grid-template-columns: repeat(2, 1fr);
  gap: 20rem;
}

.card-list:has(.annual) .item {
  flex-direction: row;
  gap: 24rem;
  padding: 32rem;
  min-height: 248rem;
}

.card-list:has(.annual) .item:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid var(--Color-Gray-300);
  border-radius: var(--border-radius-md);
  z-index: -1;
  transition: var(--transition-icon)
}

.card-list:has(.annual) .item:hover:after {
  border: 1px solid var(--Color-Blue-500);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
}

.card-list:has(.annual) .item .img-wrap {
  width: 180rem;
  height: auto;
}

.card-list:has(.annual) .item .img-wrap:not(:has(img)) {
  background: none;
}

.card-list:has(.annual) .item .img-wrap img {
  max-width: 180rem;
}

.card-list:has(.annual) .item .txt-wrap {
  display: block;
  position: relative;
}

.card-list:has(.annual) .item .txt-wrap .tit {
  margin-top: 16rem;
  -webkit-line-clamp: 1;
  color: var(--Color-Blue-Primary)
}

.card-list:has(.annual) .item .txt-wrap .f-h3 {
  overflow: hidden;
  margin-top: 8rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.card-list:has(.annual) .item .txt-wrap .btns {
  display: flex;
  gap: 16rem;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.card-list:has(.annual) .item .txt-wrap .btns .download-icon {
  flex-shrink: 0;
  width: 48rem;
  height: 48rem;
  background: url("/common/en/images/icon-gray-circle-download.svg") no-repeat center center/48rem auto;
}

.card-list:has(.annual) .item .txt-wrap .btns .f-d1-r {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  width: calc(100% - 56rem);
  color: var(--Color-Gray-800);
}

/* 뉴스룸 */
.card-list.news {
  grid-template-columns: repeat(2, 1fr);
  gap: 80rem;
}

.card-list.news .item .img-wrap {
  height: 321rem;
  border-radius: var(--border-radius-md);
}

.card-list.news .item a {
  display: block;
}

.card-list.news .item .file {
  position: absolute;
  top: calc(321rem + 24rem);
  right: 0;
  width: 40rem;
  height: 40rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: var(--border-radius-xs);
  background: url("/common/en/images/icon-file-download-clip.svg") no-repeat center center / 20rem 20rem;
}

.card-list.news .item:has(.file) .txt-wrap {
  padding-right: 56rem;
}

.card-list.news .item .txt-wrap {
  margin-top: 24rem;
}

.card-list.news .item .txt-wrap .date {
  margin-top: 8rem;
}

@media all and (max-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-list+.card-list {
    margin-top: 12rem;
  }

  .news-sec .card-list {
    gap: 24rem;
  }

  .news-sec .card-list .item .img-wrap {
    height: 218rem;
  }

  .card-list:has(.download, .link) {
    gap: 12rem;
  }

  .card-list:has(.download, .link) .item {
    height: 242rem;
  }

  .card-list:has(.download, .link) .item .txt-wrap .date {
    margin-bottom: 12rem;
  }

  .card-list:has(.download, .link) .item .txt-wrap .tit {
    margin-top: 0;
  }

  .card-list:has(.annual) {
    gap: 16rem;
  }

  .card-list:has(.annual) .item {
    flex-direction: column;
    padding: 24rem;
    min-height: 0;
  }

  .card-list:has(.annual) .item:not(:has(img)) {
    gap: 0;
  }

  .card-list:has(.annual) .item .img-wrap {
    width: 100%;
    text-align: center;
  }

  .card-list:has(.annual) .item .img-wrap img {
    width: auto;
    max-width: 100%;
  }

  .card-list:has(.annual) .item .txt-wrap .tit {
    margin-top: 0;
  }

  .card-list:has(.annual) .item .txt-wrap .btns {
    justify-content: flex-start;
    gap: 16rem;
    position: static;
    margin-top: 24rem;
  }
}

@media screen and (max-width: 600px) {
  .card-list {
    grid-template-columns: repeat(1, 1fr);
  }

  .card-list:has(.annual) {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* list table */
.list-table {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

.list-table .tr {
  display: flex;
  gap: 40rem;
}

.list-table .tr .th {
  flex-shrink: 0;
  width: 100rem;
}

.list-table .tr .td {
  flex: 1;
}

@media all and (max-width: 1024px) {
  .list-table .tr {
    gap: 16rem;
  }

  .list-table .tr .th {
    width: 80rem;
  }
}

/* 파란색 배경 정보 디자인 */
.blue-bg-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rem;
  background: var(--Color-Blue-Light);
  border-radius: var(--border-radius-md);
}

.blue-bg-info .info-line {
  display: flex;
  align-items: center;
  gap: 16rem;
}

.blue-bg-info .info-line~.info-line {
  margin-top: 16rem;
}

.blue-bg-info .info-line .th {
  flex-shrink: 0;
  width: 100rem;
  text-align: left;
}

.blue-bg-info .info-line .td {
  color: var(--Color-Gray-800);
}

@media all and (max-width: 1024px) {
  .blue-bg-info .line-wrap {
    width: 100%;
  }

  .blue-bg-info .info-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
  }

  .blue-bg-info .info-line .th {
    width: 100%;
  }
}

/* 회색 보더 정보 디자인 */
.gray-border-info {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding: 40rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: var(--border-radius-md);
}

.gray-border-info .f-b4-r {
  color: var(--Color-Gray-800);
}

@media all and (max-width: 1024px) {
  .gray-border-info {
    padding: 24rem;
  }
}

/* indent text */
.indent-txt {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
}

.indent-txt>span {
  color: var(--Color-Gray-900);
  white-space: nowrap;
}

/* 서브 공통 비주얼 */
.in-txt-visual {
  position: relative;
  top: 0 !important;
  left: -352rem;
  width: calc(100vw + 1px);
  height: 300vh;
  opacity: 1 !important;
}

.in-txt-visual .bottom-fixed {
  position: relative;
  width: 100%;
}

.in-txt-visual .fixed-visual {
  position: relative;
  width: 100%;
  height: 100vh;
}

.in-txt-visual .fixed-visual.fixed {
  transform: translate(0, 0) !important
}

.in-txt-visual .fixed-visual.fixed .motion-visual {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(0, 0)
}

.in-txt-visual .motion-visual {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1220rem;
  height: 60vh;
  border-radius: var(--border-radius-lg);
}

/* .in-txt-visual .motion-visual>.motion01, */
.in-txt-visual .motion-visual>.motion02 {
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0; */
}

.in-txt-visual .bottom-fixed::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--Color-Gray-White);
  transition: width 0.7s ease;
  z-index: 3;
}

.in-txt-visual.active .bottom-fixed::after {
  width: 0;
  transition-delay: 0.45s;
}

.in-txt-visual.active .motion-visual:after {
  width: 0;
  transition-delay: 0.8s;
}

.in-txt-visual .motion-visual .img {
  width: 100%;
  height: 100%;
}

.in-txt-visual .motion-visual .img img,
.in-txt-visual .motion-visual .img video {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.in-txt-visual .motion-visual .img-dimd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}

.in-txt-visual .motion-visual .txt-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1220rem;
}

.in-txt-visual .motion-visual .txt-div>* {
  color: #fff;
  text-align: center;
}

.in-txt-visual .motion-visual .txt-div .f-t1,
.in-txt-visual .motion-visual .txt-div .border-btn,
.in-txt-visual .motion-visual .txt-div .f-h2 {
  position: relative;
  top: 80rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual .motion-visual .txt-div .f-d3 {
  position: relative;
  top: 80rem;
  margin-top: 20rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual .motion-visual .txt-div .f-b3-r {
  position: relative;
  top: 80rem;
  margin-top: 24rem;
  opacity: 0;
  transition: var(--transition-default)
}


.in-txt-visual .motion-visual .txt-div .f-h1 {
  position: relative;
  top: 80rem;
  margin-top: 20rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual .motion-visual .txt-div .btns {
  position: relative;
  top: 80rem;
  margin-top: 64rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual .motion-visual .txt-div.active>* {
  top: 0;
  opacity: 1;
}

.in-txt-visual .motion-visual .txt-div.active>*:nth-child(2) {
  transition-delay: 0.15s
}

.in-txt-visual .motion-visual .txt-div.active>*:nth-child(3) {
  transition-delay: 0.3s
}

.in-txt-visual .motion-visual .txt-div.active>*:nth-child(4) {
  transition-delay: 0.45s
}

.in-txt-visual .motion-visual .txt-div.active.hide>* {
  top: -70rem;
  opacity: 0;
}





@media all and (max-width: 1024px) {
  .in-txt-visual {
    left: -16rem;
    width: 100vw;
  }

  .in-txt-visual .motion-visual {
    width: calc(100% - 32rem);
    height: 80vh;
  }

  .in-txt-visual .motion-visual .txt-div {
    width: calc(100% - 32rem);
  }

  .in-txt-visual .motion-visual .txt-div .f-d3 {
    margin-top: 32rem;
  }

  .in-txt-visual .motion-visual .txt-div .btns {
    margin-top: 40rem;
  }
}

/* 서브 공통 비주얼 크게 -> 작게 */
.in-txt-visual-full {
  position: relative;
  top: 0 !important;
  left: -352rem;
  width: calc(100vw + 1px);
  height: 300vh;
  opacity: 1 !important;
}

.in-txt-visual-full .bottom-fixed {
  position: relative;
  width: 100%;
}

.in-txt-visual-full .fixed-visual {
  position: relative;
  width: 100%;
  height: 100vh;
}

.in-txt-visual-full .fixed-visual.fixed {
  transform: translate(0, 0) !important
}

.in-txt-visual-full .fixed-visual.fixed .motion-visual {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(0, 0)
}

.in-txt-visual-full .motion-visual {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
}

.in-txt-visual-full .bottom-fixed::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--Color-Gray-White);
  transition: width 0.7s ease;
  z-index: 3;
}


.in-txt-visual-full.active .bottom-fixed::after {
  width: 0;
  transition-delay: 0.45s;
}

.in-txt-visual-full.active .motion-visual:after {
  width: 0;
  transition-delay: 0.8s;
}

.in-txt-visual-full .motion-visual .img {
  width: 100%;
  height: 100%;
}

.in-txt-visual-full .motion-visual .img img,
.in-txt-visual-full .motion-visual .img video {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.in-txt-visual-full .motion-visual .img-dimd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}

.in-txt-visual-full .motion-visual .txt-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1220rem;
}

.in-txt-visual-full .motion-visual .txt-div>* {
  color: #fff;
  text-align: center;
}

.in-txt-visual-full .motion-visual .txt-div .f-t1,
.in-txt-visual-full .motion-visual .txt-div .border-btn,
.in-txt-visual-full .motion-visual .txt-div .f-h2 {
  position: relative;
  top: 80rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual-full .motion-visual .txt-div .f-d3 {
  position: relative;
  top: 80rem;
  margin-top: 20rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual-full .motion-visual .txt-div .f-b3-r {
  position: relative;
  top: 80rem;
  margin-top: 24rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual-full .motion-visual .txt-div .btns {
  position: relative;
  top: 80rem;
  margin-top: 64rem;
  opacity: 0;
  transition: var(--transition-default)
}

.in-txt-visual-full .motion-visual .txt-div.active>* {
  top: 0;
  opacity: 1;
}

.in-txt-visual-full .motion-visual .txt-div.active>*:nth-child(2) {
  transition-delay: 0.15s
}

.in-txt-visual-full .motion-visual .txt-div.active>*:nth-child(3) {
  transition-delay: 0.3s
}

.in-txt-visual-full .motion-visual .txt-div.active>*:nth-child(4) {
  transition-delay: 0.45s
}

.in-txt-visual-full .motion-visual .txt-div.active.hide>* {
  top: -70rem;
  opacity: 0;
}

@media all and (max-width: 1024px) {
  .in-txt-visual-full {
    left: -16rem;
    width: 100vw;
  }

  .in-txt-visual-full .motion-visual {
    width: calc(100% - 32rem);
    height: 80vh;
  }

  .in-txt-visual-full .motion-visual .txt-div {
    width: calc(100% - 32rem);
  }

  .in-txt-visual-full .motion-visual .txt-div .f-d3 {
    margin-top: 32rem;
  }

  .in-txt-visual-full .motion-visual .txt-div .btns {
    margin-top: 40rem;
  }
}

/* Tab */
.tab-func-area .tab-con-area .tab-con {
  display: none;
}

.tab-func-area .tab-con-area .tab-con.on {
  display: block;
}

/* 사각형 이미지 + 텍스트 구조 - half, center, right 3 Type */
/* half인 경우 txt-wrap내에 left, right 존재, center인 경우 txt-wrap내에 center 존재, right인 경우 txt-wrap내에 right 존재 */
.square-img-wrap .img {
  overflow: hidden;
  width: 1220rem;
  height: 320rem;
  border-radius: var(--border-radius-md);
}

.square-img-wrap .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.square-img-wrap .txt-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 80rem;
}

.square-img-wrap .txt-wrap:has(.left) {
  justify-content: space-between;
}

.square-img-wrap .txt-wrap:has(.center) {
  justify-content: center;
}

.square-img-wrap .txt-wrap .left {
  width: 445rem;
}

.square-img-wrap .txt-wrap .left .f-b3-r {
  margin-top: 40rem;
}

.square-img-wrap .txt-wrap .right {
  width: 600rem;
}

.square-img-wrap .txt-wrap .dots .dot:not(:first-child) {
  margin-top: 12rem;
}

.square-img-wrap .txt-wrap .dots .dot {
  padding-left: 16rem;
}

.square-img-wrap .txt-wrap .dots .dot::before {
  top: 10rem;
  width: 4rem;
  height: 4rem;
}

@media all and (max-width: 1024px) {
  .square-img-wrap .img {
    width: 100%;
    height: 437rem;
  }

  .square-img-wrap .txt-wrap {
    flex-direction: column;
    gap: 40rem;
    margin-top: 40rem;
  }

  .square-img-wrap .txt-wrap .left {
    width: 100%;
  }

  .square-img-wrap .txt-wrap .left .f-b3-r {
    margin-top: 20rem;
  }

  .square-img-wrap .txt-wrap .right {
    width: 100%;
  }
}

/* --------------------------------------------- Layout END --------------------------------------------- */





/* --------------------------------------------- Popup - START --------------------------------------------- */
/* common */
.layer-popup {
  display: none;
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.layer-popup .pop-area {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.layer-popup .pop-area .pop-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 40rem;
  background-color: var(--Color-Gray-White);
  border-radius: var(--border-radius-md);
}

.layer-popup .pop-area .pop-wrap .pop-fixed {
  flex-shrink: 0;
  padding: 20rem 96rem 20rem 40rem;
}

.layer-popup .pop-area .pop-wrap .scroll-area {
  overflow: auto;
  height: 100%;
  padding: 0 40rem;
  margin-right: 2px;
}

.layer-popup .pop-area .pop-btn-wrap {
  position: absolute;
  top: 19rem;
  right: 40rem;
}

.layer-popup .pop-area .pop-btn-wrap .btn-close {
  width: 32rem;
  height: 32rem;
  background: url("/common/en/images/icon-close-btn.svg") no-repeat center center / 100% auto;
}

@media all and (max-width: 1024px) {
  .layer-popup .pop-area .pop-wrap {
    border-radius: 0;
  }

  .layer-popup .pop-area .pop-wrap .pop-fixed {
    padding: 22rem 64rem 22rem 16rem;
  }

  .layer-popup .pop-area .pop-wrap .scroll-area {
    padding: 0 16rem;
    margin-right: 0;
  }

  .layer-popup .pop-area .pop-btn-wrap {
    top: 11rem;
    right: 16rem;
  }

  .layer-popup .pop-area .pop-btn-wrap .btn-close {
    width: 48rem;
    height: 48rem;
    background-size: 24rem auto;
    background-position: right center;
  }
}

/* center */
.layer-popup.center-pop .pop-area {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  min-height: 400px;
}

.layer-popup.center-pop .pop-area .pop-wrap {
  max-height: 880px;
}

@media all and (max-width: 1024px) {
  .layer-popup.center-pop .pop-area {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }

  .layer-popup.center-pop .pop-area .pop-wrap {
    max-height: 100%;
    height: 100%;
  }
}

/* right */
.layer-popup.right-pop.on .pop-area {
  right: 0;
}

.layer-popup.right-pop .pop-area {
  position: absolute;
  right: -700rem;
  top: 0;
  bottom: 0;
  width: 700rem;
  height: 100%;
  transition: right .4s ease;
}

.layer-popup.right-pop .pop-area .pop-wrap {
  height: 100%;
  padding: 40rem 0;
  border-radius: 0;
}

.layer-popup.right-pop .pop-area .pop-wrap .pop-fixed {
  height: auto;
  padding: 0 124rem 0 60rem;
  margin-bottom: 40rem;
}

.layer-popup.right-pop .pop-area .pop-wrap .scroll-area {
  padding: 0 60rem;
}

.layer-popup.right-pop .pop-area .pop-btn-wrap {
  top: 50rem;
  right: 50rem;
}

@media all and (max-width: 1024px) {
  .layer-popup.right-pop .pop-area {
    right: -100%;
    width: 100%;
  }

  .layer-popup.right-pop .pop-area .pop-wrap {
    padding: 0 0 60rem;
  }

  .layer-popup.right-pop .pop-area .pop-wrap .pop-fixed {
    padding: 0 16rem;
    margin-bottom: 16rem;
  }

  .layer-popup.right-pop .pop-area .pop-wrap .pop-fixed .pop-head {
    display: flex;
    align-items: center;
    height: 70rem;
  }

  .layer-popup.right-pop .pop-area .pop-wrap .scroll-area {
    padding: 0 16rem;
  }

  .layer-popup.right-pop .pop-area .pop-btn-wrap {
    top: 11rem;
    right: 16rem;
  }
}

/* main & broswer */
.layer-popup:is(.browser-pop, .main-pop) .pop-area .pop-wrap .pop-fixed {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 70rem;
  background: var(--Color-Gray-50);
  border-bottom: 1px solid var(--Color-Gray-200);
}

@media all and (max-width: 1024px) {
  .layer-popup:is(.browser-pop) .pop-area .pop-wrap .pop-fixed {
    justify-content: flex-start;
  }
}

/* main popup */
.layer-popup.main-pop .pop-area {
  width: 720rem;
  height: auto;
  min-height: unset;
  max-height: calc(90% - 88rem);
}

.layer-popup.main-pop .pop-area .pop-wrap {
  max-height: unset;
  padding-bottom: 0;
}

.layer-popup.main-pop .pop-area .pop-wrap .pop-cont {
  height: 430rem;
}

.layer-popup.main-pop .pop-area .pop-wrap .pop-cont .main-swiper {
  height: 100%;
}

.layer-popup.main-pop .main-swiper .swiper-slide {
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

.layer-popup.main-pop .main-swiper .swiper-slide::-webkit-scrollbar {
  width: 6rem;
  background: var(--Color-Gray-100);
  border-radius: 999rem;
}

.layer-popup.main-pop .main-swiper .swiper-slide::-webkit-scrollbar-thumb {
  background: var(--Color-Gray-500);
  border-radius: 999rem;
}

.layer-popup.main-pop .main-swiper .swiper-slide>a:not([class]) {
  display: block;
  width: 100%;
  min-height: 100%;
}

.layer-popup.main-pop .main-swiper .swiper-slide img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.layer-popup.main-pop .main-swiper .swiper-slide .html {
  padding: 80rem;
}

.layer-popup.main-pop .main-swiper .swiper-slide .html p {
  word-break: keep-all;
  overflow-wrap: break-word
}

.layer-popup.main-pop .main-swiper .swiper-slide .html .tit {
  margin-bottom: 20rem;
}

.layer-popup.main-pop .main-swiper .swiper-slide .html .txt-wrap {}

.layer-popup.main-pop .main-swiper .swiper-slide .html a {
  margin-top: 40rem;
}

.layer-popup.main-pop .swiper-control {
  gap: 16rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 24rem);
}

.layer-popup.main-pop .swiper-control .swiper-button-next {
  order: 3;
}

.layer-popup.main-pop .swiper-control .swiper-button-prev {
  order: 1;
}

.layer-popup.main-pop .swiper-control .swiper-pagination {
  order: 2;
  font-family: "Pretendard-Medium";
  font-size: 16rem;
  color: var(--Color-Gray-White);
}

.layer-popup.main-pop .swiper-control .swiper-pagination :is(.swiper-pagination-current, .swiper-pagination-total) {
  display: inline-block;
  width: 10rem;
}

.layer-popup.main-pop .swiper-control .swiper-pagination .swiper-pagination-current {
  margin-right: 4rem;
}

.layer-popup.main-pop .swiper-control .swiper-pagination .swiper-pagination-total {
  margin-left: 4rem;
}

@media all and (max-width: 1024px) {
  .layer-popup.main-pop .pop-area {
    width: 80%;
  }

  .layer-popup.main-pop .pop-area .pop-wrap {
    border-radius: var(--border-radius-md);
  }

  .layer-popup.main-pop .pop-area .pop-wrap .pop-fixed {
    padding-right: 76rem;
  }

  .layer-popup.main-pop .pop-area .pop-btn-wrap {
    right: 20rem;
  }

  .layer-popup.main-pop .pop-area .pop-btn-wrap .btn-close {
    background-size: 32rem auto;
  }

  .layer-popup.main-pop .main-swiper .swiper-slide .html {
    padding: 40rem;
  }

  .layer-popup.main-pop .swiper-control .swiper-pagination {
    font-size: 15rem;
  }

  /* .layer-popup.main-pop .swiper-control .swiper-pagination :is(.swiper-pagination-current, .swiper-pagination-total) {width: 10rem;} */
}

@media all and (max-width: 600px) {
  .layer-popup.main-pop .pop-area {
    width: 328rem;
  }
}

/* --------------------------------------------- Popup - END --------------------------------------------- */





/* --------------------------------------------- Loading START --------------------------------------------- */
.loading-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, .5);
}

.loading-area .loading-wrap {
  text-align: center;
  color: var(--Color-Gray-White);
}

.loading-area .loading-wrap .loading-div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rem;
  height: 100rem;
  margin: 0 auto 40rem;
}

.loading-area .loading-wrap .loading-div .loading {
  display: inline-block;
  width: 56rem;
  height: 56rem;
  border: 5rem solid var(--Color-Gray-White);
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------- Loading END --------------------------------------------- */





/* --------------------------------------------- Vertical START --------------------------------------------- */
/* scroll area */
/* @ 스크롤 필요 시, 컨텐츠 부모에 scroll-area를 감싸기 */
.only-vertical-view .scroll-area {
  overflow-y: auto;
  height: 100%;
}

.only-vertical-view .scroll-area::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: var(--Color-Gray-100);
}

.only-vertical-view .scroll-area::-webkit-scrollbar-track {
  display: none;
}

.only-vertical-view .scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--Color-Gray-500);
}

/* 세로모드 최적화 */
.only-vertical-view {
  display: none;
}

.only-vertical-view.on {
  display: block;
}

.only-vertical-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: var(--Color-Gray-White);
}

.only-vertical-view .scroll-area .vertical-wrap {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 15rem;
}

.only-vertical-view .scroll-area .vertical-wrap .icon {
  padding: 30rem 50rem;
  border-radius: var(--border-radius-md);
  background-color: var(--Color-Blue-Light);
}

.only-vertical-view .scroll-area .vertical-wrap .logo {
  width: 161rem;
}

.only-vertical-view .scroll-area .vertical-wrap .logo img {
  width: 100%;
}

.only-vertical-view .scroll-area .vertical-wrap .txt {
  text-align: center;
  color: var(--Color-Gray-800);
}

.only-vertical-view .scroll-area .vertical-wrap .txt span {
  color: var(--Color-Gray-900);
}

/* @media (orientation: landscape) and (pointer: coarse) {
  @media (max-height: 414px) and (max-width: 1023px) {
    body.vertical {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
  }
} */
/* --------------------------------------------- Vertical END --------------------------------------------- */





/* --------------------------------------------- Txt START --------------------------------------------- */
/* dot */
.dots .dot {}

.dot {
  position: relative;
  padding-left: 11rem;
}

.dot:before {
  content: "";
  position: absolute;
  top: 11rem;
  left: 0;
  width: 3rem;
  height: 3rem;
  background: var(--Color-Gray-500);
  border-radius: 50%;
}

/* --------------------------------------------- Txt END --------------------------------------------- */





/* --------------------------------------------- Layout START --------------------------------------------- */
/* 컨텐츠 타이틀 */
.cont-tit-wrap {
  position: relative;
  margin-bottom: 40rem;
}

.cont-tit-wrap:has(.cont-txt) {
  display: flex;
  justify-content: space-between;
}

.cont-tit-wrap .cont-tit .btns {
  margin-top: 16rem;
}

.cont-tit-wrap .btns {
  display: flex;
  gap: 8rem;
}

.cont-tit-wrap .f-b3-r {
  margin-top: 16rem;
  color: var(--Color-Gray-800);
}

.cont-tit-wrap:has(.f-d1-r) {
  align-items: flex-end;
}

.cont-tit-wrap .f-d1-r {
  color: var(--Color-Gray-700);
}

.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) {
  margin-bottom: 60rem;
}

.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-tit {
  width: 405rem;
}

.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt {
  width: 755rem;
}

.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .txt {
  margin-top: 0;
  color: var(--Color-Gray-900);
}

.cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .btns {
  margin-top: 24rem;
}

.sec-tit-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  margin-bottom: 20rem;
}

.sec-tit-wrap.right {
  justify-content: flex-end;
}

.sec-tit-wrap:has(.total-num) {
  align-items: center;
}

.sec-tit-wrap .f-d1-r {
  color: var(--Color-Gray-700);
}

.sec-tit-wrap .form-select {
  width: 160rem;
}

.sec-tit-wrap .sec-tit .tit+.txt {
  margin-top: 16rem;
}

@media all and (max-width: 1024px) {
  .cont-tit-wrap {
    margin-bottom: 20rem;
  }

  .cont-tit-wrap:has(.cont-txt) {
    display: block;
  }

  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-tit {
    width: auto;
  }

  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt {
    width: auto;
  }

  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .txt {
    margin-top: 20rem;
  }

  .cont-tit-wrap:has(.cont-txt .txt):has(.cont-txt .btns) .cont-txt .btns {
    flex-direction: column;
    align-items: flex-start;
  }

  .sec-tit-wrap {
    flex-wrap: wrap;
    gap: 16rem;
  }

  .sec-tit-wrap:not(:has(.form-wrap)) .form-select {
    width: 100%;
  }
}

@media all and (max-width: 600px) {
  .sec-tit-wrap .f-d1-r {
    width: 100%;
  }

  .sec-tit-wrap:has(.sec-tit .txt) .f-d1-r {
    margin-top: -8rem;
  }
}




/* 총 n건 */
.total-num {
  color: var(--Color-Gray-700);
}

.total-num .num {
  margin: 0 4rem;
  color: var(--Color-Gray-900);
}

/* no-data */
.no-data-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 440rem;
  border: 1px solid var(--Color-Gray-300);
  border-radius: var(--border-radius-md);
}

.no-data-area .f-b4-r {
  padding-top: 60rem;
  background: url("/common/en/images/icon-no-data.svg") no-repeat center top/40rem auto;
}

@media all and (max-width: 1024px) {
  .no-data-area {
    height: 320rem;
  }
}

/* 상세페이지 */
.view-detail-con {
  position: relative;
  padding: 100rem 0 60rem;
  border-bottom: 1px solid var(--Color-Gray-300)
}

.view-detail-con .detail-tit {
  position: relative;
  padding: 40rem 0;
}

.view-detail-con .detail-tit:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--Color-Gray-200);
}

.view-detail-con .detail-tit .tit-wrap {
  width: 910rem;
  margin: 0 auto;
  text-align: center;
}

.view-detail-con .detail-tit .tit-wrap .f-b4-r {
  margin-top: 20rem;
  color: var(--Color-Gray-800);
}

.view-detail-con .detail-tit .prev-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 40rem;
  height: 40rem;
  background: url("/common/en/images/icon-detail-prev.svg") no-repeat center center / 100% auto;
}

.view-detail-con .detail-con {
  padding-top: 60rem;
}

.view-detail-con .detail-con img {
  max-width: 100% !important;
  text-align: center;
}

.view-detail-con .detail-file {
  display: flex;
  gap: 40rem;
  padding: 24rem 40rem;
  margin-top: 60rem;
  background: var(--Color-Gray-50);
  border-radius: var(--border-radius-xs);
}

.view-detail-con .detail-file .f-b4-m {
  padding-left: 32rem;
  background: url("/common/en/images/icon-file-download.svg") no-repeat left top/24rem auto;
}

.view-detail-con .detail-file .file:not(:first-child) {
  margin-top: 8rem;
}

.view-detail-con .detail-file .file a {
  color: var(--Color-Gray-800)
}

@media all and (max-width: 1024px) {
  .view-detail-con {
    padding: 70rem 0 40rem;
  }

  .view-detail-con .detail-tit {
    display: flex;
    align-items: center;
    gap: 24rem;
    padding: 40rem 24rem 40rem 0;
  }

  .view-detail-con .detail-tit .tit-wrap {
    width: 100%;
  }

  .view-detail-con .detail-tit .prev-btn {
    position: unset;
    transform: unset;
  }

  .view-detail-con .detail-con {
    padding-top: 24rem;
  }

  .view-detail-con .detail-file {
    display: block;
    padding: 24rem;
  }

  .view-detail-con .detail-file .f-b4-m {
    margin-bottom: 24rem;
  }
}

/* 상세페이지 이전글, 다음글 */
.page-move {
  padding-top: 40rem;
}

.page-move .page-move-btn {
  display: flex;
  align-items: center;
  gap: 60rem;
  position: relative;
  padding: 20rem 40rem;
}

.page-move .page-move-btn:has(.f-d1-r:empty) {
  cursor: default;
}

.page-move .page-move-btn .f-d1-b {
  position: relative;
  padding-left: 32rem;
}

.page-move .page-move-btn .f-d1-b:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 16rem;
  height: 16rem;
  background: url("/common/en/images/icon-page-prev-arrow.svg") no-repeat center center / 16rem auto;
}

.page-move .page-move-btn.next .f-d1-b:before {
  transform: translateY(-50%) rotate(180deg);
}

.page-move .page-move-btn .f-b4-r {
  overflow: hidden;
  width: 864rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--Color-Gray-800);
}

.page-move .page-move-btn .f-d1-r {
  position: absolute;
  top: 50%;
  right: 40rem;
  transform: translateY(-50%);
  color: var(--Color-Gray-800)
}

@media all and (max-width: 1024px) {
  .page-move .page-move-btn {
    display: grid;
    grid-template-columns: 110rem 1fr;
    /* grid-template-columns: 47rem 1fr; */
    gap: 6rem 24rem;
    align-items: flex-start;
    padding: 16rem 0;
  }

  .page-move .page-move-btn .f-d1-b {
    padding-left: 24rem;
    grid-row: 1 / span 2;
    margin-top: 2rem;
  }

  .page-move .page-move-btn .f-b4-r {
    width: auto;
  }

  .page-move .page-move-btn .f-d1-r {
    position: unset;
    transform: translateY(0);
    padding-left: 0;
  }
}

@media all and (max-width: 1024px) {
  .page-move .page-move-btn .f-d1-b {
    margin-top: 1rem;
  }
}

/* table 위 당구장 표시 info 텍스트 */
.info-txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin-bottom: 60rem;
}

.info-txt-wrap:last-child {
  margin: 20rem 0 0;
}

.info-txt-wrap .info-txt {
  position: relative;
  padding-left: 12rem;
  color: var(--Color-Gray-700);
}

.info-txt-wrap .info-txt:before {
  display: block;
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

/* 아코디언 */
.accordion-wrap {
  display: flex;
  flex-direction: column;
  margin-top: 20rem;
  border-radius: 16rem;
  border: 1px solid var(--Color-Gray-200);
  background: var(--Color-Gray-White);
  overflow: hidden;
}

.accordion-wrap .accordion-item {

  border-bottom: 1px solid var(--Color-Gray-200);
}

.accordion-wrap .accordion-item .accor-tit {
  display: flex;
  align-items: center;
  gap: 16rem;
  padding: 30rem;
}

.accordion-wrap .accordion-item .accor-tit .state-badge {
  display: flex;
  width: 86rem;
  padding: 4rem 12rem;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-sm);

}

.accordion-wrap .accordion-item .accor-tit .state-badge.state-end {
  color: var(--Color-Gray-700);
  background: var(--Color-Gray-50);
}

.accordion-wrap .accordion-item .accor-tit .state-badge.state-ing {
  color: var(--Color-Blue-Primary);
  background: var(--Color-Blue-Light);
}

.accordion-wrap .accordion-item .accor-tit button {
  position: relative;
  width: 100%;
  padding-right: 64rem;
  text-align: left;
  color: var(--Color-Gray-Black);
}

.accordion-wrap .accordion-item .accor-tit button:has(.date) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
}

.accordion-wrap .accordion-item .accor-tit button span {
  color: var(--Color-Gray-500);
}

.accordion-wrap .accordion-item:last-child .accor-tit {
  border-bottom: none;
}

.accordion-wrap .accordion-item .accor-tit button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 34rem;
  height: 34rem;
  background: url("/common/en/images/icon-plus.svg") no-repeat center center / 100% auto;
  transition: background .1s ease;
  transform: translateY(-50%);
}

.accordion-wrap .accordion-item.on .accor-tit button::before {
  background-image: url("/common/en/images/icon-minus.svg");
}

.accordion-wrap .accordion-item .accor-cont {
  display: none;
}

.accordion-wrap .accordion-item .accor-cont .txt-list .item {
  /* padding: 32rem 0 24rem; */
  /* border-bottom: 1px solid var(--Color-Gray-300); */
  padding: 36rem 56rem;
  background: var(--Color-Gray-50);
}

.accordion-wrap .accordion-item .accor-cont .txt-list .item .txt {
  /* color: var(--Color-Gray-800); */
  color: var(--Color-Gray-Black);
}

.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts {
  margin-top: 24rem;
}

.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts .txt+.txt {
  margin-top: 6rem;
}

.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts .txt:has(.num) {
  display: flex;
  gap: 6rem;
}

.accordion-wrap .accordion-item .accor-cont .txt-list .item .txts .txt:has(.num) span {
  flex-shrink: 0;
  color: var(--Color-Gray-900);
}

.accordion-wrap .answer {
  padding-top: 24rem;
  border-top: 1px solid var(--Color-Gray-200);
}

.accordion-wrap .answer>div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-right: 30rem;
}

.accordion-wrap .answer>div .date {
  color: var(--Color-Gray-500);
}

@media all and (max-width: 1024px) {
  .accordion-wrap {
    gap: 24rem;
  }

  .accordion-wrap .accordion-item .accor-tit {
    flex-direction: column;
    align-items: flex-start;
    padding: 30rem 16rem;
  }



  .accordion-wrap .accordion-item .accor-tit button:has(.date) {
    flex-direction: column;
    align-items: flex-start;
  }

  .accordion-wrap .accordion-item .accor-tit button::before {
    top: 0;
    width: 24rem;
    height: 24rem;
    transform: translateY(0);
  }

  .accordion-wrap .accordion-item .accor-cont .txt-list .item {
    padding: 36rem 16rem;
  }
}

/* 100% 이미지 */
.img-box img {
  width: 100%;
}

.blue-img-wrap {
  padding: 100rem 100rem 130rem 100rem;
  border-radius: var(--border-radius-lg);
  background-color: var(--Color-Blue-Light);
}

.blue-img-wrap .img {
  width: 600rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  background-color: var(--Color-Gray-White);
  box-shadow: 0 30rem 25rem 0rem rgba(0, 48, 135, .15);
}

.blue-img-wrap .img img {
  width: 100%;
}

@media all and (max-width: 1024px) {
  .img-box:has(.scroll-area) {
    overflow-x: auto;
    width: calc(100% + 16rem);
    padding-bottom: 8rem;
    padding-right: 16rem;
  }

  .img-box:has(.scroll-area) .scroll-area {
    width: 1240rem;
  }

  .img-box:has(.scroll-area)::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: var(--Color-Gray-100);
  }

  .img-box:has(.scroll-area)::-webkit-scrollbar-thumb {
    background-color: var(--Color-Gray-500);
    border-radius: 999rem;
  }

  .blue-img-wrap {
    padding: 32rem 32rem 45rem 32rem;
  }

  .blue-img-wrap .img {
    width: 262rem;
    box-shadow: 0 15rem 25rem 0rem rgba(0, 48, 135, .15);
  }
}

/* --------------------------------------------- Layout END --------------------------------------------- */








/* 202510  추가 */

.visual-sec {
  position: relative;
  overflow: hidden;
}

.wave {
  position: absolute;
  /* bottom: 0px; */
  /* top: 100%; */
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  transform: translateY(0);
  width: 100%;
  z-index: 1;
}

.wave img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.wave .wht-wave {
  position: relative;
  z-index: 2;
}

.wave .blue-wave {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.inner-1220 {
  position: relative;
  max-width: 1220rem;
  width: 100%;
  margin: 0 auto;
}

@media all and (max-width:1024px) {
  .inner-1220 {
    padding: 0 16rem;
  }


}

@media all and (max-width:768px) {


  .wave {
    max-height: 120rem;
    height: 100%;
  }
}



/*Margin*/
.mg0 {
  margin: 0rem !important;
}

.mg5 {
  margin: 5rem !important;
}

.mg10 {
  margin: 10rem !important;
}

.mg15 {
  margin: 15rem !important;
}

.mg20 {
  margin: 20rem !important;
}

.mg25 {
  margin: 25rem !important;
}

.mg30 {
  margin: 30rem !important;
}

.mg35 {
  margin: 35rem !important;
}

.mg40 {
  margin: 40rem !important;
}

.mg45 {
  margin: 45rem !important;
}

.mg50 {
  margin: 50rem !important;
}

.mg55 {
  margin: 55rem !important;
}

.mg60 {
  margin: 60rem !important;
}

.mg65 {
  margin: 65rem !important;
}

.mg70 {
  margin: 70rem !important;
}

.mg75 {
  margin: 75rem !important;
}

.mg80 {
  margin: 80rem !important;
}

.mg85 {
  margin: 85rem !important;
}

.mg90 {
  margin: 90rem !important;
}

.mg95 {
  margin: 95rem !important;
}

.mb0 {
  margin-bottom: 0rem !important;
}

.mb5 {
  margin-bottom: 5rem !important;
}

.mb10 {
  margin-bottom: 10rem !important;
}

.mb15 {
  margin-bottom: 15rem !important;
}

.mb20 {
  margin-bottom: 20rem !important;
}

.mb25 {
  margin-bottom: 25rem !important;
}

.mb30 {
  margin-bottom: 30rem !important;
}

.mb35 {
  margin-bottom: 35rem !important;
}

.mb40 {
  margin-bottom: 40rem !important;
}

.mb45 {
  margin-bottom: 45rem !important;
}

.mb50 {
  margin-bottom: 50rem !important;
}

.mb55 {
  margin-bottom: 55rem !important;
}

.mb60 {
  margin-bottom: 60rem !important;
}

.mb65 {
  margin-bottom: 65rem !important;
}

.mb70 {
  margin-bottom: 70rem !important;
}

.mb75 {
  margin-bottom: 75rem !important;
}

.mb80 {
  margin-bottom: 80rem !important;
}

.mb85 {
  margin-bottom: 85rem !important;
}

.mb90 {
  margin-bottom: 90rem !important;
}

.mb95 {
  margin-bottom: 95rem !important;
}

.mt0 {
  margin-top: 0rem !important;
}

.mt5 {
  margin-top: 5rem !important;
}

.mt10 {
  margin-top: 10rem !important;
}

.mt15 {
  margin-top: 15rem !important;
}

.mt20 {
  margin-top: 20rem !important;
}

.mt25 {
  margin-top: 25rem !important;
}

.mt30 {
  margin-top: 30rem !important;
}

.mt35 {
  margin-top: 35rem !important;
}

.mt40 {
  margin-top: 40rem !important;
}

.mt45 {
  margin-top: 45rem !important;
}

.mt50 {
  margin-top: 50rem !important;
}

.mt55 {
  margin-top: 55rem !important;
}

.mt60 {
  margin-top: 60rem !important;
}

.mt65 {
  margin-top: 65rem !important;
}

.mt70 {
  margin-top: 70rem !important;
}

.mt75 {
  margin-top: 75rem !important;
}

.mt80 {
  margin-top: 80rem !important;
}

.mt85 {
  margin-top: 85rem !important;
}

.mt90 {
  margin-top: 90rem !important;
}

.mt95 {
  margin-top: 95rem !important;
}

.mt160 {
  margin-top: 160rem !important;
}

.ml0 {
  margin-left: 0rem !important;
}

.ml5 {
  margin-left: 5rem !important;
}

.ml10 {
  margin-left: 10rem !important;
}

.ml15 {
  margin-left: 15rem !important;
}

.ml20 {
  margin-left: 20rem !important;
}

.ml25 {
  margin-left: 25rem !important;
}

.ml30 {
  margin-left: 30rem !important;
}

.ml35 {
  margin-left: 35rem !important;
}

.ml40 {
  margin-left: 40rem !important;
}

.ml45 {
  margin-left: 45rem !important;
}

.ml50 {
  margin-left: 50rem !important;
}

.ml55 {
  margin-left: 55rem !important;
}

.ml60 {
  margin-left: 60rem !important;
}

.ml65 {
  margin-left: 65rem !important;
}

.ml70 {
  margin-left: 70rem !important;
}

.ml75 {
  margin-left: 75rem !important;
}

.ml80 {
  margin-left: 80rem !important;
}

.ml85 {
  margin-left: 85rem !important;
}

.ml90 {
  margin-left: 90rem !important;
}

.ml95 {
  margin-left: 95rem !important;
}

.mr0 {
  margin-right: 0rem !important;
}

.mr5 {
  margin-right: 5rem !important;
}

.mr10 {
  margin-right: 10rem !important;
}

.mr15 {
  margin-right: 15rem !important;
}

.mr20 {
  margin-right: 20rem !important;
}

.mr25 {
  margin-right: 25rem !important;
}

.mr30 {
  margin-right: 30rem !important;
}

.mr35 {
  margin-right: 35rem !important;
}

.mr40 {
  margin-right: 40rem !important;
}

.mr45 {
  margin-right: 45rem !important;
}

.mr50 {
  margin-right: 50rem !important;
}

.mr55 {
  margin-right: 55rem !important;
}

.mr60 {
  margin-right: 60rem !important;
}

.mr65 {
  margin-right: 65rem !important;
}

.mr70 {
  margin-right: 70rem !important;
}

.mr75 {
  margin-right: 75rem !important;
}

.mr80 {
  margin-right: 80rem !important;
}

.mr85 {
  margin-right: 85rem !important;
}

.mr90 {
  margin-right: 90rem !important;
}

.mr95 {
  margin-right: 95rem !important;
}

/*Padding*/
.pd0 {
  padding: 0rem !important;
}

.pd5 {
  padding: 5rem !important;
}

.pd10 {
  padding: 10rem !important;
}

.pd15 {
  padding: 15rem !important;
}

.pd20 {
  padding: 20rem !important;
}

.pd25 {
  padding: 25rem !important;
}

.pd30 {
  padding: 30rem !important;
}

.pd35 {
  padding: 35rem !important;
}

.pd40 {
  padding: 40rem !important;
}

.pd45 {
  padding: 45rem !important;
}

.pd50 {
  padding: 50rem !important;
}

.pd55 {
  padding: 55rem !important;
}

.pd60 {
  padding: 60rem !important;
}

.pd65 {
  padding: 65rem !important;
}

.pd70 {
  padding: 70rem !important;
}

.pd75 {
  padding: 75rem !important;
}

.pd80 {
  padding: 80rem !important;
}

.pd85 {
  padding: 85rem !important;
}

.pd90 {
  padding: 90rem !important;
}

.pd95 {
  padding: 95rem !important;
}

.pb0 {
  padding-bottom: 0rem !important;
}

.pb5 {
  padding-bottom: 5rem !important;
}

.pb10 {
  padding-bottom: 10rem !important;
}

.pb15 {
  padding-bottom: 15rem !important;
}

.pb20 {
  padding-bottom: 20rem !important;
}

.pb25 {
  padding-bottom: 25rem !important;
}

.pb30 {
  padding-bottom: 30rem !important;
}

.pb35 {
  padding-bottom: 35rem !important;
}

.pb40 {
  padding-bottom: 40rem !important;
}

.pb45 {
  padding-bottom: 45rem !important;
}

.pb50 {
  padding-bottom: 50rem !important;
}

.pb55 {
  padding-bottom: 55rem !important;
}

.pb60 {
  padding-bottom: 60rem !important;
}

.pb65 {
  padding-bottom: 65rem !important;
}

.pb70 {
  padding-bottom: 70rem !important;
}

.pb75 {
  padding-bottom: 75rem !important;
}

.pb80 {
  padding-bottom: 80rem !important;
}

.pb85 {
  padding-bottom: 85rem !important;
}

.pb90 {
  padding-bottom: 90rem !important;
}

.pb95 {
  padding-bottom: 95rem !important;
}

.pt0 {
  padding-top: 0rem !important;
}

.pt5 {
  padding-top: 5rem !important;
}

.pt10 {
  padding-top: 10rem !important;
}

.pt15 {
  padding-top: 15rem !important;
}

.pt20 {
  padding-top: 20rem !important;
}

.pt25 {
  padding-top: 25rem !important;
}

.pt30 {
  padding-top: 30rem !important;
}

.pt35 {
  padding-top: 35rem !important;
}

.pt40 {
  padding-top: 40rem !important;
}

.pt45 {
  padding-top: 45rem !important;
}

.pt50 {
  padding-top: 50rem !important;
}

.pt55 {
  padding-top: 55rem !important;
}

.pt60 {
  padding-top: 60rem !important;
}

.pt65 {
  padding-top: 65rem !important;
}

.pt70 {
  padding-top: 70rem !important;
}

.pt75 {
  padding-top: 75rem !important;
}

.pt80 {
  padding-top: 80rem !important;
}

.pt85 {
  padding-top: 85rem !important;
}

.pt90 {
  padding-top: 90rem !important;
}

.pt95 {
  padding-top: 95rem !important;
}

.pl0 {
  padding-left: 0rem !important;
}

.pl5 {
  padding-left: 5rem !important;
}

.pl10 {
  padding-left: 10rem !important;
}

.pl15 {
  padding-left: 15rem !important;
}

.pl20 {
  padding-left: 20rem !important;
}

.pl25 {
  padding-left: 25rem !important;
}

.pl30 {
  padding-left: 30rem !important;
}

.pl35 {
  padding-left: 35rem !important;
}

.pl40 {
  padding-left: 40rem !important;
}

.pl45 {
  padding-left: 45rem !important;
}

.pl50 {
  padding-left: 50rem !important;
}

.pl55 {
  padding-left: 55rem !important;
}

.pl60 {
  padding-left: 60rem !important;
}

.pl65 {
  padding-left: 65rem !important;
}

.pl70 {
  padding-left: 70rem !important;
}

.pl75 {
  padding-left: 75rem !important;
}

.pl80 {
  padding-left: 80rem !important;
}

.pl85 {
  padding-left: 85rem !important;
}

.pl90 {
  padding-left: 90rem !important;
}

.pl95 {
  padding-left: 95rem !important;
}

.pr0 {
  padding-right: 0rem !important;
}

.pr5 {
  padding-right: 5rem !important;
}

.pr10 {
  padding-right: 10rem !important;
}

.pr15 {
  padding-right: 15rem !important;
}

.pr20 {
  padding-right: 20rem !important;
}

.pr25 {
  padding-right: 25rem !important;
}

.pr30 {
  padding-right: 30rem !important;
}

.pr35 {
  padding-right: 35rem !important;
}

.pr40 {
  padding-right: 40rem !important;
}

.pr45 {
  padding-right: 45rem !important;
}

.pr50 {
  padding-right: 50rem !important;
}

.pr55 {
  padding-right: 55rem !important;
}

.pr60 {
  padding-right: 60rem !important;
}

.pr65 {
  padding-right: 65rem !important;
}

.pr70 {
  padding-right: 70rem !important;
}

.pr75 {
  padding-right: 75rem !important;
}

.pr80 {
  padding-right: 80rem !important;
}

.pr85 {
  padding-right: 85rem !important;
}

.pr90 {
  padding-right: 90rem !important;
}

.pr95 {
  padding-right: 95rem !important;
}

.show-default {
  display: block;
}

.hide-default {
  display: none;
}

/* 공통 */

/* PC이하 ~ 타블렛 가로 */
@media all and (max-width:1200px) {
  .show-1200 {
    display: block;
  }

  .hide-1200 {
    display: none;
  }
}

/* 타블렛 가로 이하 */
@media all and (max-width:1024px) {
  .show-1024 {
    display: block;
  }

  .hide-1024 {
    display: none;
  }
}

/* 타블렛 이하 ~ 모바일 */
@media all and (max-width:768px) {
  .show-768 {
    display: block;
  }

  .hide-768 {
    display: none;
  }
}

/* 모바일 가로 미만 */
@media all and (max-width:568px) {
  .show-568 {
    display: block;
  }

  .hide-568 {
    display: none;
  }
}

/* 모바일 최소 */
@media all and (max-width:425px) {
  .show-425 {
    display: block;
  }

  .hide-425 {
    display: none;
  }
}

@media all and (max-width:375px) {
  .show-375 {
    display: block;
  }

  .hide-375 {
    display: none;
  }
}

@media all and (max-width:320px) {
  .show-320 {
    display: block;
  }

  .hide-320 {
    display: none;
  }
}





/* ----------------------------------------- ETC Start ----------------------------------------- */
/* 개인정보처리방침 */
.article-area .form-btn {
  justify-content: flex-end;
  margin-bottom: 20rem;
}

.article-area .form-btn .form-select {
  width: 320rem;
  height: 48rem;
}

.article-area .blue-bg-info:has(.info-sec) {
  display: block;
  padding: 60rem;
}

.article-area .blue-bg-info .info-sec {
  width: 100%;
}

.article-area .blue-bg-info .info-sec~.info-sec {
  margin-top: 32rem;
  padding-top: 32rem;
  border-top: 1px solid var(--Color-Gray-300);
}

.article-area .blue-bg-info .info-sec .f-h2,
.article-area .blue-bg-info .info-sec .f-b4-b {
  margin-bottom: 24rem;
}

.article-area .blue-bg-info .info-sec .f-b4-r {
  color: var(--Color-Gray-800);
}

.article-area .blue-bg-info .info-sec .f-b4-r~.f-b4-r {
  margin-top: 24rem;
}

.article-area .blue-bg-info+.cont-div {
  margin-top: 80rem;
}

.article-area .cont-div .f-b3-b,
.article-area .cont-box .f-b3-b,
.article-area .cont-box .f-b4-m {
  margin-bottom: 16rem;
}

.article-area .cont-div .f-b4-r,
.article-area .cont-box .f-b4-r {
  color: var(--Color-Gray-800)
}

.article-area .cont-div .dot-txt,
.article-area .cont-box .dot-txt {
  position: relative;
  padding-left: 34rem;
}

.article-area .cont-div .dot-txt:before,
.article-area .cont-box .dot-txt:before {
  display: block;
  content: "";
  position: absolute;
  top: 11rem;
  left: 10rem;
  width: 3px;
  height: 3px;
  background: var(--Color-Gray-900);
  border-radius: 50%;
}

.article-area .cont-div .txt-wrap .f-b4-r,
.article-area .cont-box .txt-wrap .f-b4-r {
  margin-top: 8rem;
}

.article-area .cont-div .txt-wrap .f-b4-r .txt-wrap .f-b4-r,
.article-area .cont-box .txt-wrap .f-b4-r .txt-wrap .f-b4-r {
  padding-left: 20rem;
  text-indent: -20rem;
}

.article-area .cont-div .txt-wrap .f-b4-r .txt-wrap.narrow .f-b4-r,
.article-area .cont-box .txt-wrap .f-b4-r .txt-wrap.narrow .f-b4-r {
  padding-left: 14rem;
  text-indent: -14rem;
}

.article-area .cont-div .form-table {
  margin-top: 16rem;
}

.article-area .cont-div .txt-wrap+.form-table {
  margin-top: 32rem;
}

.article-area .cont-div .form-table+.txt-wrap {
  margin-top: 24rem;
}

.article-area .no-indent {
  padding-left: 0 !important;
  text-indent: 0 !important;
}

@media all and (max-width: 1024px) {
  .article-area .blue-bg-info:has(.info-sec) {
    padding: 40rem;
  }

  .article-area .blue-bg-info+.cont-div {
    margin-top: 60rem;
  }

  .article-area .cont-div .form-table {
    margin-top: 24rem;
  }
}


/* 사이트맵 */
.sitemap-area .sitemap-list {
  display: flex;
  align-items: flex-start;
  padding: 80rem 0;
  border-top: 1px solid var(--Color-Gray-300)
}

.sitemap-area .sitemap-list:first-child {
  padding: 0 0 80rem;
  border-top: 0;
}

.sitemap-area .sitemap-list:last-child {
  padding-bottom: 0;
}

.sitemap-area .sitemap-list .one-depth {
  padding-right: 10rem;
  width: 200rem;
  color: var(--Color-Blue-Primary);
}

.sitemap-area .sitemap-list .depth-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  flex: 1;
}

.sitemap-area .sitemap-list .depth-wrapper .depth-list {
  display: flex;
}

.sitemap-area .sitemap-list .depth-wrapper .depth-list .two-depth {
  padding-right: 10rem;
  width: 240rem;
}

.sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem 0;
  flex: 1
}

.sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div .three-depth {
  padding-right: 10rem;
  width: 260rem;
}

.sitemap-area .sitemap-list.active:nth-child(1) {
  transition-delay: 0.15s
}

.sitemap-area .sitemap-list.active:nth-child(2) {
  transition-delay: 0.3s
}

@media all and (max-width: 1024px) {
  .sitemap-area .sitemap-list {
    flex-wrap: wrap;
    padding: 40rem 0;
  }

  .sitemap-area .sitemap-list:first-child {
    padding: 0 0 40rem;
  }

  .sitemap-area .sitemap-list:last-child {
    padding: 40rem 0 0 0;
  }

  .sitemap-area .sitemap-list .one-depth {
    padding: 9rem 0;
    width: 100%;
  }

  .sitemap-area .sitemap-list .depth-wrapper {
    gap: 0;
  }

  .sitemap-area .sitemap-list .depth-wrapper .depth-list {
    flex-direction: column;
  }

  .sitemap-area .sitemap-list .depth-wrapper .depth-list .two-depth {
    padding: 9rem 0 9rem 16rem;
    width: auto;
  }

  .sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div {
    flex-direction: column;
    gap: 0;
  }

  .sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div .three-depth {
    padding: 9rem 0 9rem 16rem;
    width: auto;
  }
}

/* 에러 페이지 */
.error-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 100rem 0;
}

.error-area .error-div {
  text-align: center;
}

.error-area .error-div .tit {
  padding-top: 240rem;
  margin-bottom: 20rem;
  background: url(/common/en/images/icon-site-error.svg) no-repeat center top / 200rem auto;
}

.error-area .error-div .f-b4-r {
  margin-top: 40rem;
  color: var(--Color-Gray-800);
}

.error-area .error-div .btns {
  margin-top: 40rem;
}

@media all and (max-width: 1024px) {
  .error-area {
    padding: 60rem 16rem;
  }

  .error-area .error-div .tit {
    padding-top: 190rem;
    background-image: url(/common/en/images/icon-site-error-mob.svg);
    background-size: 150rem auto;
  }
}

/* 사이트 점검 안내 */
.check-div {
  text-align: center;
}

.check-div .tit {
  padding-top: 240rem;
  background: url(/common/en/images/icon-site-complete.svg) no-repeat center top / 200rem auto;
}

.check-div .txt {
  margin-top: 20rem;
  color: var(--Color-Gray-800);
}

.check-div .blue-bg-info {
  width: 600rem;
  margin: 40rem auto 0;
}

.check-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 100rem 0;
}

.check-area .check-div .tit {
  background-image: url("/common/en/images/icon-site-check.svg");
}

.check-area .check-div .blue-bg-info {
  width: 800rem;
}

.check-area .check-div .blue-bg-info .info-line~.info-line {
  margin-top: 10rem;
}

.check-area .check-div .blue-bg-info .info-line .th {
  width: auto;
}

.check-area .blue-bg-info .info-line .th {
  color: var(--Color-Gray-800);
}

.check-area .blue-bg-info .info-line .td {
  color: var(--Color-Gray-900);
}

@media all and (max-width: 1024px) {
  .check-div .tit {
    padding-top: 190rem;
    background-image: url("/common/en/images/icon-site-complete.svg");
    background-size: 150rem auto;
  }

  .check-div .blue-bg-info {
    justify-content: flex-start;
    width: 100%;
  }

  .check-area {
    padding: 60rem 16rem;
  }

  .check-area .check-div {
    width: 100%;
  }

  .check-area .check-div .tit {
    background-image: url("/common/en/images/icon-site-check-mob.svg");
  }

  .check-area .check-div .blue-bg-info {
    width: 100%;
  }

  .check-area .check-div .blue-bg-info p {
    text-align: left;
  }

  .check-area .check-div .blue-bg-info .info-line~.info-line {
    margin-top: 16rem;
  }
}


/* 브라우저 업데이트 안내 */
/* .browser-pop.layer-popup .pop-area .pop-wrap .pop-fixed .pop-head{display:flex; justify-content: flex-end; padding:3rem 56rem 1rem 0;} */
.browser-pop .browser-wrap {
  padding-top: 40rem;
}

.browser-pop .browser-wrap .browser-box {
  display: flex;
  align-items: center;
  gap: 12rem;
  margin: 24rem 0;
}

.browser-pop .browser-wrap .browser-box .browser-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);
  height: 200rem;
  background: #F1F4F8;
  border-radius: var(--border-radius-md);
}

.browser-pop .browser-wrap .browser-box .browser-item .f-b4-b {
  padding-top: 80rem;
  width: 90%;
  text-align: center;
}

.browser-pop .browser-wrap .browser-box .browser-item.chrome .f-b4-b {
  background: url("/common/en/images/icon-google-chrome-logo.svg") no-repeat center top / 65rem auto;
}

.browser-pop .browser-wrap .browser-box .browser-item.edge .f-b4-b {
  background: url("/common/en/images/icon-edge-logo.svg") no-repeat center top / 64rem auto;
}

.browser-pop .browser-wrap .browser-box .browser-item.firefox .f-b4-b {
  background: url("/common/en/images/icon-firefox-logo.svg") no-repeat center top / 64rem auto;
}

.browser-pop .browser-wrap .browser-box .browser-item .f-b4-b span {
  padding-right: 20rem;
  background: url("/common/en/images/icon-link-arrow.svg") no-repeat right center / 16rem auto;
}

.browser-pop .browser-wrap .f-b4-r {
  text-align: center;
  color: var(--Color-Gray-800);
}

.browser-pop .browser-wrap .f-b4-r~.f-b4-r {
  margin-top: 20rem;
}

.browser-pop .browser-wrap .f-b4-b {
  color: var(--Color-Gray-900);
}

@media all and (max-width: 1024px) {
  .browser-pop .browser-wrap .browser-box {
    flex-direction: column;
    gap: 12rem;
  }

  .browser-pop .browser-wrap .browser-box .browser-item {
    width: 100%;
  }
}

/* ----------------------------------------- ETC End ----------------------------------------- */


.iframe-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 비율 (9 / 16 = 0.5625 * 100) */
  overflow: hidden;
}

.iframe-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}



.youtube__popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 100;
}

/* close button */
.youtube__popup__close__button {
  position: absolute;
  top: 1.56vw;
  right: 1.56vw;
  width: 1.56vw;
  height: 1.56vw;
}

.youtube__popup__close__button img {
  width: 1.56vw;
  height: 1.56vw;
}

/* iframe area */
.youtube__wrap {
  width: 48.33vw;
  height: 27.08vw;
}

/* content */
.youtube__content__wrap {
  width: 48.33vw;
  margin-top: 1.56vw;
  padding: 1.56vw;
  background: #fff;
  border-radius: 0.63vw;
}

.youtube__content__title {
  font-family: "Pretendard", sans-serif;
  font-size: 1.04vw;
  font-weight: 400;
  line-height: 160%;
  color: #000;
}

.youtube__content__box {
  padding: 1.04vw 0.52vw 1.04vw 1.04vw;
  margin-top: 1.04vw;
  height: 7.81vw;
  border: 1px solid #e4e4e4;
  border-radius: 0.21vw;
}

.youtube__content__box .scroll__box {
  padding: 0 0.52vw 0 0;
  height: 100%;
  overflow-y: auto;
}

.youtube__content__box .scroll__box p {
  font-family: "Pretendard", sans-serif;
  font-size: 0.83vw;
  font-weight: 400;
  line-height: 160%;
  color: #000;
}

/* scrollbar */
.youtube__content__box .scroll__box::-webkit-scrollbar {
  width: 4px;
}

.youtube__content__box .scroll__box::-webkit-scrollbar-thumb {
  background: #c9c6c2;
  border-radius: 50px;
}

.youtube__content__box .scroll__box::-webkit-scrollbar-track {
  background: transparent;
}

/* ===================== */
/* tablet */
@media screen and (max-width: 1024px) {
  .youtube__popup__close__button {
    top: 1.95vw;
    right: 1.95vw;
    width: 2.93vw;
    height: 2.93vw;
  }

  .youtube__popup__close__button img {
    width: 2.93vw;
    height: 2.93vw;
  }

  .youtube__wrap {
    width: 100%;
    height: 56.05vw;
  }

  .youtube__content__wrap {
    padding: 2.64vw;
    margin: 2.64vw auto 0;
    width: calc(100% - 5.08vw);
    border-radius: 0.49vw;
  }

  .youtube__content__title {
    font-size: 1.86vw;
  }

  .youtube__content__box {
    padding: 2.54vw 1.27vw 2.54vw 2.54vw;
    margin-top: 2.54vw;
    height: 14.65vw;
    border-radius: 0.49vw;
  }

  .youtube__content__box .scroll__box p {
    font-size: 1.86vw;
  }
}

/* ===================== */
/* mobile */
@media screen and (max-width: 600px) {
  .youtube__popup__close__button {
    top: 7vw;
    right: 7.56vw;
    width: 5vw;
    height: 5vw;
  }

  .youtube__popup__close__button img {
    width: 5vw;
    height: 5vw;
  }

  .youtube__wrap {
    width: 100%;
    height: 56.11vw;
  }

  .youtube__content__wrap {
    padding: 5vw;
    margin: 5vw auto 0;
    width: calc(100% - 10vw);
    border-radius: 1vw;
  }

  .youtube__content__title {
    font-size: 3.5vw;
  }

  .youtube__content__box {
    padding: 5vw 2.5vw 5vw 5vw;
    margin-top: 5vw;
    height: 38.33vw;
    border: 0.17vw solid #e4e4e4;
    border-radius: 1vw;
  }

  .youtube__content__box .scroll__box p {
    font-size: 3.5vw;
  }
}