@charset "UTF-8";
/*-------------------------------------------------
title       : 믹스인
Author      : PLAN I
Create date : 2024-10-11
-------------------------------------------------*/
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2025-08-12
-------------------------------------------------*/
:root {
  --size: 1.6rem;
  --color: #5c5c5c;
  --lh: 1.5;
  --width1: 144rem;
  --width2: calc(100% - 6rem);
  --color1: #E4FF4A;
  --color2: #0000D8;
  --header: 6.5rem;
  --modalClose: 5rem;
}

#new_hd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: var(--header);
  border-bottom: 1px solid #fff;
  background-color: #000;
  color: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#new_hd .home {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 25rem;
  height: var(--header);
  opacity: 0;
}
#new_hd .month {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: var(--header);
  padding-left: 4rem;
  border-left: 1px solid #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}
#new_hd .month > div {
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  top: var(--header);
  z-index: 1;
  min-width: 100%;
  padding: 0 4rem;
  border: 1px solid #fff;
  background-color: #000;
  line-height: 2;
  -webkit-transform: translate(-1px, -1px);
          transform: translate(-1px, -1px);
}
#new_hd .month > div a::after {
  display: inline-block;
  position: relative;
  top: -0.2rem;
  width: 0;
  height: 0.3rem;
  margin-left: 0.5rem;
  background-color: #fff;
  content: "";
  vertical-align: middle;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#new_hd .month > div a:hover::after, #new_hd .month > div a:focus::after {
  width: 2rem;
}
#new_hd .month .month_btn button {
  font-size: 2rem;
  font-weight: 700;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#new_hd .month .month_btn button:hover, #new_hd .month .month_btn button:focus {
  color: var(--color1);
}
#new_hd .month .month_btn button::after {
  font-family: "remixicon";
  content: "\ea4e";
  display: inline-block;
  position: relative;
  top: -0.1rem;
  vertical-align: middle;
  position: relative;
  top: -0.25rem;
  margin-left: 1rem;
  font-size: 2.5rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#new_hd .month .month_btn.active button::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#new_hd .month .month_btn.active + div {
  visibility: visible;
  overflow: visible;
  width: auto;
  height: auto;
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding: 2rem 4rem;
}

#logo a {
  display: block;
  height: var(--header);
  padding: 0.5rem 4rem 1rem;
}
#logo a img {
  max-height: 100%;
}

#hnb {
  margin-left: auto;
  margin-right: 4rem;
  white-space: nowrap;
}
#hnb a {
  display: inline-block;
  height: 4rem;
  padding: 0 1.5rem;
  border-radius: 4rem;
  border: 1px solid #fff;
  font-weight: 500;
  vertical-align: middle;
  line-height: 3.8rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#hnb a::after {
  font-family: "remixicon";
  content: "\ea6e";
  display: inline-block;
  position: relative;
  top: -0.1rem;
  vertical-align: middle;
  margin-left: 1.5rem;
}
#hnb a:first-child {
  margin-right: 1rem;
  border-color: var(--color1);
  background-color: var(--color1);
  color: #000;
}
#hnb a:hover, #hnb a:focus {
  border-color: #fff;
  background-color: #fff;
  color: #000;
}

#gnb > button {
  overflow: hidden;
  width: 13rem;
  height: calc(var(--header) - 1px);
  border-left: 1px solid #fff;
  background-color: #000;
  font-size: 5rem;
  color: var(--color1);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#gnb > button::before {
  font-family: "remixicon";
  content: "\ef34";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: inherit;
}
#gnb > button:hover, #gnb > button:focus {
  color: #fff;
}
#gnb .close {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(13rem - 1px);
  border-left: 0 none;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
#gnb .close::before {
  content: "\eb99";
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#gnb ul {
  position: fixed;
  right: 0;
  top: var(--header);
  z-index: 999;
  width: 45.5rem;
  max-width: 100%;
  height: calc(100% - var(--header));
  padding: 5rem 4rem;
  border-left: 1px solid #fff;
  background-color: #000;
  font-size: 2rem;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#gnb ul a {
  display: block;
  position: relative;
  height: 5.5rem;
  margin-bottom: 1rem;
  padding: 0 3rem;
  border: 1px solid transparent;
  background-color: rgba(255, 255, 255, 0.1);
  line-height: 5.5rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#gnb ul a::after {
  font-family: "remixicon";
  content: "\ea6e";
  position: absolute;
  right: 2rem;
}
#gnb ul a:hover, #gnb ul a:focus {
  border-color: #fff;
}
#gnb.active .open {
  color: transparent;
}
#gnb.active ul {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
#gnb.active .close {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
#gnb.active .close::before {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

