@charset "utf-8";

.main_common_it{position:relative;padding:0 70px}

/* 메인 상품 타이틀 공통 */ 
.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:45px}
.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:210px 0}

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

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

@media(max-width:1520px){
.main_common_it{padding:0 20px}
.main_common_it ul{column-gap:25px}
}
@media(max-width:1024px){
.main_common_it .tit{margin-bottom:25px}
.main_common_it .tit p{font-size:52px}
.main_common_it .tit a{font-size:14px}
.main_common_it .tit a span{font-size:20px}
.main_common_it ul{grid-template-columns:repeat(3,1fr);row-gap:70px}
.main_common_it ul li .thum .btns{justify-content:flex-end;column-gap:4px;bottom:20px;opacity:1;transform:none;padding-right:15px}
.main_common_it ul li .thum .btns button{width:35px;height:35px}
.main_common_it ul li .thum .btns button span{font-size:18px}
.main_common_it ul li .thum .sct_cartop{padding:20px}
.main_common_it ul li .name{font-size:15px}
.main_common_it ul li .desc{font-size:13px}
.main_common_it ul li .cost_cust{font-size:16px}
.main_common_it ul li .cost{font-size:18px}
.main_common_it ul li .icon_area .sit_icon span{font-size:11px}
.main_common_it.it_new{margin:120px 0}
.main_common_it.it_best{margin:120px 0}
.main_common_it.it_rcmd{margin:120px 0}
}
@media(max-width:768px){
.main_common_it .tit p{font-size:36px}
.main_common_it .tit a{font-size:13px}
.main_common_it .tit a span{margin-left:5px;font-size:18px}
.main_common_it ul{grid-template-columns:repeat(2,1fr)}
.main_common_it ul li .thum .soldout{font-size:15px}
.main_common_it ul li .thum .sct_cartop select{height:36px;font-size:13px}
.main_common_it ul li .thum .sct_cartop button{height:36px;font-size:13px}
.main_common_it.it_new{margin:80px 0}
.main_common_it.it_best{margin:80px 0}
.main_common_it.it_rcmd{margin:80px 0}
}
@media(max-width:480px){
.main_common_it .tit{margin-bottom:20px}
.main_common_it .tit p{font-size:26px}
.main_common_it ul{column-gap:0;row-gap:50px}
.main_common_it ul li .thum .btns{bottom:10px;padding-right:10px}
.main_common_it ul li .thum .btns button{width:28px;height:28px}
.main_common_it ul li .thum .btns button span{font-size:15px}
.main_common_it ul li .info{padding:0 10px}
.main_common_it ul li .name{margin:10px 0 5px;font-size:14px}
.main_common_it ul li .desc{display:none}
.main_common_it ul li .cost_cust{margin:8px 0 0;font-size:14px}
.main_common_it ul li .cost{font-size:15px}
.main_common_it ul li .icon_area .sit_icon{justify-content:flex-start}
.main_common_it ul li .icon_area .sit_icon span{padding:4px 6px;font-size:10px}
.main_common_it.it_new{margin:60px 0}
.main_common_it.it_best{margin:60px 0}
.main_common_it.it_rcmd{margin:60px 0}
}