@charset "utf-8";
@import url("unable/board.css");
@import url("unable/board_renew.css");
@import url("unable/shop.css");
@import url("custom_shop.css");
@import url("03_edu/detail-page.css");
@import url("03_edu/filter.css");

/*
 * layout.css.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) 레이아웃설정 - 커스텀
 *
 */

/* 1) root 설정  */
:root {
  --color-base: #222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
  --color-point: #e45827;
  --color-white: #fff;
  --color-black: #000;

  --r: 5rem;
  --headerHig: 80rem;

  --font-xe: "xeicon";

  --font-base: 16rem;
  --font14: 14rem;
  --font15: 15rem;
  --font16: 16rem;
  --font17: 17rem;
  --font18: 18rem;
  --font20: 20rem;
  --font22: 22rem;
  --font23: 23rem;
  --font25: 25rem;
  --font30: 30rem;
  --font35: 35rem;
  --font36: 36rem;
  --font40: 40rem;
  --font45: 45rem;
  --font60: 60rem;
  --font70: 70rem;

  @media (max-width: 1024px) {
    --font-base: clamp(14rem, 1.563vw, 16rem);
    --font14: clamp(13rem, 1.37vw, 14rem);
    --font15: clamp(14rem, 1.465vw, 15rem);
    --font16: clamp(14rem, 1.563vw, 15rem);
    --font17: clamp(15rem, 1.66vw, 17rem);
    --font18: clamp(16rem, 1.758vw, 18rem);
    --font20: clamp(18rem, 1.953vw, 20rem);
    --font22: clamp(18rem, 2.148vw, 22rem);
    --font23: clamp(18rem, 2.246vw, 23rem);
    --font25: clamp(20rem, 2.441vw, 25rem);
    --font30: clamp(22rem, 2.93vw, 30rem);
    --font35: clamp(22rem, 3.418vw, 35rem);
    --font36: clamp(23rem, 3.516vw, 36rem);
    --font40: clamp(25rem, 3.906vw, 40rem);
    --font45: clamp(28rem, 4.395vw, 45rem);
    --font60: clamp(35rem, 5.859vw, 60rem);
    --font70: clamp(45rem, 6.836vw, 70rem);
  }

  @media (max-width: 768px) {
    --headerHig: 110rem;
  }
}

/* 2) 폰트설정 - 디자인 맞게 변경하면 됩니다. */
body {
  font-size: var(--font-base, 16rem);
}
@media (min-width: 1921px) {
  html {
    font-size: 0.052vw /* 1px */;
  }
}
@media (max-width: 1500px) {
  html {
    font-size: 0.067vw /* 1px */;
  }
}
@media (max-width: 1024px) {
  html {
    font-size: 0.098vw /* 1px */;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 0.13vw /* 1px */;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 0.271vw /* 1.3px */;
  }
}

/* 3) 레이아웃설정 - 커스텀 영역으로 디자인 변경시 삭제 또는 수정 작업하시면 됩니다. */

/* 공통설정 */
#content img {
  max-width: 100%;
}

/* header */
#header {
  display: flex;
  flex-direction: column;
  position: relative;
}
#header .inr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 15rem;
  padding-bottom: 15rem;
}
/* 구조 */
#header .inr {
  order: 1;
}
#header nav {
  order: 3;
}
.area_util {
  order: 2;
}
/* logo */
#header .logo {
  width: 100rem;
}
#header .logo a {
  displaya: block;
}
#header .logo img {
  max-width: 100%;
}
/* header 반응형 */
@media screen and (max-width: 1024px) {
  #header {
    position: absolute;
    width: 100%;
    height: var(--headerHig);
  }
  #header .inr {
    height: 100%;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
  }
  #header .logo {
    margin-left: calc(var(--headerHig) / 2 + 10rem);
  }
}
@media screen and (max-width: 768px) {
  #header .inr {
    flex-wrap: wrap;
    padding-top: 5rem;
  }
  #header .logo {
    order: 1;
    margin: 0 auto;
  }
  .area_util {
    order: 2;
  }
  .search-util {
    order: 3;
    flex: 0 1 100%;
  }
}
@media screen and (max-width: 480px) {
  #header .logo {
    width: 75rem;
  }
}

