@charset "utf-8";

/*
* vw 단위 사용법
* 80px => calc(80 * var(--vw));
*/
/* 공통 */
[class*="imc__section"] {
  position: relative;
}
.imc__roll .swiper-wrapper{align-items: center; transition-timing-function: linear}
.imc__roll .swiper-wrapper .swiper-slide {
  width:calc(1778 * var(--vw));
}
.con__wrap{
  display: flex;
  width:calc(1450 * var(--vw));
  column-gap: calc(20 * var(--vw));
  margin: 0 auto;
}
.con__wrap .copyBtn{position: absolute; display: block; width: calc(90 * var(--vw)); height: calc(36 * var(--vw)); left: calc(18 * var(--vw)); top: calc(295 * var(--vw)); }
.imc__con{position: relative;}
.imc__con::after{
  display: block;
  content:"";
  clear: both;
}
.imc__con > img{width: auto; margin: calc(120 * var(--vw)) auto calc(60 * var(--vw));}
.imc__con.kv > img{margin: 0;}
.jsDetailInfoToggle {position: relative; width:calc(470 * var(--vw));}
.jsDetailInfoToggle > .jsDetailInfoToggleBtn{display:flex; width: calc(65 * var(--vw));height: calc(20 * var(--vw)); position: absolute;top: calc(550 * var(--vw)); left: 0;}

.jsDetailInfoToggle > .jsDetailInfoToggleBtn .right{position:relative; width: 100%; height: inherit;}
.jsDetailInfoToggle > .jsDetailInfoToggleBtn .right img{ position: absolute; top:59%; right: 0; width: calc(10 * var(--vw)); transition:0.3s; transform: translateY(-50%);}
.jsDetailInfoToggle > .jsDetailInfoToggleBtn .right img:last-child{opacity: 0;}

.jsDetailInfoToggle > .jsBenefitTxt{display: block; width: 100%; height: 0; margin-top: calc(20 * var(--vw)); transition:0.3s; overflow: hidden;  }
.jsDetailInfoToggle > .jsBenefitTxt img{width: initial;}
.jsDetailInfoToggle.benefit01 > .jsBenefitTxt.on{height:calc(135 * var(--vw)) ;}
.jsDetailInfoToggle.benefit02 > .jsBenefitTxt.on{height:calc(346 * var(--vw)) ;}
.jsDetailInfoToggle.benefit03 > .jsBenefitTxt.on{height:calc(42 * var(--vw)) ;}

.jsDetailInfoToggle.benefit01 > .jsBenefitTxt img{width:calc(383 * var(--vw)) ;}
.jsDetailInfoToggle.benefit02 > .jsBenefitTxt img{width:calc(439 * var(--vw)) ;}
.jsDetailInfoToggle.benefit03 > .jsBenefitTxt img{width:calc(266 * var(--vw)) ;}
/* smoothTabMotion :: S */
.tabBar__Container {
  background: #e8e8e8;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 106px;
  z-index: 11;
}
.tabBar__Container .tabBar__title {
  font-family: "Noto Sans KR", sans-serif;
  width: 25%;
  height: 50px;
  color: #8a8a8a;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  letter-spacing: -0.05em;
  justify-content: center;
  align-items: center;
  /*transition: 0.5s;*/
}
.tabBar__Container .tabBar__title span {
  font-family: "ProximaNova", sans-serif;
  font-size: calc(16 * var(--vw));
  letter-spacing: 0;
  font-weight: 800;
  padding-right:calc(5 * var(--vw));
  margin-top:1px;
}
.tabBar__Container .tabBar__title.on {
  color: #000;
  background:#fa149e;
}
.tabBar__Container .line {
  width: 25%;
  height: calc(4 * var(--vw));
  background: #000;
  transition: 0.5s;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 11;
}

/* smoothTabMotion :: E */

/* section01/주요 혜택 */
.members__section--benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: calc(120 * var(--vw));
}

/* Title Area */
.members__section--benefit .section__title-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--vw));
  text-align: center;
}

.members__section--benefit .section__title-area .title__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(281 * var(--vw));
  height: calc(60 * var(--vw));
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #3AFBCC;
  background: #151415;
  border-radius: 6.25px;
  margin-top: calc(40 * var(--vw));
}

