@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));
}
/* 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: 16px;
  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/주요 혜택 */
.imc__section01 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.imc__section01 .section01__title {
  width: calc(458 * var(--vw));
  padding: calc(120 * var(--vw)) 0;
  position: relative;
}
.imc__section01 .section01__title .title__btn{
  position:absolute;
  top: 66%;
  left: 18.8%;
  width: 62.4%;
  height: 12.2%;
}
.imc__section01 [class*='section01__benefit'] {
  position:relative;
  width: calc(1000 * var(--vw));
  margin-bottom: calc(60 * var(--vw));
  height: calc(354 * var(--vw));
  overflow: hidden;
  transition: all 0.5s;
}

.imc__section01 .section01__benefit--01.on{
  height: calc(825 * var(--vw));
}
.imc__section01 .section01__benefit--02.on{
  height: calc(685 * var(--vw));
}
.imc__section01 .section01__benefit--02.on .benefit2_wrap .height{
  height: calc(685 * var(--vw));
}
.imc__section01 .section01__benefit--03.on{
  height: calc(535 * var(--vw));
}

.imc__section01 .section01__benefit--03 {
  padding-bottom: calc(120 * var(--vw));
}
.imc__section01 [class*='section01__benefit'] .section01__toggleBtn {
  position:absolute;
  left: 53%;
  width: calc(65* var(--vw));
  height: calc(20* var(--vw));

}
.imc__section01 .section01__benefit--01 .section01__toggleBtn {
  top: calc(335 * var(--vw));
}
.imc__section01 .section01__benefit--01 .section01__copyBtn {
  position: absolute;
  top: calc(296 * var(--vw));
  left: 2%;
  width: 8.5%;
  height: calc(34 * var(--vw));
}
.imc__section01 .section01__benefit--02 .benefit2_wrap{
  position: relative;
}
.imc__section01 .section01__benefit--02 .benefit2_wrap::after{
  content: '';
  clear: both;
  display: block;
}
.imc__section01 .section01__benefit--02 .benefit2_wrap .height,
.imc__section01 .section01__benefit--02 .benefit2_wrap > img{
  position: absolute;
}
.imc__section01 .section01__benefit--02 .benefit2_wrap > img{
  width: calc(470* var(--vw));
}
.imc__section01 .section01__benefit--02 .benefit2_wrap .height{
  height: calc(325* var(--vw));
  width: calc(1000 * var(--vw));
  overflow: hidden;
  transition: all 0.3s;
}
.imc__section01 .section01__toggleBtn .right{position:relative; width: 100%; height: inherit;}
.imc__section01 .section01__toggleBtn .right img{ position: absolute; top:50%; right: 0; width: calc(10 * var(--vw)) !important; transition:0.3s; transform: translateY(-50%);}
.imc__section01 .section01__toggleBtn .right img:last-child{opacity: 0!important; display: none }
.imc__section01 .section01__benefit--02 .section01__toggleBtn {
  top: calc(305 * var(--vw));
}

.imc__section01 .section01__benefit--03 .section01__toggleBtn {
  top: calc(325 * 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: 16px;
  font-weight: 700;
  line-height: 26px;
  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: 14px;
  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: 16px;
  font-weight: 700;
  line-height: 26px;
  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: 30px;
  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: 20px;
  letter-spacing: -0.05em;
  padding-bottom:calc(12 * var(--vw));
}
.section04__ranking .ranking__prod .prod__info .info__price{
  font-size: 22px;
  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: 20px;
}
.section04__ranking .ranking__prod .prod__thumb{
  width:calc(120 * var(--vw));
  height: calc(120 * var(--vw));
}