@charset "utf-8";

/* ************************************************************************************************************************************************************
						《 #2_home CSS 》
************************************************************************************************************************************************************ */
.main {
	margin-top: 15px;
}

.main .tit_15 {
	line-height: 2.667em;
	padding: 0 15px;
}

/* header */
#header .header_wrap h1.logo {
	width: 76px;
	height: 24px;
	padding-left: 8px;
	position: relative;
	left: 0;
	top: 0;
	transform: none;
}

#header .header_wrap h1.logo img {
	width: 100%;
	height: auto;
}

/* QuickMenu */
.quick_wrap {
	padding: 0 15px;
}

.quick_wrap ul {
	display: flex;
	justify-content: space-between;
}

.quick_wrap ul li {
	position: relative;
	width: 25%;
}

.quick_wrap ul li~li::after {
	display: block;
	content: '';
	width: 1px;
	height: 14px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #d2d2d2;
}

.quick_wrap ul li a img {
	width: 37px;
	height: 36px;
	display: block;
	margin: 0 auto;
}

.quick_wrap ul li a span {
	font-size: 12px;
	color: #353535;
	margin-top: 4px;
	display: block;
	text-align: center;
}

.quick_wrap .btn_wrap {
	margin-top: 8px;
}

.quick_wrap .btn_wrap .btn {
	padding: 6px 0;
}

.quick_wrap .btn_wrap .btn.btn_qr span {
	padding-left: 24px;
	background: url(../image/common/icon_qr.svg) no-repeat left center;
	background-size: 16px 16px;
}

/* 새로나온팩 */
.pack_slide_wrap {
	margin-top: 12px;
}

.pack_slide_wrap .swiper {
	padding: 0 15px;
}

.pack_slide_wrap .pack_slide {
	width: 100px;
}

.pack_slide_wrap .pack_item .img_area {
	height: 124px;
}

/* 인기팩 */
.pack_popular {
	margin-top: 15px;
}

.pack_popular .tit_15 {
	background: url(../image/common/chip_04.png) no-repeat right 29px bottom;
	background-size: 45px 35px;
}

.pack_popular .pack_li {
	padding: 0 15px;
}

.pack_popular .pack_li li~li {
	margin-top: 15px;
}

.pack_popular .btn_wrap {
	padding: 0 15px;
	margin-top: 15px;
}

.pack_popular .btn_wrap .btn {
	padding: 10px 0;
}

.pack_popular .btn_wrap .btn.btn_more span {
	padding-left: 24px;
	background: url(../image/common/icon_more.svg) no-repeat left center;
	background-size: 16px 16px;
}

/* ============================== [ 알림 팝업 ] ========================================================================================== */
.noti_inner {
	padding: 24px 15px;
}

.noti_list .group {
	display: flex;
}

.noti_list .group~.group {
	margin-top: 18px;
}

.noti_list .img_area {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
}

.noti_list .img_area .img {
	display: block;
	width: 100%;
	height: 100%;
}

.noti_list .txt_area {
	margin-left: 15px;
	flex: 1;
}

.noti_list .txt_area .txt {
	font-size: 15px;
	font-weight: 500;
	color: #282924;
	line-height: 20px;
}

.noti_list .txt_area .txt span {
	color: #702DFF;
}

.noti_list .txt_area .date {
	margin-top: 4px;
	font-size: 11px;
	color: #666;
	line-height: 13px;
	display: block;
}


/* ============================== [ 메인 베너 ] ========================================================================================== */
.bnr_slide {
	position: relative;
}

.bnr_slide .bnr_info {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}

.bnr_slide .bnr_info .user_info {
	padding: 8px 12px;
	display: flex;
	align-items: center;
	width: 86%;
	min-height: 48px;
	box-sizing: border-box;
}

.bnr_slide .bnr_info .user_info .img {
	overflow: hidden;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-sizing: border-box;
	background: url(../image/temp/profile_none.png) no-repeat 0 0;
	background-size: 100% auto;
}

