/* BASIC css start */
#ftWrap {margin:0 !important; border-top:none !important; }
.item-wrap {overflow: visible; max-width:1440px;padding: 32px 0 0 0;margin: 0 auto;min-width: 1200px;}

/* ¸ÞÀÎ ·Ñ¸µ ¹è³Ê */
.sliderWrap {position:relative;max-width:1440px;min-width:1200px;height: 645px;margin:0 auto;overflow:hidden;}
.sliderWrap .sliderArea {position:absolute;top:0;left:0;width:1110px;}
.sliderArea .bx-pager{position:absolute;bottom: 20px;left:0;right:0;z-index:60;text-align:center; font-size:20px; }
.sliderArea .bx-pager-item{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;display:inline-block;position:relative;}
.sliderArea .bx-pager-link{display:inline-block;width: 10px;height: 10px;font-size:0;margin: 0 5px;background-color: transparent;border:2px solid #fff;border-radius: 10px;}
.sliderArea .bx-pager-link.active{background-color: #fff;}
.sliderArea .bx-controls-direction {position:absolute;top:52%;z-index:60;text-align:center;width: 100%; opacity:0;}
.sliderArea:hover .bx-controls-direction { transition:all 0.3s ease;-webkit-transition:all 0.3s ease; opacity:1; }
.sliderArea .bx-prev, .sliderArea .bx-next{position:absolute;top:0;text-align:center;margin-top:-30px;font-size: 36px;display:inline-block;width:32px;height:32px;line-height: 33px;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;color:#fff;opacity:0.5;}
.sliderArea .bx-prev{left: 2%; }
.sliderArea .bx-next{right: 2%; }
.sliderArea .bx-controls-direction a.bx-prev:hover, .sliderArea .bx-controls-direction a.bx-next:hover {color:#fff;opacity:1;}
.sliderWrap .subBan01 {position:absolute;top:0;right:0;width:310px; display:block; overflow:hidden}
.sliderWrap .subBan02 {position:absolute;bottom:0;right:0;width:310px; display:block; overflow:hidden}
.sliderWrap .subBan01 img, 
.sliderWrap .subBan02 img { -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
.sliderWrap .subBan01:hover img,
.sliderWrap .subBan02:hover img { -webkit-transform: scale(1.15);transform: scale(1.15) }

/* »óÇ° ŸÀÌƲ */
.h_title h3 { color:#2e2e2e; font-size:32px;text-align:center;font-weight:500; }

/* tabProduct */
#tabProduct {/*visibility:hidden;*/position:relative;width:100%; margin:120px auto;}
#tabProduct .newCate_prod { position:relative }
#tabProduct .newCate_prod .newCateTab {/*zoom: 1;overflow: hidden;*/ text-align:center; z-index:90; }
#tabProduct .newCate_prod .newCateTab li{ display:inline-block;}
#tabProduct .newCate_prod .newCateTab li a {display:block;height: 34px;font-size:20px;line-height: 34px; color:#8d8c8c;margin:0 18px 40px; }
#tabProduct .newCate_prod .newCateTab li a:hover,
#tabProduct .newCate_prod .newCateTab li a.active { border-bottom:2px solid #2c2c2c;font-weight:500;color:#2c2c2c;}

/* MD'S PICK  ·Ñ¸µ»óÇ°Áø¿­ */


.mdArea { max-width:1440px; min-width:1200px; margin:150px auto 0; }
<style>
  .mdPickWrap {
    width: 100%;
    max-width: 1400px;
    margin: 80px auto 100px;
    text-align: center;
  }
  .mdPickWrap .ttl {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;   
  }
  .mdPickList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 0;
    list-style: none;
  }
  .mdPickList li {
    width: calc(20% - 20px);
    box-sizing: border-box;
  }
  .mdPickList li a {
    display: block;
    text-decoration: none;
    color: #222;
  }
  .mdPickList .thumb {
    position: relative;
    overflow: hidden;
  }
  .mdPickList .thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }
  .mdPickList .thumb:hover img {
    transform: scale(1.05);
  }
  .mdPickList .prd-preview {
    display: none;
  }
  .mdPickList .prd-info {
    margin-top: 10px;
  }
  .mdPickList .prd-name {
    font-size: 16px;
    line-height: 1.4;
    margin: 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mdPickList .prd-subname {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
  }
  .mdPickList .prd-price {
    font-size: 15px;
    color: #111;
  }
  .mdPickList .prd-price del {
    color: #aaa;
    font-size: 13px;
    margin-right: 5px;
  }
  .mdPickList .prd-price .red {
    color: #c0392b;
    font-weight: 600;
    margin-right: 3px;
  }
 .mdPickWrap + .mdArea {
    margin-top: 500px;
  }

  /* ¹ÝÀÀÇü */
  @media (max-width: 1024px) {
    .mdPickList li { width: calc(25% - 15px); }
  }
  @media (max-width: 768px) {
    .mdPickList li { width: calc(33.333% - 10px); }
  }
  @media (max-width: 480px) {
    .mdPickList li { width: calc(50% - 8px); }
  }
</style>

<div class="mdPickWrap">
  <p class="ttl">Our Latest Picks!</p>
  <ul class="mdPickList">
    <!--/loop_recmd_product(25)/-->
    <li>
      <a href="<!--/recmd_product@link/-->">
        <div class="thumb">
          <img src="<!--/recmd_product@image_m/-->" alt="<!--/recmd_product@name/-->" />
        </div>
        <div class="prd-info">
          <p class="prd-name"><!--/recmd_product@name/--></p>
          <p class="prd-subname"><!--/recmd_product@subname/--></p>
          <p class="prd-price">
            <!--/if_recmd_product@price_replace/-->
              <!--/recmd_product@price_replace/-->
            <!--/else_if_recmd_product@is_soldout/-->
              Sold Out
            <!--/else/-->
              <!--/if_recmd_product@price_discount/-->
                <del>KRW <!--/number/recmd_product@price_sell/--></del>
                <span class="krw">KRW</span> <!--/number/recmd_product@price_discount/-->
              <!--/else/-->
                <!--/if_recmd_product@discount_percent(+1)/-->
                  <span class="red"><!--/recmd_product@discount_percent/-->%</span>
                <!--/end_if/-->
                <span class="krw">KRW</span> <!--/number/recmd_product@price_sell/-->
              <!--/end_if/-->
            <!--/end_if/-->
          </p>
        </div>
      </a>
    </li>
    <!--/end_loop/-->
  </ul>
</div>

<!-- Things We Love! (Ä«Å×°í¸® ÅÇ 5°³) -->
<style>
  .mdArea {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 100px;
  }
  .mainTab .ttl {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
  }
  .mainTab ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
    margin-bottom: 40px;
    list-style: none;
  }
  .mainTab ul li a {
    text-decoration: none;
    color: #555;
    font-size: 16px;
    padding: 8px 18px;
    border: 1px solid #ccc;
    border-radius: 20px;
    transition: all 0.2s ease;
  }
  .mainTab ul li.on a,
  .mainTab ul li a:hover {
    background: #111;
    color: #fff;
    border-color: #111;
  }
  .mainTabCont .tabArea {
    display: none;
  }
  .mainTabCont .tabArea.active {
    display: block;
  }
  .prdList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    list-style: none;
    padding: 0;
  }
  .prdList li {
    width: calc(20% - 20px);
  }
  .prdList img {
    width: 100%;
    height: auto;
    display: block;
  }
  @media (max-width: 1024px) {
    .prdList li { width: calc(25% - 15px); }
  }
  @media (max-width: 768px) {
    .prdList li { width: calc(33.333% - 10px); }
  }
  @media (max-width: 480px) {
    .prdList li { width: calc(50% - 8px); }
  }
</style>

<div class="mdArea clear">
  <div class="mainTab">
    <p class="ttl">Things We Love!</p>
    <ul class="clear">
      <li class="on"><a href="#none" onclick="mainTabOpen(0);return false;">KITCHEN</a></li>
      <li><a href="#none" onclick="mainTabOpen(1);return false;">LIVING</a></li>
      <li><a href="#none" onclick="mainTabOpen(2);return false;">TABLE</a></li>
      <li><a href="#none" onclick="mainTabOpen(3);return false;">LIFESTYLE</a></li>
      <li><a href="#none" onclick="mainTabOpen(4);return false;">GIFT</a></li>
    </ul>
  </div>

  <div class="mainTabCont">
    <!-- Kitchen -->
    <div class="tabArea active" id="tab0">
      <ul class="prdList">
        <!--/loop_add1_product(5)/-->
          <li><a href="<https://www.commonkitchen.co.kr/shop/shopbrand.html?type=X&xcode=015"><img src="<!--/add1_product@image_m/-->" alt="<!--/add1_product@name/-->" /></a></li>
        <!--/end_loop/-->
      </ul>
    </div>

    <!-- Cafe -->
    <div class="tabArea" id="tab1">
      <ul class="prdList">
        <!--/loop_add2_product(5)/-->
          <li><a href="<https://www.commonkitchen.co.kr/shop/shopbrand.html?type=X&xcode=016"><img src="<!--/add2_product@image_m/-->" alt="<!--/add2_product@name/-->" /></a></li>
        <!--/end_loop/-->
      </ul>
    </div>

    <!-- Living -->
    <div class="tabArea" id="tab2">
      <ul class="prdList">
        <!--/loop_add3_product(5)/-->
          <li><a href="<https://www.commonkitchen.co.kr/shop/shopbrand.html?type=X&xcode=018"><img src="<!--/add3_product@image_m/-->" alt="<!--/add3_product@name/-->" /></a></li>
        <!--/end_loop/-->
      </ul>
    </div>

    <!-- Vintage -->
    <div class="tabArea" id="tab3">
      <ul class="prdList">
        <!--/loop_add4_product(5)/-->
          <li><a href="<https://www.commonkitchen.co.kr/shop/shopbrand.html?type=X&xcode=017"><img src="<!--/add4_product@image_m/-->" alt="<!--/add4_product@name/-->" /></a></li>
        <!--/end_loop/-->
      </ul>
    </div>

    <!-- Kids -->
    <div class="tabArea" id="tab4">
      <ul class="prdList">
        <!--/loop_add5_product(5)/-->
          <li><a href="<https://www.commonkitchen.co.kr/shop/shopbrand.html?xcode=017&type=M&mcode=002"><img src="<!--/add5_product@image_m/-->" alt="<!--/add5_product@name/-->" /></a></li>
        <!--/end_loop/-->
      </ul>
    </div>
  </div>
</div>

<script>
  function mainTabOpen(idx) {
    document.querySelectorAll('.mainTab ul li').forEach((el, i) => {
      el.classList.toggle('on', i === idx);
    });
    document.querySelectorAll('.mainTabCont .tabArea').forEach((el, i) => {
      el.classList.toggle('active', i === idx);
    });
  }
</script>

/* New Collection */
#tabProduct .item-wrap .item-cont{overflow: hidden; margin-left:-30px;}
#tabProduct .item-wrap .item-cont:after { content: ""; display: block; clear: both; }
#tabProduct .item-wrap .item-cont .item-list {float:left;width: 330px; margin: 0 0 30px 30px;box-shadow: 5px 5px 30px -20px #000;}
#tabProduct .item-wrap .item-cont .item-list .thumb { position: relative; }
#tabProduct .item-wrap .item-cont .item-list .thumb a { display:block; overflow:hidden; line-height: 60px; text-align: center;}
#tabProduct .item-wrap .item-cont .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
#tabProduct .item-wrap .item-cont .item-list .thumb a:hover img {-webkit-transform: scale(1.15);transform: scale(1.15) }
#tabProduct .item-wrap .item-cont .item-list .thumb .clChip { margin-top:5px; }
#tabProduct .item-wrap .item-cont .item-list .thumb .clChip span {display: inline-block;width: 14px;height: 4px;}
#tabProduct .item-wrap .item-cont .item-list dd {padding: 30px; }
#tabProduct .item-wrap .item-cont .item-list .prd-name,
#tabProduct .item-wrap .item-cont .item-list .prd-name a { font-size: 15px;}
#tabProduct .item-wrap .item-cont .item-list .prd-subname {color:#999; margin-top:7px; font-size:14px;}
#tabProduct .item-wrap .item-cont .item-list .prd-price {padding: 20px 0 0;font-size: 18px; position:relative; }
#tabProduct .item-wrap .item-cont .item-list .prd-price del,
#tabProduct .item-wrap .item-cont .item-list .prd-price strike { color:#999; font-weight: normal; font-size: 14px; margin-right: 5px; }
#tabProduct .item-wrap .item-cont .item-list .prd-price .red {color:#f52e54; margin-right:6px; }
#tabProduct .item-wrap .item-cont .item-list .prd-price .krw { font-size: 14px;}
#tabProduct .item-wrap .item-cont .item-list .thumb:hover .prd-preview { display:block; -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
#tabProduct .item-wrap .item-cont .item-list .prd-preview { display:none; position:absolute; left:0;right:0;bottom:20px; width:90%; height:40px; background-color:rgba(255, 255, 255, 0.5);text-align:center;margin:0 auto;}
#tabProduct .item-wrap .item-cont .item-list .prd-preview a { font-size: 14px;line-height:40px;color:#2c2c2c; }
#tabProduct .item-wrap .item-cont .item-list .prd-preview:hover { background-color:rgba(255, 255, 255, 0.9);}
#tabProduct .item-wrap .item-cont .item-list .MK-product-icons img { vertical-align: middle; margin-left:2px; }

/* BEST ITEM */
#specialWrap {width:1440px; margin:150px auto; }
.item-wrap .item-cont2 {overflow: hidden; margin-left:-20px;}
.item-wrap .item-cont2 .item-list { position: relative; float:left;width: 696px; margin: 0 0 30px 20px; box-shadow: 5px 5px 30px -20px #000;}
.item-wrap .item-cont2 .item-list .thumb { float:left;position: relative; width:330px; }
.item-wrap .item-cont2 .item-list .thumb a { display:block; overflow:hidden }
.item-wrap .item-cont2 .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
.item-wrap .item-cont2 .item-list .thumb a:hover img {-webkit-transform: scale(1.15);transform: scale(1.15) }
.item-wrap .item-cont2 .item-list .clChip {margin-bottom:5px; }
.item-wrap .item-cont2 .item-list .clChip span {display: inline-block;width: 14px;height: 4px;}
.item-wrap .item-cont2 .item-list dd { float:left; padding: 30px 40px; }
.item-wrap .item-cont2 .item-list .red { background:#f52e54; color:#fff; font-size:18px;width:45px;height:45px; line-height:45px; text-align:center; border-radius:50%; margin:0 0 10px;}
.item-wrap .item-cont2 .item-list .prd-name { font-size: 15px; }
.item-wrap .item-cont2 .item-list .prd-subname { color:#999;line-height:18px; margin-top:7px; font-size:14px; }
.item-wrap .item-cont2 .item-list .prd-price { padding: 50px 0 3px;font-size: 18px; position:relative; }
.item-wrap .item-cont2 .item-list .prd-price del,
.item-wrap .item-cont2 .item-list .prd-price strike { color:#999; font-weight: normal; font-size: 14px; display:block; margin:0 0 4px; }
.item-wrap .item-cont2 .item-list .prd-price .krw { font-size: 14px; }
.item-wrap .item-cont2 .item-list .prd-preview {position:absolute; bottom:40px;width:284px; height:40px; background-color:rgba(246, 246, 246, 0.8);text-align:center;line-height:40px;}
.item-wrap .item-cont2 .item-list .prd-preview a { font-size:14px; display:block; line-height:40px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.item-wrap .item-cont2 .item-list .prd-preview a:hover { opacity:1; background:#f2f2f2; }
.item-wrap .item-cont2 .item-list .MK-product-icons img { vertical-align: middle }

/* À̹ÌÁö °íÁ¤ ¹è³Ê */
.fixed-img-banner { position: relative; height: 640px; background: url('/design/hi182521/13069/tem171/main_mid_ban.jpg') center top no-repeat; background-attachment: fixed; overflow: hidden; }
.fixed-img-banner .inner {width: 1200px; margin: 240px auto 0; text-align:center; }
.fixed-img-banner .inner .t1 a { font-size: 64px; color: #fff; font-weight: bold;}
.fixed-img-banner .inner .t2 { display:inline-block; font-size: 20px; color: #fff; padding:8px 40px; }

/* ÀνºÅ¸±×·¥ */
.instargram { background:#fcf7ee;text-align:center;padding:80px 0; }
.instargram .ttl {position:relative; width:1440px; font-size:34px; margin:0 auto 30px; text-align:center;}
.instargram .ttl span { font-size:34px; font-weight:500; }
.instargram .ttl .btnFollow { position:absolute;top:0; right:0;}
.instargram .ttl .btnFollow a {display:block;line-height:35px; width:100px; height:35px; border:1px solid #bdbdbd; font-size:18px;}

/* BASIC css end */