@charset "utf-8";
/* 
  네이밍 기법 : 카멜 기법
*/

/* variables
$사용 예시
#wrap .event_wrap {
  --evNaviHeight: 105;
  --evNaviFontSize: 25;
  --evNaviLineColor: #80AF10;
  --evDriftOffsetY: 7%;
}

$네비탭(evNavi, evtNavi)
네비탭 버튼 높이 : --evNaviHeight
네비탭 버튼 폰트 사이즈 : --evNaviFontSize
네비탭 버튼 강조 폰트 사이즈 : --evNaviEmFontSize
네비탭 버튼 선택 라인색 : --evNaviLineColor

$keyframes - evDrift
X축 이동 : evDriftOffsetX
Y축 이동 : evDriftOffsetY
시작 각도 : evDriftDegStart
종료 각도 : evDriftDegEnd
//variables */

html {
  scroll-behavior: smooth;
}

.eve_detail {
  width: 100% !important;
  max-width: 750px !important;
}

.eveCont {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.eveCont .hide {
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  color: transparent;
}

.eveCont .eventLink {
  position: absolute;
  left: 50%;
  font-size: 0;
  color: transparent;
  text-decoration: none;
  cursor: pointer;
  transform: translateX(-50%);
}

.eveCont .eventLink.btnMO {
  display: none;
}

.eveCont img {
  vertical-align: top;
  width: 100%;
}

.eveCont *[class^=obj] {
  position: absolute;
}

/* 네비게이션 s */
.evtNavi {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  background-color: #464646;
  z-index: 3;
  gap: 1px;
  top: 0;
}

.evtNavi.fixed {
  width: 750px;
  top: 80px;
  position: fixed;
}

.evtNavi button {
  height: calc(var(--evNaviHeight, 100) * 1px);
  flex-basis: calc((100% / 3) - 2px);
  flex-grow: 1;
  flex-shrink: 0;
  font-weight: 600;
  font-size: calc((var(--evNaviFontSize, 26)) * 1px);
  line-height: 130%;
  text-align: center;
  color: #fff;
  background-color: #000;
}

.evtNavi button.on {
  color: #000;
  background-color: #fff;
}

.mo .evtNavi {
  width: 100%;
  top: 5.8rem;
}

.mo .evtNavi.fixed {
  width: 100%;
}

.mo .evtNavi button {
  height: calc((var(--evNaviHeight, 100)) / 2 * .1rem);
  font-size: calc((var(--evNaviFontSize, 24)) / 2 * .1rem);
  line-height: 2rem;
  border: 0.05rem solid #464646;
}

.mo .evtNavi button.on {
  border-color: #fff;
}

/* 네비게이션 e */

/* 라인 네비게이션 */
.evtNavi.line::-webkit-scrollbar {
  display: none;
}

.evtNavi.line {
  display: block;
  padding: 0 4px;
  background-color: #181818;
  overflow: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.evtNavi.line .inner {
  display: flex;
  flex-wrap: nowrap;
}

.evtNavi.line button {
  position: relative;
  flex: 1;
  height: calc(var(--evNaviHeight, 100) * 1px);
  background-color: #181818;
  border: 0 !important;
  font-size: calc(var(--evNaviFontSize, 24) * 1px);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  padding: 0 16px;
  white-space: nowrap;
  letter-spacing: 0;
}

.evtNavi button em,
.evtNavi.line button em {
  font-size: calc(var(--evNaviEmFontSize, 28) * 1px);
  font-weight: 700;
}

.evtNavi.line button.on {
  background-color: #181818;
  color: rgba(255, 255, 255, 0.8);
}

.evtNavi.line button.on em {
  color: rgba(255, 255, 255, 1);
}

.evtNavi.line button.on em:after {
  content: "";
  position: absolute;
  width: calc(100% - 40px);
  height: 6px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--evNaviLineColor, #00bc70);
}

.mo .evtNavi.line button {
  height: calc((var(--evNaviHeight, 100)) / 2 * .1rem);
  font-size: calc((var(--evNaviFontSize, 24)) / 2 * .1rem);
  line-height: 130%;
  padding: 0 0.8rem;
}

.mo .evtNavi button em,
.mo .evtNavi.line button em {
  font-size: calc((var(--evNaviEmFontSize, 28)) / 2 * .1rem);
}

.mo .evtNavi.line button em:after {
  height: 0.3rem;
  width: calc(100% - 1.6rem);
}

/* //라인 네비게이션 */

/* popup */
.eveCont .popupWrap {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.eveCont .popupWrap.on {
  display: flex;
}

.eveCont .popupWrap .popup {
  max-width: 335px;
  width: 90%;
  position: relative;
  background-color: #fff;
}

.eveCont .popupWrap .popup .content {
  padding: 9.01% 6.307%;
  color: #3c3c3c;
  letter-spacing: -1px;
}

.eveCont .popupWrap .popup .content .tit {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.6px;
}

.eveCont .popupWrap .popup .content dl {
  margin: 16px 0 10%;
  font-size: 28px;
  line-height: 140%;
}

.eveCont .popupWrap .popup .content dt {
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 100%;
  border-left: 3px solid #3c3c3c;
  padding-left: 10px;
}

.eveCont .popupWrap .popup .content .imgBox img {
  display: block;
  width: 63.5%;
  margin: 0 auto;
}

.eveCont .popupWrap .popup .btnClose {
  width: 100%;
  height: 60px;
  background-color: #11b561;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  display: flex;
}

.eveCont .popupWrap .popup .btnClose:after {
  content: "";
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  display: inline-block;
  height: 12px;
  margin-left: 5px;
  transform: rotate(135deg);
  width: 12px;
}

.mo .eveCont .popupWrap .popup .btnClose {
  height: 6rem;
  font-size: 1.6rem;
}

.mo .eveCont .popupWrap .popup .btnClose:after {
  height: 9px;
  width: 9px;
}

/* //popup */

/* 
  mo 
*/
.mo .eveCont .eventLink.btnPC,
.mo .eveCont .btnPopup {
  display: none;
}

.mo .eveCont .eventLink.btnMO {
  display: block;
}

/* 
  keyframes 
*/
@keyframes evDrift {

  0%,
  100% {
    transform: rotate(var(--evDriftDegStart, 0)) translate(0, 0);
  }

  50% {
    transform: rotate(var(--evDriftDegEnd, 0)) translate(var(--evDriftOffsetX, 0), var(--evDriftOffsetY, -2%));
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 
  FRONT(제품간 간격, 쿠폰 간격 등)
*/
.event_wrap div[id*="prd"].box+.box {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


.event_wrap div[id*="prd"].box + .box .list_wrap .goods_list,
.mo .event_wrap div[id*="prd"].box + .box .list_wrap .goods_list,
.mo .event_wrap div[id*="prd"].box  + .box .swiper_wrap {
  margin-top: 0;
}

/*
 .mo .event_wrap div[id*="prd"].box {
  padding-top: 1rem !important;
} */

.event_wrap div[id*="prd"].box .btn_wrap button.btn_outline {
  background-color: #fff !important;
}