/* BASIC css start */
* {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

del {
    text-decoration: line-through;
}

select {
    border: 0;
}


.cateimg {
    width:100%;
    margin-bottom:100px;
}

div.introimg { 
    position:relative;
}

.introimg img {
    width: 100%;
}

.main{
    width: 100%;
    display: block;
}

.main_tit_mask{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    z-index: 10;
    line-height: 0;

    opacity: 0;                         /* 초기 완전 숨김 */
    -webkit-mask-position: 100% 0;      /* 완전 가림 상태에서 시작 */
          mask-position: 100% 0;

  /* 마스크 기본 */
    -webkit-mask-image: linear-gradient(90deg, #1b1b1b 50%, transparent 50%);
    -webkit-mask-size: 200% 100%;
    -webkit-mask-repeat: no-repeat;
    
    mask-image: linear-gradient(90deg, #1b1b1b 50%, transparent 50%);
    mask-size: 200% 100%;
    mask-repeat: no-repeat;
}

.main_tit_mask.on{
    opacity: 1;
    animation: typingMask 1.0s linear forwards;
}

.main_tit{
    width: 100%;
    display: block;
    height: auto;
}


@keyframes typingMask{
  from{
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
  to{
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}


.ani_wrap{
    position: relative;
    width:100%;
    overflow: hidden;
}

.ani_wrap .position{
    position: absolute;    
}

.fade-wrap {
    transition: 1.3s;
    opacity: 0;
    position: relative;
    right: -100px;
}

.fade-wrap.fade-in {
    opacity: 1;
    right: 0;
}

.fade-wrap.from-left {
    right: auto;     /* 기존 right 무효화 */
    left: -100px;
}

.fade-wrap.from-left.fade-in {
    left: 0;
}

.fade-wrap.from-left {
    right: auto;     /* 기존 right 무효화 */
    left: -100px;
}

.fade-wrap.from-left.fade-in {
    left: 0;
}


.swiper-container {
   padding-bottom: 0 !important;
   overflow:hidden;
}

.swiper-wrapper {
    position: relative;
    width: 100% !important;
}

.swiper-slide img {
    width: 100%;
}

.swiper-button-next {
    background: url(http://liberclassy.jpg3.kr/BANNER/2026_special/0127_business/arrow_next.png) center center no-repeat !important;
    top: 37% !important;
    right: 0 !important;
    height: 30px !important;
    width: 30px !important;
    background-size: cover !important;
}

.swiper-button-prev {
    background: url(http://liberclassy.jpg3.kr/BANNER/2026_special/0127_business/arrow_prev.png) center center no-repeat !important;
    top: 37% !important;
    left: 0 !important;
    height: 30px !important;
    width: 30px !important;
    background-size: cover !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}


p.subName {
   color: #1b1b1b;
   word-break: break-all;
   font-size: 14px;
   text-align: left;
   line-height: 17px;
   padding-bottom: 3px;
}


.list_shopping2x li {
    width: 48%;
    display: inline-block;
    position:relative;
    padding-bottom: 25px;
    text-align: left;           
}

.list_shopping2x .list_shoppingInfo {
    padding: 0 3%;
}


.list_array {
     margin-bottom: 20px;
}

.list_arrayLeft{margin-top:0 !important;}

.list_arrayLeft ul {
    overflow: hidden;
}

.list_arrayLeft ul li {
    float: left;
    margin-left: 10px;
    line-height: 50px;
}

.list_arrayLeft ul li:first-child {
    margin-left: 0;
}


div.recmd_item{  
    padding: 25% 0 !important; 
    overflow: hidden;
}

.recmd_item > div {
    width:100%;
}

.recmd_item .listName{   
    padding-top:0px;
    text-align: left;
    font-size: 12px;
    color: #797979;
}
    

.recmd_item .listPrice{
    display: inline-block;
    margin-right: 6px;
    float: left;
    font-size: 0.9REM;
    color: #1b1b1b;  
    font-weight: 600;
}
    
 .recmd_item   figcaption.list_shoppingInfo {  margin: 14px 0 0 5px;}


div.thumb{
    position: relative ;
}

.listPrice{
    margin-bottom: 0 !important;
}

.listName{
    display: inline-block;
    padding-top:0px;
    text-align: left;
    font-size: 12px;
    color: #797979;
}

.subName {
   color: #1b1b1b;
   word-break: break-all;
   font-size: 13px;
   text-align: left;
   line-height: 17px;
   padding-bottom: 3px;
}

.listpercent {
    color: #f03e24;
}

.sold {
    color: #f03e24;
    font-size: 0.85rem;
    font-weight: 500;
}


span.my-wish-list {
   position: absolute;
   display: inline-block;
   width: 16px;
   height: 14px;
   top: 105.5%;
   right: 9px;
   z-index:10;
}

span.my-wish-list img {
   width:100%;
}


/*옵션*/
div.option {
    position: relative;
    display: inline-block;
    padding-left: 4%;
}

div#MK_opt_preview.mk_option_preview {
    position: absolute;
    top:0;
    left:0;
    
}

ul.mk_prd_option_list {
    border:1px solid #797979;
    font-family:'Pretendard Variable';
    
}

.mk_prd_option_list h5.option-name {
    color: #1b1b1b;
    font-size: 13px;
    background-color: #f1f1f1;
    border-left: 0px solid #fff;
    border-bottom: 0px solid #eee;
}

.mk_prd_option_list span.option-required {
   color: #f03e24;
}

li.mk_opt_top {
   padding: 2px 3px 3px;
}

.mk_opt_top_text {
    margin-top: 2px;
    color: #797979;
    font-size:12px;
}

.mk_opt_top_close a {
    color: #797979;
    font-size: 12px;
}

.mk_prd_option_list .mk_bt_opt_close {
    display: none;
}

.mk_prd_option_list LI {
   font-size: 13px;
       font-family: "Pretendard Variable";
}

li.mk_opt_unit {
   padding: 2px;
}

.mk_prd_option_list .option-soldout {
   color: #f03e24 !important;
}


.cate-sort {
    margin: 0 auto;
    text-align: left;
    margin: 0 auto;
}


MS_prod_mobile_image {
    width: 100%
}


img.MS_prod_img_s {
    width: 100%;
}


/* =============================================================================
   페이징
================================================================================*/
.paging { padding-top: 30px; padding-bottom:30px; margin-top:-20px; text-align: center; line-height: 0; vertical-align: top; }
.paging li { display: inline;}
.paging li a { overflow: hidden; width: auto; height: 30px; padding: 0 7px; color: #1b1b1b; cursor: pointer; border:none; font-size:13px; }
.paging li a:hover,
.paging li.now a { font-weight: bold; letter-spacing: -1px; }
.paging li.first a,
.paging li.prev a,
.paging li.next a,
.paging li.last a { padding: 0 3px; }
.paging li.prev { margin-right: 10px; }
.paging li.next { margin-left: 10px; }

@media screen and (min-width:420px) and (max-width: 767px) {
.list_shopping2x li {
     width: 49%;
}

/* BASIC css end */