/* BASIC css start */
#content #main .swiper-pagination {width:82%;}
#content #main .swiper-pagination .swiper-pagination-bullet {width:12px !important; height:12px !important; margin:0 10px 0 0 !important; border-radius:5px 6px 6px 6px !important;}
#main .visual {width:100%; *zoom:1; }
#main .visual:after {content:""; display:block; clear:both;}
#main .visual .rolling1 {width:100%; overflow:hidden; margin:0 0 30px 0;  }
#main .visual .banArea {float:right; width:395px; overflow:hidden;}
#main .product_tab {margin:33px auto 0 auto; width:1192px;}
#f2s-rolling-container1 .swiper-button-prev i { color: rgb(255, 255, 255); font-size: 100%; padding-left: 364px;}
#f2s-rolling-container1 .swiper-button-next i { color: rgb(255, 255, 255); font-size: 100%; padding-right: 364px;}


 /* jssor slider thumbnail navigator skin 12 css *//*
.jssort12 .p            (normal)
.jssort12 .p:hover      (normal mouseover)
.jssort12 .pav          (active)
.jssort12 .pav:hover    (active mouseover)
.jssort12 .pdn          (mousedown)
*/
.jssort12 .w {cursor: pointer; position: absolute; WIDTH: 170px; HEIGHT: 36px; top: 0px; left:0px;}
.jssort12 .p {    position: absolute;    width: 170px;    height: 36px;    top: 0;    left: 0;    padding: 0px;}
.jssort12 .c {    width: 100%;    height: 100%; position: absolute; top: 0; left: 0; line-height:36px; text-align: center; font-family: 'Metrophobic', Arial, serif; font-weight: 300; color:#010101; font-size:13px; background:url(/design/girlsje/image/itabBG.gif) 0 0 no-repeat;}
.jssort12 .pav .c, .jssort12 .p:hover .c {background:url(/design/girlsje/image/itabBGov.gif) 0 0 no-repeat;}

#jssor_1 {position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1192px; height: 545px; overflow: hidden; visibility: hidden;}
#jssor_1 .slide_con {position: absolute; top: 0px; left: 0px; width: 1192px; height: 545px;}



#main .product_tab .utab {width:100%; margin:0 0 10px 1px; *zoom:1;}
#main .product_tab .utab:after {content:""; display:block; clear:both;}
#main .product_tab .utab li {
       float:left; margin-left:-1px; padding:10px 0; text-align:center; width:14.1%; border:1px solid #b3b3b3; border-bottom:2px solid #000;
       font-family: 'Metrophobic', Arial, serif; font-weight: 300; color:#010101; font-size:13px; cursor:pointer; 
}
#main .product_tab .utab li.active, #main .product_tab .utab li:hover {border:2px solid #000; border-bottom:none;}




#main .product_tab .ucont div {margin-bottom:45px; margin-left:-6px; *zoom:1;}
#main .product_tab .ucont div:after {content:""; display:block; clear:both;}
#main .product_tab .ucont div.db {display:block;}
#main .product_tab .ucont div li {float:left; margin:0 0 6px 6px; width:167px; height:242px; text-align:center; overflow:hidden;}
#main .product_tab .ucont div li img {width:auto; height:242px;}
#main .product_tab .ucont div li.tabimgNum1 {width:500px; height:490px;}
#main .product_tab .ucont div li.tabimgNum1 img {width:500px; height:auto;}


.thumb {height:450px;}


/* best-evt */
#main .best-evt { zoom: 1; overflow: hidden; margin-top: 20px; }
/* slideBestEvt */
#main #slideBestEvt { float: left; width: auto; border-left: 0; }
/* hashBestEvt */
#main #hashBestEvt { position: relative; float: right; }
/* headlineBanner */
#main #headlineBanner { position: relative; margin-top: 20px; }
/* mdItem */
#main #mdItem { position: relative; margin-top: 20px; }



/* =========================================
   메인 상품 진열 제목 공통 디자인
========================================= */

#main .main-section-title {    width: 100%;    box-sizing: border-box;    margin: 0;    padding: 0 0 20px 0;    font-family: fantasy;    font-size: 48px;    font-weight: bolder;    line-height: 1.3;    color: #000;    text-align: center;}


/* =========================================================
   PC 메인 BEST ITEM - 상품 정보 디자인
   - 할인 전 가격
   - 할인율
   - 판매가격
   - 판매수
   - 리뷰수
========================================================= */

/* [01] 가격 전체 영역 */
#main .item-wrap .item-list .org_price {
    display: grid;
}

/* [02] 할인 전 가격 및 할인율 */
#main .item-wrap .item-list .price-original {
    color: #ff0000;
    font-size: x-small;
    font-weight: normal;
}

/* [03] 할인율 */
#main .item-wrap .item-list .price-discount {
    color: #ff0000;
    font-size: inherit;
    font-weight: inherit;
}

