@charset "utf-8";

/* 공통 - 버튼 */
.imc__btnArea {
  display: flex;
  gap: calc(8 * var(--vw-400));
}
.imc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(120 * var(--vw-400));
  height: calc(40 * var(--vw-400));
  border-radius: calc(5 * var(--vw-400));
  font-size: calc(14 * var(--vw-400));
  letter-spacing: calc(-0.7 * var(--vw-400));
}
.imc__btn--dark {
  background-color: #151415;
  color: #fff !important;
}

/* 공통 - 레이아웃 */
.imc {
  position: relative;
  color: #151415;
  padding-top:calc(14 * var(--vw-400));
}
[class*="imc__section"] {
  position: relative;
  padding-bottom: calc(80 * var(--vw-400));
}
[class*="imc__section"] .section__title {
  margin-bottom: calc(16 * var(--vw-400));
  padding: 0 calc(16 * var(--vw-400));
  font-size: calc(22 * var(--vw-400));
  font-weight: 900;
  line-height: calc(31 * var(--vw-400));
  letter-spacing: -0.05em;
}
[class*="imc__section"] .section__title .en {
  font-size: calc(24 * var(--vw-400));
  font-weight: 800;
  letter-spacing: 0;
}

/* 상단 메뉴 */
.imc__gnb {
  z-index: 50;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  text-align: center;
  transition: .2s;
}
.imc__gnb.on {
  transform: translateY(-74px);
}
.imc__gnb .gnb__title {
  font-size: 36px;
  text-align: center;
  font-family: 'ITCGaramondStd', sans-serif;
  padding: 26px 0 12px;
  color: #151415;
  letter-spacing: -0.01em;
}
.imc__gnb .gnb__list {
  display: flex;
  padding: 0 8px;
  background-color: #fff;
  font-size: 0;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: auto;
}
.imc__gnb .gnb__link {
  display: block;
  height: 36px;
  margin: 12px 4px;
  padding: 11px 18px 8px;
  border: 1px solid #e6e6e6;
  border-radius: 50px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #151415;
}

