@charset "utf-8";

.basic-shop-item-slider-v2 { overflow:hidden; position:relative; width:100%; line-height:20px; }
.basic-shop-item-slider-v2 .item {width: 100%; max-width: 1114px; margin: 0 auto;}
.basic-shop-item-slider-v2 .item-list {display: flex; gap: 0 5.5rem;}
.basic-shop-item-slider-v2 .txt-normal { letter-spacing:0; }
.basic-shop-item-slider-v2 .txt-short { letter-spacing:-1px; padding-right:1px; }
.basic-shop-item-slider-v2 .item-none { padding:50px 10px; text-align:center; color:#888; }
.basic-shop-item-slider-v2 .item-image { position:relative; overflow:hidden; width: 100%; max-width: 44.9%; border-radius: 30px; border: 1px solid #eee;}
.basic-shop-item-slider-v2 .item .item-image img {transform: scale(100%); transition: all 1s ;}
.basic-shop-item-slider-v2 .item-content {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
flex: 1; padding: 3rem 2rem; display: flex; flex-direction: column; justify-content: center;}
.basic-shop-item-slider-v2 .item-star { text-align:center; overflow:hidden; letter-spacing:-1px; font-size:18px; line-height:20px; height:20px; margin-bottom:4px; }
.basic-shop-item-slider-v2 .item-name { overflow:hidden; width: 100%; max-width: 420px;}
.basic-shop-item-slider-v2 .item-name b {font-size: max(20px, 3em); display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 1;  text-overflow: ellipsis;
height: fit-content; overflow: hidden; line-height: 1.2; color: #000; margin-bottom: 0.5em;}
.basic-shop-item-slider-v2 .item-text {font-size: 16px; color: #535353; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  text-overflow: ellipsis;
height: fit-content; overflow: hidden; line-height: 1.4; }

.basic-shop-item-slider-v2 .item-sp { margin:0px 4px; white-space:nowrap; }
.basic-shop-item-slider-v2 .item-sp i { margin-right:2px; color:#888; }
.basic-shop-item-slider-v2 .item-sns { margin-top:15px; text-align:center; }
.basic-shop-item-slider-v2 .item-sns img { width:15%; max-width:34px; border-radius:50%; }

.basic-shop-item-slider-v2 .view_btn {
--font-size-pc: 15;
--font-size-mob: 15;
font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) ); transition: background 0.3s;  border: 3px solid transparent; box-sizing: border-box;
width: 13.3333em; height: 4em; background: var(--main-color); color: #fff; display: flex; justify-content: center; align-items: center; gap: 0 5px; border-radius: 10px; margin: 4.8rem 0 0;}

.basic-shop-item-slider-v2 .view_btn  i {font-size: 1.2em; transition: 0.5s; position: relative; left: 0; }

.basic-shop-item-slider-v2 .view_btn:hover {background: #07a4e9;}
.basic-shop-item-slider-v2 .view_btn:hover i {animation: i-move 0.3s infinite alternate;}

.basic-shop-item-slider-v2 .item:hover .item-image img {transform: scale(105%);}

@keyframes i-move {
	to {left: 3px;}
}	



/* 버튼 커스텀 */
.basic-shop-item-slider-v2 {overflow: unset;}
.basic-shop-item-slider-v2 .owl-show {overflow: unset;}
.basic-shop-item-slider-v2 .owl-container {overflow: unset;}
.basic-shop-item-slider-v2 .owl-carousel:hover .owl-controls.clickable .owl-buttons div {display: block;}
.basic-shop-item-slider-v2 .owl-carousel .owl-controls.clickable .owl-buttons div {display: block;}
.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons div {background-color: rgba(166, 166, 235, 1); width: 7rem; height: 7rem; border-radius: 50%; line-height: 7rem; color: #fff; font-size: 22px;}
.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons div.owl-prev {left: 0;}
/* next는 여기서 스타일이 안 먹혀서 widget.php에 설정함 */


@media (max-width: 1430px) {
	.basic-shop-item-slider-v2 {overflow: hidden;}
	.basic-shop-item-slider-v2 .owl-show {overflow: hidden;}
	.basic-shop-item-slider-v2 .owl-container {overflow: hidden;}
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls {width: 100%; position: relative;}
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons {width: fit-content; height: 7rem; position: absolute; display: flex; justify-content: center; right: 70px; bottom: 0;}
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons div {top: unset; position: relative; margin-top: 0; border-radius: unset; }
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons div.owl-prev {left: unset; border-right: 2px solid #fff;}
}

@media (max-width: 991px) {
	.basic-shop-item-slider-v2 .item:hover .item-image img {transform: scale(100%);}
	.basic-shop-item-slider-v2 .view_btn:hover {background: var(--main-color);}
}

@media (max-width: 960px) {
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons {right: 0;}
}

@media (max-width: 768px) {
	.basic-shop-item-slider-v2 .item-list {flex-direction: column; align-items: center;}
	.basic-shop-item-slider-v2 .item-image {max-width: 70%;}
	.basic-shop-item-slider-v2 .item-content {flex: unset; font-size: min( calc( var(--font-size-mob) / 768 * 100vw ), calc(var(--font-size-pc) * 1px) ); text-align: center; padding: 8em 15px 0;}
	.basic-shop-item-slider-v2 .view_btn {margin: 4.8rem auto 0; width: 100%; max-width: 580px;}
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons {position: relative; bottom: unset; margin: 30px auto 0; gap: 0 10px;}
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons div {border-radius: 50%;}
	.basic-shop-item-slider-v2 .owl-carousel .owl-controls .owl-buttons div.owl-prev {border-right: unset;}
}

@media (max-width: 500px) {
	.basic-shop-item-slider-v2 .item-image {max-width: 100%;}
}