@charset "utf-8";

.main_common_it{position:relative;}

/* 메인 상품 타이틀 공통 */ 
.main_common_it .tit{padding-bottom: 40px;}
.main_common_it .tit h2{padding-bottom:10px;font-size: 35px;}
.main_common_it .tit p.desc{font-size: 16px;font-weight: 500;color: #777;line-height: 1.3;word-break: keep-all;}
.main_common_it .cont{position: relative;}
/* .main_common_it .swiper-slide{max-width:310px} */
.main_common_it .swiper-slide .sct_img{width: 100%;aspect-ratio: 310 / 318;}
.main_common_it .swiper-slide .sct_img a{position: relative;display: block;width: 100%;height: 100%; border-radius: 5px;overflow: hidden;}
.main_common_it .swiper-slide .sct_txt a{display: block;font-family: var(--mainfont);font-size: 20px;font-weight: 600;color: #000;text-align: center;line-height: 1.2;margin-top: 17px;transition:color 0.2s}
.main_common_it .swiper-slide .sct_op_btn{display: none;}
.main_common_it .swiper-slide .sct_img img{width: 100%;height: 100%;object-fit:cover;transition:transform 0.2s}
.main_common_it .swiper-slide:hover .sct_img img{transform: scale(1.1);}
.main_common_it .swiper-slide:hover .sct_txt a{color:var(--primary)}

/* 최신상품 */
.main_common_it .new-badge{position: absolute;top: 20px;right: 22px;display: inline-flex;align-items: center;justify-content: center;padding: 7px 8px;border-radius: 5px;font-size: 12px;font-weight: 700;color: #fff;line-height: 1;}
.main_common_it .new-badge.new{background-color: #fd8105;}
.main_common_it .new-badge.best{background-color: #2C83E9}
/* .main_common_it .tit{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:55px}
.main_common_it .tit p{font-size:72px;font-weight:800;line-height:1;color:#000;word-break:keep-all}
.main_common_it .tit a{flex-shrink:0;display:flex;align-items:center;font-size:16px;font-weight:700;line-height:1;color:#000}
.main_common_it .tit a span{margin-left:10px;font-size:25px;transition:all .2s;font-variation-settings:'wght' 400} */

/* 메인 상품 진열 main.60.skin 커스텀 - 공통 */ 
.main_common_it ul{display:grid;grid-template-columns:repeat(4,1fr);column-gap:20px}
.main_common_it ul li{line-height:1.45}
.main_common_it ul li .thum{overflow:hidden;position:relative}
.main_common_it ul li .thum a{display:block}
.main_common_it ul li .thum img{width:100%;height:auto}
.main_common_it ul li .thum .soldout{display:flex;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:18px;font-weight:600;color:#fff;background:rgba(0, 0, 0, .5)}
.main_common_it ul li .thum .soldout span{margin:auto}
.main_common_it ul li .thum .btns{opacity:0;display:flex;justify-content:center;position:absolute;bottom:35px;z-index:1;transform:translateY(20px);width:100%;column-gap:8px;transition:all .3s}
.main_common_it ul li .thum .btns button{display:flex;width:60px;height:60px;border-radius:50%;color:#fff;background:rgba(0, 0, 0, .8)}
.main_common_it ul li .thum .btns button span{margin:auto;font-size:30px}
@media(hover:hover){.main_common_it ul li .thum:hover .btns{opacity:1;transform:translateY(0)}}
.main_common_it ul li .thum .sct_cartop{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;padding:40px;background:rgba(255, 255, 255, .8)}
.main_common_it ul li .thum .sct_cartop > div{height:100%}
.main_common_it ul li .thum .sct_cartop form{display:flex;flex-flow:column;justify-content:center;height:100%}
.main_common_it ul li .thum .sct_cartop label{font-size:14px;font-weight:600;color:#000}
.main_common_it ul li .thum .sct_cartop select{height:45px;margin-top:6px;padding:0 15px;border-radius:4px;border:1px solid #000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(./select_arrow.png) no-repeat 96% 50% #fff}
.main_common_it ul li .thum .sct_cartop button{height:45px;margin-top:6px;border:none;border-radius:4px}
.main_common_it ul li .thum .sct_cartop .cartopt_cart_btn{color:#fff;background:#000}
.main_common_it ul li .thum .sct_cartop .cartopt_close_btn{color:#fff;background:#999}
.main_common_it ul li .name{margin:25px 0 5px;font-size:16px;font-weight:700;color:#000}
.main_common_it ul li .desc{font-size:14px;color:#999;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.main_common_it ul li .cost_cust{margin:12px 0 2px;font-size:18px;font-weight:600;color:#aaa;text-decoration:line-through}
.main_common_it ul li .cost{font-size:20px;font-weight:700;color:#000}
.main_common_it ul li .cost span{color:#ff5400}
.main_common_it ul li .icon_area{margin-top:10px}
.main_common_it ul li .icon_area .sit_icon{display:flex;justify-content:flex-end}
.main_common_it ul li .icon_area .sit_icon span{padding:6px 10px;border-radius:3px;font-size:12px;font-weight:500;line-height:1;color:#fff}
.main_common_it ul li .icon_area .sit_icon span+span{margin-left:2px}
.main_common_it ul li .icon_area .sit_icon span.shop_icon_1{background:var(--primary)}
.main_common_it ul li .icon_area .sit_icon span.shop_icon_2{background:var(--primary)}
.main_common_it ul li .icon_area .sit_icon span.shop_icon_3{background:var(--primary)}
.main_common_it ul li .icon_area .sit_icon span.shop_icon_4{background:var(--primary)}
.main_common_it ul li .icon_area .sit_icon span.shop_icon_5{background:var(--primary)}

/* 메인 상품 진열 - 최신 */
.main_common_it.it_new{margin-bottom: 170px;}

/* 메인 상품 진열 - 인기(베스트) */
.main_common_it.it_best{margin-bottom: 130px;}

/* 메인 상품 진열 - 추천 */
.main_common_it.it_rcmd{margin:210px 0}


/* 배너 */

#shopBanner{margin-bottom: 150px;}
#shopBanner .inner{position: relative;overflow:hidden;display: flex;flex-direction: column;align-items: center;padding: 70px 0 65px;border-radius:13px;background-image: url(./shop_banner_bg.png);background-repeat: no-repeat;background-size: cover;}
#shopBanner .inner::before{position: absolute;content:'';inset:0%;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);pointer-events: none;}
#shopBanner .inner > *{position: relative;z-index:1;color: #fff;line-height: 1.3;}
#shopBanner h2{font-family: var(--mainfont);font-size: 35px;font-weight: 700;text-align: center;word-break: keep-all;}
#shopBanner p.desc{padding: 10px 0 25px;font-size: 16px;font-weight: 600;line-height: 1.3;text-align: center;word-break: keep-all;}
#shopBanner .link-more{display: flex;align-items: center;justify-content: center;padding: 11px 23px;line-height: 1;font-size: 14px;font-weight: 700;text-align: center;word-break:keep-all;border-radius:8px;border:1px solid #fff;transition:background-color 0.2s, color 0.2s}
#shopBanner .link-more:hover{background-color:#fff;color: var(--primary);}




@media (max-width:1600px){
.main_common_it.it_new, .main_common_it.it_best, #shopBanner{margin-bottom: 100px;}
}
@media (max-width:1400px){
    #shopBanner .inner{padding: 70px 20px 65px !important;}
}
@media(max-width:1300px){
/* 공통 타이틀 */
.main_common_it .tit h2{font-size: 32px;}

.main_common_it .new-badge{top: 15px;right: 15px;}
.main_common_it .swiper-slide .sct_txt a{font-size: 18px;}

#shopBanner{padding: 0 20px;}
#shopBanner h2{font-size: 32px;}
}
@media (max-width:1200px){
    .main_common_it.it_new, .main_common_it.it_best, #shopBanner{margin-bottom: 80px;}

}
@media(max-width:1024px){
    
    .main_common_it .tit h2{font-size: 30px;}
    .main_common_it .tit p.desc{font-size: 15px;}

.main_common_it .tit{text-align: center;padding-bottom:35px}
.main_common_it .swiper-slide .sct_txt a{font-size: 17px;}

#shopBanner .inner{padding: 60px 20px 55px !important;border-radius:10px}
#shopBanner h2{font-size: 30px;}
#shopBanner p.desc{padding: 8px 0 20px;font-size: 15px;}
#shopBanner .link-more{padding: 10px 22px;}

}
@media(max-width:768px){
        .main_common_it.it_new, .main_common_it.it_best, #shopBanner{margin-bottom: 60px;}

    .main_common_it .tit{padding-bottom: 26px;}
    .main_common_it .tit h2{font-size: 28px;}

.main_common_it .swiper-slide .sct_txt a{margin-top: 12px;font-size: 16px;}
.main_common_it .new-badge{top: 10px;right: 10px;padding: 7px;font-size: 10px;}

#shopBanner h2{font-size: 28px;}
#shopBanner .inner{padding: 55px 20px 50px !important;}

}
@media(max-width:480px){
            .main_common_it.it_new, .main_common_it.it_best, #shopBanner{margin-bottom: 40px;}

.main_common_it .tit h2{padding-bottom: 6px;font-size: 24px;}
.main_common_it .tit p.desc{font-size: 14px;}
.main_common_it .swiper-slide .sct_txt a{font-size: 15px;}

#shopBanner .inner{padding: 50px 20px 45px !important;}
#shopBanner h2{font-size: 24px;}
#shopBanner p.desc{padding: 6px 0 18px;font-size: 14px;}
#shopBanner .link-more{padding: 8px 20px;font-size: 13px;border-radius:5px}
}