/*  슬라이드 영역 */
.imc__banner {
  padding-bottom: 80px;
}
.imc__banner .banner__content {
  padding: calc(20 * var(--vw-400)) calc(16 * var(--vw-400)) 0;
}
.imc__banner .banner__title {
  font-size: calc(26 * var(--vw-400));
  line-height: calc(34 * var(--vw-400));
  font-weight: 800;
}
.imc__banner .banner__desc {
  margin-top: calc(8 * var(--vw-400));
  font-size: calc(14 * var(--vw-400));
  line-height: calc(24 * var(--vw-400));
}
.imc__banner .banner__btns {
  margin-top: calc(20 * var(--vw-400));
  display: flex;
  gap: calc(8 * var(--vw-400));
}
.imc__banner .banner__btns .mainBtn {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 120px;
  height: 40px;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.imc__banner .swiper-pagination-bullets {
  z-index: 1;
  position: absolute;
  left: 0;
  top: calc(445 * calc(var(--vw-400)));
  bottom: initial;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.imc__banner .swiper-pagination-bullets .swiper-pagination-bullet {
  opacity: 0.3;
  width: calc(8 * var(--vw-400)) !important;
  height: calc(8 * var(--vw-400)) !important;
  margin: 0;
  border-radius: 50%;
  background-color: #fff;
}
.imc__banner .swiper-pagination-bullets .swiper-pagination-bullet-active {
  opacity: 1;
}

/* 스와이핑 배너 */
.imc__section--running {}
.imc__section--running .running__thumb {}
.imc__section--running .running__content {
  padding-top: calc(16 * var(--vw-400));
}
.imc__section--running .running__title {
  font-size: calc(22 * var(--vw-400));
  font-weight: 800;
  line-height: 1;
  min-height: calc(27 * var(--vw-400));
}
.imc__section--running .running__desc {
  min-height: calc(48 * var(--vw-400));
  font-size: calc(16 * var(--vw-400));
  line-height: 1.5;
  letter-spacing: -0.05em;
}
.imc__section--running .running__btns {
  margin-top: calc(20 * var(--vw-400));
}
.imc__section--running .swiper-container {
  padding: 0 calc(6 * var(--vw-400))
}
.imc__section--running .swiper-slide {
  width: calc(280 * var(--vw-400));
  margin: 0 10px;
}

.imc__section--purpose {}
.imc__section--purpose .purpose__thumb {}
.imc__section--purpose .purpose__content {
  margin-top: calc(14 * var(--vw-400));
}
.imc__section--purpose .purpose__title {
  font-size: calc(20 * var(--vw-400));
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.05em;
  min-height: calc(63 * var(--vw-400));
}
.imc__section--purpose .purpose__title .en {
  font-size: calc(22 * var(--vw-400));
  font-weight: 800;
  letter-spacing: 0;
}
.imc__section--purpose .purpose__info {
  min-height: calc(172 * var(--vw-400));
  margin-top: calc(24 * var(--vw-400));
  font-size: calc(16 * var(--vw-400));
  line-height: calc(18 * var(--vw-400));
  letter-spacing: calc(-0.8 * var(--vw-400));
}
.imc__section--purpose .purpose__info .en {
  font-size: calc(18 * var(--vw-400));
  letter-spacing: 0;
  line-height: calc(12 * var(--vw-400));
}
.imc__section--purpose .purpose__info .info__item {
  display: flex;
}
.imc__section--purpose .purpose__info .info__item.info__item--last {
  padding-top:calc(10 * var(--vw-400)) !important;
}
.imc__section--purpose .purpose__info .info__item.info__item--last .info__title,
.imc__section--purpose .purpose__info .info__item.info__item--last .info__desc {
  line-height: 1.5;
}
.imc__section--purpose .purpose__info .info__item:not(:first-of-type) {
  margin-top: calc(16 * var(--vw-400));
  padding-top: calc(16 * var(--vw-400));
  border-top: 1px solid #CBCBCB;
}
.imc__section--purpose .purpose__info .info__title {
  flex-shrink: 0;
  width: calc(90 * var(--vw-400));
  font-weight: 900;
  line-height: calc(12 * var(--vw-400));
}
.imc__section--purpose .purpose__info .info__desc {
  line-height: calc(12 * var(--vw-400));
}
.imc__section--purpose .purpose__info .info__desc.keep {
  white-space: nowrap;
}
.imc__section--purpose .purpose__btns {
  margin-top: calc(25 * var(--vw-400));
}
.imc__section--purpose .swiper-container {
  padding: 0 calc(6 * var(--vw-400));
}
.imc__section--purpose .swiper-slide {
  width: calc(280 * var(--vw-400));
  margin: 0 calc(10 * var(--vw-400));
}

.imc__section--quick {
  margin-bottom: calc(80 * var(--vw-400));
  background: url('https://image.nbkorea.com/NBRB_Mobile/event/imc/NBRunningGuide/sub_banner.jpg') no-repeat center center;
  background-size: cover;
  padding: calc(105 * var(--vw-400)) 0;
  color: #EEECE5;
  text-align: center;
}
.imc__section--quick.fb__color--black {
  color: #151415;
}
.imc__section--quick .quick__subTitle {
  font-size: calc(24 * var(--vw-400));
  font-weight: 900;
  letter-spacing: -0.05em;
}
.imc__section--quick .quick__subTitle .en {
  font-size: calc(26 * var(--vw-400));
  font-weight: 800;
  letter-spacing: 0;
}
.imc__section--quick .quick__title {
  font-size:calc(66 * var(--vw-400));
  font-family: 'ITCGaramondStd', sans-serif;
  line-height: calc(79 * var(--vw-400));
  letter-spacing: -0.01em;
}
.imc__section--quick .quick__desc {
  margin-top: calc(12 * var(--vw-400));
  font-size: calc(16 * var(--vw-400));
  line-height: calc(26 * var(--vw-400));
  letter-spacing: -0.05em;
}
.imc__section--quick .quick__desc b {
  font-weight: 700;
}
.imc__section--quick .quick__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(34 * var(--vw-400)) auto 0;
  width: calc(156 * var(--vw-400));
  height: calc(40 * var(--vw-400));
  background-color: #151415;
  border-radius: calc(5 * var(--vw-400));
  font-size: calc(14 * var(--vw-400));
  font-weight: 700;
  color: #FFFFFF !important;
}

/* 러닝화 상품 리뷰 */
.imc__section--review {}
.imc__section--review .review__btns {
  z-index: 1;
  position: absolute;
  bottom: 5.5%;
  left: 8.6%;
  display: flex;
  width: 70.2%;
  height: 7.5%;
  gap: 3.5%;
}
.imc__section--review .review__btn {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
}
.imc__section--review .swiper-container {
  padding: 0 calc(11 * var(--vw-400));
}
.imc__section--review .swiper-slide {
  width: calc(270 * var(--vw-400));
  margin: 0 calc(5 * var(--vw-400));
}

/* NB 러너 혜택 */
.imc__section--benefit .benefit__list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--vw-400));
  padding: 0 calc(16 * var(--vw-400));
}
.imc__section--benefit .benefit__item {
  position: relative;
}
.imc__section--benefit .benefit__btn {
  z-index: 1;
  position: absolute;
  left: 6.5%;
  top: 69.5%;
  width: 20.7%;
  height: 18.4%;
  font-size: 0;
}

/* 러닝 의류/용품 */
.imc__section--category {}
.imc__section--category .category__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(10 * var(--vw-400));
  padding: 0 calc(16 * var(--vw-400));
}
.imc__section--category .category__link {
  position: relative;
  display: block;
  border-radius: calc(8 * var(--vw-400));
  overflow: hidden;
  outline: none;
}
.imc__section--category .category__link::after {
  content: '';
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: opacity .5s ease-in-out;
}
.imc__section--category .category__link:focus::after {
  opacity: 0.3;
}
.imc__section--category .category__title {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: calc(18 * var(--vw-400));
  font-weight: 800;
  color: #fff;
  transform: translate(-50%, -50%);
}

.btn_top {right: 8px;}


/*****************************************************************************/


