@charset "UTF-8";
/*--------------------------------------------------------------------- LAYOUT --------------------------*/
.inner { max-width: calc(1180px + 40px); width: 100%; margin: 0 auto; padding: 0 20px; } 
.container { padding-top: 80px; } 


/*--------------------------------------------------------------------- SEARCH ------------------------*/
.pc-ver .hd-search .input-wrap { width: 500px; height: 65px; display: flex; align-items: center; } 
.hd-search .input-wrap input { height: inherit; } 
.hd-search .btn { width: auto; min-width: 30px; } 


/*--------------------------------------------------------------------- COMPONENT ------------------------*/
.thumb-list>ul {display: flex;flex-wrap: wrap;margin: 0 -7.5px;} 
.thumb-list>ul>li{width: 25%;padding: 0 7.5px;padding-bottom: 50px;}
.thumb-list>ul>li>.thumb-list--img { position: relative; } 
.thumb-img:hover .thumb-img__area,
.thumb-img.active .thumb-img__area { transform: scale(1.1); } 
.thumb-img { position: relative; overflow: hidden; border-radius: 10px; } 
.thumb-img__area { background: no-repeat 50% / cover; width: 100%; height: 100%; padding-top: 100%; transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; }
.thumb-img__tag { position: absolute; top: 15px; left: 15px; min-width: 60px; height: 25px; display: flex; align-items: center; justify-content: center; background-color: rgba(41,41,41,0.9); color: #fff; border-radius: 3px; } 
.thumb-img__txt { position: absolute; bottom: 0; left: 0; width: 100%; opacity: 0; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s; z-index: 1; } 
.thumb-cont { margin-top: 20px; text-align: center;} 
.thumb-cont .thumb-cont__category { font-size: 16px; color: #757575; } 
.thumb-cont h4 { font-size: 18px; font-weight: 500; margin-top: 5px;} 



/* checkbox */
.check-box { position: relative; } 
input[type="checkbox"]+label { cursor: pointer; padding: 5px; } 
input[type="checkbox"]:checked+label {border-radius: 3px;} 
.check-box.hasChild input[type="checkbox"]+label::after { content: ''; width: 9px; height: 6px; background: url(../../images/cmn/ico_list.svg) no-repeat; margin-left: auto; margin-right: 5px; flex: none; } 
.check-box.hasChild input[type="checkbox"]:checked+label::after { transform: rotate(180deg); } 
input[type="checkbox"]+label>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; } 
input[type="checkbox"]+label>span>.en { font-size: 10px; font-weight: 400; margin-left: 3px; } 
.check-box.hasRadio input[type="checkbox"]+label::after { content: ''; width: 7px; height: 7px; background: url(../../images/cmn/ico_radio.svg) no-repeat; margin-left: auto; margin-right: 6px; flex: none; } 
input[type="radio"]:checked+label { background: #fff; border-radius: 3px; } 
input[type="radio"]+label { cursor: pointer; padding: 5px; } 


/* btn */
.btn_inner { position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } 


/*--------------------------------------------------------------------- HEADER --------------------------*/
header{border-bottom: 1px solid #e4e4e4; position: fixed; left: 0; width: 100%; top: 0; left: 0; z-index: 111; background-color: #fff;}
.hd-wrap{display: flex;align-items: center;justify-content: space-between;  height: 80px;}
.hd-wrap__logo > a{width: 180px;height: 33px;background: no-repeat 50% / cover;background-image: url(../../images/cmn/logo.svg);}
.gnb {width: calc(100% - 160px);}
.gnb-wrap {height: 100%;width: 100%;display: flex;justify-content: space-between;}
.hd-menu{display: flex;align-items: center;height: 80px;}
.hd-menu > li{display: flex;align-items: center;justify-content: center;width: 95px;height: 100%;position: relative;min-width: 95px;}
.hd-menu > li > a{font-size: 18px;font-weight: 500;color: #292929;text-align: center;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;position: relative;transition: .3s;-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;}
.hd-menu > li > a:hover, 
.hd-menu > li > a.active{color: #0069B4;}
.hd-menu > li > a:hover:before,
.hd-menu > li > a.active:before{content:'';border-bottom: 2px solid #0069B4;position: absolute;bottom: -1px;left: 50%;transform: translateX(-50%);width: 45px;}
.hd-menu > li:not(:last-child):before{content: ''; width: 1px; height: 11px; background-color: #D0D0D0; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.hd-info{display: flex;align-items: center;}
.hd-info > li:not(:last-child){margin-right: 25px;}
.hd-info > li:last-child { width: auto;}
.hd-info > li > a{font-size: 14px;font-weight: 500;color: #424242;}
.hd-info__cart{display: inline-block;background: no-repeat 50% / cover;background-image: url(../../images/cmn/ico-cart.svg);position: relative;width: 50px;height: 50px;vertical-align: middle;}
.hd-info__cart .cart-num{background-color: #0069B4;width: 21px;height: 21px;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 700;color: #fff;position: absolute;top: 5px;right: 4px;border-radius: 50%;}
.btn-openNav{display: none;}
.mobile-cart{display: none;}


/*--------------------------------------------------------------------- FOOTER --------------------------*/
.ft-link{background-color: #f7f7f7; border-top: 1px solid #E4E4E4;}
.ft-link > ul{display: flex; align-items: center; gap: 45px; height: 40px;}
.ft-link a{font-size: 14px; font-weight: 500; color: #757575;}
.ft-cont{margin-top: 40px; padding-bottom: 30px;}
.ft-cont .inner{display: flex; justify-content: space-between;}
.ft-cont__left{display: flex;}
.ft-cont__info{margin-left: 30px;}
.ft-cont__info > p{font-size: 14px; font-weight: 500; color: #757575; margin-top: 5px;}
.ft-cont__info > p:first-child{margin-top: 0;}
.ft-info__num span:not(:first-child){margin-left: 15px;}
.ft-cont__info .copyright{margin-top: 15px; font-size: 14px; color: #BABABA; font-weight: 400;}
.ft-count > ul{display: flex; background-color: #F7F7F7; border: 1px solid #757575; border-radius: 5px; padding: 13px 5px;}
.ft-count > ul > li{padding: 0 15px;line-height: 12px;font-size: 14px;color: #292929;}
.ft-count > ul > li:not(:last-child){border-right: 1px solid #E4E4E4;}
.ft-count > ul > li span{font-weight: 700;}
.ft-call {background: #F2F7FB;border: 1px solid #E5F0F7;border-radius: 5px;padding: 15px 18px;display: flex;}
.ft-call__tit{padding-right: 17px;margin-right: 17px;border-right: 1px solid #E5F0F7}
.ft-call__tit .ico-call{width: 19px; height: 19px; background-image: url(../../images/cmn/ico-call.svg); margin-top: 3px}
.ft-call__tit h4{font-weight: 500; color: #0F69B4;}
.ft-call__cont b{font-size: 18px;color: #0F69B4;text-align: center;display: block; margin-bottom: 3px;}
.ft-call__cont > ul {display: flex;}
.ft-call__cont > ul > li{font-size: 12px; color: #757575;}
.ft-call__cont > ul > li:not(:last-child){margin-right: 17px;}
.ft-call__cont .ft-call__word{letter-spacing: 4px;margin-right: -2px;}


/*--------------------------------------------------------------------- modal --------------------------*/

.modal.modal-common,
.modal.modal-common .alert__cont { width: 100%; max-width: 520px; background: #fff; padding: 25px 20px; border-radius: 5px; box-shadow: 0 0 5px #000; position: relative; } 
.modal.modal-common .modal-txt { margin-bottom: 0; } 
.modal.modal-common .modal-txt__tit,
.modal.modal-common .alert-txt__tit { font-size: 16px; font-weight: 700; margin-bottom: 40px; text-align: center; } 
.modal.modal-common .modal-txt__cont,
.modal.modal-common .alert-txt__cont { color: #535353; word-break: keep-all; line-height: 24px; } 
.modal.modal-common .modal__btn .btn { width: 100%; height: 55px; line-height: 55px; color: #fff; font-size: 18px; font-weight: 500; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; } 
.modal.modal-common .btn_modal { height: 60px; line-height: 60px; width: 100%; border-radius: 5px; margin-top: 30px; } 
.modal.modal-common .modal-cont__tit { font-size: 14px; font-weight: 500; color: #000; margin-bottom: 10px; } 


/*-- modal-alert --*/
.modal.modal-alert { max-width: 520px; padding: 0; box-shadow: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; padding: 50px 70px; } 
.modal-alert .modal-txt { margin-bottom: 0; text-align: center; } 
.modal-alert .modal-txt__tit { border-bottom: 0; padding: 0; margin-bottom: 0; } 
.modal.modal-alert .modal-txt__cont { font-size: 20px; font-weight: 500; color: #000; padding: 45px 0; } 
.modal__close { width: 30px; height: 30px; background: no-repeat 50% / cover; background-image: url(../../images/cmn/modal_close.svg); background-size: 12px 12px; position: absolute; top: 27px; right: 20px; } 
.modal.modal-alert .btn-2ea .btn:not(:last-child) { margin-right: 30px; } 
.modal.modal-alert .btn_modal { height: 60px; line-height: 60px; width: 100%; border-radius: 5px; } 


/*--------------------------------------------------------------------- checkbox --------------------------*/
.checkbox-cir:checked+label::before,
.checkbox-cir:checked+label::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); background: #D0D0D0; } 
.checkbox-cir input[type="checkbox"]+label::before,
.checkbox-cir input[type="checkbox"]+label::after { border-radius: 100%; border: 0; background: #d0d0d0; background-image: url(../../images/cmn/ico_check_w.svg); background-repeat: no-repeat; background-position: 50%; width: 28px; height: 28px; background-size: 14px 11px; } 
.checkbox-cir a,
.checkbox-cir input[type="checkbox"]+label { font-size: 14px; } 
.checkbox-basic:checked+label::before,
.checkbox-basic:checked+label::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); background: #D0D0D0; } 
.checkbox-basic input[type="checkbox"]+label::before,
.checkbox-basic input[type="checkbox"]+label::after { border-radius: 100%; border: 0; background-image: url(../../images/cmn/ico_check_list.svg); background-repeat: no-repeat; background-position: top; width: 28px; height: 28px; background-size: 28px 112px; margin-right: 12px; } 
.checkbox-basic a,
.checkbox-basic input[type="checkbox"]+label { font-size: 14px; } 


/*--------------------------------------------------------------------- radio --------------------------*/
.radio-cir input[type="radio"]+label::before,
.radio-cir input[type="radio"]+label::after { border-radius: 100%; border: 0; background: #d0d0d0; background-image: url(../../images/cmn/ico_check_w.svg); background-repeat: no-repeat; background-position: 50%; width: 28px; height: 28px; background-size: 14px 11px; } 
.radio-cir a,
.radio-cir input[type="radio"]+label { font-size: 14px; } 
.radio-basic input[type="radio"]+label::before,
.radio-basic input[type="radio"]+label::after { border-radius: 100%; border: 0; background-image: url(../../images/cmn/ico_check_list.svg); background-repeat: no-repeat; background-position: top; width: 28px; height: 28px; background-size: 28px 112px; margin-right: 12px; } 
.radio-basic a,
.radio-basic input[type="radio"]+label { font-size: 14px; } 


/*--------------------------------------------------------------------- input 안에 button --------------------------*/
.input-wrap { position: relative; } 
.input-wrap .btn-inner { color: #fff; width: 90px; height: 40px; font-size: 12px; border-radius: 3px; position: absolute; right: 5px; top: 5px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } 


/*--------------------------------------------------------------------- input 안에 글자수 --------------------------*/
.textarea_count { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #BABABA; font-weight: 400; } 


/* paging */
.paging {margin-bottom: 80px;} 
.paging_ul { text-align: center; font-size: 0; } 
.paging_li {display: inline-block;vertical-align: middle;} 
.paging_li.paging_li_active {} 
.paging_li.paging_li_active .paging_href {font-weight: 700; text-decoration: underline; color: #000;} 
.paging_li.paging_li_active .paging_href:after { /*content:''; */ position:absolute; width:10px; height:1px; left: 50%; margin-left: -5px; top: 100%; background: #000; } 
.paging_li:not(:last-child) {margin-right: 10px;} 
.paging_href {display: block;padding: 10px;font-size: 16px;color: #bababa;} 
.paging_prev > a,
.paging_next > a {background: no-repeat 50% / cover; width: 38px; height: 38px;} 
.paging_prev > a{background-image: url(../../images/cmn/btn-prev.svg);}
.paging_next > a{background-image: url(../../images/cmn/btn-next.svg);}


.top-btn { position: fixed; bottom: 40px; right: 40px; z-index: 9; width: 55px; height: 55px; border-radius: 50%; border: 1px solid #E4E4E4; background: #F7F7F7; } 
.ico-btn__top { width: 29px; height: 29px; background-image: url(../../images/cmn/top-btn.svg); } 

.main-product__wrap{display: flex;padding-bottom: 100px;position: relative;margin-top: 50px;}
.prd-filter{width: 220px;flex: 0 0 auto;}
.prd-search .input-wrap .btn-inner{width: 29px;height: 29px;top: 50%;transform: translateY(-50%);right: 10px;}
.prd-search input{font-size: 16px;}
.ico-search{width: 29px; height: 29px; background-image: url(../../images/cmn/ico-search.svg)}
.filter-list .toggle-btn{width: 29px; height: 29px; background-image: url(../../images/cmn/toggle-btn2.svg); transform: rotate(180deg);}
.filter-list .toggle-cont{display: block;}
.filter-list .list-toggle{display: flex;align-items: center;justify-content: space-between;}
.filter-list .list-toggle.on .toggle-btn{transform: rotate(0deg);}
.filter-list > li{padding: 20px 0;}
.filter-list > li:not(:last-child){border-bottom: 1px solid #E4E4E4;}
.filter-tit h4{font-size: 18px;}
.filter-list .cont-list{margin-top: 20px;}
.filter-list input[type="checkbox"]+label{padding: 0; font-size: 16px; color: #757575; font-weight: 400;}
.filter-list input[type="checkbox"]+label:before{margin-right: 10px;}
.filter-list .input-row:not(:last-child){margin-bottom: 13px;}
.filter-list input[type="checkbox"]:checked+label{border-radius: 0; color: #0F69B4; font-weight: 500;}
.filter-btn__wrap{display: none;}
.filter-btn {width: 100px; height: 35px; border-radius: 5px; font-size: 16px; color: #F7F7F7; font-weight: 700;}
.filterApply-btn{display: none;}
.filter-wrap {position: sticky;top: 100px;left: 0;height: 100%; width: 220px; z-index: 11;}
.product-container .main-product__wrap {
    border-top: 1px solid #e4e4e4;
    padding-top: 20px;
    margin-top: 0;
}

/*--------------------------------------------------------------------- 반응형 --------------------------*/

@media screen and (min-width:1201px) { 
  body { min-width: 1320px; } 
  .pc-ver { display: block !important; } 
  .mobile-ver { display: none !important; }
  .hd-subMenu{display: none !important;}
  .prd-filter{display: block !important; opacity: 1 !important;}
  body{overflow-y: auto !important;}
  .gnb{display: block !important; opacity: 1 !important; }

}

@media screen and (max-width: 1200px) { 
  body { min-width: initial; } 
  .not_scroll { position: fixed; overflow: hidden; width: 100%; height: 100%; padding-right: 9px; } 
  .not_scroll .cont { position: relative; top: 0; } 


  /*--------------------------- LAYOUT --------------------------*/
  .inner { max-width: 100%; padding: 0 40px;} 


  /*--------------------------- HEADER --------------------------*/
  .hd-wrap__logo > a{width: 153px; height: 28px;}
  .hd-menu{display: none;}
  .hd-info{display: none;}
  .btn-openNav{display: block;width: 50px;height: 50px;background: no-repeat 50% / cover;background-image: url(../../images/cmn/gnb-btn.svg);position: absolute;right: 40px;top: 15px;z-index: 111;}
  .btn-openNav.on{background-image: url(../../images/cmn/gnb-btn__close.svg);right: 5px;}
  .gnb { float: none; position: fixed; right: 0; top: 0; width: 100%; height: 100vh; overflow-y: auto; background: #fff; z-index: 11; padding: 0; display: none; } 
  .hd-wrap__logo { z-index: 111; position: relative; } 
  .hd-info__cart {} 
  .gnb.on .hd-menu {display: block;height: auto;} 
  .gnb-wrap{padding-top: 80px;flex-direction: column-reverse;justify-content: flex-end;position: relative;}
  .hd-menu > li { width: 100%; display: block; height: auto; } 
  .hd-menu > li > a {justify-content: left;padding: 10px 30px;font-weight: 700;height: 50px;justify-content: space-between;} 
  /* .hd-menu > li > a:after{content: '';width: 29px;height: 29px;background: no-repeat 50% / cover;background-image: url(../../images/cmn/gnb-close.svg);transform: rotate(180deg);} */
  .hd-subMenu {display: none; position: relative; background-color: #F7F7F7; padding: 0 30px; } 
  .hd-menu > li:nth-child(3) > a:after,  .hd-menu > li:nth-child(5) > a:after{display: none;} 
  .hd-subMenu > li > a {
    height: 50px;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #292929;
} 
  .hd-subMenu > li:not(:last-child) { border-bottom: 1px solid #e4e4e4; } 
  .gnb.on .hd-info { display: flex; width: 100%; background-color: #F2F7FB; border-top: 1px solid #E4E4E4; position: relative; z-index: 1111; } 
  .gnb.on .hd-info > li { width: 100%; text-align: center; height: 100%; position: relative; } 
  .hd-info > li:not(:last-child) { margin-right: 0; } 
  .gnb.on .hd-info > li:last-child {position: absolute;width: auto;height: auto;} 
  .gnb.on .hd-info > li:first-child {
    position: relative;
    width: 100%;
    height: 100%;
}
	.hd-info > li > a { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color: #0069B4; } 
  .hd-info > li:first-child:after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 30px); background: #e4e4e4; } 
  .hd-menu > li > a:hover, .hd-menu > li > a.active {
      color: #000;
      font-weight: 700;
  }
  .hd-menu > li:not(:last-child):before {
    display: none;
  }
  .hd-menu > li > a:hover:before,
  .hd-menu > li > a.active:before{display: none;}
  .hd-menu > li > a.active:after{
    transform: rotate(0);
}
  .btn-openNav.active{background-image: url(../../images/cmn/ico-close.svg);}
  .mobile-cart{display: block;position: absolute;right: 100px;z-index: 111;}



  /*--------------------------- FOOTER --------------------------*/
  .ft-link > ul{gap: 30px;}
  .ft-link a{font-size: 12px;}
  .ft-cont .inner{align-items: flex-end;}
  .ft-cont__left{flex-direction: column; margin-right: 65px;}
  .ft-cont__info{margin-left: 0; margin-top: 20px;}
  .ft-cont__info > p{margin-top: 10px; font-size: 12px;}
  .ft-cont__info > p > span{display: block;margin-top: 10px;}
  .ft-cont__info .ft-info__num span{display: inline-block; margin-top: 0;}
  .ft-info__num span:not(:first-child){margin-left: 15px;}
  .ft-cont__info .copyright{font-size: 12px;}
  .ft-count > ul{padding: 10px 0;}
  .ft-count > ul > li{padding: 0 20px; font-size: 12px;}


  /*-------------------------- COMPONENT --------------------------*/
  .thumb-list>ul>li{width: 33.3333%; padding-bottom: 60px;}
  .main-product__wrap{display: block;margin-top: 20px;position: static;}
  .prd-filter {display: none;}
  .filter-btn__wrap {display: flex; justify-content: right;}
  .prd-filter {float: none;position: fixed;right: 0;top: 0;width: 100%;height: 100vh;overflow-y: auto;background: #fff;z-index: 11;padding: 0;display: none;padding: 81px 0;} 
  .filterApply-btn{display: block; position: fixed; bottom: 0; left:0; width: 100%; height: 60px; font-size: 18px; font-weight: 700;}
  .filter-list{padding: 0 40px;padding-bottom: 60px;}
  .prd-search {background-color: #F2F7FB; padding: 15px 40px;}
  .prd-filter .input-row input:not(:last-child){margin-right: 0}
  .filter-wrap {
    position: static;
    top: auto;
    left: auto;
    height: auto;
    width: 100%;
  }
  .product-container .filter-wrap {
    position: absolute;
    right: 40px;
    top: 5px;
    width: auto;
    left: unset;
  }
  .product-container .main-product__wrap{padding-top: 0;}
}


@media screen and (max-width:768px) { 
  .pc-ver { display: none !important; } 
  .mobile-ver { display: block !important; }


  /*--------------------------- LAYOUT --------------------------*/
  .inner{padding: 0 20px;}
  .container{padding-top: 60px;}

  /*-------------------------- HEADER --------------------------*/
  .hd-wrap{height: 60px;}
  .hd-wrap__logo > a{width: 120px; height: 22px;}
  .btn-openNav{width: 40px; height: 40px; background-image: url(../../images/cmn/gnb-btn__m.svg); right: 20px; top: 10px;}
  .gnb-wrap {
    padding-top: 60px;
  }
  .mobile-cart{right: 70px;}
  .mobile-cart .hd-info__cart{width: 41px; height: 41px;}
  .hd-info__cart .cart-num{width: 18px; height: 18px; font-size: 12px;}
  .hd-info > li > a{height: 50px; font-size: 16px;}
    

  /*--------------------------- FOOTER --------------------------*/
  .ft-link > ul{height: auto;margin: 0 -10px;padding: 15px 20px;padding-bottom: 0;flex-wrap: wrap;gap: unset;width: 340px;}
  .ft-link > ul > li{margin-bottom: 15px;padding: 0 10px; position: relative;}
  .ft-link > ul > li:not(:nth-child(3), :last-child):after{content: '|';position: absolute;top: 50%;right: 0;transform: translateY(-50%);font-size: 14px;font-weight: 500;color: #C7C7C7;}
  .ft-cont{margin-top: 30px;}
  .ft-cont .inner{flex-direction: column;align-items: baseline;}
  .ft-cont__left{margin-right: 0; margin-bottom: 25px;}
  .ft-cont__info > p{line-height: 26px; margin-top: 0;}
  .ft-cont__info > p > span{margin-top: 0;}
  .ft-cont__info .copyright{margin-top: 0;}
  .ft-cont__right{width: 100%;}
  .ft-count > ul{justify-content: center;}
  .ft-call__cont {
	    width: 100%;
	    text-align: center;
	    flex: 1;
	}
	
	.ft-call__cont > ul {
	    justify-content: center;
	}
  
  /*-------------------------- COMPONENT --------------------------*/
  .thumb-list>ul>li{width: 50%; padding-bottom: 40px;}
  .thumb-img__tag{min-width: 50px; font-size: 12px;}
  .thumb-cont{margin-top: 15px;}
  .thumb-cont .thumb-cont__category{font-size: 12px;}
  .thumb-cont h4{font-size: 14px;}
  .filter-btn{width: 80px; height: 30px; font-size: 14px; color: #F7F7F7;}
  .prd-filter{padding: 60px 0;}
  .prd-search{padding: 15px 20px;}
  .filter-list{padding: 0 20px;padding-bottom: 60px;}
  .product-container .filter-wrap{right: 20px;}


  /*-------------------------- modal --------------------------*/
  .modal.modal-common,
  .modal.modal-common .alert__cont { width: calc(100% - 30px); max-width: 100%; padding: 20px; } 
  .modal__close { right: 15px; top: 15px; } 
  .modal.modal-common .modal-cont__tit { margin-bottom: 7px; } 
  .modal.modal-common .btn_modal { margin-top: 20px; } 
}