.bnr_slide .bnr_info .user_info .name {
	padding-left: 6px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.bnr_slide .bnr_info .user_info .addr {
	padding-left: 26px;
	font-weight: 600;
	color: #fff;
	line-height: 20px;
	background: url(../image/common/icon_map_06.svg) no-repeat left top;
	height: 20px;
}

.bnr_slide .bnr_info .pack_ico {
	width: 48px;
	height: 48px;
	position: absolute;
	right: 0;
	top: 0;
}

.bnr_slide .bnr_info h2 {
	padding: 12px;
	font-size: 27px;
	line-height: 30px;
	color: #fff;
	font-weight: 600;
	letter-spacing: -1.5px;
	/* word-break: keep-all; */
}

.bnr_slide .bnr_info .state {
	display: flex;
	align-items: center;
	padding-left: 12px;
}

.bnr_slide .bnr_info .state .user {
	padding-left: 15px;
	margin-right: 12px;
	background: url(../image/common/icon_people_wh.svg) no-repeat left center;
	background-size: 10px auto;
}

.bnr_slide .bnr_info .state .user p {
	font-size: 15px;
	line-height: 20px;
	color: #ccc;
}

.bnr_slide .bnr_info .state .user p strong {
	color: #fff;
	font-weight: 400;
}

.bnr_slide .bnr_info .state .chat {
	padding-left: 15px;
	background: url(../image/common/icon_chat_wh.svg) no-repeat left center;
	background-size: 12px auto;
}

.bnr_slide .bnr_info .state .chat p {
	font-size: 15px;
	line-height: 20px;
	color: #ccc;
}

.bnr_slide .bnr_info .main_img {
	height: 100vh;
}

.bnr_slide>.img {
	position: relative;
	padding-bottom: 133%;
}

/*padding-bottom값 155.556 -> 125%로 수정*/
.bnr_slide>.img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bnr_slide>.img::after {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	opacity: 0.4;
}

.dot_wrap {
	padding: 12px 0;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
}

.dot_wrap .bnr_dot {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dot_wrap .bnr_dot .swiper-pagination-bullet {
	background-color: #000;
	width: 6px;
	height: 6px;
	box-sizing: border-box;
	border: 1px solid #fff;
	opacity: 0.4;
}

.dot_wrap .bnr_dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 16px;
	height: 8px;
	border-radius: 8px;
	border-color: #313743;
	background-color: #fff;
	opacity: 1;
}

/* ============================== [ 팩메이커 BEST ] ========================================================================================== */
.best_pack {
	/* background-color: #48CC8D; */
	background-color: #F5F5F5;
	padding: 32px 0 36px;
	margin-top: -1px;
}

.best_pack h3 {
	padding: 0 15px;
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: #5A5A5A;
}

.best_pack h2 {
	padding: 0 15px;
	margin-bottom: 12px;
	font-size: 20px !important;
	font-weight: 600;
	line-height: 30px;
	color: #5A5A5A;
}

.best_pack .swiper {
	padding: 0 12px;
}

.best_pack .best_slide {
	width: 82px;
}

.best_pack .best_slide .img {
	width: 82px;
	height: 82px;
	border-radius: 50%;
	overflow: hidden;
	border: 1.5px solid #fff;
	box-sizing: border-box;
	background: url(../image/temp/profile_none.png) no-repeat 0 0;
	background-size: 100% auto;
}

.best_pack .best_slide .name {
	margin-top: 6px;
	color: #313743;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	display: block;
	text-align: center;
}

/* ============================== [ 내 주변 추천 포스트 ] ========================================================================================== */
.main_evt {
	/* padding: 32px 0 36px; */
	padding: 32px 0 18px;
}

.main_evt h3 {
	padding: 0 15px;
	margin-bottom: 12px;
	color: #313743;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.main_evt ul {
	padding: 0 12px;
}

.main_evt ul li~li {
	margin-top: 32px;
}

.main_evt ul li .img {
	height: 169px;
	border-radius: 12px;
	overflow: hidden;
}

.main_evt ul li .txt_wrap {
	margin-top: 10px;
}

.main_evt ul li .txt_wrap .tit {
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	color: #000;
}

.main_evt ul li .txt_wrap .time {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #5A5A5A;
	background: url(../image/common/icon_calendar.svg) no-repeat left top 2px;
	padding-left: 20px;
}

.main_evt ul li .txt_wrap .loc {
	font-weight: 400;
	margin-top: 6px;
	font-size: 15px;
	line-height: 20px;
	padding-left: 20px;
	background: url(../image/common/icon_map_05.svg) no-repeat left top 2px;
	background-size: 14px auto;
}


.main_evt ul li .txt_wrap .trans {
	margin-top: 6px;
}

.main_evt ul li .txt_wrap .trans .txt {
	color: #AEAEAE;
	font-size: 12px;
	line-height: 18px;
	text-decoration: underline solid;
}

.main_evt ul li .state {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.main_evt ul li .state .chat {
	padding-left: 22px;
	background: url(../image/common/icon_chat_dk.svg) no-repeat left top 2px;
	color: #5a5a5a;
	font-size: 15px;
	line-height: 20px;
}

.main_evt ul li .state .user_info {
	display: flex;
	align-items: center;
}

.main_evt ul li .state .user_info .name {
	color: #5A5A5A;
	font-weight: 600;
	line-height: 16px;
	margin-right: 6px;
}

.main_evt ul li .state .user_info .thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	box-sizing: border-box;
	background: url(../image/temp/profile_none.png) no-repeat 0 0;
	background-size: 100% auto;
}

/* ============================== [ 광고 베너 ] ========================================================================================== */
.main_ad .img {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 38%;
}

.main_ad .img img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.main_ad2 {
	background: url(../image/banner/bg_person.png) no-repeat left, linear-gradient(to left, #9EE7C9, #77CEC4, #54BFB3);
	background-size: 180px, auto;
	display: flex;
	align-items: center;
	justify-content: right
}

.main_ad2_text_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px;
}

/* ============================== [ 베스트 팩메이커 ] ========================================================================================== */

/* ============================== [ 메인 랭킹 ] ========================================================================================== */
.main_ranking_slide {
	padding: 18px 0 44px;
	/* background-color: #E4E5E9; */
}

.main_ranking_slide .swiper {
	padding: 0 12px;
}

#packer_rank_list,
#packmaker_rank_list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* .main_rank {
	width: 270px;
} */