/*.imc_area .main_visual .img_box .swiper-slide .imc_btn_area a {width: auto;}*/
/*.imc_area .main_visual .swiper-pagination {top: calc(116.6666vw - 26px);}*/
/*!* 20230718 추가 :: E *!*/

/*!* 20240719 #18491 추가 :: S *!*/
/*!* 20241220 NB2024-2113 수정:: S *!*/
/*.imc_con + .imc_con {margin-top: 80px;}*/
/*.imc_con_tit {font-size: 22px;letter-spacing: -0.05em;color: #151415;font-weight: 900;padding: 0 15px 15px;}*/
/*.imc_con_txt{font-size: 12px;letter-spacing: -0.05em;color: #838A90;padding: 0px 15px 15px; position: relative; padding-left: 23px; margin-top:-5px;} !* 20240816 #19031 추가 *!*/
/*.imc_con_txt span{position:relative;}*/
/*.imc_con_txt span::before{content:''; display: inline-block; position:absolute;top:0px; left:-6px; width:4px; height:4px; background:#CF0A2C; border-radius: 50%; }*/

/*.imc_con.fadeArea{background-image: url(https://image.nbkorea.com/NBRB_Mobile/event/imc/nbrunning2023/fade_bg_250429.jpg);background-repeat: no-repeat;background-size: cover;background-position: 0 top;padding: 73px 15px ; color:#323A38;} !* 20240730 #18822 수정 *!*/
/*.imc_con.fadeArea .tit1{font-size: 22px;font-weight: 900;letter-spacing: -0.05em; text-align:center;}*/
/*.imc_con.fadeArea .tit1 span{font-size: 24px; font-weight: 800; }*/
/*.imc_con.fadeArea .tit2{font-family: 'ITCGaramondStd', sans-serif;font-size: 60px; text-align:center; letter-spacing: -0.01em;}*/
/*.imc_con.fadeArea .imc_txt {text-align: center; font-family: 'Noto Sans KR'; line-height: 24px; letter-spacing: -0.05em;}*/
/*.imc_con.fadeArea .imc_btn_area{justify-content: center;}*/
/*.imc_con.fadeArea .imc_btn_area .imc_btn{width:155px; padding:0;background: #323A38;color:#fff;}*/
/*.imc_txt{font-size: 16px;line-height: 28px;letter-spacing: -0.05em;padding: 10px 0 30px;}*/
/*.imc_txt b{font-weight: 700;}*/

/*!* 20241219 NB2024-2113 추가:: S *!*/
/*.main_visual .txt_box{padding:20px 15px 0; !*height:auto;*!}*/
/*.main_visual .txt_box > strong{font-size: 2.5rem; line-height: 30.45px; font-weight: 800;}*/
/*.main_visual .txt_box > p{margin-top:8px; height: auto; line-height: 19.45px;}*/
/*.main_visual .btn_wrap-main{margin-top:20px;}*/
/*.main_visual .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#fff !important; opacity: 1;}*/
/*.main_visual .swiper-pagination-bullet{background:#fff; width:8px !important; height:8px !important; border:0; border-radius: 50%; opacity: 0.3; margin:0 2.5px;}*/
/*.main_visual .img_box .swiper-slide .txt_box a.mainBtn{padding: 12px 0px; width:120px; box-sizing: border-box;}*/

/* 오프라인 착화 가능 매장 자세히보기 팝업 */
body.pop_on {overflow: hidden;}
.imc_pop {display: none;}
.imc_pop_bg {position: fixed; width: 100%; height:calc(var(--vh, 1vh) * 100) !important; max-height:calc(var(--vh, 1vh) * 100) !important; left: 0; top: 0; z-index: 55; overflow-y: auto; font-size: 0; background: #fff;}
.imc_pop_bg::before {content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle;}
.imc_pop_con {display: none; width: 100%; background: #fff; vertical-align: top;}
.imc_pop_con img {transform: translateY(100%);}
.pop_close {width: 100%; padding-top: 36.75%; background: url(https://image.nbkorea.com/NBRB_Mobile/event/imc/THE574DAY2024/btn_pop_close.png) center / 100% auto no-repeat; position: fixed; left: 0; bottom: 0; z-index: 55; opacity: 0;}
.btn_pop_close {display: block; width: 13.75%; height: 37.4149%; position: absolute; left: 43.125%; top: 42.1768%;}

.imc_pop.active {display: block;}
.imc_pop.active .imc_pop_bg {animation: popOpacity 0.8s cubic-bezier(0.3, 0, 0, 1) forwards;}
.imc_pop.active .pop_close {animation: popOpacity 0.8s 0.3s cubic-bezier(0.3, 0, 0, 1) forwards;}
.imc_pop_con.active {display: inline-block; animation: popOpacity 0.8s cubic-bezier(0.3, 0, 0, 1) forwards;}
.imc_pop_con.active img {animation: popTransform 0.5s cubic-bezier(0.3, 0, 0, 1) forwards; width:100%;}

@keyframes popOpacity {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes popTransform {
  0% {transform: translateY(100%); }
  100% {transform: translateY(0);}
}