/* gnb */
#header nav {
  border-top: 1rem solid #ededed;
  border-bottom: 1rem solid #ededed;
}
#header nav > div[class*="inr"] {
  display: flex;
  align-items: stretch;
  position: relative;
}
#header nav .gnb {
  --sizeGnb: 60rem;
  display: flex;
  align-items: center;
  gap: var(--sizeGnb);
  height: var(--sizeGnb);
  margin-left: var(--sizeGnb);
}
#header nav .gnb a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  transition: opacity 0.3s;
}
#header nav .gnb > li {
  position: relative;
  height: 100%;
}
#header nav .gnb > li > a {
  font-size: var(--font18);
  font-weight: 500;
}
#header nav .gnb .box {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 50%;
  z-index: 60;
  min-width: 160rem;
  box-sizing: border-box;
  padding: 15rem 20rem;
  background: var(--color-white);
  border: 1rem solid #e8e8e8;
  transform: translateX(-50%);
  transition: opacity 0.3s, visibility 0.3s;
}
#header nav .gnb .box ul > li {
  margin: 10rem 0;
  font-size: 15rem;
}
#header nav .gnb .box ul > li a:hover {
  opacity: 0.5;
}
#header nav .gnb .depth03 {
  display: none;
}
/* active */
#header nav .gnb li.active .box {
  opacity: 1;
  visibility: visible;
}
/* gnb menu control */
.gnb-btn__open {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 60rem;
  background-color: var(--color-white);
  border-left: 1rem solid #e8e8e8;
  border-right: 1rem solid #e8e8e8;
}
.gnb-btn__open i {
  font-size: 0;
}
.gnb-btn__open span {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
  width: 20rem;
}
.gnb-btn__open span:before,
.gnb-btn__open span:after,
.gnb-btn__open span i {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #444;
  transform: translateX(0);
}
.gnb-btn__open span:before {
  width: calc(100% - 7px);
}
.gnb-btn__open:hover span:before,
.gnb-btn__open:hover span:after,
.gnb-btn__open:hover span i {
  animation: gnbShow 0.5s ease forwards;
}
.gnb-btn__open:hover span:before {
  animation-delay: 0.1s;
}
.gnb-btn__open:hover span i {
  animation-delay: 0.2s;
}
.gnb-btn__open:hover span:after {
  animation-delay: 0.3s;
}
/* animation */
@keyframes gnbShow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
/* gnb 반응형 */
@media screen and (max-width: 1024px) {
  #header nav {
    border-width: 0;
  }
  #header nav .gnb {
    display: none;
  }
  /* gnb menu control */
  .gnb-btn__open {
    position: absolute;
    height: var(--headerHig);
    top: calc(var(--headerHig) * -1);
    left: 0;
    border-width: 0;
    background-color: transparent;
  }
  .gnb-btn__open span {
    width: 20rem;
  }
  .gnb-btn__open span:before,
  .gnb-btn__open span:after,
  .gnb-btn__open span i {
    background-color: #222;
  }
}
@media screen and (max-width: 768px) {
  .gnb-btn__open {
    top: calc(var(--headerHig) * -1 + 5rem);
    height: calc(var(--headerHig) / 2);
  }
}
@media screen and (max-width: 480px) {
  .gnb-btn__open {
    left: 0;
  }
}

