/* BASIC css start */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}



* {font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic', sans-serif;}

#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }
.comm-w {width:1244px; margin:0 auto;}

/* 상단 띠배너 */
.top_evt_banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: black;
  z-index: 10000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_evt_banner .in_b {
  position: relative;
  height: 50px;
  overflow: hidden;
}

.sliding-texts {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}

.banner_link {
  display: block;
  height: 50px;
  line-height: 50px;
  color: white;
  text-decoration: none;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 16px;
}

@keyframes slideTexts {
  0%   { transform: translateY(0); }
  33%  { transform: translateY(0); }        /* 첫 문구 3초 정지 */
  40%  { transform: translateY(-50px); }    /* 슬라이딩 0.6초 */
  73%  { transform: translateY(-50px); }   /* 두 번째 문구 3초 정지 */
  80%  { transform: translateY(-100px); }   /* 슬라이딩 0.6초 */
  100% { transform: translateY(-100px); }   /* 세 번째 문구 3초 정지 (애니메이션 루프) */
}

/* header */
#header {position:relative;}
#header .hd-f {   -khtml-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease; }
#header .hd-f.fixed {
  top: 50px !important; /* 배너 높이와 일치 */
}
#header .hd-top, 
#header .hd-f,
#header .hd-search,
.top-right ul li {
  position: relative;
  z-index: 1001; /* 검색창, 로그인 등도 헤더 내부므로 높게 지정 */
}
#header .hd-f.fixed .logo {padding:20px 0 23px; width:125px;}
#header .hd-wrap .hd-top { position:relative; padding-top:12px; }
#header .hd-wrap .hd-top .top-left { float:left; }
#header .hd-wrap .hd-top .top-left ul {font-size:0; letter-spacing:0; word-spacing:0;}
#header .hd-wrap .hd-top .top-left ul li {display:inline-block;zoom:1;*display:inline;_display:inline;}
#header .hd-wrap .hd-top .top-left ul li span > a { color:#737373; font-size:14px; line-height:14px;}
#header .hd-wrap .hd-top .top-left ul li.favo {padding-right:20px;}
#header .hd-wrap .hd-top .top-left ul li.favo > a {font-family: 'Montserrat', sans-serif;}
#header .hd-wrap .hd-top .top-left ul li.favo > a > span {padding-right:6px;}
#header .hd-wrap .hd-top .top-left ul li.fabook {margin-right:15px;}
#header .hd-wrap .hd-top .top-left ul li.insta > a {font-size:17px; line-height:17px;}
#header .hd-wrap .hd-top .top-right { float:right }
#header .hd-wrap .hd-top .top-right ul {font-size:0; letter-spacing:0; word-spacing:0;}
#header .hd-wrap .hd-top .top-right ul li {display:inline-block;zoom:1;*display:inline;_display:inline;}
#header .hd-wrap .hd-top .top-right ul li a {color:#737373; padding:0 16px; border-right:1px solid #e7e7e7; font-size:13px; line-height:13px;}
#header .hd-wrap .hd-top .top-right ul li.login > a {border-right:0px; padding-right:0px;}

#header .logo { width:166px; margin:0 auto; padding:7px 0 31px; text-align:center;-khtml-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;}
#header .logo a img {width:100%; height:auto;}


#hdWrap #header .hd-search { position: relative; z-index: 200; right:0; top:5px; width:180px; border-bottom: 1px solid #ddd;}
#hdWrap #header .hd-search .input-keyword { float:left; border:none; width: 160px; padding:3px 0 0 2px;}
#hdWrap #header .hd-search input { vertical-align:middle; }
#hdWrap #header .MS_search_word {width: 200px;height: 29px;}

/* category */

