@media (min-width: 576px){/*size-sm*/
  .hide-sm { display: none !important; }
	.wd-base { width: 200px !important; }
	.mw-base { min-width: 90px !important; }
}
@media (max-width: 575px){/*size-xs*/
  .hide-xs { display: none !important; }
	.wd-base { width: 100% !important; }
}
@media (min-width: 768px){/*size-md*/
  .hide-md { display: none !important; }
}
@media (min-width: 992px){/*size-lg*/
  .hide-lg { display: none !important; }
}
@media (min-width: 1200px){/*size-xl*/
  .hide-xl { display: none !important; }
}



/* ======================================================= */
/* -------------- Default style (for desktop) ------------ */
/* ======================================================= */
@media (min-width: 1400px){
  
}



/* ======================================================================== */
/* ------------------- [ XL size (~ 1399px ~ 1200px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 1399px){
  .page-auth { min-height: 125vh; }
  .page-payment .box-detail { padding-right: 15px; }
  .page-payment .box-pay { padding-left: 15px; }

  .main-page section.top button.bt-link { bottom: 100px; }

  .subpage.mypage .container.nav-cont { max-width: 100%; min-width: initial; padding-right: 0; }

  .modal .modal-dialog.modal-dialog-centered { margin: 15px auto; }
  .modal.we-img-slider .modal-dialog { margin: 0; }
}



/* ======================================================================== */
/* --------------------- [ LG size (1199px ~ 992px)] ---------------------- */
/* ======================================================================== */
@media (max-width: 1199px){
  header .func>div:not(.search-wrap, .mo-btn) { display: none; }
  header .func>div.mo-btn { display: flex; align-items: center; }
  footer .ft-top { padding-bottom: 30px; }
  footer .navi .line { display: none; }
  footer .navi ul { gap: 20px; padding: 0; margin-left: 30px; }
  footer .sns-wrap p { display: none; }
  footer .ft-btm { padding-top: 30px; }

  .page-items.detail .order-wrap .zoom-container { left: -150px; }
  .page-items.detail .item-box .option-container>dd.opt-list { border: 1px solid #e8e8e8; padding: 5px 5px; border-radius: 5px; max-height: 140px; background: #fbfbfb; }
  .page-items.detail .item-box .option-container button { width: calc(33% - 5px); }

  .subpage.mypage .container.nav-cont { max-width: 100%; min-width: initial; padding-right: 0; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-head { flex-direction: column; align-items: center; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-head>p { width: 100%; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.article>a>span:nth-child(1) { width: 55%; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-body .order-inf>p.opts { margin-bottom: 1px; }

  .page-payment .agreement { padding: 15px 15px; }

  .fs-modal .modal-body .input-form { margin-bottom: 15px; }
  .modal.we-img-slider .page-box { flex: 0 0 45%; }
  .modal.we-img-slider .slide-box { flex: 0 0 55%; }



  /* for ipad */
  /* body>div.contents, 
  footer .foot-menu { max-width: 1024px; }
  .container { max-width: 1024px !important; padding: 0 20px; }
  .row[class*="cell-"] > [class*="col-"] { padding-bottom: 60px; }
  .item-wrap .item>.img-box img { width: 100%; }
  .item-wrap .item .color-set>span.c-label { height: 10px; }

  .main-page section.sec-03 ul { height: 80%; justify-content: flex-start; left: 0; right: 0; margin: auto; padding: 0 100px; }
  .main-page section.sec-03 ul>li { margin-bottom: 80px; }
  .main-page section.sec-03 ul>li>p { font-size: 38px; }
  .main-page section.sec-03 ul>li>a { padding: 8px 25px; }
  .main-page section.sec-03 img,
  .main-page section.sec-04 .img-box img, 
  .main-page section.sec-05 .swiper-slide .items .img-box img { width: 100%; }
  .main-page section.sec-07 h3 br { display: contents; }

  .page-item.detail .slider-wrap .swiper.main-slider { height: 500px; }
  .page-item.detail .content-wrap>div { margin-bottom: 60px; }
  .page-item.detail .content-wrap .fabric-list .item-wrap .item { flex: 0 0 calc(25% - 15px); }
  #img-zoom-overlay { max-width: 100%; } */
}

@media (min-width: 1100px) and (max-width: 1199px) {
  .page-items.detail .item-box>div { padding: 15px 5px; }
  .page-items.detail .item-box .is-01 .tags>a { padding: 2px 7px; }
  .page-items.detail .item-box dl>dt { min-width: 80px; }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .page-items.detail .item-box>div { padding: 15px 5px; }
  .page-items.detail .item-box .is-01 .tags>a { padding: 2px 7px; }
  .page-items.detail .item-box dl>dt { min-width: 55px; padding-right: 10px; }
  .page-items.detail .slider-wrap .main-slider .swiper-slide img { cursor: pointer; }
  .page-items.detail .order-wrap .zoom-container { display: none !important; }
  .page-items.detail .bt-box button.bt-favo { flex: 0 0 50px; }
}


/* ======================================================================== */
/* ----------------------- [ MD size (991px ~ 768px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 991px){
  header .navi>ul.nav>li { padding: 20px 5px; }
  header .navi>ul.nav>li>.sub-menu { min-width: 200px; padding: 15px 15px 15px 15px; }
  header .navi>ul.nav>li>.sub-menu>ul>li>a { font-size: 13px; }
  footer .navi .logo { display: none; }
  footer .navi ul { margin: 0; }

  section.sec-head p.s-tit { font-size: 32px; }

  .progress-wrap .gradations .point .p-label { font-size: 11px; }
  .progress-wrap .gradations .point::before { width: 6px; height: 6px; }
  .progress-wrap .gradations .point.current::before { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 0 8px #ceab6a; }
  
  .lnb-wrap { right: 15px; }
  .main-page section.top .top-slider .swiper-slide h2 { font-size: 40px; }
  .main-page section.top .top-slider .swiper-slide p { font-size: 21px; }
  .main-page .co-banner { max-width: 90%; flex-wrap: wrap; justify-content: center; }
  .main-page .co-banner>.img-wrap { flex: 0 0 25%; }

  .page-items .filter-panel { padding: 12px 15px; }
  .page-items .filter-panel .bt-wrap .bt-box>label { font-size: 13px; padding: 7px 12px; }
  .page-items .sec-body .cate-panel  { flex-direction: column; padding: 10px 0; }
  .page-items .sec-body .cate-panel ul.i-category { max-width: 100%; width: 100%; }
  .page-items .sec-body .cate-panel .i-count { display: none; }

  .page-items.detail .slider-wrap .swiper.main-slider { width: 100%; }
  .page-items.detail .slider-wrap .swiper.main-slider .swiper-slide img { border:none; }

  .page-items.detail .order-wrap .zoom-container { display: none !important; }
  .page-items.detail .item-box { margin-bottom: 0; }
  .page-items.detail .item-box>div { padding: 10px 5px; }
  .page-items.detail .item-box dl>dt { min-width: 100px; padding-right: 5px; }
  .page-items.detail .item-box .is-01 .tags { margin-bottom: 10px; }
  .page-items.detail .item-box>div.is-03>dl.option-container { display: block; }
  .page-items.detail .item-box>div.is-03>dl.option-container>dt { margin-bottom: 5px; }
  .page-items.detail .item-box .option-container>dd.opt-list { max-height: 200px; }
  .page-items.detail .item-box .option-container button { width: calc(25% - 4px); }
  .page-items.detail .item-box>div.is-04>dl { display: block; }
  .page-items.detail .item-box>div.is-04>dl>dt { margin-bottom: 5px; }
  .page-items.detail .bt-box { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; padding: 5px 5px; border-top: 1px solid #ddd; z-index: 111; }
  .page-items.detail .i-box>div.ibody { padding: 5px 0 5px; }
  .page-items.detail .item-deal .deal-slider .swiper-slide ul.i-inf>li.name { margin-bottom: 0; }
  .page-items.detail .item-deal .deal-slider .swiper-slide ul.i-inf>li.prc { margin-top: 0; }

  .page-payment .list-container .item-wrap ul { padding: 5px; }
  .page-payment .list-container .item-wrap ul>li.item>.i-inf { min-width: auto; padding: 0 5px; flex: 0 0 calc(100% - 200px); }
  .page-payment .list-container .item-wrap ul>li.item>.i-opt { flex: 0 0 140px; }
  .page-payment .box-detail dl>dt { width: 75px; padding-right: 10px; }
  .page-payment .purchase .f-price>span:first-child { font-size: 16px; }
  .page-payment .purchase .f-price>span.kwon { font-size: 30px; }


  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-head { margin-bottom: 10px;  flex-direction: row; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-head>p.o-num { text-align: right; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-body .imgs { width: 85px; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-body .order-inf { min-height: 80px; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-body .order-inf>*:not(:last-child) { margin-bottom: 1px; }

  .subpage.mypage.orders .mp-wrap .list-box ul.lists>li.details .a-body .order-inf .price { margin-top: 5px; }

}



/* ======================================================================== */
/* ----------------------- [ SM size (767px ~ 576px) ] -------------------- */
/* ======================================================================== */
@media (max-width: 767px){
  header .navi { display: none; }
  footer .navi { display: block; }
  footer .navi ul { display: flex; justify-content: center; margin-bottom: 15px; }
  footer .sns-wrap { justify-content: center; }
  footer .site-info>ul { display: flex; align-items: center; gap: 5px; }
  footer .ft-btm .site-info p.copyright { margin:0; text-align: center; }
  footer .ft-btm .site-info>div.flex-right { display: none; }
  footer .ft-btm .terms { text-align: center; position: static; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 20px; }

  .lnb-wrap { display: none !important; }
  ul.reviews>li.item .r-head { display: block; }
  ul.reviews>li.item .r-body .content { flex: 0 0 calc(100% - 140px); }
  ul.reviews>li.item .r-body .content.no-imgs { flex: 0 0 100%; }
  ul.reviews>li.item .r-body .content .desc { min-height: 90px; }
  ul.reviews>li.item .r-body .content .rating { display: block; margin-top: 10px; position: static; text-align: right; }

  .main-page section[attr-title="Item"] .item-wrap .item .i-box { flex-direction: column; }
  .main-page section[attr-title="Item"] .item-wrap .item .color-set { margin-bottom: 10px; }

  .subpage .category-menu ul { align-items: center; justify-content: space-between; padding: 15px 0; }
  .subpage .category-menu ul>li { flex: 0 0 calc(25% - 20px); text-align: center; }
  .subpage .category-menu ul>li>a { padding: 4px 10px; font-size: 16px; line-height: 18px; border-bottom: 1px solid transparent; }
  .subpage .category-menu ul>li>a:hover::before, .subpage .category-menu ul>li.current>a::before { opacity: 0; }
  .subpage .category-menu ul>li.current>a { background-color: #fff2e7; border-bottom: 1px solid rgb(0 0 0 / 10%); }

  .page-payment .box-detail>div { margin-bottom: 30px; }
  .page-payment .box-detail { padding-right: 0px; }
  .page-payment .box-pay { padding-left: 0px; }
  .page-payment .purchase button.bt-proceed { padding: 0; height: 50px; }

  .subpage.mypage.review ul.reviews>li.item .r-head { display: flex; }
  .subpage.mypage.review ul.reviews>li.item .r-head>.num { display: none; }
  .subpage.mypage.recent .mp-wrap .list-box ul.lists>li.details { padding: 12px 12px; }
  .subpage.mypage.recent .mp-wrap .list-box ul.lists>li.details .a-body .order-inf { padding-left: 10px; }
  .subpage.mypage.recent .mp-wrap .list-box ul.lists>li.details .a-body .imgs { width: 80px; }
  .subpage.mypage.favorite .mp-wrap .list-box ul.lists>li.details { padding: 12px 12px; }
  .subpage.mypage.favorite .mp-wrap .list-box ul.lists>li.details .a-body .order-inf { padding-left: 10px; }
  .subpage.mypage.favorite .mp-wrap .list-box ul.lists>li.details .a-body .imgs { width: 80px; }

  .modal { max-width: 100vw; }
  .modal .modal-dialog { max-width: 500px !important; }
  .modal .modal-dialog.modal-dialog-centered { margin-top: 30px; }
  .modal .modal-dialog .modal-content { width: calc(100% - 20px); margin: 10px; }

}



/* ======================================================================= */
/* ----------------------- [ XS size (575px~ 이하) ] --------------------- */
/* ======================================================================= */
@media (max-width: 575px){
  header>div.container { padding: 0 20px; }
  header .func { gap: 20px; }
  footer .navi ul { flex-wrap: wrap; gap: 5px 35px; }
  footer .ft-btm .para { text-align: center; max-width: 100%; }
  footer .ft-btm .para a.bt-more { display: block; }
  footer .ft-btm .para a.bt-more::before { display: none; }
  footer .site-info>ul { margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }
  footer .ft-btm .site-info ul>li { margin:0 auto; }
  footer .ft-btm .site-info ul>li.logo { flex: 0 0 100%; text-align: center; }

  .tab-btns+.tab-content { padding: 15px 0; }
  section.sec-head p.s-tit { font-size: 25px; }

  .subpage .category-menu ul { flex-wrap: wrap; padding: 15px 0; gap: 10px; }
  .subpage .category-menu ul>li { flex: 0 0 calc(50% - 5px); }
  .subpage .category-menu ul>li>a { border:1px solid #eee; height: 50px; display: flex; align-items: center; justify-content: center; }

  .main-popup-layer .popup-box { max-width: 90%; }
  
  .page-payment .list-container .item-wrap ul>li.item { flex-wrap: wrap; align-items: flex-start; }
  .page-payment .list-container .item-wrap ul>li.item>.i-inf { flex: 0 0 calc(100% - 60px); }
  .page-payment .list-container .item-wrap ul>li.item>.i-opt { flex: 0 0 100%; text-align: right; }
  .page-payment .box-detail dl { display: block; }
  .page-payment .box-detail dl>dd { margin-bottom: 8px; }
  .page-payment .agreement { padding: 5px 5px; }

  .page-auth { min-height: 100vh; }
  .page-auth .hd-tit img { max-width: 55%; }
  .page-auth .ck-box { flex-direction: column; }
  .page-auth .ck-box>label { width: 100%; margin-bottom: 10px; }
  .page-auth .ck-box .bt-links { width: 100%; display: flex; gap:10px; justify-content: space-between; }
  .page-auth .ck-box .bt-links>a { width: 50%; }
  .page-auth div.agreement .agr-terms>ul>li { margin-bottom: 10px; }
  .page-auth div.agreement .agr-terms>ul>li>button { display: block; width: calc(100% - 30px); margin-left: 25px; margin-bottom: 5px; }

  /* .subpage.mypage .mp-navi>ul.navi-list>li { margin-right: 10px; }
  .subpage.mypage .mp-wrap .list-box ul.lists { margin-bottom: 40px; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-head { flex-direction: column; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-head>p.o-num { text-align: left; }
  .subpage.mypage .mp-wrap .list-box ul.lists>li.details .a-body .imgs { width: 80px; }
  .subpage.mypage .mp-wrap .list-box ul.lists.item-wrap { flex-wrap: wrap; }
  .subpage.mypage .mp-wrap .list-box ul.lists.item-wrap>li.item { flex: 0 0 calc(50% - 10px); width: 100%; }
  .subpage.mypage .mp-wrap .search-box { flex-wrap: wrap; gap:5px; }
  .subpage.mypage .mp-wrap .search-box>div { flex:0 0 100%; }
  .subpage.mypage.orders .mp-wrap .list-box ul.lists>li.details { padding: 10px 10px; }
  .subpage.mypage.orders .mp-wrap .list-box ul.lists>li.details .a-body { position: relative; }
  .subpage.mypage.orders .mp-wrap .list-box ul.lists>li.details .a-body .order-inf { position: static; padding-left: 10px; padding-bottom: 40px; }
  .subpage.mypage.orders .mp-wrap .list-box ul.lists>li.details .a-body .order-inf .bt-wrap { position: absolute; display: flex; gap: 3px;width: 100%; }
  .subpage.mypage.orders .mp-wrap .list-box ul.lists>li.details .a-body .order-inf .bt-wrap button { flex:1; }
  .subpage.mypage.review ul.reviews>li.item .r-head>.tits { flex: 0 0 calc(100% - 80px) }
  .subpage.mypage.inquiry .inquiry-wrap .list-box>ul>li { border-bottom: 2px solid #d1d1d1; }
  .subpage.mypage.inquiry .inquiry-wrap .list-box>ul>li .artc-head>div.i-sts { border-bottom: 1px solid #eee; }
  .subpage.mypage.inquiry .inquiry-wrap .list-box>ul>li .artc-head>div.i-cat { flex: 0 0 calc(100% - 65px); text-align: right; border-bottom: 1px solid #eee; }
  .subpage.mypage.inquiry .inquiry-wrap .list-box>ul>li .artc-head>div.i-tit { flex: 0 0 100%; }
  .subpage.mypage.inquiry .inquiry-wrap .list-box>ul>li .artc-head>div.i-dat { flex: 0 0 100%; text-align: right; }
  .subpage.mypage.recent .mp-wrap .list-box ul.lists { gap: 10px; }
  .subpage.mypage.recent .mp-wrap .list-box ul.lists>li.details { flex: 0 0 100%; }
  .subpage.mypage.favorite .mp-wrap .list-box ul.lists { gap: 10px; }
  .subpage.mypage.profile .ip-box select.email-dom { flex: 0 0 120px; }
  .subpage.mypage.profile .bt-wrap .bt-box { display: flex; gap:5px; justify-content: space-between; }
  .subpage.mypage.profile ul.shipping>li>div:nth-child(2) { flex: 0 0 calc(100% - 70px); }
  .subpage.mypage.profile ul.shipping>li>div:nth-child(2) { flex: 0 0 70px; display: flex; flex-direction: column; gap: 5px; } */

  .modal .modal-dialog { align-items: center; display: flex; margin: 0; }
  .modal .modal-dialog.modal-dialog-centered { margin-top: 10px; }
  .modal .modal-content { margin:0; }
  .modal .modal-content .modal-body { padding: 10px 15px; }

  .mod-review .item-infos .imgs { display: none; }
  .mod-review .item-infos .order-inf { padding:0; }

  .fs-modal .modal-body .input-form { margin-bottom: 15px; }
  .search-layer.modal .modal-content { padding: 20px 20px; margin-top: 50px; margin-bottom: 20px; }
  .search-layer.modal .modal-content p.desc { font-size: 13px; }
  .search-layer.modal .modal-content .result-wrap .inner { padding: 20px 15px; }

  .swal2-container .swal2-popup { min-width: 90%; max-width: calc(100% - 20px); padding: 25px 20px; }
  .swal2-container .swal2-actions { gap: 6px; margin-top: 15px; }

}


/* ======================================================================= */
/* ---------------------- [ etc size (425px~ 이하) ] --------------------- */
/* ======================================================================= */
@media (max-width: 425px){
  .main-page section:last-child { padding-bottom: 20px; }

  .subpage.mypage.profile .list-box ul.switch-func { flex-direction: column; gap: 10px; }
  .subpage.mypage.profile .list-box ul.switch-func>li { padding: 10px 5px; background: #f7f7f7; }
  .subpage.mypage.orders .mp-wrap .list-box ul.lists>li.details .a-body .order-inf .bt-wrap button { padding:0 1px; font-size: 12px; }


}