:root {
  --primary-color: #009833;
  --secondary-color: #b2d866;

  --body-color: #444;

  --dark-color: #222222;
  --white-color: #ffffff;
  --line-color: #dddddd;

  --secbg-color: #f9f9f9;

  --footerbg-color: #222222;

  --border-radius: 2.4rem;
  --box-shadow: 0px 0px 1.6rem 0.2rem rgba(0, 0, 0, 0.05);
  --box-shadow-hover: 0px 0px 1.6rem 0.2rem rgba(0, 0, 0, 0.1);
}

html {
  font-size: 62.5%;
}

@media (max-width: 1202px) {
  html {
    font-size: 0.8319467554vw;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 1.30208333333vw;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 2.17391304348vw;
  }
}

body {
  font-size: 1.6rem;
  color: var(--body-color);
  word-break: keep-all;
}

body.gnb_on {
  touch-action: none;
  overflow: hidden !important;
}

body.gnb_on #header {
  position: fixed;
}

button,
a {
  touch-action: manipulation;
}

@media (max-width: 480px) {
  body {
    line-height: 1.4;
  }
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

.default {
  padding: 8rem 0;
}

.w_default {
  padding: 8rem 0 6.4rem 0;
}

.sub_content {
  overflow: hidden;
  padding: 8rem 0;
}

.inner {
  max-width: 165rem;
  margin: 0 auto;
}

.w_inner {
  margin: -1.6rem auto 0 auto;
  max-width: calc(165rem + 3.2rem);
}

.tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 165rem;
  margin: 0 auto 4rem auto;
}

.tit h2 {
  font-size: 4rem;
  font-weight: 100;
  line-height: 4rem;
}

.tit h2 span {
  font-weight: 700;
}

.tit h2 .point {
  font-weight: 700;
  color: var(--primary-color);
}

.shop_tit,
.sub_tit {
  margin: 0 auto 4rem auto;
}

.sub_tit p {
  margin: 0 0 2.4rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6rem;
  text-align: center;
  color: var(--primary-color);
}

.sub_tit h2 {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4rem;
  text-align: center;
}


.sub_visual {
  position: relative;
  max-width: 165rem;
  height: 48rem;
  margin: 0 auto;
  border-radius: var(--border-radius);
  overflow: hidden;

  /* lee */
  height: 24rem;
}

.sub_visual .slg {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-4rem, 1.2rem);
}

.sub_visual .slg .sub_title h2 {
  font-size: 8rem;
  font-weight: 900;
  line-height: 8rem;
  color: var(--white-color);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.75);
}

.tit .btn_wrap>a {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  text-indent: -9999px;
  border: 2px solid var(--primary-color);
  background: url(../images/tit_btn_p.svg) no-repeat center center;
  transition: 0.5s;
}

.tit .btn_wrap>a:hover {
  transform: rotate(90deg);
  background: var(--primary-color) url(../images/tit_btn_w.svg) no-repeat center center;
  transition: 0.5s;
}

.itm {
  overflow: hidden;
  border-radius: var(--border-radius);
}

.itm .img_box {
  overflow: hidden;
  border-radius: var(--border-radius);
}

.itm_strong {
  display: block;
  margin: 0 0 1.6rem 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.4rem;
}

.itm_desc {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2.4rem;
}

.arrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arrow .arrow_btn {
  display: block;
  width: 4rem;
  height: 4rem;
  text-indent: -9999px;
  border-radius: 50%;
  background: #f9f9f9 url(../images/slide_arrow_btn_b.svg) no-repeat center center;
  transition: 0.5s;
}

.arrow .arrow_btn:hover {
  background-image: url(../images/slide_arrow_btn_p.svg);
  transition: 0.5s;
}

.arrow .arrow_prev {
  transform: rotate(180deg);
}

.itm_more_btn {
  cursor: pointer;
}