.hd-cate {border-top:1px solid #fdfdfd; border-bottom:1px solid #fdfdfd;}
.hd-cate .cate-wrap {width:900px; margin:0 auto;  display: flex;  justify-content: center;}
.hd-cate .cate-wrap > ul {font-size:0; letter-spacing:0; word-spacing:0;}
.hd-cate .cate-wrap > ul > li {position: relative;  display:inline-block; margin:0 22px; vertical-align: top;  text-align:center; }
/*
.hd-cate .cate-wrap > ul > li:nth-child(2) {width:20%;}
.hd-cate .cate-wrap > ul > li:nth-child(3) {width:20%;}
.hd-cate .cate-wrap > ul > li:nth-child(5) {width:20%;}
.hd-cate .cate-wrap > ul > li:nth-child(6) {width:20%;}
 */
.hd-cate .cate-wrap > ul > li:hover > a { color:#f04b3c }
.hd-cate .cate-wrap > ul > li > a {display:block; padding:16px 0; font-size: 14px; font-weight: 500; color: #000;}
.hd-cate .cate-wrap > ul > li > ul.sub-cate {display:none; position: absolute;top: 50px;left: 50%; margin-left:-86.5px; background: #fff; padding: 20px 0px; z-index:99; width:173px; border:1px solid #fff; box-sizing:border-box; text-align:center;}
.hd-cate .cate-wrap > ul > li > ul.sub-cate > li {padding:11px 0px;}
.hd-cate .cate-wrap > ul > li:hover > ul.sub-cate {
  display: block;
  z-index: 11000;}
.hd-cate .cate-wrap > ul > li > ul.sub-cate > li > a {display: block; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight:400; color: #313131;}
.hd-cate .cate-wrap > ul > li > ul.sub-cate > li > a:hover {opacity:0.6;}
.hd-cate .cate-wrap > ul > li.cart .pushcount {display: inline-block;min-width: 18px; ;min-height: 18px; line-height: 18px; background-color: #f04b3c;color: #fff; font-size: 13px; border-radius: 10px; text-align: center;}


/** 카테고리말풍선 **/
.speechbubble-sale {
    position: absolute;
    top: -20px; /* 필요 시 -15px 등으로 조절 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #22355e;
    color: #ffffff;
    font-size: 15px;

    padding: 4px 12px;
    border-radius: 15px;
    white-space: nowrap;
    z-index: 10;
    
}

.speechbubble-sale::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #22355e transparent transparent transparent;
}

/* 말풍선 흔들림 keyframes */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}


/* 회원가입 말풍선 */
li {
  position: relative; /* 부모 요소 위치 기준 설정 */
}

.speechbubble {
  position: absolute;
  bottom: -28px;             
  left: 50%;
  transform: translateX(-50%);
  background-color: #fae100;
  color: black;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  z-index: 10;

  animation: floatUpDown 2s ease-in-out infinite;
}

/* 말풍선 꼬리 */
.speechbubble::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #fae100;
}

/* 위아래 움직이는 키프레임 */
@keyframes floatUpDown {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(6px);
  }
}


/** 우측 최근본 상품 **/
.fakeload{ width: 100%; height: 100%; display: block;position: fixed;background: #fff;z-index: 99999;}

.scroll_list_wrap{position: absolute; z-index: 11; top: 330px;left: 50%;margin: 0 0 0 650px;text-align: center;width:105px;overflow:hidden;}
.scroll_list_wrap .scroll_inn {border: 1px solid #d9d9d9;width:105px;overflow:hidden;}
.scroll_list_wrap div.top_bottom_wrap { background:#f3f3f3;}
.scroll_list_wrap div.top_bottom_wrap > a{display: block;width:87px;height: 36px; line-height: 36px; text-align: left;padding-left: 16px; border-top: 1px solid #d9d9d9;cursor: pointer; font-size:12px; color:#000;font-family: 'Montserrat', sans-serif;}
.scroll_list_wrap #today .title{font-size:13px; color:#252525;}
.scroll_list_wrap #today li{margin-top: 10px;}
.scroll_list_wrap #today li img{width: 73px;}
#todayWrap{width:0;overflow:hidden;}
.top_btn {background:url(/design/iblank/wib/img/common/scroll_top.png)no-repeat 75px center; background-size:12px 6px;}
.bottom_btn {background:url(/design/iblank/wib/img/common/scroll_bottom.png)no-repeat 75px center; background-size:12px 6px;}




/* custom */
#header .MS_search_word{border:1px solid #737373;}


/* BASIC css end */