/* BASIC css start */
/* 메인 롤링 배너 */
.sliderWrap { position:relative; min-width:1200px; height:560px; overflow:hidden }
.sliderWrap .sliderArea { margin-left:-960px; position:absolute; top:0; left:50%; width:1920px; height:560px }
.sliderWrap .sliderArea img{width:100%;}
.sliderArea .bx-pager{position:absolute;bottom:20px;left:0;right:0;z-index:60;text-align:center;}
.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:18px;height:3px;font-size:0;margin:2px;background-color: rgba(0,0,0,0.4)}
.sliderArea .bx-pager-link.active{width: 30px; background-color: rgba(0,0,0,0.8);}
.sliderArea .bx-controls-direction {position:absolute;top:50%;left:50%;z-index:60;text-align:center;opacity: 0;}
.sliderArea:hover .bx-controls-direction {opacity:1.0;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;}
.sliderArea .bx-prev, .sliderArea .bx-next{position:absolute;top:0;margin-top:-25px;font-size:36px;display:inline-block;width:50px;height:50px;color:#777;}
.sliderArea .bx-prev i, .sliderArea .bx-next i {line-height: 50px;}
.sliderArea .bx-prev{left:0;margin-left:-600px;}
.sliderArea .bx-next{right:0;margin-right:-600px;}
.sliderArea .bx-prev:hover,
.sliderArea .bx-next:hover{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;background-color: rgba(0,0,0,0.8); color:#fff; }

/* 메인 서브 배너 */
.subbnArea {position: relative;margin-top: 12px;margin-left:-12px;}
.subbnArea:after { content: ""; display: block; clear: both; }
.subbnArea .sub_banner li { float: left; margin-left: 12px; }

/* tabProduct */
#tabProduct { visibility:hidden; position:relative; margin-top:70px; }
#tabProduct .newCate_prod { position:relative }
#tabProduct .newCate_prod .newCateTab {zoom: 1;overflow: hidden;}
#tabProduct .newCate_prod .newCateTab li{ float:left; width:20%; }
#tabProduct .newCate_prod .newCateTab li a {display:block;height:50px;font-size:14px;color:#999;text-align:center;line-height:50px;border-top: 1px solid #ddd;border-bottom:1px solid #a7a7a7;background:#f8f8f8;}
#tabProduct .newCate_prod .newCateTab li:first-child a { border-left: 1px solid #ddd;}
#tabProduct .newCate_prod .newCateTab li:last-child a { border-right: 1px solid #ddd;}
#tabProduct .newCate_prod .newCateTab li a.active { color:#111; background-color:#fff; border: 1px solid #a7a7a7; border-bottom: 1px solid #fff; }
#tabProduct .newCate_prod .newCateList {position:relative;border: 1px solid #a7a7a7;border-top:0;padding:19px;}
#tabProduct .newCate_prod .newCateList a {display:block;}
#tabProduct .newCate_prod .slideList ul {margin-left: -3px;}
#tabProduct .newCate_prod .slideList li {float: left;position:relative;width: 191px;margin: 0 0 3px 3px; border: 1px solid #dcdcdc; box-sizing: border-box;}
#tabProduct .newCate_prod .slideList li.item1 {width: 384px;}
#tabProduct .newCate_prod .slideList li .thumb img {width:100%;}
#tabProduct .newCate_prod .slideList li .thumb:hover img {opacity:0.7; filter:alpha(opacity=70);}
#tabProduct .newCate_prod .slideList .ncsNum {display: block;position: absolute;top: 0;left:0;width: 60px;height: 24px;line-height: 24px;text-align: center;background: #000;opacity:0.6;filter:alpha(opacity=60);color:#fff;z-index: 9;}
#tabProduct .newCate_prod .prd-info-bx {position:absolute;bottom:0;left:0;right:0;text-align:center; }
#tabProduct .newCate_prod .prd-info-bx .prd-info {background:#fff; opacity:1; filter:alpha(opacity=80);padding: 10px;  }
#tabProduct .newCate_prod .prd-info-bx .prd-price strike { color:#999; font-weight: normal; font-size: 12px; margin-right: 5px;}
#tabProduct .newCate_prod .prd-info-bx .prd-price {padding-top:3px;font-size:14px; font-weight: bold;color: #292929;}
#tabProduct .newCate_prod .slideList .prd-wish {display: block; position: absolute;top:10px;right: 5px; z-index: 9;}
#tabProduct .newCate_prod .slideList .prd-wish i.xi-heart,
#tabProduct .newCate_prod .slideList .prd-wish i.xi-heart-o { margin-right: 4px; color: #c8c8c8; font-size: 22px; vertical-align: text-top; cursor:pointer; }
#tabProduct .newCate_prod .slideList .prd-wish i.xi-heart { display:none; color: #f41f3a; }
#tabProduct .newCate_prod .slideList .prd-wish .wish-on i.xi-heart { display:inline-block; }
#tabProduct .newCate_prod .slideList .prd-wish .wish-on i.xi-heart-o { display:none; }



/* 메인 중간 배너 */
.mdlArea01 { margin-top: 50px; }
.mdlArea02 {margin-top: 90px;}

/* 상품 타이틀 */
.h_title {padding: 70px 0 35px;text-align:center;}
.h_title h3 { font-size: 24px; font-weight:bold; color:#292929; }



/* NEW ARRIVALS, SPECIAL ITEM - 기본 상품 5개 진열 > 공통css 수정 */


/* 위클리 베스트 */
.bestCateList { position:relative }
.bestCateList .slideList ul {margin-left: -15px;}
.bestCateList .slideList li { position:relative; float:left;width: 228px;padding: 0 0 15px 15px;}
.bestCateList .slideList li .thumb img {width:100%; border:1px solid #dcdcdc; box-sizing:border-box; border-radius:10px;}
.bestCateList .prd-info-bx {display:none;position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;margin-left: 15px;}
.bestCateList .prd-info-bx .prd-info {position:absolute;top:50%;left:0;right:0;margin-top: -50px;z-index:10;}
.bestCateList .prd-info-bx .prd-subname{padding: 15px 25px; }
.bestCateList .prd-info-bx .prd-price strike { color:#999; font-weight: normal; font-size: 12px; margin-right: 5px;}
.bestCateList .prd-info-bx .prd-price {padding-top:3px;font-size:14px; font-weight: bold;}
.bestCateList .prd-info-bx .bg {position:absolute; top:0; left:0; right:0;bottom:0;background:#fff; opacity:0.8; filter:alpha(opacity=80); z-index:0 }
.bestCateList .bx-pager{position:absolute;bottom: -15px;left:0;right:0;z-index:60;text-align:center;}
.bestCateList .bx-pager-item{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;display:inline-block;position:relative;}
.bestCateList .bx-pager-link{display:inline-block;width:18px;height:3px;font-size:0;margin:2px;background-color: rgba(0,0,0,0.4)}
.bestCateList .bx-pager-link.active{width: 30px; background-color: rgba(0,0,0,0.8);}

.bestCateList .prd-info-bx .prd-wish {display: block; padding-top: 20px}
.bestCateList .prd-info-bx .prd-wish i.xi-heart,
.bestCateList .prd-info-bx .prd-wish i.xi-heart-o { margin-right: 4px; color: #c8c8c8; font-size: 22px; vertical-align: text-top; cursor:pointer; }
.bestCateList .prd-info-bx .prd-wish i.xi-heart { display:none; color: #f41f3a; }
.bestCateList .prd-info-bx .prd-wish .wish-on i.xi-heart { display:inline-block; }
.bestCateList .prd-info-bx .prd-wish .wish-on i.xi-heart-o { display:none; }



/*main-banner-user nkjung*/

    .nkjung-swiper-wrapper{
        position: relative;
        height:450px;
        margin:20px auto;
        width:1350px;
        border-radius:25px;
        background-size: cover;
        background-image : url(/design/wmullyu/12281/tem119/swiper/back.jpg);
        
    }

    .nkjung-swiper-wrapper .swiper {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .nkjung-swiper-wrapper .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
      border-radius: 10px;
      opacity: 0.5; /* 기본 50% 투명도 */
      transition: opacity 0.3s ease; /* 전환 효과 */
      transition: transform 0.5s ease, opacity 0.5s ease; /* 트랜지션 추가 */
    }
    
    .nkjung-swiper-wrapper .swiper-slide img{
      border: 1px solid #dcdcdc;
      border-radius: 10px;
      box-sizing: border-box;
    }

    .nkjung-swiper-wrapper .swiper-slide img {
      display: block;
      width: 100%;
      transition: transform 0.3s ease;
    }

    .nkjung-swiper-wrapper .swiper-slide-active img:hover {
      transform: scale(1.05); /* 살짝 확대 효과 */
    }
    .nkjung-swiper-wrapper .swiper-slide-active {
      opacity: 1; /* 100% 투명도 */
    }

    .nkjung-banner_01 {
        position: relative;
        margin: 70px auto 0 auto;
        height: 350px;
        width: 1200px;
        cursor: pointer;
    }

    .nkjung-banner_01 > img {
        position: absolute;
        border: 1px solid #dcdcdc;
        border-radius: 10px;
        box-sizing: border-box;
        width: 100%; /* 이미지를 부모 요소에 맞게 크기를 지정 */
        height: 100%;
    }

    .nkjung-banner-img-opacity-0 {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    .nkjung-banner-img-opacity-1 {
        opacity: 1;
        transition: opacity 0.5s ease;
    }
    
    .nkjung-contaner{
        position: relative;
        width:100%;
        height:100%;
        border: 1px solid #dcdcdc;
        border-radius: 10px;
        box-sizing: border-box;
        padding:0;
        margin:0;
    }
    
    .container{
        position: absolute;
        width:100%;
        height:100%;
        overflow:hidden;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    .slider{
        position: absolute;
        inset:50px 200px 50px 50px;
    }
    
    .slider .slides{
        position: absolute;
        top:50%;
        transform:translateY(-50%);
        width:220px;
        height:280px;
        background:var(--img);
        background-size:cover;
        background-position:center;
        transition:0.5s;
        border-radius:20px;
        box-shadow:0 25px 50px rgba(0,0,0,0.5);
        display:flex;
        justify-content:flex-start;
        align-items:flex-end;
    }
    
    .slider .slides:nth-child(1),
    .slider .slides:nth-child(2){
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        transform:translateY(0);
        box-shadow:0 25px 50px rgba(0,0,0,0);
        background-size:cover;
    }
    
    .slider .slides:nth-child(3){
        left:calc(50% + 240px);
        background-size:cover;
    }
    .slider .slides:nth-child(4){
        left:calc(50% + 500px);
        background-size:cover;
    }
    .slider .slides:nth-child(5){
        left:calc(50% + 760px);
        background-size:cover;
    }
    .slider .slides:nth-child(6){
        left:calc(50% + 1020px);
        background-size:cover;
        opacity:0;
    }
    
    .buttons{
        position: absolute;
        bottom:15px;
        display:flex;
        gap:20px;
    }
    
    .buttons span{
        position: relative;
        width:50px;
        height:50px;
        background:#111;
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius:50%;
    }
    
    .buttons span::before{
        content:"";
        position: absolute;
        width:15px;
        height:15px;
        border-top:4px solid #fff;
        border-left:4px solid #fff;
        transform:rotate(315deg) translate(2px, 2px);
    }
    
    .buttons span:nth-child(2)::before{
        transform:rotate(135deg) translate(2px, 2px);
    }
    
    .buttons span:active{
        opacity:0.5;
    }

    .content h2{
        font-size:30px;
        font-weight:700;
        color:#ffffff;
    }
    .content p{
        font-size:16px;
        color:#ffffff;
    }
    .content{
        position: relative;
        padding:40px;
        max-width:600px;
        transition:0.25s;
        transition-delay:0s;
        transform:translateY(40px);
        z-index:1000;
        opacity:0;
    }
    
    .slider .slides:nth-child(1) .content,
    .slider .slides:nth-child(2) .content{
        opacity:1;
        transform:translateY(0px);
        transition-delay:0.5s;
    }
    
    
    
    .slider-3d-card{
        position: relative;
        margin:0;
        padding:0;
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius:20px;
        min-height:100%;
        background:linear-gradient(330deg, #2b2b2b, #2b2b2b 50%, #e91e63 50%,  #e91e63 100%);
    }
    
    .container-2{
        position: relative;
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        padding:50px 20px;
        transform-style:preserve-3d;
    }
    
    .container-2 .card{
        width:180px;
        height:180px;
        margin:50px 20px;
        background:rgba(255,255,255,0.1);
        display:flex;
        border-radius:4px;
        flex-direction:column;
        transform-style:preserve-3d;
        box-shadow:0 5px 20px rgba(0,0,0,0.2);
        transition:height 0.5s ease-in-out;
        cursor:pointer;
    }
    
    .container-2 .card:hover{
        height:240px;
    }
    
    .container-2 .card .imgBx{
        position: relative;
        top:0;
        left:0;
        right:0;
        min-width:initial;
        width:180px;
        height:170px;
        border-radius:4px;
        z-index:1;
        box-shadow:0 5px 20px rgba(0,0,0,0.2);
        transform-style:preserve-3d;
        transition:0.5s;
    }
    
    .container-2 .card:hover .imgBx{
        top:-30px;
        left:10px;
        right:10px;
        width:170px;
        transform:translate3d(0,0,75px);
    }
    
    .js-tilt-glare{
        border-radius:4px;
    }
    
    .container-2 .card .imgBx img{
        max-width:100%;
        border-radius:4px;
        cursor:pointer;
    }
    
    .container-2 .card .content-1{
        position: relative;
        padding:10px 15px;
        text-align:center;
        color:#ffffff;
        visibility:hidden;
        opacity:0;
        transition:0.5s;
        transform:translateY(-50px) scale(1);
    }
    
    .container-2 .card:hover .content-1{
        visibility:visible;
        opacity:1;
        transform:translateY(-10px) scale(1);
    }
    
    .icon-banner{
        margin-top: 70px;
        height:100px;
    }
    ul.my-icon{
        display:flex;
        height:100%;
        justify-content: space-between;
        width: 1350px;
        margin:0 auto;
    }
    ul.my-icon > li{
        box-sizing:border-box;
    }
    .icon-banner-slide{
        margin-top: 70px;
        height:400px;
    }
    .icon-banner-slide-wrapper{
        width: 1350px;
        margin:0 auto;
        height:100%;
        overflow:hidden;
        position: relative;
    }
    
    .myIconSlide{
        top:0;
        left:0;
        position:absolute;
        display:flex;
        transition:0.6s cubic-bezier(0.83, 0, 0.17, 1);
    }
    
    .banner-box-3d-wrapper {
         height:400px;
         margin:70px auto 0 auto;
         width:1200px;
         border-radius:20px;
         display:flex;
         justify-content:center;
         background-image:url(/design/wmullyu/12281/tem119/common/banner_back.jpg);
         background-size: cover;
    }
    .banner-box-3d{
        margin:0;
        padding:0;
        position: relative;
        display:flex;
        justify-content:center;
        align-items:center;
        /*background:#f5f5f5;*/
        box-sizing:border-box;
        width:400px;
        height:100%; 
        /*border:1px solid #dcdcdc;
        border-radius:20px 0 0 20px;*/
    }
    
    .box-3{
        position: relative;
        top:-10px;
        width:240px;
        height:300px;
        transform-style:preserve-3d;
        transform:perspective(1000px) rotateY(0deg);
        transition:1.5s;
    }
    
    .box-3::before{
        content:'';
        position:absolute;
        width:180px;
        height:180px;
        background:#2225;
        z-index:1001;
        transform:translateY(200px) rotateX(90deg) scale(1.1);
        filter:blur(40px);
    }
    
    .box-3 .card-3 {
        position: absolute;
        top:0px;
        left:0px;
        width:100%;
        height:300px;
        background:liner-gradient(90deg,#ddd,#eee);
        transform-origin:center;
        transform-style:preserve-3d;
        transform:rotateY(calc(var(--i)*90deg)) translateZ(120px);
    }
    
    .box-3 .card-3 .imgBx-3{
        position: relative;
        width:100%;
        height:240px;
    }
    
    .box-3 .card-3 .imgBx-3 img{
        position: absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        object-fit:cover;
    }
    
    .box-3 .card-3 h2{
        position: relative;
        top:10px;
        width:240px;
        text-align:center;
        font-size:1em;
        font-weight:500;
        line-height:1em;
        transform-style:preserve-3d;
        transform:translateZ(30px);
        backface-visibility:hidden;
    }
    
    .box-3 .card-3 h2 span{
        font-size:0.75em;
        color:#f44336;
    }
    
    .btns-3{
        position: absolute;
        bottom:10px;
        display:flex;
        gap:30px;
    }
    
    .btns-3 div{
        position: relative;
        width:40px;
        height:40px;
        border:1px solid #333;
        border-radius:50%;
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    .btns-3 div:active{
        background:#333;
    }
    
    .btns-3 div::before{
        content:"";
        position: absolute;
        width:10px;
        height:10px;
        border-top:3px solid #fff;
        border-left:3px solid #fff;
        transform:rotate(135deg) translate(0, 2px);
    }
    
    .btns-3 div.prev-3::before{
        transform:rotate(315deg) translate(2px, 2px);
    }
    
    .box-3d-content{
        position: relative;
        box-sizing:border-box;
        width:800px;
        height:100%;
        /*border:1px solid #dcdcdc;
        border-left:0;*/
        overflow:hidden;
        /*border-radius:0 20px 20px 0;*/
    }
    .box-3d-content > div{
        position: absolute;
        top:0;
        left:0;
        width:800px;
        box-sizing:border-box;
        transition:1.5s;
    }
    .box-3d-content > div > div{
        width:800px;
        height:400px;
        /*background:#ffffff;*/
        box-sizing:border-box;
    }
    
    .box-3d-content-wrap > div{
        display:flex;
        justify-content:center;
        padding-top:10px;
    }
    
    .box-3d-content-wrap .newArrivals .item-list {
        width:145px;
    }
    
    .box-3d-content-wrap .newArrivals .inner-price{
        position: absolute;
        top:117px;
        width:100%;
        background:#fff;
        height:25px;
        border-top:1px solid #eeeeee;
        border-radius:0 0 10px 10px;
        line-height:25px;
        text-align:center;
    }
    
    .box-3d-content-wrap .newArrivals .inner-price span{
        color:red;
        font-weight:700;
        font-size:13px;
    }

    .icon-banner-slide-wrapper .item-wrap .item-cont .item-list{
        width:210px;
        padding-bottom:0;
    }
    
    .myIconSlide > div{
        box-sizing:border-box;
        border-radius:20px;
        width:1350px;
        height:400px;
        display:flex;
        justify-content:center;
        align-items:center;
        border: 1px solid #eeeeee;
    }
    .icon-banner .my-icon > li{
        width:85px;
        height:85px;
        border-radius:30px;
        cursor:pointer;
        display:flex;
    }
    .icon-banner .my-icon > li span img{
        border-radius: 30px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
    }
    .icon-banner .my-icon > li:hover span img{
        transition:0.6s;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    }
/*main-banner-user nkjung*/


/* special item */
#specialItem .item-wrap .item-cont .item-list{ width:282px; padding:0 24px 40px 0 }
#specialItem .item-wrap .item-cont .item-list .thumb a { width: 100%; }
#specialItem .item-wrap .item-cont .nomg { padding-right:0px }

/* 인스타그램 */
.instaWrap .h_title h3 span {font-size: 14px;margin-left: 5px;font-weight: normal;}
.instaWrap {text-align:center; }


/* BASIC css end */