.sns_item .swiper-container { overflow-y: visible; } .sns_item .swiper-pagination { display: flex; align-items: center; justify-content: center; gap: 3px; } .sns_item .swiper-pagination-bullet-active { background: #000; width: 10px; height: 10px; } .sns_item .img-box { position: relative; font-size: 0; } .sns_item .img-box .comment-box { position: absolute; z-index: 2; } .sns_item .img-box .comment-box.active { z-index: 3; } .sns_item .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide .img-box .comment-box { display: flex; flex-direction: column; align-items: flex-end; } .sns_item .img-box .comment-box .item { margin-top: 6px; display: none; position: absolute; } .sns_item .img-box .comment-box.active .item { display: block; } .sns_item .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide .img-box .comment-box .item { margin-top: 38px; } .sns_item .img-box .comment-box .item a { display: flex; justify-content: flex-start; align-items: center; background-color: #fff; overflow: hidden; } .sns_item .img-box .comment-box .plus { display: inline-block; background: #191919 url(/SkinImg/img/plus.svg) no-repeat center; background-size: 50% 50%; cursor: pointer; } .sns_item .img-box .comment-box .plus:focus { outline: auto; } .sns_item .img-box .comment-box.active .plus { background: #191919 url(/SkinImg/img/close.svg) no-repeat center; background-size: 40% 40%; } .sns_item .img-box .comment-box .thumb { font-size: 0; } .sns_item .img-box .comment-box .thumb img { width: 100%; } .sns_item .img-box .comment-box .desc { flex: 1; } .sns_item .img-box .comment-box .name { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 20px; font-weight: 600; } .sns_item .img-box .comment-box .price { font-size: 14px; line-height: 16px; font-weight: 500; margin-top: 9px; } .sns_item .swiper-slide > p { font-weight: 500; font-size: 14px; line-height: 16px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; } /*------ 모바일 버전(1024 이하) ------*/ @media all and (max-width: 1024px) { #wrap.main .sns_item.section .fp-tableCell, #fullpage .sns_item.section { height: auto !important; } .sns_item { margin-top: 60px; } .sns_item .swiper-container { padding: 0 0 50px 0; } .sns_item .swiper-wrapper { padding-left: 12px; } .sns_item .img-box .comment-box .item { transform: translateX(-50%); left: 50%; } /* .sns_item .img-box .comment-box.to-top .item { top: -10px; transform: translateY(-100%) translateX(-50%); left: 50%; } */ .sns_item .img-box .comment-box .plus { width: 8vw; height: 8vw; } .sns_item .img-box .comment-box .item a { width: 211px; height: 86px; } .sns_item .img-box .comment-box .thumb { width: 66px; } .sns_item .img-box .comment-box .desc { padding: 12px 8px; } .sns_item .swiper-slide > p { margin-top: 10px; } .sns_item .swiper-slide > p + p { margin-top: 3px; } .sns_item .swiper-pagination { display: none; } } /*------ PC 전용 스타일(1024 초과) ------*/ @media all and (min-width: 1025px) { .sns_item .img-box .comment-box .plus { width: 2vw; height: 2vw; max-width: 24px; max-height: 24px; } .sns_item .img-box .comment-box .item a { width: 252px; height: 102px; } .sns_item .img-box .comment-box .thumb { width: 78px; } .sns_item .img-box .comment-box .desc { padding: 20px 16px; } .sns_item .swiper-slide > p { margin-top: 14px; } .sns_item .swiper-slide > p + p { margin-top: 5px; } .sns_item .swiper-container { padding-bottom: 95px; } }