@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap');
@media (prefers-color-scheme: dark) {
  /* 배송서비스/구매상담 페이지 */
  #contents-swiper.order-delivery-swiper .swiper-slide:first-child,
  #contents-swiper.order-delivery-swiper .swiper-slide:last-child {
    background: #fff url(../../orderDelivery/img/bg1.png) repeat center / contain;
  }
  #guidebook-container[data-page='order-delivery'] #order-tell {
    background: #fff url(../../orderDelivery/img/bg1.png) repeat center / contain;
  }
  #guidebook-container[data-page='order-delivery'] #order-info {
    background: #fff url(../../orderDelivery/img/bg2.png) repeat center / contain;
  }
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-text-size-adjust: none;
}
body::-webkit-scrollbar {
  display: none;
}
html,
body {
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  font-family: 'Noto Sans KR', sans-serif;
}
.d-none {
  display: none;
}
.md {
  margin: 0 auto;
  left: 0;
  right: 0;
}
.op {
  opacity: 0;
}
img {
  display: block;
  width: 100%;
}
button {
  border: 0;
  padding: 0;
  outline: none;
  background-color: transparent;
}
#guidebook-container {
  position: relative;
  overflow: hidden;
}

#go-home-btn {
  width: 4.92vw;
  height: 4.92vw;
  position: fixed;
  bottom: 10.15vw;
  background: url(../img/home-btn.svg) no-repeat center / cover;
  z-index: 999;
  left: 50%;
  margin-left: 39.9vw;
}
#top-btn {
  width: 5.86vw;
  height: 5.86vw;
  position: fixed;
  bottom: 3.125vw;
  background: url(../img/top-btn.svg) no-repeat center / cover;
  z-index: 999;
  left: 50%;
  margin-left: 39.45vw;
}

/* 상단 타이틀 */
#top-img {
  width: 100%;
  height: 81.25vh;
  position: relative;
}
#top-title {
  position: absolute;
  color: #fff;
  bottom: 7.5vh;
  left: 3%;
}
#top-title li:nth-child(1) {
  font-size: 1.563vw;
  margin-bottom: 0.938vw;
}
#top-title li:nth-child(2) {
  font-size: 3.9vw;
  margin-bottom: 3.125vw;
  font-weight: 500;
  letter-spacing: -0.03em;
}
#top-title li:nth-child(3) {
  font-size: 1.8vw;
  font-weight: 400;
  letter-spacing: -0.03em;
  opacity: 0.8;
}

/* tab-navigation */
#nav-swiper {
  padding: 3.4vh 2.7% 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
#nav-swiper.on {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#nav-swiper .swiper-wrapper {
  box-sizing: border-box;
  border-bottom: 1px solid #bbb;
}
#nav-swiper .swiper-slide {
  font-weight: 400;
  line-height: 8.125vh;
  font-size: 1.563vw;
  letter-spacing: -0.03em;
  width: auto;
  position: relative;
  color: #bbb;
  cursor: pointer;
  margin-right: 3.125%;
}
#nav-swiper .swiper-slide:nth-child(1),
#nav-swiper .swiper-slide:nth-last-child(2),
#nav-swiper .swiper-slide:nth-last-child(1) {
  margin-right: 0;
}
#nav-swiper .swiper-slide.on {
  font-weight: 700;
  color: #000;
}
#nav-swiper .swiper-slide.on::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  display: inline-block;
  height: 3px;
  background: #000;
}
#contents-swiper {
  padding-top: 10vh;
}
#contents-swiper.self-choice-swiper,
#contents-swiper.order-delivery-swiper {
  padding-top: 0;
}
#contents-swiper .swiper-slide > img:nth-of-type(1) {
  margin-bottom: 5vh;
}
#contents-swiper .swiper-slide > p {
  font-weight: 400;
  font-size: 1.563vw;
  line-height: 125%;
  text-align: center;
  letter-spacing: -0.03em;
  color: #444444;
  width: 38%;
  margin: 0 auto 11.25vh;
  word-break: keep-all;
}
#contents-swiper .swiper-wrapper .swiper-slide:first-child,
#contents-swiper .swiper-wrapper .swiper-slide:last-child {
  width: auto;
  height: 100%;
  position: relative;
}
.product-link {
  position: absolute;
  display: inline-block;
  width: 10%;
  height: 10%;
  /* background: rgba(0, 0, 0, 0.5); */
}

