/* BASIC css start */
#main {width:1300px;margin:0 auto;}

/*타이틀*/
.sec_title {margin:0 0 25px;}
.sec_title .sec_sub_title {display:flex; align-items:center; }
.sec_title .sec_sub_title h2 {vertical-align: text-top;font-size:28px; font-weight:700; flex:1;color:var(--000) }
.sec_title .sec_sub_title span img {vertical-align:middle;margin-right:5px;}
.sec_title .sec_sub_title a {font-size:15px;text-align:right; font-weight:500; color:#333;letter-spacing: -0.02em;}
.sec_title .sec_sub_title .fa {margin:0 5px;font-size: 18px;}
.sec_title p {display:block;font-size:16px;color:#999;margin-top:10px;font-weight:500;}

/*상품리스트*/
.product-wrap { margin:0 auto; position:relative; width:1100px }
.dis_percent {color:var(--main-color);font-weight:}
.prd_list .thumb img {width:100%;border-radius:4px;}
.prd_list .shoppingInfo .cart_button {margin:10px 0;}
.prd_list .shoppingInfo .cart_button a {color:var(--000);font-size: 0.85rem;padding:5px 0 0;box-sizing: border-box;display:inline-block;text-align:center;width:100%;border:1px solid #E5E5E5;border-radius:4px;transition: all 0.2s ; }
.prd_list .shoppingInfo .cart_button .btnOrange.btnBorder {  box-shadow: 0px 0px 0px 0px var(--main-color);}
.prd_list .shoppingInfo .cart_button .btnOrange.btnBorder:hover { border:1px solid var(--main-color); box-shadow: 0px 0px 0px 1px var(--main-color);}
.prd_list .shoppingInfo .cart_button a img {vertical-align:middle;transform: scale(0.7);padding-bottom:5px;}
.reveiw_count {margin-top:10px;font-size: 14px;font-weight:700;}
.reveiw_count .review_numer {color:#999;font-weight:500;}
.reveiw_count .review_star {margin:0 3px;}
.reveiw_count img {vertical-align:top;}
.prd_list {display:flex;}
.prd_list .list3x li {vertical-align:top;width:calc(33.33% - 10px);display:inline-block;margin-right:10px;margin-bottom:40px;}
.prd_list .list3x li:nth-child(3n) {margin-right:0px;}
.prd_list .list5x li {width:calc(20% - 20px);display:inline-block;margin-right:20px;margin-bottom:40px;}
.prd_list .list5x li:nth-child(5n) {margin-right:0px;}
.prd_list .thumb {position:relative;}
.prd_list .thumb .ranking {font-size:16px;position:absolute;left:0;top:0;display:block;width:30px;height:30px;line-height:30px;background-color:var(--main-color);color:var(--fff);text-align:center;z-index:11;gap: 0px;border-radius: 4px 0px 4px 0px;}
.prd_list .list1x li {vertical-align:top;display:inline-block;margin-bottom:40px;}
.prd_list .shoppingInfo .listName a {font-size:16px;color:#222;}
.prd_list .shoppingInfo .listDiscount del {display:inline-block;font-size:14px;color:#999;margin-top:10px;}
.prd_list .shoppingInfo .listPrice {font-size:16px;color:#222;font-weight:800;}
.prd_list .swiper-slide {padding:1px;box-sizing: border-box;}

/* swipe */
.secinner {margin:60px auto;position:relative; width:1100px;}
.sec_content .swiper-button-next {text-indent: -9999px;background-image:url('//skin.makeshop.co.kr/skin/eating/pc/image/swipe_next.png');background-repeat:no-repeat;width:50px;height:50px;right:-25px;background-color:#fff;border-radius:40px; box-shadow: 0 3px 6px rgba(0,0,0,0.10);background-position: 50% center;top:45%;}
.sec_content .swiper-button-prev {text-indent: -9999px;background-image:url('//skin.makeshop.co.kr/skin/eating/pc/image/swipe_prev.png');background-repeat:no-repeat;width:50px;height:50px;left:-25px;background-color:#fff;border-radius:40px; box-shadow: 0 3px 6px rgba(0,0,0,0.10);background-position: 50% center;top:45%;}
.sec_content .swiper-button-lock {display:block;}

/* 메인 비쥬얼 배너 */
#mainSpot { position:relative; width:100%; min-width:1100px; overflow:hidden }
#mainSpot .swiper-slide {margin:0 auto;text-align:center;background:url(/design/ahtty/images/source/ahtty_banner_back.jpg);} 
#mainSpot .bx-pager .bx-pager-item { display:inline-block;  margin:0 7px }
*:first-child+html #mainSpot .bx-pager .bx-pager-item { display:inline } /* IE7 Hack */
#mainSpot .bx-pager .bx-pager-item a { display:block; width:11px; height:11px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/sp_spot_pager.png) 0 0 no-repeat }
#mainSpot .bx-pager .bx-pager-item a.active { background-position:0 -11px }

#sec2 {width:1100px;margin:40px auto;}
#sec2 .sec_content ul {display:flex;align-items: center;justify-content: space-between;}
#sec2 .sec_content ul li {text-align:center;}
#sec2 .sec_content ul li p {font-size:14px;font-weight:400;margin-top:10px;}



#sec2 .sec_content ul li a {display:inline-block; width:76px; height:105px;}
#sec2 .sec_content ul li a div{width:76px; height:76px; border-radius:20px;display:flex;justify-content:center; align-items:center;}

#sec2 .sec_content ul li:nth-of-type(1) a div{ background-color:#fa6b49;}
#sec2 .sec_content ul li:nth-of-type(2) a div{ background-color:#ffe8e8;}
#sec2 .sec_content ul li:nth-of-type(3) a div{ background-color:#a0c9ff;}
#sec2 .sec_content ul li:nth-of-type(4) a div{ background-color:#ffe749;}
#sec2 .sec_content ul li:nth-of-type(5) a div{ background-color:#ffcade;}
#sec2 .sec_content ul li:nth-of-type(6) a div{ background-color:#9f7c7c;}
#sec2 .sec_content ul li:nth-of-type(7) a div{ background-color:#525050;}
#sec2 .sec_content ul li:nth-of-type(8) a div{ background-color:#f7f7f7;}
#sec2 .sec_content ul li:nth-of-type(9) a div{ background-color:#ffb19e;}
#sec2 .sec_content ul li:nth-of-type(10) a div{ background-color:#896cea;}


/* 이미지 배너 */
.imgBanner { margin:30px auto 0; position:relative; width:1100px; overflow:hidden }
.imgBanner ul { *zoom:1 }
.imgBanner ul:after { display:block; clear:both; content:'' }
.imgBanner ul li { padding-right:10px; float:left }

/* 상품 목록 영역 */



/*개인디자인 영역*/

.container_01{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.container_01 .card_0{
    position:absolute;
    width:220px;
    height:300px;
    background:#333;
    border-radius:10px;
    cursor:pointer;
    transition:0.5s;
    display:flex;
    justify-content:center;
    align-items:center;
}
.container_01 .card_0 img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:10px;
    object-fit:cover;
    transition:0.5s;
    filter:grayscale(1);
}
.container_01:hover .card_0{
    transform:rotate(calc(var(--i) * 5deg)) translate(calc(var(--i) * 120px), -50px);
}
.container_01:hover .card_0 img{
    opacity:0.5;
    box-shadow:0 15px 50px rgba(0,0,0,0.25);
}

.container_01 .card_0:hover{
    translate:calc(var(--i) * 20px) -50px;
    z-index:100;
}
https://premium266.makeshop.co.kr/makeshop/newmanager/neodesign_design_edit.html?dgnset_id=61473&page_type=main&design_id=1#edit_body
.container_01 .card_0:hover img{
    filter:grayscale(0);
    opacity:1;
}
.container_01 .card_0::before{
    content:attr(data-text);
    position:absolute;
    top:0;
    white-space:nowrap;
    font-size:1.25em;
    color:#fff;
    font-weight:500;
    transition:0.5s;
    z-index:1000;
    opacity:0;
    text-align:center;
    transform:translateY(100px);
}

.container_01 .card_0:hover::before{
    top:-25px;
    opacity:1;
    transform:translateY(0px);
}

.container_01 .card_0::after{
    content:'';
    position:absolute;
    top:-100px;
    width:50px;
    height:10px;
    background:#ff003b;
    transition:0.5s;
    transform:scaleY(0);
    transform-origin:top;
    z-index:-1;
}

.container_01 .card_0:hover::after{
    transform:scaleY(50);
}


.brand-wrapper{
    height:400px;
}
.brand-title, .brand-design-ele{
    text-align:center;
    font-size:1.5rem;
    font-weight:700;
    padding:15px 0;
    border-radius:10px;
    border-bottom:1px solid #000000;
}
.brand-design-ele{
    border-bottom : 0;
    border-top:1px solid #000000;
}
.brand-list{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    padding-top:10px;
}
.brand-list > div{
    display:flex;
    justify-content:center;
    align-items:center;
    width:240px;
    height:100px;
    border:1px solid #eeeeee;
    border-radius:20px;
    margin-bottom:20px;
    cursor:pointer;
}
/* BASIC css end */