/* gnb all & mobile */
.gnb-mob {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  width: 100%;
  background-color: var(--color-white);
  transition: opacity 0.3s, visibility 0.3s;
}
.gnb-mob .util {
  display: none;
}
.gnb-mob .gnb {
  --sizePad: 50rem;
  max-width: 1200rem;
  margin: 0 auto;
  padding: calc(var(--sizePad) - 10rem) 20rem;
}
.gnb-mob .gnb > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 35rem 0;
  margin-left: var(--sizePad);
}
.gnb-mob .gnb > ul > li {
  width: calc(100% / 5);
  box-sizing: border-box;
  padding: 0 10rem;
  font-size: 15rem;
}
.gnb-mob .gnb > ul > li:first-child {
  padding-left: var(--sizePad);
}
.gnb-mob .gnb > ul > li a {
  display: inline-block;
  transition: opacity 0.3s;
}
.gnb-mob .gnb > ul > li > a {
  font-size: var(--font18);
  font-weight: 600;
}
.gnb-mob .gnb > ul > li > .box {
  margin-top: 10rem;
}
.gnb-mob .gnb > ul > li > .box > ul > li {
  padding: 5rem 0;
}
.gnb-mob .gnb > ul > li > .box a {
  font-size: var(--font16);
}
.gnb-mob .gnb .box.depth03 {
  margin-top: 10rem;
}
.gnb-mob .gnb .box.depth03 > ul > li {
  position: relative;
  padding: 3rem 0 3rem 10rem;
}
.gnb-mob .gnb .box.depth03 > ul > li:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 11rem;
  width: 3rem;
  height: 1rem;
  background-color: #666;
}
.gnb-mob .gnb .box.depth03 a {
  font-size: var(--font14);
}
.gnb-mob .gnb button.open {
  display: none;
  position: absolute;
  top: 10rem;
  right: 10rem;
  width: 40rem;
  height: 40rem;
  box-sizing: border-box;
  padding: 10rem;
  background-color: transparent;
  font-size: 0;
}
.gnb-mob .gnb button.open:before,
.gnb-mob .gnb button.open:after {
  content: "";
  display: block;
  position: absolute;
  width: 11rem;
  height: 1rem;
  background-color: #999;
  border-radius: 2rem;
  transform-origin: 50% 50%;
  transition: transform 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}
