@import url('./common.css');

.pro_wrap {max-width:850px; margin:auto; overflow-x: hidden;}
.pro_wrap img{display: block; width:100%;}
.close:after {background-color: transparent;}
.slide_content {position: static !important; background-color: transparent !important;}

/*--------------------------------------------------------------------------------
	# 공통 - pagination
---------------------------------------------------------------------------------*/
.pro_wrap .swiper-pagination {position: static !important; margin-top: 1.4rem !important;}
.swiper-pagination {position: static !important; margin-top: 3vw;}
.swiper-pagination-bullet {width: 2.5vw !important; height: 2.5vw !important; box-shadow: 2px 2px 4px 0px #00000026 inset; background: #BFBFBF80 !important; opacity: 1 !important;
 }
.swiper-pagination-bullet-active {background: #dadada !important; box-shadow: none;}


/*--------------------------------------------------------------------------------
	# 플로팅
---------------------------------------------------------------------------------*/
.pro_wrap .floating_menu {position: absolute; max-width: 850px; z-index: 10; will-change: transform;}
.pro_wrap .floating_menu.ulFixed {position: fixed; left: 50%; top: 0; z-index: 5; }

/*--------------------------------------------------------------------------------
	# 상품
---------------------------------------------------------------------------------*/
.goods_menu {position: absolute; left: 50%; transform:translate(-50%,-136%);width: 90%}
.goods_menu::after {content: ''; z-index: 1; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 100vw; height: 1px; background-color: #fff; display:none;}
.goods_menu ul {display: flex; gap:10px;}
.goods_menu ul li {flex:1;position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 9.9vw; text-align: center; font-size: 3.8vw; font-family: 'SBAggro'; font-weight: 400; color: #fff; cursor: pointer; background-color: #99cef2; border-radius: 10px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);}
.goods_menu ul li.active {color: #fff;background-color: #32a0f9}
.goods_menu.x_scroll {display: block; overflow-x: scroll; width: auto; min-width: 100%;}
.goods_menu.x_scroll::-webkit-scrollbar {display: none;}
.goods_menu.x_scroll li{min-width:21%;}
.goods_menu.x_scroll li:first-child {margin-left:10px;}
.goods_menu.x_scroll li:last-child:after {content:'';position:absolute; top:0; right:-20px; width:10px; height:10px; margin-right:10px;}

.goods_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 4vw; width: 90%; margin: 0 auto; padding: 10% 0;}
.goods_list > li {position: relative; border: 1px solid #DEE0E2; border-radius: 4px; overflow: hidden;}
.goods_list > li .good_img {height: 37vw;}
.goods_list > li .good_img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.goods_list > li .good_info {padding: 3vw 3vw 12.9vw; font-family: 'Pretendard Variable';}
.goods_list > li .good_info .good_name {margin-bottom: 2vw; font-size: 4.3vw; font-weight: 700; overflow: hidden; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 5.6vw;}
.goods_list > li .good_info .good_desc { color:#8693a0;font-size: 3.5vw;}
/* .goods_list > li .good_info .good_desc01 {margin-bottom: 1vw;} */
.goods_list > li .good_info .good_price {position: absolute; right: 3vw; bottom: 3vw; color: #ff464d; font-weight: 600; font-size: 6vw; letter-spacing: -0.2vw; line-height: normal;}
.goods_list > li .good_info .good_price span {font-size: 4vw;}
.good_link {z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


.goods_list > li .badge {position: absolute; right: 2vw; top: 2vw; width: 12vw; height: 12vw; display: flex; justify-content: center; align-items: center; font-size: 3vw; font-family: 'Pretendard Variable'; font-weight: 500; color: #fff; line-height: 3.7vw; background-color: #E8350D; border-radius: 50%; font-style:normal;text-align: center; word-break:keep-all;}


/* #goods_01 .goods_list > li .good_info .good_desc {color: #8693a0; line-height: 1.3; word-break: break-all;}
#goods_02 .goods_list > li .good_info .good_desc01 span {padding: 0 1.5vw; font-weight: bold; display: inline; background-color: #24AAE1; color: #8693a0;} */
/* #goods_02 .goods_list > li .good_info .good_desc01 i {font-weight: bold; color: #8693a0;}
#goods_02 .goods_list > li .good_info .good_desc02 {color: #555555;} */
.goods_list > li .badge.earlybird3 {background-color: #ff7e00;}
.goods_list > li .badge.earlybird5 {background-color: #13aa84;}
.goods_list > li .badge.earlybird7 {background-color: #6d47b2;}
.goods_list > li .badge.best {background-color: #ff7e00;}
.goods_list > .good_empty {border:none;}
/*--------------------------------------------------------------------------------
	#슬라이드
---------------------------------------------------------------------------------*/
.pro_wrap .slide_container {position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}
.pro_wrap .slide_container_1 {top:31.2%;}
.pro_wrap .slide_container .swiper {overflow-y: visible !important;}
.pro_wrap .container_arrow {display: flex; align-items: center; justify-content: center;}
.pro_wrap .container_arrow .slide_content { width: 100%; overflow: visible !important; background-color: transparent !important;}
.pro_wrap .slide_container .swiper a { display: block; width: 100%; height: 100%;}
.pro_wrap .slide_content .swiper-slide{transform: scale(0.7);transition: 0.3s ease all;}
.pro_wrap .slide_content .swiper-slide.swiper-slide-active{transform: scale(1);filter: blur(0);}

	 /* 유의사항 */
	 /* .pro_wrap .note_wrap div button {height: 28%;}
	 .pro_wrap .note_wrap .note_hide button {height: 14%;} */
	 .pro_wrap .note_wrap .note_hide {display: none;}
	 .pro_wrap .note_wrap div button {
		 position: absolute; top:36%; left: 50%; transform: translateX(-50%); width: 90.5%; height: 48%; cursor: pointer; border: 0; background-color: transparent;
	 }
	 .pro_wrap .note_wrap .note_hide button {top:14%!important; height: 20%!important;}


	 /*한줄 메뉴*/
	 #goods_05 .goods_menu::after,
	 #goods_06 .goods_menu::after { display: none;}

@media (min-width: 850px) {
	.pro_wrap .ani_box .ani_tit {height: 140px;}
	.goods_menu ul li {height: 70px;font-size: 29px;line-height: 32px;}
	.goods_list{ padding: 85px 0;width: 95%;gap: 20px;}
	.goods_list > li .good_img {height:315px;}
	.goods_list > li .good_info {padding: 20px 20px 80px}
	.goods_list > li .good_info .good_name {font-size:36px;line-height: 45px;}
	.goods_list > li .good_info .good_desc {font-size: 28px}
	.goods_list > li .good_info .good_price {font-size: 50px;right: 20px;bottom: 20px;}
	.goods_list > li .badge {width: 102px; height: 102px; font-size: 25px; line-height: 27px;;}
	.goods_list > li .good_info .good_price span {
		font-size: 34px;
	}
}