@import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');


/**메인top  슬라이드배너 **/
.main_top{width: 100%; float: left;position: relative; background-color: #fff;   border-radius: 0px 0px 0px 0px; padding: 100px 0px 0px 0; margin-bottom: 6px;z-index: 9999!important}

.main_top .main_top_img{ position:relative; width:100%; padding-top:50%; left:0; top:0}
.main_top .main_top_img > img{ position:absolute; left:0; top:0; width:100% !important; height:100% !important; border-radius:0px;}

.main_top .swiper-container {
width: 100%;
position: relative;

}


.main_top .swiper-wrapper {
width: 100%;
display: flex;
align-items: center;
z-index: 1;
position: relative;
}


.main_top .slider-item {
width: 100%;
border-radius: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
opacity: 0;
cursor: -webkit-grab;
cursor: grab;
}

.main_top  .slider-item-content {
height: 100%;
width: 100%;
border-radius: 0px;	
position: relative; 
}

.slider-item-content_bg{background-color:#ff994c }
.slider-item-content_bg2{background-color:#ff994c }

.main_top  .slider-item-content > * {
opacity: 0;
transform: translateY(20px);
}

.main_top  .swiper-slide-active .slider-item-content > * {
transform: translateY(0px);
opacity: 1;
}


.main_top .main_top_txt{ position: absolute;
right:6%;bottom:6%!important;padding:0 7px;font-size: 12px; height: 20px; line-height:20px; border-radius: 10px; z-index: 1;background : rgba(0, 0, 0, 0.6); color:#fff}
.main_top .main_top_txt span{ display:inline-block; padding:0 3px}

.main_top   .swiper-pagination {
position: absolute;
left:6%;
bottom:6%!important;
z-index: 1;
width: auto !important;
direction:none;
}

.main_top   .swiper-pagination-bullet {
border-radius: 0;
width:0.7em;
height:0.7em;
border-radius: 100%;
line-height: 0.7em;
font-size: 11px;
opacity: 1;
background: rgba(255, 255, 255, 1.0)!important;
display: inline-block;
margin-right:0px;
cursor: pointer;
transition: all 0.2s;
}

.main_top   .swiper-pagination-bullet-active {
background: #d34448!important;
width:0.7em;
border-radius: 100%;
}

.main_top   .slider-buttons {
position: absolute;
display: flex;
top: 100%;
justify-content: flex-end;
width: 100%;
padding-top: 8px;
}

.main_top   .swiper-button-next,
.main_top   .swiper-button-prev {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
color: #fff;
position: relative;

}
.main_top   .swiper-button-next:before,
.main_top   .swiper-button-prev:before {
content: "";
position: absolute;
background-color: #fff;
height: 1px;
width: 0;
left: 0;
bottom: -1px;
transition: 0.2s;
}
.main_top   .swiper-button-next:hover:before,
.main_top   .swiper-button-prev:hover:before {
width: 100%;
}



@media screen and (max-width: 520px) {
.main_top  .swiper-button-next:hover:before,
.main_top  .swiper-button-prev:hover:before {
display: none;
}
}




.main_top_tx1 {
transform: translateY(20px);
transition: all 0.4s ease;
transition-delay: 0.2s;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; font-family: 'Qwitcher Grypen', cursive;
font-weight:700; color: #fff; font-size:25px;  
}

.main_top_tx2 {
transform: translateY(20px);
transition: all 0.4s ease;
transition-delay: 0.3s;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; font-family:  'NanumSquare', sans-serif; transform: skew(-0.201deg);   font-weight:400;  color:#000; font-size:25px; letter-spacing: -1px
}

.main_top_tx3 {

transform: translateY(20px);
transition: all 0.4s ease;
transition-delay: 0.4s;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; font-family: 'Black Han Sans', sans-serif; font-weight:400; color: #000; font-size:30px; letter-spacing: -1px
}
.main_top_tx4 {

transform: translateY(20px);
transition: all 0.4s ease;
transition-delay: 0.4s;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; font-family:  'NanumSquare', sans-serif; transform: skew(-0.201deg);   font-weight:700; color: #fff; font-size:11px; line-height: 130%;
}

.main_top  .slider-item-content .main_top_img img{width:100%; height:100%}






/**상품상세 top  슬라이드배너 **/

.sub_top{width: 100%; float: left;  position: relative; background-color: #fff;   padding: 65px 0px 0px; z-index: 9999!important}

.sub_top .swiper-container {
width: 100%;
position: relative;
height: 100%;


}


.sub_top .swiper-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 1;
position: relative;
}


.sub_top .slider-item {
width: 100%;
height: 100%;
border-radius: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
opacity: 0;
cursor: -webkit-grab;
cursor: grab;
}

.sub_top  .slider-item-content {
height: 100%;
width: 100%;
border-radius: 0px;	
position: relative; padding: 0px
}



.sub_top   .slider-item-content > * {
opacity: 0;
transform: translateY(20px);
}

.sub_top   .swiper-slide-active .slider-item-content > * {
transform: translateY(0px);
opacity: 1;
}



.sub_top   .swiper-pagination {
position: absolute;
left:50%;
top:15px!important;
z-index:1;
width: auto !important; margin-left: -30px
}

.sub_top   .swiper-pagination-bullet {

width:13px;
height:13px;
border-radius: 100%;
line-height: 30px;
font-size: 13px;
opacity: 1;
background: rgba(185, 185, 185, 1.0)!important;
display: inline-block;
margin-right:-1px;
cursor: pointer;
transition: all 0.2s;
}

.sub_top   .swiper-pagination-bullet-active {
background: #000!important;
width:13px;
border-radius: 100%;
}

.sub_top   .slider-buttons {
position: absolute;
display: flex;
top: 100%;
justify-content: flex-end;
width: 100%;
padding-top: 8px;
}

.sub_top   .swiper-button-next,
.sub_top   .swiper-button-prev {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
color: #fff;
position: relative; position: absolute; top: 10%;

}
.sub_top   .swiper-button-next:before,
.sub_top   .swiper-button-prev:before {
content: "";
position: absolute;
background-color: #fff;
height: 1px;
width: 0;
left: 0;
bottom: -1px;
transition: 0.2s;
}
.sub_top   .swiper-button-next:hover:before,
.sub_top   .swiper-button-prev:hover:before {
width: 100%;
}




 .sub_top_img {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 110%; overflow: hidden; 

}

.sub_top_img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; object-fit: cover;
}


.sub_top  .swiper-container .interes{ width: 40px; height: 40px; border-radius: 100%; background-color: #fff; position: absolute; right:20px; bottom:20px
;display: flex;  justify-content: center;  align-items: center; flex-direction:row; box-sizing: border-box; z-index: 99999}
.sub_top  .swiper-container .interes:before{ width: 40px; height: 40px;   content: "";    font-family: unicons-line;
background: url("../images/icon/heart_off.svg")no-repeat center center; background-size:25px}
.sub_top  .swiper-container .interes:hover:before{ width: 40px; height: 40px;   content: "";    font-family: unicons-line;
background: url("../images/icon/heart_on.svg")no-repeat center center; background-size:25px}






/**메인 중간 롤링  배너 **/

.main_midd{width: 100%; float: left;  position: relative; background-color: #fff;   padding: 0px 0px 0px; z-index: 9999!important}


.main_midd   .swiper-pagination-bullet {
width:8px;
height:8px;
border-radius: 100%;
line-height: 30px;
font-size: 10px;
opacity: 1;
background: rgba(255, 255, 255, 0.5)!important;
display: inline-block;
margin-right:-1px;
cursor: pointer;
transition: all 0.2s;
}

.main_midd   .swiper-pagination-bullet-active {
background: #fff!important;
width:8px;
border-radius: 100%;
}

.main_midd   .slider-buttons {
position: absolute;
display: flex;
top: 100%;
justify-content: flex-end;
width: 100%;
padding-top: 8px;
}


 .main_midd_img {
	position: relative;
	width: 100%; border-radius: 0px;
	height: 0;
	overflow: hidden; 
	padding-bottom:72.42%; overflow: hidden; 

}

.main_midd_img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%; object-fit: cover;
}


.mySwiper3 .swiper-button-next{ position: absolute; left: 50%; top: 50%; background-color: #000;height: 50px; width: 50px; }


/*중간배너1*/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding:0
  }

.rslides ul{ position:absolute; left:0; top:0}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides a{ position:relative; display: block;  float: left; padding-top:25%;  width: 100%;  }
.rslides img {
  display: block;
  position:absolute;
  height: 100%;
  float: left;
  width: 100%;  
  border: 0;
  left:0;
  top:0
  }

/**/

/**메인 하단 롤링  배너 **/

.main_bottom_bnr{width: 100%; float: left;  position: relative; background-color: #fff;   padding: 0px 0px 0px; z-index: 9999!important}


.main_bottom_bnr   .swiper-pagination-bullet {
width:10px;
height:10px;
border-radius: 100%;
line-height: 30px;
font-size: 10px;
opacity: 1;
background: rgba(185, 185, 185, 1.0)!important;
display: inline-block;
margin-right:-1px;
cursor: pointer;
transition: all 0.2s;
}

.main_bottom_bnr   .swiper-pagination-bullet-active {
background: #3164cb!important;
width:10px;
border-radius: 100%;
}

.main_bottom_bnr   .slider-buttons {
position: absolute;
display: flex;
top: 100%;
justify-content: flex-end;
width: 100%;
padding-top: 8px;
}

.main_bottom_bnr_img {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden; 
	padding-bottom:25%; overflow: hidden; 

}

.main_bottom_bnr_img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%; object-fit: cover;
}