.members__section--benefit .section__title {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 900;
  font-size: calc(40 * var(--vw));
  line-height: calc(56 * var(--vw));
  letter-spacing: -0.05em;
  color: #151414;
}

.members__section--benefit .section__date {
  font-family: "ProximaNova", sans-serif;
  font-weight: 800;
  font-size: calc(26 * var(--vw));
  line-height: calc(38 * var(--vw));
  color: #FA149E;
}
.members__section--benefit .section__date .dash {
  letter-spacing: calc(-2.08 * var(--vw));
}

.members__section--benefit .section__desc {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: calc(24 * var(--vw));
  line-height: calc(38 * var(--vw));
  letter-spacing: calc(-1.2 * var(--vw));
  color: #151414;
}
.members__section--benefit .section__desc .en{
  font-family: "ProximaNova", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  font-size: calc(26 * var(--vw));
}

/* Benefit Card List */
.members__section--benefit .benefit__list {
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--vw));
  width: calc(1450 * var(--vw));
  margin: calc(120 * var(--vw)) auto 0;
}

.members__section--benefit .benefit__list > li {
  width: calc(470 * var(--vw));
  flex-shrink: 0;
}

/* Benefit Thumbnail / Image Area */
.members__section--benefit .benefit__thumb {
  width: calc(470 * var(--vw));
  height: calc(350 * var(--vw));
  border-radius: calc(10 * var(--vw));
  overflow: hidden;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 66% 0%, #82FFE1 0%, #EEEEEE 100%);
}

.members__section--benefit .benefit__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.members__section--benefit .benefit__thumb .section01__copyBtn {
  position: absolute;
  left: calc(20 * var(--vw));
  bottom: calc(20 * var(--vw));
  width: calc(86 * var(--vw));
  height: calc(34 * var(--vw));
}

/* Benefit Label Badge */
.members__section--benefit .benefit__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FA149E;
  color: #fff;
  font-weight: 800;
  font-size: calc(14 * var(--vw));
  line-height: calc(26 * var(--vw));
  padding: 0 calc(6 * var(--vw));
  margin-top: calc(24 * var(--vw));
}

/* Benefit Title */
.members__section--benefit .benefit__title {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: calc(26 * var(--vw));
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: #151414;
  margin-top: calc(12 * var(--vw));
}

/* Benefit Description */
.members__section--benefit .benefit__desc {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--vw));
  line-height: calc(28 * var(--vw));
  letter-spacing: -0.05em;
  color: #151414;
  margin-top: calc(20 * var(--vw));
}

.members__section--benefit .benefit__desc .font--en {
  font-family: "ProximaNova", sans-serif;
}

.members__section--benefit .benefit__desc b.font--en {
  font-weight: 700;
  font-size: calc(20 * var(--vw));
}

.members__section--benefit .benefit__desc span.font--en {
  font-family: "ProximaNova", sans-serif;
  font-size: calc(20 * var(--vw));
}

/* Benefit More Button (Accordion Toggle) */
.members__section--benefit .benefit__more-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--vw));
  margin-top: calc(20 * var(--vw));
  font-weight: 700;
  font-size: calc(14 * var(--vw));
  color: #737B82;
  letter-spacing: -0.05em;
}

.members__section--benefit .benefit__more-btn::after {
  content: '';
  display: inline-block;
  width: calc(10 * var(--vw));
  height: calc(7 * var(--vw));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M0.557495 5.75L5.0575 0.75L9.5575 5.75' stroke='%23737B82' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center / contain;
  transform: rotate(180deg);
}

.members__section--benefit .benefit__more-btn.on::after {
  transform: rotate(0deg);
}