#new_ft {
  position: relative;
  z-index: 1;
  padding: 0 8rem 4rem;
  background-color: #fff;
  color: #000;
}
#new_ft .logo img {
  height: 5.2rem;
}

#fnb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 7rem;
  margin: 0 -8rem 4rem;
  padding-left: 8rem;
  background-color: #000;
  font-size: 1.8rem;
  color: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#fnb strong {
  position: relative;
  top: 0.2rem;
  margin-right: 3rem;
  font-family: "Syncopate", "Pretendard";
  font-size: 2rem;
}
#fnb ul {
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin-right: auto;
}
#fnb li {
  display: inline-block;
  margin-left: 2.5rem;
  padding-bottom: 0.2rem;
  vertical-align: middle;
}
#fnb li:nth-child(n+9) {
  display: none;
}
#fnb a {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
#fnb a::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #fff;
  content: "";
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#fnb a:hover::before, #fnb a:focus::before {
  width: 100%;
}
#fnb button {
  overflow: hidden;
  width: 7rem;
  min-width: 7rem;
  height: 100%;
  margin-left: 8rem;
  border-left: 1px solid #fff;
  font-size: 2.5rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -ms-flex-preferred-size: 7rem;
      flex-basis: 7rem;
}
#fnb button::before {
  font-family: "remixicon";
  content: "\ea76";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: inherit;
}
#fnb button:hover, #fnb button:focus {
  background-color: #fff;
  color: #000;
}

#siteinfo > span {
  margin-right: 1.5rem;
  color: var(--color);
}
#siteinfo ul {
  margin: 4.5rem 0;
}
#siteinfo ul strong {
  margin-right: 1rem;
}
#siteinfo ul address {
  display: inline;
}
#siteinfo ul li + li {
  margin-top: 0.9rem;
}
#siteinfo ul b {
  margin-left: 1rem;
  font-weight: inherit;
  color: #666;
}
#siteinfo ul b::after {
  content: ". ";
}
#siteinfo > p:last-child {
  position: absolute;
  right: 8rem;
  bottom: 4rem;
}
#siteinfo > p:last-child strong {
  margin-right: 0.5rem;
  font-weight: 500;
}