.itm_more_btn>button {
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  text-indent: -9999px;
  border-radius: 50%;
  background: var(--secbg-color) url(../images/slide_more_btn_p.svg) no-repeat center center;
}

.itm_more_btn>a {
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  text-indent: -9999px;
  border-radius: 50%;
  background: var(--secbg-color) url(../images/slide_more_btn_p.svg) no-repeat center center;
}

#content .slide_nav_line {
  display: none;
  position: static;
  max-width: calc(100% - 4rem);
  margin: 2.4rem auto 0 auto;
  height: 4px;
  border-radius: 8px;
  overflow: hidden;
  background: #eeeeee;
}

#content .slide_nav_line>span {
  overflow: hidden;
  border-radius: 8px;
  background: var(--primary-color);
}

.to_top {
  z-index: 99;
  position: fixed;
  bottom: 0;
  right: 4rem;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
}

.to_top.on {
  bottom: 8rem;
  transition: 0.5s;
  opacity: 1;
  visibility: visible;
}

.to_top>button {
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  text-indent: -9999px;
  border-radius: 50%;
  transform: rotate(-45deg);
  background: var(--primary-color) url(../images/slide_more_btn_w.svg) no-repeat center center;
}

#content .map_slide_nav {
  position: static;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;

  margin: 1.6rem 0 0 0;
}

#content .map_slide_nav .swiper-pagination-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--body-color);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 1;
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-weight: 300;
}

#content .map_slide_nav .swiper-pagination-bullet-active {
  color: var(--white-color);
  background: var(--primary-color);
}

.shop_itm_slide_wrap .tit p {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 1.6rem 0;
}

.shop_tit h2 {
  font-size: 4rem;
  font-weight: 700;
  line-height: 4rem;
  text-align: center;
}

@media (max-width: 1730px) {
  .tit {
    padding: 0 4rem;
  }

  .inner {
    padding: 0 4rem;
  }

  .w_inner {
    padding: 0 2.4rem;
  }

}

@media (max-width: 768px) {
  .tit {
    padding: 0 1.6rem;
  }

  .inner {
    padding: 0 1.6rem;
  }

  .w_inner {
    padding: 0;
  }

  .to_top {
    right: 1.6rem;
  }

  :root {
    --box-shadow: 0px 0px 1.6rem 0.1rem rgba(0, 0, 0, 0.05);
    --box-shadow-hover: 0px 0px 1.6rem 0.2rem rgba(0, 0, 0, 0.1);
  }

  #content .map_slide_nav {
    margin: 2.4rem 0 0 0;
  }
}

@media (max-width: 480px) {
  .w_default {
    padding: 8rem 0 8rem 0;
  }

  .tit h2 {
    font-size: 2.8rem;
    line-height: 2.8rem;
  }

  .itm_strong {
    font-size: 2rem;
    line-height: 2rem;
  }

  .itm_desc {
    font-size: 1.4rem;
    line-height: 2.2rem;
  }

  .tit .btn_wrap>a {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 10px;
  }

  .sub_content {
    padding: 4rem 0;
  }

  .shop_tit,
  .sub_tit {
    margin: 0 0 2.4rem 0;
  }


  .sub_tit p {
    margin: 0 0 1.6rem 0;
  }

  .sub_visual {
    height: 16rem;
  }

  .sub_visual .slg {
    position: absolute;
    bottom: auto;
    right: auto;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .sub_visual .slg .sub_title h2 {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .sub_tit h2 {
    font-size: 2.2rem;
    line-height: 3rem;
  }

  #content .slide_nav_line {
    display: block;
  }

  .to_top.on {
    bottom: 4rem;
  }

  .shop_itm_slide_wrap .tit p {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }

  .shop_tit h2 {
    font-size: 2.8rem;
    line-height: 2.8rem;
  }

  .arrow .arrow_btn {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 6px 12px;
    transition: none;
  }

  .arrow .arrow_btn:hover {
    transition: none;
  }
}