footer {
  margin-top: 120px;
  padding: 1.6vw 2.8%;
  font-size: 1.25vw;
  line-height: 1.5;
}
#go-prev-page-btn,
#go-next-page-btn {
  display: flex;
  align-items: center;
  justify-content: end;
  text-decoration: none;
  margin-left: 2vw;
}
#go-prev-page-btn {
  justify-content: start;
  flex-direction: row-reverse;
  margin-right: 2vw;
  margin-left: 0;
}
#go-prev-page-btn > span,
#go-next-page-btn > span {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 1.2vw;
  line-height: 1.3;
  text-align: right;
  letter-spacing: -0.03em;
  color: #28324e;
  margin-right: 1.5vw;
}
#go-prev-page-btn > span {
  text-align: left;
  margin-right: 0;
  margin-left: 1.5vw;
}
#prev-page-btn-img,
#next-page-btn-img {
  width: 5vw;
  height: 10vw;
  background: url(../img/next-btn.png) no-repeat center / cover;
}
#prev-page-btn-img {
  background: url(../img/prev-btn.png) no-repeat center / cover;
}
/* 배송서비스/구매상담 페이지 */
#contents-swiper.order-delivery-swiper .swiper-slide:first-child,
#contents-swiper.order-delivery-swiper .swiper-slide:last-child {
  background: #fff url(../../orderDelivery/img/bg1.png) repeat center / contain;
}
#guidebook-container[data-page='order-delivery'] #order-tell {
  background: #fff url(../../orderDelivery/img/bg1.png) repeat center / contain;
  padding: 12.5vh 0;
  position: relative;
}
#tel-btn-wrap {
  position: absolute;
  top: 34%;
  width: 52%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#tel-btn-wrap li {
  margin-bottom: 3.2vh;
}
#tel-btn-wrap a {
  display: inline-block;
  width: 100%;
  height: 13vh;
}
#guidebook-container[data-page='order-delivery'] #order-info {
  background: #fff url(../../orderDelivery/img/bg2.png) repeat center / contain;
  padding: 12.5vh 0 13.75vh;
}
#guidebook-container[data-page='order-delivery'] #order-text1,
#guidebook-container[data-page='order-delivery'] #order-text2 {
  width: 52%;
  margin: 0 auto;
}
#intro {
  width: 100%;
}
#intro.on {
  animation: intro 0.2s 1 linear forwards;
}

@keyframes intro {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (orientation: portrait) {
  /* 세로 */
  #go-home-btn {
    width: 7.875vw;
    height: 7.875vw;
    position: fixed;
    bottom: 16.25vw;
    background: url(../img/home-btn.svg) no-repeat center / cover;
    z-index: 999;
    left: 50%;
    margin-left: 33.875vw;
  }
  #top-btn {
    width: 9.375vw;
    height: 9.375vw;
    position: fixed;
    bottom: 5vw;
    background: url(../img/top-btn.svg) no-repeat center / cover;
    z-index: 999;
    left: 50%;
    margin-left: 33.125vw;
  }
  /* 상단 타이틀 */
  #top-img {
    height: 50vh;
  }
  #top-title {
    bottom: 4.7vh;
    left: 4.7%;
  }
  #top-title li:nth-child(1) {
    font-size: 2.5vw;
    margin-bottom: 1.5vw;
  }
  #top-title li:nth-child(2) {
    font-size: 6.25vw;
    margin-bottom: 5vw;
  }
  #top-title li:nth-child(3) {
    font-size: 2.875vw;
  }
  /* tab-navigation */
  #nav-swiper {
    padding: 2vh 6.25% 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
  }
  #nav-swiper.on {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  #nav-swiper .swiper-wrapper {
    border-bottom: 1px solid #bbb;
    overflow-x: hidden;
  }
  #nav-swiper .swiper-slide {
    line-height: 5.15vh;
    font-size: 2.5vw;
    color: #bbb;
    cursor: pointer;
    margin-right: 5.5%;
  }
  #nav-swiper .swiper-slide.on {
    font-weight: 700;
    color: #000;
  }
  #nav-swiper .swiper-slide.on::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    display: inline-block;
    height: 3px;
    background: #000;
  }
  #contents-swiper {
    padding-top: 6.25vh;
  }
  #contents-swiper .swiper-slide > img:nth-of-type(1) {
    margin-bottom: 3.125vh;
  }
  #contents-swiper .swiper-slide > p {
    font-size: 2.5vw;
    width: 51.5%;
    margin: 0 auto 7vh;
  }
  #go-prev-page-btn > span,
  #go-next-page-btn > span {
    font-size: 2vw;
    line-height: 1.3;
    margin-right: 1.5vw;
  }
  #go-prev-page-btn > span {
    margin-right: 0;
    margin-left: 1.5vw;
  }
  #prev-page-btn-img,
  #next-page-btn-img {
    width: 8vw;
    height: 16vw;
  }
  footer {
    padding: 2.5vw 4.25%;
    font-size: 2vw;
  }
  /* 배송서비스/구매상담 페이지 */
  #guidebook-container[data-page='order-delivery'] #order-tell {
    padding: 7.8vh 0;
  }
  #guidebook-container[data-page='order-delivery'] #order-info {
    padding: 7.8vh 0 8.6vh;
  }
  #guidebook-container[data-page='order-delivery'] #order-text1,
  #guidebook-container[data-page='order-delivery'] #order-text2 {
    width: 83%;
    margin: 0 auto;
  }
  #tel-btn-wrap {
    width: 83%;
  }
  #tel-btn-wrap li {
    margin-bottom: 2.1vh;
  }
  #tel-btn-wrap a {
    height: 8vh;
  }
}