@charset "UTF-8";
:root {
	--base-text-color: #333;
	--base-bg-color: #f1f1f1;
}

* {
	margin: 0;
	padding: 0;
}

body {
	font:16px/1.6 "Noto Sans Kr", sans-serif;
	color: var(--base-text-color);
}

ul {
	list-style: none;
}

.d-none {
	display: none;
}

a, a:link {
	text-decoration: none;
	color: var(--base-text-color);
}
/* ==============bxslider style custom ==============*/
.bx-wrapper{
	margin-top:60px;
	border:0;
}
.bx-wrapper .bx-prev{
	left:10px;
	background: url('../images/custom.png') 0 -32px no-repeat;
}




.bx-wrapper .bx-next {
    right: 10px;
    background: url('../images/custom.png') -43px -32px no-repeat;
}


/* ============= header =============== */
header{
	position: fixed;
	left:0;
	top:0;
	width: 100vw; /* 100%와 같은 비율, 공간을 100개로 조각낸 비율*/
	z-index: 10000;
	background: white;
}
.header-wrap {
	max-width: 90%;
	height: 60px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
}
#gnb, .items {
	display: flex;
	column-gap: 1rem;
}

/* #imgs img {
	position: absolute;
} */

/* =============recommend==================*/
.recommend{
	max-width:1280px;
	margin: 0 auto;
	
}
.reco_title{
	font-weight: 900; 
	text-align: center;
	margin: 1.5em 0 1.2em 0;
}

.reco-list{
	display: flex;
	column-gap: 1em;
}

.reco-list img{
	width:213px;
}

.desc{
	margin: 1em 0;
	font-size: .875em;
}

.price{
	color:#ff5959;
	font-size: .720em;
}


/* ======================= promotion ========================== */

.promotion{
	max-width: 1280px;
	margin: 2em auto;
	overflow: hidden;
}
.event-banner{
	margin-bottom: 1em;
}
.promotion-list{
	display: flex;
	column-gap: 1em;
}

.promotion-list img{
	object-fit:cover;
	max-width: 100%;
	transition: all .7s ease-in-out /* 이미지 커지게 0.3?  || ease-in-out 부드럽게*/
}
.promotion-list li{
	overflow: hidden;   /*넘치면 이미지를 잘라라*/
}
.promotion-list li:hover img{
	transform:scale(1.05,1.05)
	
}

/* =========================== special ========================== */

.special-title-bg{
	background: #e2e2e2;
}

.special-title{
	max-width: 1280px;
	height:72px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.special-title p::before{
	content: '';
	display:inline-block;
	width:172px ;
	height:32px ; 
	margin-right: 1rem;
	background: url("../images/logo_myiloomlf.svg") no-repeat center / cover;
	position: absolute;
	left:-190px;
	top: -3px;
}

.special-title a{
	margin-left: 5em;
	
}

.special-title p{
	position : relative;
	margin-left: 16rem;
	
}
.special-list{
	max-width: 1280px;	/* max 가로를 1280으로 하겠다*/
	margin: 100px auto 50px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;  /* 1280을 4등분  fraction: 전체 공간의 합을 비율로 표현 */
	/* grid-template-rows: 600px 150px ; */
	column-gap: 1rem;  /*사진들 사이에 갭 */

}

.special-list img{
	max-width:100%;	/* 최대 화면 사이즈 내에서 자동으로 사진크기 조절*/
	
}

.attach-img{
	height:300px;
	border-radius:20px;
	overflow: hidden;   /* 라운드 된 만큼 감춰주어야함 */
}

.rank-point{
	color: #eb3232;
	font-size: 1.250em;
	letter-spacing: 3px;  /* 문자 사이 간격 */
	margin: 1em 0; 			/* em 엠 rem 램*/
}

.write-title{
	font-size: 1.250em;
	font-weight: 800;	/* 100~900 (단위없음), thin/bold/bolder */
}

.write-body{
	font-size: .875em;
	text-overflow: ellipsis; /* 넘치면 , 단축하기 넘치면 .... 높이보단 넓이의 영향을 받는듯*/
	overflow: hidden;
	word-break:break-word;
	
	display: -webkit-box;	/* vendor prefix : 표준속성이 아닐 때, 다른브라우저가 지원할 수 있는 접두어*/
	-webkit-line-clamp:2;
	-webkit-box-orient: vertical;
}



.item-image{
	border-radius: 50%;
	width: 100px;
	height: 100px;
	overflow: hidden;
	
}
/* .relate-item::before{
	content:'';
	border-top:1px dashed red;
	width: 100%;
	display: block;
} */


.relate-item{
	display: flex;
	justify-content: space-between;
	margin: 1em 0 0 0;
}

.like-item::after{
	content: '';
	color:red;
	display: inline-block;
	height:16px;
	width:16px;
	background: url("../images/icon_likeHrt.svg");
}

.item-title{
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	width:5em;
}

.item-location, .item-price{
	font-size: .725em;
	color: gray;
}


/* ============================ aside ============================  */

aside{
	background: #e0e0e0;	
}

.sns{
	max-width: 1280px;
	margin: 0 auto;
	
}
.sns p{
	text-align: center;
	margin-top: 1rem;
}
.sns p:nth-child(1){
	font-size: 1.750em;
	font-weight:bold;
	text-transform: uppercase;
	margin: 1em 0;
}
.sns p:nth-child(2){
	font-size: 1.250em;
}
.sns-posts{
	display: flex;
}

.sns-posts img{
	width: 200px;
}