.main_rank h3 {
	padding: 0 3px;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	color: #313743;
	margin-bottom: 12px;
}

.main_rank ol li {
	border: 1px solid #E4E5E9;
	border-radius: 12px;
	background-color: #fff;
	padding: 6px 12px;
	display: flex;
	align-items: center;
}

.main_rank ol li~li {
	margin-top: 2px;
}

.main_rank ol li .num {
	font-size: 13px;
	font-weight: 600;
	color: #5A5A5A;
	width: 24px;
	text-align: center;
}

.main_rank ol li:first-child .num {
	background: url(../image/common/medal_1.png) no-repeat center;
	background-size: 18px auto;
	height: 26px;
	text-indent: -9999px
}

.main_rank ol li .user_info {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: 8px;
}

.main_rank ol li .img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	box-sizing: border-box;
	background: url(../image/temp/profile_none.png) no-repeat 0 0;
	background-size: 100% auto;
}

.main_rank ol li .name {
	flex: 1;
	color: #000;
	font-size: 16px;
	font-weight: 500;
	padding-left: 8px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

/* ============================== [ 인기팩 ] ========================================================================================== */

.rec_pack_slide .rec_slide .txt_2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: white;
	left: 12px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 4px;
	margin-right: 10px;
}

.rec_pack_slide .rec_slide .content {
	font-size: 16px;
	font-weight: 700;
	background: none;

}

.count {
	display: flex;
	padding: 10px 3px 0 3px;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #5A5A5A !important;
	gap: 12px;
}