.members__section--benefit .benefit__detail {
  max-height: 0;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--vw));
  line-height: calc(20 * var(--vw));
  letter-spacing: calc(-0.7 * var(--vw));
  color: #737B82;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.members__section--benefit .benefit__detail.on {
  max-height: calc(1000 * var(--vw));
}
.members__section--benefit .benefit__detail .font--num {
  font-family: "Proxima Nova";
  font-size: calc(15 * var(--vw));
  letter-spacing: 0;
}
.members__section--benefit .benefit__detail .font--en {
  font-family: "Proxima Nova";
  font-size: calc(16 * var(--vw));
  letter-spacing: 0;
}
.members__section--benefit .benefit__detail b {
  font-weight: 700;
}
.members__section--benefit .benefit__detail .sub {
  padding-left: calc(62 * var(--vw));
}
.members__section--benefit .benefit__detail .point {
  color: #CF0A2C;
}
.members__section--benefit .benefit__detail .point .grey {
  color: #737B82;
}
.members__section--benefit .benefit__notice {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--vw));
  padding-top: calc(12 * var(--vw));
}
.members__section--benefit .benefit__notice > li {
  position: relative;
  padding-left: calc(7 * var(--vw));
}
.members__section--benefit .benefit__notice > li:before {
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
}
.members__section--benefit .benefit__detail .thumb {
  width: calc(368 * var(--vw));
  margin-top: calc(20 * var(--vw));
}
/* 20260105 #9001 수정 :: S */

.mega_banner {
}

.title {
  width: calc(552 * var(--vw)) !important;
  margin: calc(120 * var(--vw)) auto calc(60 * var(--vw)) !important;
}

.tab_bar.title {
  width: calc(301 * var(--vw)) !important;
  margin: calc(120 * var(--vw)) auto calc(60 * var(--vw));
}