/* [04] 실제 판매가격 */
#main .item-wrap .item-list .price-current {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* [05] 품절 표시 */
#main .item-wrap .item-list .price-soldout {
    color: #ff0000;
    font-weight: bold;
}

/* [06] 구매 수 */
#main .item-wrap .item-list .order_stock {
    display: inline-block;
    float: left;
    margin-top: 5px;
    color: #000;
    font-weight: 500;
    font-size: 11px;
}

/* [07] 리뷰 수 */
#main .item-wrap .item-list .review_count {
    display: inline-block;
    float: left;
    padding-left: 15px;
    margin-top: 5px;
    color: #000;
    font-weight: 500;
    font-size: 11px;
}

/* [08] 상품 아이콘 */
#main .item-wrap .item-list .product-icons {
    clear: both;
}







/* =========================================================
  PC CATEGORY ITEM / 3차 CSS
  기존 슬라이더 CSS(ufcs-)는 삭제하고 이것만 사용
========================================================= */
#uf-category-slider.ufcs {
  width: calc(100% - 40px); max-width: 1400px;
  margin: 60px auto; box-sizing: border-box; color: #111;
}
#uf-category-slider, #uf-category-slider * {box-sizing:border-box;}
#uf-category-slider .ufcs-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
#uf-category-slider .ufcs-head h2 {margin:0;padding:0;font:700 24px/1.4 Arial,sans-serif;}
#uf-category-slider .ufcs-arrows {display:flex;gap:8px;}
#uf-category-slider .ufcs-arrows button {width:32px;height:32px;background:#fff;border:1px solid #ccc;cursor:pointer;color:#111;}
#uf-category-slider .ufcs-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:15px;border-bottom:1px solid #ddd;}
#uf-category-slider .ufcs-tab {border:0;border-bottom:2px solid transparent;background:#fff;padding:12px 4px;color:#777;cursor:pointer;font:600 14px Arial,sans-serif;}
#uf-category-slider .ufcs-tab.is-active {color:#111;border-bottom-color:#111;}
#uf-category-slider .ufcs-viewport {width:100%;overflow:hidden;}
#uf-category-slider .ufcs-track {display:flex;flex-wrap:nowrap;width:100%;will-change:transform;transform:translate3d(0,0,0);}
#uf-category-slider .ufcs-slide {width:100%;min-width:100%;max-width:100%;flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-content:start;}
#uf-category-slider .ufcs-card {display:block!important;float:none!important;width:auto!important;min-width:0;margin:0!important;padding:0!important;height:auto!important;}
#uf-category-slider .ufcs-card-link {display:block;text-decoration:none;color:#111;}
#uf-category-slider .ufcs-image {display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:#f5f5f5;border-radius:8px;}
#uf-category-slider .ufcs-image img {display:block;width:100%;height:100%;object-fit:cover;border:0;margin:0;}
#uf-category-slider .ufcs-name {display:block;margin-top:8px;line-height:1.4;font-size:13px;overflow-wrap:anywhere;}
#uf-category-slider .ufcs-price {display:block;margin-top:3px;font-size:14px;font-weight:700;line-height:1.4;}
#uf-category-slider .ufcs-dots {display:flex;justify-content:center;gap:10px;margin-top:20px;}
#uf-category-slider .ufcs-dot {width:9px;height:9px;border:0;padding:0;border-radius:50%;background:#ccc;cursor:pointer;}
#uf-category-slider .ufcs-dot.is-active {background:#111;}
/* JS 실행 전 원본 목록도 4열로 표시해 태그 출력 상태를 확인할 수 있게 함 */
#uf-category-slider .ufcs-source {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-bottom:15px;}
/* JS가 4개씩 옮긴 후 원본 영역 숨김 */
#uf-category-slider.ufcs-ready .ufcs-sources {display:none!important;}
@media(max-width:1100px){
  #uf-category-slider.ufcs {width:calc(100% - 24px);}
  #uf-category-slider .ufcs-slide,#uf-category-slider .ufcs-source {gap:12px;}
  #uf-category-slider .ufcs-name {font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
  #uf-category-slider .ufcs-track {transition:none!important;}
}




/* =========================================================
   PC 인싸템 슬라이더 제목 중앙 정렬
   - 제목은 슬라이더 전체 영역 기준 중앙
   - 좌우 화살표는 기존 오른쪽 위치 유지
========================================================= */

/* 제목과 화살표가 포함된 헤더 */
#uf-category-slider .ufcs-head {
    position: relative;
}

/* 인싸템 제목 */
#main #uf-category-slider .ufcs-title.main-section-title {
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 0 0 20px;

    font-family: fantasy;
    font-size: 48px;
    font-weight: bolder;
    line-height: 1.3;
    color: #000;
    text-align: center;
}

/* 오른쪽 화살표 영역 */
#uf-category-slider .ufcs-arrows {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
}

/* BASIC css end */