@charset "UTF-8";
/*=================================================
        온라인몰 스타일
=================================================*/
/* pc > 흰 배경일 때 스타일 변경 */
[data-slide="4"] .pc-header,
[data-slide="6"] .pc-header,
[data-slide="7"] .pc-header {
  color: #333;
}

[data-slide="4"] .pc-header .logo .logo-img,
[data-slide="6"] .pc-header .logo .logo-img,
[data-slide="7"] .pc-header .logo .logo-img {
  background-image: url(res/imgs/common/header-icon-logo.png);
}

[data-slide="4"] .pc-header .menu-list .has-sub .text::after,
[data-slide="6"] .pc-header .menu-list .has-sub .text::after,
[data-slide="7"] .pc-header .menu-list .has-sub .text::after {
  background-image: url(res/imgs/common/header-icon-arrow.svg);
}

[data-slide="4"] .pc-header .menu-list.on>.link .text,
[data-slide="6"] .pc-header .menu-list.on>.link .text,
[data-slide="7"] .pc-header .menu-list.on>.link .text {
  color: #174fb7;
}

[data-slide="4"] .pc-header .menu-list.on>.link .text::before,
[data-slide="6"] .pc-header .menu-list.on>.link .text::before,
[data-slide="7"] .pc-header .menu-list.on>.link .text::before {
  background-color: #174fb7;
}

[data-slide="4"] .pc-header .top-menu-item:not(:last-child)::after,
[data-slide="6"] .pc-header .top-menu-item:not(:last-child)::after,
[data-slide="7"] .pc-header .top-menu-item:not(:last-child)::after {
  background-color: #ddd;
}

[data-slide="4"] .pc-header .top-menu-item .top-menu-btn .text,
[data-slide="6"] .pc-header .top-menu-item .top-menu-btn .text,
[data-slide="7"] .pc-header .top-menu-item .top-menu-btn .text {
  color: #555;
}

[data-slide="4"] .pc-header .top-menu-item .top-menu-btn .icon-wrap.icon-write,
[data-slide="6"] .pc-header .top-menu-item .top-menu-btn .icon-wrap.icon-write,
[data-slide="7"] .pc-header .top-menu-item .top-menu-btn .icon-wrap.icon-write {
  background-image: url(res/imgs/common/header-icon-write.svg);
}

[data-slide="4"] .pc-header .top-menu-item .top-menu-btn .icon-wrap.icon-search,
[data-slide="6"] .pc-header .top-menu-item .top-menu-btn .icon-wrap.icon-search,
[data-slide="7"]
  .pc-header
  .top-menu-item
  .top-menu-btn
  .icon-wrap.icon-search {
  background-image: url(res/imgs/common/header-icon-search.svg);
}

[data-slide="4"] .scroll-down-wrap .scroll-down-btn .img,
[data-slide="6"] .scroll-down-wrap .scroll-down-btn .img,
[data-slide="7"] .scroll-down-wrap .scroll-down-btn .img {
  background-image: url(res/imgs/common/icon-scrolldown-142A52.svg) !important;
}

[data-slide="4"] .scroll-down-wrap .scroll-down-btn .text,
[data-slide="6"] .scroll-down-wrap .scroll-down-btn .text,
[data-slide="7"] .scroll-down-wrap .scroll-down-btn .text {
  color: #142a52 !important;
}

[data-slide="4"]
  .swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet,
[data-slide="6"]
  .swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet,
[data-slide="7"]
  .swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet {
  background-color: #333 !important;
}

[data-slide="4"]
  .swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet::before,
[data-slide="6"]
  .swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet::before,
[data-slide="7"]
  .swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet::before {
  border-color: #333;
}

/* pc > 문의 섹션 ~ 푸터 : scroll down 사라짐 */
@media screen and (min-width: 992px) {
  [data-slide="7"] .scroll-down-wrap,
  [data-slide="8"] .scroll-down-wrap {
    pointer-events: none;
  }
  [data-slide="7"] .scroll-down-wrap .scroll-down-btn,
  [data-slide="8"] .scroll-down-wrap .scroll-down-btn {
    opacity: 0;
  }
}

/* pc > 푸터 ~ : 네비게이션, 페이지네이션, sns-btn 사라짐 */
[data-slide="8"] .pc-header,
[data-slide="8"] .swiper-controller,
[data-slide="8"] .sns-btns {
  opacity: 0;
  pointer-events: none;
}

/* 모바일에서 스와이퍼 사용하지 않음 */
@media screen and (max-width: 992px) {
  .swiper-slide {
    height: auto !important;
  }
}

/* 온라인몰 섹션 */
.mall-sec {
  background-image: url(res/imgs/page/main-bg-global-m@3x.png);
  background-repeat: no-repeat;
  background-position: center 120px;
  background-size: contain;
}

@media screen and (min-width: 992px) {
  .mall-sec {
    background-image: url(res/imgs/page/main-bg-global.png);
    background-position: center;
    background-size: cover;
  }
}

@media screen and (min-width: 992px) {
  .mall-sec .flex-row {
    justify-content: space-between;
    align-items: center;
  }
}

.mall-sec .flex-row .common-title-wrap {
  margin-bottom: 40px;
}

@media screen and (min-width: 992px) {
  .mall-sec .flex-row .common-title-wrap {
    margin-bottom: 0;
  }
}

.mall-sec .flex-row .common-title-wrap .title {
  margin-bottom: 20px;
}

@media screen and (min-width: 992px) {
  .mall-sec .flex-row .common-title-wrap .title {
    margin-bottom: 2.50156vw;
  }
}

@media screen and (min-width: 1600px) {
  .mall-sec .flex-row .common-title-wrap .title {
    margin-bottom: 40px;
  }
}

.swiper-controller {
  display: none;
  position: fixed;
  top: 50%;
  right: 29px;
  transform: translateY(-50%);
  z-index: 100;
  transition: opacity 0.4s;
}

@media screen and (min-width: 1920px) {
  .swiper-controller {
    right: 76px;
  }
}

.swiper-controller .swiper-pagination {
  transform: translateY(-130px);
  height: auto;
  overflow: visible;
  transition: opacity 0.1s;
  opacity: 1;
}

.swiper-controller .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  opacity: 0;
  background-color: #fff;
  animation: pagination 0.5s forwards cubic-bezier(0.45, 0.43, 0, 0.88);
}

@-webkit-keyframes pagination {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes pagination {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes pagination {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pagination {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet:not(:nth-last-child(2)) {
  margin-bottom: 40px;
}

.swiper-controller .swiper-pagination .swiper-pagination-bullet:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #fff;
  opacity: 0;
  transition: all 0.3s;
}

.swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}

.swiper-controller
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  width: 22px;
  height: 22px;
  opacity: 1;
}

.swiper-controller .swiper-pagination .swiper-pagination-bullet:last-of-type {
  display: none;
}

.swiper-controller .swiper-pagination .swiper-pagination-bullet .title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -11px;
  right: 0;
  width: 100px;
  height: 32px;
  margin-right: 23px;
  border-radius: 16px;
  background-color: #fff;
  font-weight: 500;
  text-align: center;
  color: #174fb7;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  filter: drop-shadow(0 0 15px rgba(23, 79, 183, 0.3));
  -webkit-filter: drop-shadow(5px 10px 20px rgba(23, 79, 183, 0.3));
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.swiper-controller .swiper-pagination .swiper-pagination-bullet:hover .title {
  opacity: 1;
}