.modal_wrap {
  display: none;
  position: fixed;
  left: 0;
  top: var(--header);
  z-index: 999;
  width: 100%;
  height: calc(100% - var(--header));
  background-color: rgba(0, 0, 0, 0.5);
}
.modal_wrap .modal_area {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  overflow-y: auto;
  width: 56rem;
  max-width: var(--width2);
  max-height: var(--width2);
  background-color: #fff;
}
.modal_wrap .modal_box {
  position: relative;
}
.modal_wrap .modal_cont {
  padding: 9rem 3rem 3rem;
  font-size: 1.5rem;
}
.modal_wrap .modal_cont > h3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6.5rem;
  padding-left: 3rem;
  background-color: #000;
  font-size: 2rem;
  color: #fff;
  line-height: 6.5rem;
}
.modal_wrap .modal_close button {
  display: inline-block;
  overflow: hidden;
  width: 6.5rem;
  height: 6.5rem;
  text-align: center;
  line-height: 6.5rem;
  vertical-align: middle;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  border-left: 1px solid #fff;
  background-color: #000;
  font-size: 2.5rem;
  color: #fff;
}
.modal_wrap .modal_close button::before {
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.modal_wrap .modal_close button:hover::before, .modal_wrap .modal_close button:focus::before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.modal_wrap .modal_close button::before {
  font-family: "remixicon";
  content: "\eb99";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: inherit;
}

.per_policybox {
  margin-bottom: 1rem;
  padding: 2rem;
  background-color: #F2F2F2;
}

.hiddentag {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  text-indent: 1px;
  vertical-align: middle;
}

.ft_policy_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: 8rem;
  top: 11rem;
  height: 5rem;
  padding-top: 1.3rem;
  font-size: 1.8rem;
  font-weight: 600;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ft_policy_list li {
  display: inline;
  margin-left: 3rem;
}
.ft_policy_list a {
  position: relative;
}
.ft_policy_list a::before {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  width: 0;
  height: 0;
  border-radius: 100%;
  background-color: #000;
  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.ft_policy_list a:hover::before, .ft_policy_list a:focus::before {
  width: 1rem;
  height: 1rem;
}

.per_policylist .policy_item {
  margin-top: 3rem;
}
.per_policylist .policy_item > p {
  font-size: 1.8rem;
  color: #000;
  line-height: inherit;
  display: block;
  margin: 3rem 0 1rem;
  font-weight: 600;
}
.per_policylist .policy_item > p:first-child {
  margin-top: 0;
}

.policy_deps li + li {
  margin-top: 0.5rem;
}
.policy_deps li ul {
  margin: 1rem 0 1.5rem;
}
.policy_deps > li {
  position: relative;
}
.policy_deps > li > span:first-child {
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 2rem;
  font-family: "Noto Sans KR", sans-serif;
  text-align: center;
  line-height: 1.2;
}
.policy_deps > li > span:first-child + * {
  padding-left: 2rem;
}
.policy_deps > li.red_color {
  color: var(--color2);
}
.policy_deps > li.red_color > span:first-child {
  top: 0;
  font-size: inherit;
}

.form_mail .form_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 4rem;
  margin-top: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 4rem;
}
.form_mail .form_item > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.form_mail .form_th {
  max-width: 6rem;
  font-weight: 600;
  color: #333;
}
.form_mail input {
  display: block;
  width: 100%;
  height: 4rem;
  padding: 0 1rem;
  border: 0 none;
  border-bottom: 1px solid #555;
}

.box_captcha {
  position: relative;
}
.box_captcha img {
  width: 16rem;
}
.box_captcha input {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 17rem);
  height: 100%;
  padding: 0 2rem;
  border: 0 none;
  border-bottom: 1px solid #555;
}

#click_ok {
  display: block;
  width: 22.5rem;
  height: 5.5rem;
  margin: 3rem auto 0;
  border: 0.2rem solid var(--color2);
  background-color: var(--color2);
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 5.1rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#click_ok:hover, #click_ok:focus {
  background-color: #fff;
  color: var(--color2);
}

@media (max-width: 1280px) {
  #new_hd .home {
    width: 21rem;
  }
  #logo a {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #hnb {
    margin-right: 2rem;
  }
  #new_ft {
    padding: 0 3rem 3rem;
  }
  #fnb {
    margin-right: -3rem;
    margin-bottom: 3rem;
  }
  #siteinfo > p:last-child {
    bottom: 3rem;
    right: 4rem;
  }
  #copyright {
    display: block;
  }
  .ft_policy_list {
    top: 10rem;
    right: 4rem;
  }
  #new_hd .month {
    padding-left: 2rem;
  }
  #new_hd .month .month_btn button {
    font-size: inherit;
  }
  #new_hd .month .month_btn button::after {
    font-size: 2rem;
  }
  #gnb > button {
    width: 7rem;
  }
  #gnb .close {
    max-width: calc(8rem - 1px);
  }
}
@media (max-width: 768px) {
  #hnb {
    display: none;
  }
  #gnb {
    margin-left: auto;
  }
  .ft_policy_list {
    display: block;
    overflow-x: auto;
    position: static;
    height: auto;
    margin: 3rem -4rem -3rem;
    padding: 3rem 4rem 10rem 1rem;
    background-color: #f8f8f8;
    white-space: nowrap;
  }
  #fnb {
    display: block;
    position: relative;
    height: auto;
    padding: 2rem 10rem 2rem 8rem;
  }
  #fnb button {
    position: absolute;
    right: 0;
    top: 0;
  }
  #fnb li:first-child {
    margin-left: 0;
  }
  #siteinfo > p:last-child {
    right: 0;
    width: 100%;
    padding: 2rem 3rem 0;
    border-top: 1px solid #000;
    text-align: right;
  }
  #siteinfo ul strong:first-child + * {
    display: block;
  }
  #siteinfo ul strong:first-child + * + b {
    margin-left: 0;
  }
}