/* section02/MD 추천 상품*/
.imc__section02 {
  padding-bottom:calc(120 * var(--vw));
}
.imc__section02 .section02__title {
 font-size: calc(44 * var(--vw));
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
  padding:calc(120 * var(--vw)) 0 calc(40 * var(--vw));
}
.imc__section02 .section02__title .kor {
  font-size: calc(40 * var(--vw));
  line-height: 1.4;
  letter-spacing: -0.05em;
  font-weight: 900;
}
.section02__tabMenu {
  width:100%;
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--vw));
  margin-bottom: calc(60 * var(--vw));
}
.section02__tabMenu .tab__Btn {
  display: flex;
  font-family: "Noto Sans KR", sans-serif;
  padding:calc(14 * var(--vw)) calc(26 * var(--vw)) calc(17 * var(--vw));
  height: calc(40 * var(--vw));
  background: #e8e8e8;
  color: #8a8a8a;
  justify-content: center;
  align-items: center;
  border-radius: calc(20 * var(--vw));
  font-size: calc(16 * var(--vw));
  font-weight: 700;
  line-height: calc(26 * var(--vw));
  letter-spacing: -0.05em;
}
.section02__tabMenu .tab__Btn.on{
  background:#3afbcc;
  color:#151415;
}
.imc__section02 .section02__mdProd {
  width:calc(1230 * var(--vw));
  margin:0 auto;
}
.imc__section02 .section02__mdProd .mdProd__btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: calc(20 * var(--vw));
  color: #737B82;
  letter-spacing: -0.05em;
  font-size: calc(14 * var(--vw));
  font-weight: 700;
  gap: calc(5 * var(--vw));
  line-height: 1;
}
.imc__section02 .section02__mdProd .mdProd__btn img {
  width:auto;
  height: calc(10 * var(--vw));
}
.imc__section02 .section02__mdProd .mdProdContent{
  display: flex;
  flex-wrap: wrap;
  gap:calc(20 * var(--vw));
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap{
  width:calc(230 * var(--vw));
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap:nth-child(n+6){
  margin-top:calc(20 * var(--vw));
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap .info__displayName {
  margin-bottom: calc(5 * var(--vw));
  margin-top: calc(12 * var(--vw));
  font-size: calc(18 * var(--vw));
  min-height: calc(28 * var(--vw));
  letter-spacing: -0.05em;
  width:calc(210 * var(--vw));
  display: -webkit-box;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.4;
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap .info__norPrice {
  margin-top: calc(2 * var(--vw));
  font-size: calc(18 * var(--vw));
  line-height: 1;
  height: calc(23 * var(--vw));
  text-decoration-line: line-through;
  color: #ABB0B4;
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap .info__norPrice .kor {
  font-size: calc(16 * var(--vw));
  letter-spacing: -0.05em;
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap .info__price {
  height: calc(26 * var(--vw));
  line-height: 1;
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  line-height: 1;
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap .info__price .price__discount {
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  color: #CF0A2C;
  padding-right:calc(10 * var(--vw));
}
.imc__section02 .section02__mdProd .mdProdContent .mdProd__wrap .info__price .kor {
  font-size: calc(18 * var(--vw));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}


/* section03/할인율 */
.imc__section03 .section03__cardWrap {
  position:absolute;
  top: calc(294 * var(--vw));
  width:100%;
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--vw));
}
.imc__section03 .section03__cardWrap [class*="section03__card"] {
  position:relative;
  width:calc(264 * var(--vw));
  transition:0.5s;
}
.imc__section03 .section03__cardWrap [class*="section03__card"]:nth-child(even):hover{
  transform:rotate(8deg);
}
.imc__section03 .section03__cardWrap [class*="section03__card"]:nth-child(odd):hover{
  transform:rotate(-8deg);
}

/* section04/BEST 랭킹 */
.section04__tabMenu {
  position:absolute;
  top:calc(216 * var(--vw));
  width:100%;
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--vw));
}
.section04__tabMenu .tab__Btn {
  display: flex;
  font-family: "Noto Sans KR", sans-serif;
  padding:calc(14 * var(--vw)) calc(26 * var(--vw)) calc(17 * var(--vw));
  height: calc(40 * var(--vw));
  background: #e8e8e8;
  color: #8a8a8a;
  justify-content: center;
  align-items: center;
  border-radius: calc(20 * var(--vw));
  font-size: calc(16 * var(--vw));
  font-weight: 700;
  line-height: calc(26 * var(--vw));
  letter-spacing: -0.05em;
}
.section04__tabMenu .tab__Btn.on{
  background:#3afbcc;
  color:#151415;
}
.section04__ranking {
  position: absolute;
  top: calc(316 * var(--vw));
  left:50%;
  transform:translateX(-50%);
  width:calc(1420 * var(--vw));
  margin:0 auto;
}
.section04__ranking .rankingContent {
  display: none;
  gap: 0 calc(20 * var(--vw));
  grid-auto-rows: min-content;
  grid-auto-columns: calc(33.3333% - 3.33333px);
  grid-template-rows: repeat(4, minmax(0px, auto));
  grid-auto-flow: column;
}
.section04__ranking .rankingContent.on{
  display: grid;
}
.section04__ranking .ranking__wrap {
  padding: calc(10 * var(--vw)) 0;
  border-bottom:1px solid #e8e8e8;
}
.section04__ranking .ranking__wrap:nth-child(4n) {
  border:0;
}
.section04__ranking .ranking__wrap a{
  display: flex;
  align-items: center;
  gap:calc(30 * var(--vw));
}
.section04__ranking .ranking__wrap .ranking__number{
  font-family: "ProximaNova", sans-serif;
  font-size: calc(30 * var(--vw));
  font-weight: 800;
  width:calc(40 * var(--vw));
}
.section04__ranking .ranking__prod{
  display: flex;
  align-items: center;
  gap:calc(30 * var(--vw));
}
.section04__ranking .ranking__prod .prod__info {
  width: calc(220 * var(--vw));
}
.section04__ranking .ranking__prod .prod__info .info__displayName{
  font-size: calc(20 * var(--vw));
  letter-spacing: -0.05em;
  padding-bottom:calc(12 * var(--vw));
}
.section04__ranking .ranking__prod .prod__info .info__price{
  font-size: calc(22 * var(--vw));
  font-weight: 700;
  color:#151415;
  line-height: 1;
}
.section04__ranking .ranking__prod .prod__info .info__price .price__discount{
  color:#cf0a2c;
}
.section04__ranking .ranking__prod .prod__info .info__price .kor{
  font-size: calc(20 * var(--vw));
}
.section04__ranking .ranking__prod .prod__thumb{
  width:calc(120 * var(--vw));
  height: calc(120 * var(--vw));
}