.gnb-mob .gnb button.open:before {
  margin-left: 1rem;
  transform: rotate(45deg);
}
.gnb-mob .gnb button.open:after {
  margin-left: 9rem;
  transform: rotate(-45deg);
}
.gnb-mob .gnb button.open.active:before {
  transform: rotate(-45deg);
}
.gnb-mob .gnb button.open.active:after {
  transform: rotate(45deg);
}
/* hover */
.gnb-mob .gnb > ul > li a:hover {
  opacity: 0.5;
}
/* close */
.gnb-mob__close {
  display: block;
  position: absolute;
  right: 20rem;
  top: 20rem;
  width: 35rem;
  height: 35rem;
  background-color: transparent;
  font-size: 0;
}
.gnb-mob__close i {
  font-size: 35rem;
  transition: transform 0.3s;
}
.gnb-mob__close:hover i {
  transform: rotate(90deg);
}
/* active */
.gnb-mob.active {
  opacity: 1;
  visibility: visible;
}
/* gnb all & mobile 반응형 */
@media screen and (max-width: 1024px) {
  body {
    overflow: inherit;
    position: relative;
  }
  body.active {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  .gnb-mob {
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: calc(var(--vh, 1vh) * 100);
    background-color: rgba(0, 0, 0, 0.7);
  }
  .gnb-mob .util,
  .gnb-mob .gnb {
    width: 80%;
    box-sizing: border-box;
    margin: 0;
    background-color: var(--color-white);
  }
  .gnb-mob .gnb {
    overflow-y: auto;
    flex: auto;
    padding: 0 0 30rem;
  }
  .gnb-mob .gnb > ul {
    display: block;
    margin-left: 0;
  }
  .gnb-mob .gnb > ul > li {
    position: relative;
    width: 100%;
    padding: 0;
  }
  .gnb-mob .gnb > ul > li:first-child {
    padding-left: 0;
  }
  .gnb-mob .gnb > ul > li a {
    display: block;
  }
  .gnb-mob .gnb > ul > li > a {
    padding: 20rem;
    border-bottom: 1rem solid #f0f0f0;
    font-size: 18rem;
  }
  .gnb-mob .gnb > ul > li > .box {
    display: none;
    margin-top: 0;
    padding: 20rem;
    background-color: #f8f8f8;
  }
  .gnb-mob .gnb > ul > li > .box a {
    padding: 7rem 0;
    font-size: 16rem;
  }
  .gnb-mob .gnb > ul > li > .box > ul > li {
    position: relative;
    padding: 0;
  }
  .gnb-mob .gnb .box.depth03 a {
    padding: 0;
  }
  .gnb-mob .gnb button.open {
    display: block;
  }
  .gnb-mob .gnb .box button.open {
    top: -3rem;
    right: 0;
  }
  .gnb-mob .util {
    flex: none;
    display: block;
    background-color: #f8f8f8;
    border-bottom: 1px solid #f0f0f0;
  }
  .gnb-mob .util ul {
    display: flex;
    align-items: center;
    gap: 15rem;
    padding: 0 20rem;
  }
  .gnb-mob .util ul > li a {
    display: block;
    padding: 15rem 0;
  }
  /* hover */
  .gnb-mob .gnb > ul > li a:hover {
    opacity: 1;
  }
  /* close */
  .gnb-mob__close i {
    color: var(--color-white);
  }
  /* 장바구니 */
  .gnb-mob .basket-count {
    top: 5rem;
  }
}

/* gnb-sns */
.area_sns {
  display: flex;
  align-items: center;
  gap: 20rem;
  position: absolute;
  right: var(--page-pad);
  top: 50%;
  transform: translateY(-50%);
}
.area_sns a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  height: 30rem;
  transition: opacity 0.3s ease;
}
.area_sns a span {
  display: none;
}
.area_sns [data-sns] {
  width: 21rem;
  height: 21rem;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.area_sns [data-sns="naverTalk"] {
  background-image: url(../images/common/sns_navertalk.svg);
}
.area_sns [data-sns="kakaoPlus"] {
  background-image: url(../images/common/sns_kakao.svg);
}
@media (hover: hover) {
  .area_sns a:hover {
    opacity: 0.4;
  }
}
@media screen and (max-width: 1024px) {
  nav .area_sns {
    display: none;
  }
}

/* util */
.area_util {
}
.util-list {
  --sizeGap: 25rem;
  display: flex;
  align-items: center;
  gap: var(--sizeGap);
  font-size: 14rem;
}
.util-list > li {
  display: flex;
  align-items: center;
  position: relative;
}
.util-list > li:before {
  content: "";
  display: block;
  position: absolute;
  left: calc((var(--sizeGap) / 2) * -1);
  width: 1rem;
  height: 12rem;
  background: rgba(0, 0, 0, 0.15);
}
.util-list > li:last-child {
  margin-left: 15rem;
}
.util-list > li:first-child:before,
.util-list > li:last-child:before {
  display: none;
}
.util-list > li a {
  display: inline-block;
}
[data-util="basket"] {
  display: inline-flex !important;
  gap: 2rem;
  position: relative;
}
[data-util="basket"] span {
  opacity: 0.6;
  display: block;
  width: 22rem;
  height: 20rem;
  background: url(../images/common/basket_img.svg) no-repeat 50% 50%;
  background-size: auto 100%;
  font-size: 0;
}
.basket-count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -10rem;
  top: -4rem;
  z-index: 1;
  min-width: 20rem;
  line-height: 1;
  border-radius: 100%;
  background-color: var(--color-point);
  font-size: 12rem;
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
  aspect-ratio: 1/1;
}
/* util-search */
.search-util {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.search-util .box {
  position: relative;
  width: 400rem;
  height: 50rem;
}
.search-util input[type="text"] {
  width: 100%;
  height: 100%;
  margin: 0;
  padding-right: 50rem;
  border: 2px solid var(--color-point);
  border-radius: var(--r);
}
.search-util .btn_search {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10rem;
  top: 50%;
  width: 40rem;
  height: 40rem;
  background-color: transparent;
  transform: translateY(-50%);
}
.search-util .btn_search i {
  display: block;
  width: 20rem;
  height: 21rem;
}
.search-util .btn_search span {
  font-size: 0;
}
.search-util__control {
  display: none;
  position: absolute;
  top: 50%;
  right: 10rem;
  width: 50rem;
  height: 50rem;
  background-color: transparent;
  font-size: 0;
  transform: translateY(-50%);
}
.search-util__control i {
  font-size: 25rem;
}
/* util 반응형 */
@media screen and (max-width: 1024px) {
  .area_util {
    padding: 0;
    border-width: 0;
  }
  .util-list > li:not(.mob) {
    display: none;
  }
  .util-list > li:last-child {
    margin-left: 0;
  }
  .util-list [data-util="login"] span {
    display: block;
    width: 20rem;
    height: 20rem;
    background: url(../images/common/util_user.svg) no-repeat 50% 50%;
    background-size: auto 100%;
    font-size: 0;
  }
  .util-list [data-util="basket"] span {
    opacity: 1;
    width: 22rem;
    height: 22rem;
    background-image: url(../images/common/basket_img_mob.svg);
  }
  .search-util .box {
    width: 350rem;
  }
  .search-util__control {
    display: none;
  }
  .search-util__control.active i:before {
    content: "\e921";
  }
}
@media screen and (max-width: 768px) {
  .area_util {
    position: absolute;
    right: var(--page-pad);
    top: 20rem;
  }
  .search-util {
    position: static;
    transform: translateX(0);
    margin-top: 10rem;
  }
  .search-util .box {
    width: 100%;
    height: 45rem;
  }
}
@media screen and (max-width: 480px) {
  .util-list {
    --sizeGap: 20rem;
  }
  .search-util {
    margin-top: 0;
  }
  .search-util__control {
    right: 0;
  }
}

/* quick */
.quick-menu {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  right: 20rem;
  top: 50%;
  z-index: 50;
  transform: translateY(-50%);
  transition: 0.5s ease 0s;
  transition-property: opacity, visibility;
}
.quick-menu.show {
  opacity: 1;
  visibility: visible;
}
.quick-menu__list {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.quick-menu__list a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50rem;
  height: 50rem;
  box-sizing: border-box;
  border-radius: 100%;
  font-size: 0;
}
.quick-menu__list [data-sns="kakao"] {
  background-color: #fae100;
  color: #3c1d1e;
}
.quick-menu__list [data-sns="kakao"] span {
  font-size: 30rem;
}
.quick-menu__list [class*="btn_"] {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1rem solid rgba(0, 0, 0, 0.1);
}
.quick-menu__list [class*="btn_"] span {
  opacity: 0.5;
  font-size: 23rem;
  transition: opacity 0.5s ease 0s;
}
.quick-menu__list [class*="btn_"]:hover span {
  opacity: 1;
}
/* quick 반응형 */
@media screen and (max-width: 768px) {
  .quick-menu {
    right: 10rem;
  }
  .quick-menu__list a {
    width: 50rem;
    height: 50rem;
  }
  .quick-menu__list [data-sns="kakao"] span {
    font-size: 30rem;
  }
}
@media screen and (max-width: 480px) {
  .quick-menu {
    top: auto;
    bottom: 5%;
    transform: translateY(0);
  }
}

/* footer */
#footer {
  background-color: #222;
  color: #888;
}
#footer .inr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#footer h2 {
  margin-bottom: 5rem;
  font-size: 15rem;
  font-weight: 500;
  color: var(--color-base);
}
.footer-inr__top,
.footer-inr__bottom {
  max-width: 1200rem;
  box-sizing: content-box;
  margin: 0 auto;
  padding: 0 20rem;
}
.footer-inr__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.footer-inr__bottom {
  display: grid; /* grid-template:"a b c" "a b d" / 50% 1fr 1fr; */
  grid-template: "a" / 1fr;
  gap: 25rem 0;
  padding-top: 40rem;
  padding-bottom: 40rem;
  font-size: 15rem;
  color: #666;
}
/* footer link */
.footer-inr__top .link {
  display: flex;
  align-items: center;
}
.footer-inr__top .link {
  gap: 5rem 30rem;
}
.footer-inr__top .link a {
  display: inline-block;
  padding: 15rem 0;
  font-size: var(--font14);
  font-weight: 500;
}
/* footer sns */
.footer-inr__top .area_sns {
  right: 20rem;
}
.footer-inr__top .area_sns [data-sns] {
  filter: brightness(10);
}
.footer-inr__top .area_sns a {
  opacity: 0.5;
}
.footer-inr__top .area_sns a:hover {
  opacity: 1;
}
.footer-inr__top .sns {
  display: flex;
  align-items: center;
  gap: 5rem 10rem;
}
.footer-inr__top .sns [data-sns] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 40rem;
  height: 40rem;
  padding: 10rem 0;
  font-size: 0;
}
.footer-inr__top .sns [data-sns] i {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.footer-inr__top .sns [data-sns] i:before {
  font-size: 22rem;
}
.footer-inr__top .sns [data-sns="facebook"] i:before {
  font-size: 20rem;
}
.footer-inr__top .sns [data-sns]:hover i {
  opacity: 1;
}
/* footer info */
.footer-info {
  grid-area: a;
}
.footer-info span {
  display: inline-flex;
  align-items: baseline;
  gap: 0 5rem;
  margin-right: 25rem;
  padding: 3rem 0;
}
.footer-info p {
  margin-top: 30rem;
}
/* footer cs center */
.footer-cs {
  grid-area: b;
}
.footer-cs .tel {
  display: inline-block;
  margin: 10rem 0 15rem;
  font-size: 25rem;
  font-weight: 600;
  color: var(--color-point);
}
/* footer bank */
.footer-bank {
  grid-area: c;
}
/* footer address */
.footer-address {
  grid-area: d;
}
/* footer 반응형 */
@media screen and (max-width: 1024px) {
  /* 
	.footer-inr__bottom{grid-template:"b c" "b d" "a a" / 1fr 1fr; gap:25rem 20rem; padding:30rem 0;}
	.footer-cs{padding-left:20rem;}
	.footer-bank,
	.footer-address{padding-right:20rem;}
	.footer-info{padding:20rem; border-top:1px solid #f0f0f0;}
	 */
}
@media screen and (max-width: 480px) {
  /* .footer-inr__bottom{grid-template:"b" "c" "d" "a" / 1fr; padding:30rem 0 50rem;} */
  .footer-cs,
  .footer-bank,
  .footer-address {
    padding-right: 20rem;
    padding-left: 20rem;
  }
  .footer-inr__top {
    display: block;
  }
  .footer-inr__top .link,
  .footer-inr__top .sns {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .footer-inr__top .link {
    gap: 5rem 20rem;
  }
  .footer-inr__top .area_sns {
    position: static;
    padding-bottom: 20rem;
    transform: translateY(0);
  }
  .footer-inr__top .sns [data-sns] {
    width: 35rem;
    height: 35rem;
    padding: 0;
  }
  .footer-info span {
    display: block;
  }
  .footer-info span i {
    flex: none;
  }
  .footer-info br {
    display: none;
  }
}

/* sub layout구성 */
[data-sublayout=""],
[data-sublayout="product"],
[data-sublayout="product"] + .area_lnb {
  display: none;
}

/* lnb */
.area_lnb {
  & {
    margin-bottom: 30rem;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 5rem;
  }
  li {
    min-height: 60rem;
  }
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 215rem;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--color-white);
    border: 2px solid #eee;
    border-radius: var(--r);
    font-size: var(--font14);
    color: #999;
    font-weight: 600;
    padding: 12px 16px;
  }
  a.on {
    position: relative;
    z-index: 3;
    border-color: var(--color-point);
    color: var(--color-point);
    box-shadow: 0 20rem 30rem rgba(0, 0, 0, 0.1);
  }

  @media screen and (max-width: 768px) {
    .lnb.full {
      a {
        min-width: 180rem;
      }
    }
  }
  @media screen and (max-width: 480px) {
    li {
      min-height: 55rem;
    }
    a {
      min-width: 100rem;
    }
    .lnb.full {
      a {
        min-width: 100rem;
        padding: 0 10rem;
      }
    }
  }
}

/* snb */
.area_snb {
  & {
    margin-bottom: 60rem;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
  li {
    min-height: 50rem;
  }
  li:first-child a {
    border-radius: 50em 0 0 50em;
  }
  li:last-child a {
    border-radius: 0 50em 50em 0;
  }
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120rem;
    height: 100%;
    box-sizing: border-box;
    padding: 0 30rem;
    background-color: #fff3ee;
    font-size: var(--font16);
    color: #b89c91;
    font-weight: 600;
  }
  a.on {
    color: var(--color-point);
    font-weight: 700;
  }

  @media screen and (max-width: 480px) {
    & {
      margin-top: -30rem;
    }
  }
}

/* sub visual */
.area-subVisual {
  .inr {
    max-width: 1200rem;
    box-sizing: content-box;
    margin: 0 auto;
    padding: 70rem var(--page-pad) 30rem;
  }
  h2 {
    text-align: center;
    font-size: var(--font40);
  }

  @media screen and (max-width: 768px) {
    h2 {
      font-size: var(--font45);
    }
  }
}