@charset "utf-8";

/* ************************************************************************************************************************************************************
						《 공통 레이아웃 스타일 》
************************************************************************************************************************************************************ */

/*
	z-index 위계

	.get_pop			9999
	body.dim			9990
	.btm_pop			9990
	#header				999
	.full_pop			999
	.tab_bar			100

*/

/* ============================== [ 레이아웃 리셋 Layout Reset ] ========================================================================================== */
/* Reset */
html,
body,
div,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
big,
cite,
code,
del,
dfn,
font,
figure,
figcaption,
img,
ins,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	font: 13px/1em 'Pretendard', sans-serif;
}

button,
input,
textarea {
	font: 13px/1em 'Pretendard', sans-serif;
}

select {
	font: 13px/1em 'Pretendard', sans-serif;
}

::selection {
	color: #fff;
	background-color: #28AA7F;
}

/* ============================== [ 팝업딤드 ] ========================================================================================== */
body.dim {
	overflow: hidden;
}

body.dim:before {
	background-color: rgba(0, 0, 0, 0.7);
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	z-index: 9990;
}

/* ============================== [ 공통레이아웃 ] ========================================================================================== */
#head,
#header,
#contents,
.tab_bar,
.tab_bar_rn,
.btn_start,
.ad_chat {
	margin: 0 auto;
	max-width: 768px;
	width: 100%;
}

#head,
#header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
	height: 54px;
	box-sizing: border-box;
	padding: calc(constant(safe-area-inset-top) + 6px) 6px 6px 6px;
	padding: calc(env(safe-area-inset-top) + 6px) 6px 6px 6px;
	background-color: #fff;
	display: flex;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#contents {
	box-sizing: border-box;
	padding-top: 54px;
	padding-bottom: 120px;
}

.main_wrap #contents {
	padding-bottom: 150px;
}

.post_detail #contents {
	padding-bottom: 0;
}

/* -------------------- #header ---------------------------------------- */
.header_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.header_wrap .tit_ctrl {
	width: 42px;
	height: 42px;
}

.header_wrap .tit_ctrl a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.header_wrap .tit_ctrl a.back {
	background-image: url(../image/common/icon_back.svg);
}

.header_wrap .tit_ctrl a.back.gr {
	background-color: #CCCCCC;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.header_wrap .tit_ctrl a.close {
	background-image: url(../image/common/icon_close.svg);
}

.header_wrap .tit_ctrl a.close.wh,
.qr_close {
	background-image: url(../image/common/btn_close_wh.svg);
}

.header_wrap h1 {
	font-size: 20px;
	font-weight: 300;
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, 50%);
	white-space: nowrap;
	color: #5A5A5A;
}

.header_wrap .main_logo {
	display: flex;
	align-items: center;
}

.header_wrap .main_logo .logo_btn {
	margin-left: 12px;
	display: flex;
}

.header_wrap .main_logo .logo_btn a {
	display: block;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

.header_wrap .main_logo .logo_btn a.srch {
	background-image: url(../image/common/icon_search.svg);
}

.header_wrap .main_logo .logo_btn a.rank {
	background-image: url(../image/common/icon_rank.svg);
	margin-left: 12px;
	position: relative;
}

.header_wrap .main_logo .logo_btn a.rank::after {
	display: block;
	content: '';
	width: 1px;
	height: 24px;
	background-color: #E4E5E9;
	position: absolute;
	left: -6px;
	top: 6px;
}

.header_wrap .btn_area {
	display: flex;
	margin-left: auto;
}

.header_wrap .btn_area .btn_head {
	width: 42px;
	height: 42px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header_wrap .btn_area .btn_head a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.header_wrap .btn_area .btn_head.btn_my a {
	float: right;
	width: 30px;
	height: 30px;
	background-image: url(../image/common/icon_my.svg);
}

.header_wrap .btn_area .btn_head.btn_other a {
	float: right;
	background-image: url(../image/common/icon_warning.svg);
}

.header_wrap .btn_area .btn_head.btn_chat a {
	background-image: url(../image/common/icon_chat.svg);
}

.header_wrap .btn_area .btn_head.btn_more a {
	background-image: url(../image/common/icon_more_head.svg);
}

.header_wrap .btn_area .btn_head.btn_star a {
	background-image: url(../image/common/icon_star_off.svg);
}

.header_wrap .btn_area .btn_head.btn_star.on a {
	background-image: url(../image/common/icon_star_on.svg);
}

.header_wrap .btn_area .btn_head.btn_setting a {
	background-image: url(../image/common/icon_setting.svg);
}

/* 2023-10-11 추가 */
.header_wrap .btn_area .btn_head.btn_alarm a {
	background-image: url(../image/common/icon_alarm.svg);
}

/* 2023-10-11 추가 */
.header_wrap .btn_area .btn_head.btn_alarm .cnt {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #FF3F02;
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	text-align: center;
	line-height: 12px;
	position: absolute;
	right: 11px;
	top: 13px;
}

.header_wrap .btn_area .btn_head.btn_user {
	width: auto;
	height: 32px;
}

.header_wrap .btn_area .btn_head.btn_user a {
	display: flex;
	align-items: center;
}

.header_wrap .btn_area .btn_head.btn_user a .name {
	flex: 1;
	font-weight: 600;
	color: #fff;
	margin-right: 6px;
	transition: .2s;
}

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

.header_wrap .btn_area .btn_head.btn_qr {
	width: 32px;
	height: 32px;
}

.header_wrap .btn_area .btn_head.btn_qr a {
	background-image: url(../image/common/btn_qr.svg);
}

#move_menu {
	background-image: url(../image/common/ic_qr_nfc.png);
}

.info_menu .tit {
	background: url(../image/common/chip_13.png) no-repeat top center;
	padding-top: 80px;
	margin-top: 110px;
	margin-bottom: 40px;
	background-size: 64px 52px;
}

.info_menu .tit p {
	text-align: center;
	font-size: 16px;
	line-height: 20px;
	color: #313743;
	margin-bottom: 8px;
}


.info_menu .btt .button,
.nfc_auth {
	border-radius: 100px;
	width: 270px;
	height: 66px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 17px;
	color: black;
	/* background: url(../image/common/icon_qr_menu.svg) no-repeat 30px center; */
}

.nfc_auth2 {
	border-radius: 100px;
	width: 150px;
	height: 54px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 17px;
	color: black;
	/* background: url(../image/common/icon_qr_menu.svg) no-repeat 30px center; */
}

#mv_qr {
	background: url(../image/common/icon_qr_menu.svg) no-repeat 30px center;
}


#mv_nfc {
	background: url(../image/common/icon_nfc_menu.svg) no-repeat 30px center;
}

.nfc_tit {
	background: url(../image/common/icon_nfc_menu.svg) no-repeat top center;
	background-size: 60px auto;
	padding-top: 80px;
	text-align: center;
	margin-top: 90px;
}

.nfc_tit p {
	font-size: 18px;
	line-height: 27px;
	letter-spacing: -0.41px;
	font-weight: 500;
}

.nfc_bnr {
	background: url(../image/common/bnr_nfc.svg) no-repeat left center, url(../image/common/bnr_nfc_txt.svg) no-repeat 150px 60px;
	background-color: #D4AAFF;
	border-radius: 24px;
	width: 262px;
	height: 150px;

}


.nfc_bnr2 {
	background: url(../image/common/bnr_nfc2.svg) no-repeat 40px center;
	border-radius: 24px;
	width: 230px;
	height: 150px;
}

.nfc_bnr2_txt {
	width: 250px;
	height: 150px;
	background: url(../image/common/bnr_nfc_txt.svg) no-repeat 130px 60px;
	transform: rotate(-26.24deg);
}

.nfc_bnr3 {
	background: url(../image/common/bnr_nfc3.png) no-repeat center;
	width: 262px;
	height: 100px;
}



.nfc_noti p {
	font-size: 16px;
	margin-bottom: 10px;
	font-weight: 500;
	display: flex;
	line-height: 20px;
}

.nfc_noti3 p {
	font-size: 16px;
	margin-bottom: 20px;
	font-weight: 500;
	/* display: flex; */
	text-align: center;
	line-height: 20px;
}

.nfc_noti #em,
.nfc_tit #em {
	color: #B46AFF;
	font-weight: 700;
}

.nfc_noti .mark {
	height: 100%;
	margin-right: 5px;
}

.nfc_noti,
.nfc_noti3 {
	width: 312px;
}

.qr_tit {
	border-radius: 42px;
	width: 252px;
	height: 42px;
	background-color: #37ED87;
	font-size: 16px;
	font-weight: 600;
	text-align: center;

	display: flex;
	align-items: center;
	justify-content: center;

	position: absolute;
	left: 50%;
	transform: translateX(-50%);

}



.android,
.ios {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}


#header.head_type {
	background-color: transparent;
	box-shadow: none;
	border: none
}

.post_detail #contents {
	padding-top: 0;
}

.nfc_close {
	background: url(../image/common/btn_close_black.svg) no-repeat center center;
	width: 42px;
	height: 42px;
	padding: 15px;
}

/* -------------------- 탭바 ---------------------------------------- */
.tab_bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 0 15px constant(safe-area-inset-bottom);
	padding: 0 15px env(safe-area-inset-bottom);
	box-sizing: border-box;
}

.tab_bar .cotn {
	padding: 3px 0;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.tab_bar.main {
	background-color: #28AA7F;
}

.tab_bar.pack {
	background: url(../image/common/bg_tab_bar.jpg) no-repeat center;
	background-size: cover;
}

.tab_bar.main .tab_btn.on::after {
	display: block;
	content: '';
	width: 42px;
	height: 42px;
	background-color: #702DFF;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: -1;
}

.tab_bar.pack .tab_btn.on::after {
	display: block;
	content: '';
	width: 42px;
	height: 42px;
	background-color: #00C987;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: -1;
}

.tab_bar .tab_btn {
	width: 48px;
	height: 48px;
	position: relative;
}

.tab_bar .tab_btn a {
	display: block;
	width: 100%;
	height: 48px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 48px 48px;
}

.tab_bar .tab_btn.home a {
	background-image: url(../image/common/icon_home.svg);
}

.tab_bar .tab_btn.pack a {
	background-image: url(../image/common/icon_pack.png);
}

.tab_bar .tab_btn.add a {
	background-image: url(../image/common/icon_add.svg);
}

.tab_bar .tab_btn.map a {
	background-image: url(../image/common/icon_map.svg);
}

.tab_bar .tab_btn.ar a {
	background-image: url(../image/common/icon_ar.svg);
}

.tab_bar .tab_btn.ar.on a {
	background-image: url(../image/common/icon_ar_on.svg);
}

.tab_bar .tab_btn.ar.on::after {
	display: none;
}

.tab_bar .tab_btn.binder a {
	background-image: url(../image/common/icon_binder.svg);
}

.tab_bar_rn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 0 12px constant(safe-area-inset-bottom);
	padding: 0 12px env(safe-area-inset-bottom);
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.tab_bar_rn .cotn {
	padding: 3px 0;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.tab_bar_rn .tab_btn {
	width: 48px;
	height: 48px;
	position: relative;
}

.tab_bar_rn .tab_btn a {
	display: block;
	width: 100%;
	height: 48px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 48px auto;
}

.tab_bar_rn .tab_btn.home a {
	background-image: url(../image/common/tab_home.svg);
}

.tab_bar_rn .tab_btn.near a {
	background-image: url(../image/common/tab_near.svg);
}

.tab_bar_rn .tab_btn.ar a {
	background-image: url(../image/common/tab_ar.svg);
}

.tab_bar_rn .tab_btn.my a {
	background-image: url(../image/common/tab_my.svg);
}

.tab_bar_rn .tab_btn.make a {
	background-image: url(../image/common/tab_make.svg);
}

.tab_bar_rn .tab_btn.home.on a {
	background-image: url(../image/common/tab_home_on.svg);
}

.tab_bar_rn .tab_btn.near.on a {
	background-image: url(../image/common/tab_near_on.svg);
}

.tab_bar_rn .tab_btn.ar.on a {
	background-image: url(../image/common/tab_ar_on.svg);
}

.tab_bar_rn .tab_btn.my.on a {
	background-image: url(../image/common/tab_my_on.svg);
}

.tab_bar_rn .tab_btn.make.on a {
	background-image: url(../image/common/tab_make_on.svg);
}

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

/* -------------------- chatbot 배너 ---------------------------------------- */
.ad_chat {
	transition: .2s;
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(constant(safe-area-inset-bottom) + 53px);
	bottom: calc(env(safe-area-inset-bottom) + 53px);
	z-index: 100;
	text-decoration: none;
}

.ad_chat .cotn {
	display: none;
	background: #C590FB url(../image/common/bg_chat.png) no-repeat left bottom;
	border-top: 2px solid #313743;
	padding: 20px 0 28px;
	flex-direction: column;
	align-items: center;
}

.ad_chat.on .cotn {
	display: flex;
}

.ad_chat .cotn .img {
	width: 223px;
	height: 23.09px;
}

.ad_chat .cotn .txt {
	text-align: center;
	margin-top: 6px;
	font-weight: 500;
	line-height: 16px;
	color: #313743;
}

.ad_chat .close {
	background: url(../image/common/icon_close_chat.svg) no-repeat 0 0;
	width: 36px;
	height: 36px;
	position: absolute;
	right: 0;
	top: 0;
	background-size: 36px auto;
	z-index: 110;
}

.click_me {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 86px;
	height: 72px;
	display: block;
	background: url(../image/common/chip_20.png) no-repeat 0 0;
	background-size: 100% auto;
}

/* ============================== [ 공통스타일 ] ========================================================================================== */
.go_view {
	/* background-color:rgba(0,0,0,0.3); */
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ============================== [ 버튼 UI ] ========================================================================================== */
.btn_wrap .btn,
.btn_wrap2 .btn {
	border-radius: 30px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	width: 100%;
	display: block;
	text-align: center;
}

.btn_wrap .btn span {
	font-size: 12px;
	line-height: 1.5em;
	display: inline-block;
}

.btn_wrap .btn.color_type2 {
	border-color: #702DFF;
}

.btn_wrap .btn.color_type3 {
	border-color: #00C987;
}

.btn_wrap .btn.color_type4 {
	background-color: #28AA7F;
	color: #fff;
	border-color: #28AA7F
}

.btn_wrap .btn.color_type4.inactv {
	background-color: #D2D2D2;
	border-color: #D2D2D2;
}

.btn_wrap .btn.color_type5 {
	background-color: #E6E6E6;
	color: #fff;
}

.btn_wrap .btn.color_type6 {
	background-color: #702DFF;
	color: #fff;
}

.btn_wrap .btn.color_type6.inactv {
	background-color: #D2D2D2;
	border-color: #D2D2D2;
}

.btn_wrap .btn.color_type7,
.btn_wrap2 .btn.color_type7 {
	background-color: #EC6868;
	color: #fff;
	border-color: #EC6868;
}

.btn_wrap .btn.color_type8,
.btn_wrap2 .btn.color_type8 {
	border-color: #EC6868;
	color: #EC6868;
}

.btn_wrap .btn.color_type9 {
	border-color: #C590FB;
	color: #313743;
	background-color: #C590FB;
}

/* 화면을 따라 이동하는 버튼 */
.btn_wrap.btn_fixed {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: 100%;
	max-width: 768px;
	background-color: #fff;
	transform: translateX(-50%);
	padding: 12px 12px calc(constant(safe-area-inset-bottom) + 12px);
	padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
	box-sizing: border-box;
}

.btn_fixed .btn {
	padding: 10px 0;
	height: 40px;
	box-sizing: border-box;
}

.btn_fixed .btn~.btn {
	margin-top: 12px;
}

.btn_fixed .btn span {
	font-size: 15px;
	line-height: 1.3;
}

.btn_fixed .btn strong {
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
}

.btn_fixed .btn.btn_more span {
	padding-right: 24px;
	background: url(../image/common/icon_more_purple.svg) no-repeat right center;
	background-size: 16px 16px;
}

/* 하단에 고정된 버튼 */
.btn_wrap.btn_fixed_rel {
	position: relative;
	bottom: 0;
	left: 50%;
	width: 100%;
	max-width: 768px;
	background-color: #fff;
	transform: translateX(-50%);
	padding: 12px 12px calc(constant(safe-area-inset-bottom) + 12px);
	padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
	box-sizing: border-box;
}

.btn_fixed_rel .btn {
	padding: 10px 0;
	height: 40px;
	box-sizing: border-box;
}

.btn_fixed_rel .btn~.btn {
	margin-top: 12px;
}

.btn_fixed_rel .btn span {
	font-size: 15px;
	line-height: 1.3;
}

.btn_fixed_rel .btn strong {
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
}

.btn_fixed_rel .btn.btn_more span {
	padding-right: 24px;
	background: url(../image/common/icon_more_purple.svg) no-repeat right center;
	background-size: 16px 16px;
}

/* ============================== [ 타이틀 UI ] ========================================================================================== */
.tit_15 {
	font-size: 15px;
	font-weight: 700;
}

/* ============================== [ Form UI ] ========================================================================================== */
.text_input {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.text_input input {
	width: 100%;
	border-radius: 20px;
	border: 1px solid #d2d2d2;
	background-color: #fff;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 60px 8px 12px;
	box-sizing: border-box;
	transition: border-color .3s, color .3s;
	vertical-align: middle;
	line-height: 1;
	height: 40px;
}

.text_input .btn_submit {
	position: absolute;
	right: 0;
	top: 0;
	width: 48px;
	height: 100%;
	transition: background-color .3s;
}

.text_input .btn_submit .icon_submit {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 20px 20px;
}

.text_input .btn_submit .icon_submit.i_srch {
	background-image: url(../image/common/icon_srch_gy.svg);
}

.text_input .btn_submit .icon_submit.i_chat {
	background-image: url(../image/common/icon_chat_gy.svg);
}

.text_input .btn_submit .icon_submit.i_note {
	background-image: url(../image/common/icon_note_gray.svg);
	background-size: 19px 21px;
	width: 19px;
	height: 21px;
}

/* textarea */
textarea {
	resize: none;
	border: 1px solid #999;
	border-radius: 8px;
	background-color: #fff;
	font-size: 15px;
	font-weight: 500;
	width: 100%;
	box-sizing: border-box;
	height: 300px;
	line-height: 19px;
	padding: 11px 15px;
}

textarea:focus {
	outline: none;
	border: 1px solid #666;
}

/* selectbox */
select {
	border: 1px solid #d2d2d2;
	border-radius: 30px;
	background: #f5f5f5 url(../image/common/icon_arr_down_bk.svg) no-repeat right center;
	/* background-size: 36px; */
	background-size: 24px;
	font-size: 15px;
	font-weight: 500;
	width: 100%;
	box-sizing: border-box;
	/* height: 40px; */
	height: 24px;
	/* line-height: 40px; */
	padding: 0 36px 0 15px;
	color: #3b3c39;
}

/* 체크박스 */
.form_chk {
	width: 24px;
	height: 24px;
	display: block;
	cursor: pointer;
}

.form_chk input[type="checkbox"] {
	position: absolute;
	height: 0;
	width: 0;
	border: none;
	margin: 0;
	padding: 0;
}

.form_chk input[type="checkbox"]~.icon {
	width: 24px;
	height: 24px;
	display: block;
	border: 1px solid #d2d2d2;
	border-radius: 4px;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px;
	box-sizing: border-box;
}

.form_chk input[type="checkbox"]:checked~.icon {
	background-image: url(../image/common/icon_chk.svg);
}

/* 라디오버튼 */
.form_rdo label {
	cursor: pointer;
}

.form_rdo input[type="radio"] {
	position: absolute;
	height: 0;
	width: 0;
	border: none;
	margin: 0;
	padding: 0;
}

.form_rdo input[type="radio"]~.icon {
	display: block;
	margin: 0 auto;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border-radius: 50%;
	padding: 6px;
}

.form_rdo input[type="radio"]~.icon i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid #AEAEAE;
	box-sizing: border-box;
	position: relative;
}

.form_rdo input[type="radio"]~.icon i::after {
	display: block;
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #AEAEAE;
	border-radius: 50%;
}

.form_rdo input[type="radio"]:checked~.icon i {
	border-color: #702dff;
}

.form_rdo input[type="radio"]:checked~.icon i::after {
	background: #702DFF;
	box-shadow: none;
}

.form_rdo.list_rdo {
	display: flex;
	gap: 33px;
	margin-bottom: 4px;
}

.form_rdo.list_rdo label {
	display: flex;
	align-items: center;
}

.form_rdo.list_rdo input[type="radio"]~.icon {
	margin: 0;
}

.form_rdo.list_rdo .rdo_txt {
	margin-right: 6px;
	font-size: 15px;
}

/* 정보입력 */
.inpt_wrap {
	margin-top: 24px;
	position: relative;
}

.inpt_wrap .tit {
	font-size: 15px;
	font-weight: 500;
	line-height: 19px;
	margin-bottom: 4px;
	color: #3B3C39;
	letter-spacing: -1px;
}

.inpt_wrap .point_txt {
	margin-bottom: 4px;
}

.inpt_wrap input {
	border: 1px solid #999;
	border-radius: 8px;
	background-color: #fff;
	font-size: 15px;
	font-weight: 500;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 0 8px 15px;
	line-height: 1;
}

.inpt_wrap input:disabled {
	border: 1px solid #e0e0e0;
	color: #e0e0e0;
}

.inpt_wrap input:focus {
	border-color: #666;
}

.inpt_wrap input[type="password"] {
	padding-right: 40px;
}

.inpt_wrap.wrn input[type="password"] {
	border-color: #EC6868
}

.inpt_wrap input[type="password"]~.btn_del {
	display: none;
	width: 38px;
	height: 36px;
	position: absolute;
	right: 2px;
	top: 2px;
	background: url(../image/common/icon_del_02.svg) no-repeat 0 0;
	background-size: 100% 100%;
}

.inpt_wrap.inpt_horz {
	display: flex;
	align-items: center;
}

.inpt_wrap.inpt_horz .tit {
	margin-bottom: 0;
	width: 85px;
	padding-right: 10px;
}

.inpt_wrap.inpt_horz .info_btn .btn {
	margin: 0;
}

.inpt_wrap .inner_wrap {
	display: flex;
	align-items: center;
	flex: 1;
}

.inpt_wrap .play {
	width: 42px;
	height: 42px;
	display: block;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
	background: url(../image/common/icon_play.svg) no-repeat 0 0;
	background-size: 100%;
	border-radius: 50%;
	margin-right: 10px;
}

.user_cnt {
	display: flex;
	align-items: center;
	margin-left: 8%;
	flex: 1;
}

.user_cnt input[type="text"] {
	flex: 1;
	text-align: center;
	padding: 8px 0;
}

.user_cnt.inactv .tit {
	color: #d2d2d2;
}

.inpt_wrap.inpt_horz .user_cnt .tit {
	width: auto;
}

@media only screen and (max-width:340px) {
	.pack_cover .cover_img {
		width: 160px !important;
		height: 200px !important;
	}

	.pack_cover .apply_area {
		margin-left: 16px !important;
	}

	.user_cnt {
		margin-left: 4%;
	}

	.inpt_wrap .play {
		margin-right: 5px;
	}
}

/* 텍스트 입력시 */
.text_input.on input {
	color: #702DFF;
}

/* input focus */
.text_input input:focus {
	border-color: #702DFF;
	color: #3B3C39 !important;
}

.text_input input:focus~.btn_submit {
	background-color: #702DFF;
}

.text_input input:focus~.btn_submit .icon_submit.i_srch {
	background-image: url(../image/common/icon_srch_wh.svg);
}

.text_input input:focus~.btn_submit .icon_submit.i_chat {
	background-image: url(../image/common/icon_chat_wh.svg);
}

.text_input input:focus~.btn_submit .icon_submit.i_note {
	background-image: url(../image/common/icon_note_wh.svg);
}

/* ============================== [ 아이콘 ] ========================================================================================== */
.ico_lv {
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
	text-indent: -9999px;
	height: 28px;
}

.ico_lv.lv0 {
	background-image: url(../image/common/lv0.svg);
	width: 28px;
}

.ico_lv.lv1 {
	background-image: url(../image/common/lv1.svg);
	width: 24px;
}

.ico_lv.lv2 {
	background-image: url(../image/common/lv2.svg);
	width: 24px;
}

.ico_lv.lv3 {
	background-image: url(../image/common/lv3.svg);
	width: 24px;
}

.ico_lv.lv4 {
	background-image: url(../image/common/lv4.svg);
	width: 28px;
}

.ico_lv.lv5 {
	background-image: url(../image/common/lv5.svg);
	width: 28px;
}

.ico_lv.lv6 {
	background-image: url(../image/common/lv6.svg);
	width: 28px;
}

.ico_lv.lv7 {
	background-image: url(../image/common/lv7.svg);
	width: 40px;
}

.ico_lv.lv8 {
	background-image: url(../image/common/lv8.svg);
	width: 40px;
}

.ico_lv.lv9 {
	background-image: url(../image/common/lv9.svg);
	width: 40px;
}

.ico_lv.lv10 {
	background-image: url(../image/common/lv10.svg);
	width: 40px;
}

.ico_lv.lv11 {
	background-image: url(../image/common/lv11.svg);
	width: 40px;
}

.ico_lv.lv12 {
	background-image: url(../image/common/lv12.svg);
	width: 40px;
}

.ico_lv.lv13 {
	background-image: url(../image/common/lv13.svg);
	width: 40px;
}

.ico_lv.lv14 {
	background-image: url(../image/common/lv14.svg);
	width: 40px;
}

.ico_lv.lv15 {
	background-image: url(../image/common/lv15.svg);
	width: 40px;
}

.ico_lv.lv16 {
	background-image: url(../image/common/lv16.svg);
	width: 42px;
}

.ico_lv.lv17 {
	background-image: url(../image/common/lv17.svg);
	width: 42px;
}

.ico_lv.lv18 {
	background-image: url(../image/common/lv18.svg);
	width: 42px;
}

.ico_lv.lv19 {
	background-image: url(../image/common/lv19.svg);
	width: 42px;
}

.ico_lv.lv20 {
	background-image: url(../image/common/lv20.svg);
	width: 42px;
}

.ico_lv.lv21 {
	background-image: url(../image/common/lv21.svg);
	width: 42px;
}



.ico_packer_lv {
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
	text-indent: -9999px;
	height: 29px;
}

.ico_packer_lv.lv0 {
	background-image: url(../image/common/packer_lv0.svg);
	width: 29px;
	height: 28px;
}

.ico_packer_lv.lv1 {
	background-image: url(../image/common/packer_lv1.svg);
	width: 29px;
}

.ico_packer_lv.lv2 {
	background-image: url(../image/common/packer_lv2.svg);
	width: 29px;
}

.ico_packer_lv.lv3 {
	background-image: url(../image/common/packer_lv3.svg);
	width: 29px;
}

.ico_packer_lv.lv4 {
	background-image: url(../image/common/packer_lv4.svg);
	width: 29px;
}

.ico_packer_lv.lv5 {
	background-image: url(../image/common/packer_lv5.svg);
	width: 29px;
}

.ico_packer_lv.lv6 {
	background-image: url(../image/common/packer_lv6.svg);
	width: 29px;
}

.ico_packer_lv.lv7 {
	background-image: url(../image/common/packer_lv7.svg);
	width: 41px;
	height: 30px;
}

.ico_packer_lv.lv8 {
	background-image: url(../image/common/packer_lv8.svg);
	width: 41px;
	height: 30px;
}

.ico_packer_lv.lv9 {
	background-image: url(../image/common/packer_lv9.svg);
	width: 41px;
	height: 30px;
}

.ico_packer_lv.lv10 {
	background-image: url(../image/common/packer_lv10.svg);
	width: 41px;
}

.ico_packer_lv.lv11 {
	background-image: url(../image/common/packer_lv11.svg);
	width: 41px;
}

.ico_packer_lv.lv12 {
	background-image: url(../image/common/packer_lv12.svg);
	width: 41px;
}

.ico_packer_lv.lv13 {
	background-image: url(../image/common/packer_lv13.svg);
	width: 41px;
}

.ico_packer_lv.lv14 {
	background-image: url(../image/common/packer_lv14.svg);
	width: 41px;
}

.ico_packer_lv.lv15 {
	background-image: url(../image/common/packer_lv15.svg);
	width: 41px;
}

.ico_packer_lv.lv16 {
	background-image: url(../image/common/packer_lv16.svg);
	width: 43px;
}

.ico_packer_lv.lv17 {
	background-image: url(../image/common/packer_lv17.svg);
	width: 43px;
}

.ico_packer_lv.lv18 {
	background-image: url(../image/common/packer_lv18.svg);
	width: 43px;
}

.ico_packer_lv.lv19 {
	background-image: url(../image/common/packer_lv19.svg);
	width: 43px;
}

.ico_packer_lv.lv20 {
	background-image: url(../image/common/packer_lv20.svg);
	width: 43px;
}

.ico_packer_lv.lv21 {
	background-image: url(../image/common/packer_lv21.svg);
	width: 43px;
}


/* ============================== [ 컨텐츠 ] ========================================================================================== */
.cont_mebr {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 18px;
	background: url(../image/common/icon_mebr.svg) no-repeat left center;
	background-size: 14px auto;
}

.cont_mebr2 {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 18px;
	background: url(../image/common/icon_mebr_v2.svg) no-repeat left center;
	background-size: 14px auto;
}

.cont_mebr3 {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 25px;
	background: url(../image/common/icon_mebr_v2.svg) no-repeat left center;
	background-size: 20px auto;
}

.cont_chat {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 25px;
	background: url(../image/common/icon_talk.svg) no-repeat left center;
	background-size: 14px auto;
}

.cont_chat2 {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 18px;
	background: url(../image/common/icon_talk_v2.svg) no-repeat left center;
	background-size: 14px auto;
}

.cont_chat3 {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 25px;
	background: url(../image/common/icon_talk_v2.svg) no-repeat left center;
	background-size: 20px auto;
}

.cont_like {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 18px;
	background: url(../image/common/icon_like.svg) no-repeat left center;
	background-size: 14px auto;
}

.cont_allca {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 18px;
	background: url(../image/common/icon_allca.svg) no-repeat left center;
	background-size: 14px auto;
}

.cont_flag {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 18px;
	background: url(../image/common/icon_flag.svg) no-repeat left center;
	background-size: 14px auto;
}

.cont_pack {
	min-width: 50px;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	padding-left: 18px;
	background: url(../image/common/icon_open_pack.svg) no-repeat left center;
	background-size: 14px auto;
}

.btn_share {
	width: 42px;
	/* min-width: 50px; */
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	color: #5A5A5A;
	/* background: url(../image/common/icon_share.svg) no-repeat center center; */
	background: url(../image/common/icon_share_v2.svg) no-repeat center center;
}


/* 241125 pse Share 버튼 추가 */

/* ============================== [ 요약 ] ========================================================================================== */
.brief {
	display: flex;
	/* align-items: center; */
	position: relative;
}

.brief .img {
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 12px;
	position: relative;
	background-color: #E4E5E9;
	border: 1px solid #F5F5F5;
	box-sizing: border-box;
}

.brief .img .badge {
	padding: 0 12px 0 8px;
	width: 49px;
	height: 22px;
	line-height: 22px;
	position: absolute;
	left: 0;
	bottom: 10px;
	border-radius: 0 12px 12px 0;
	font-size: 11px;
	font-weight: 500;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}

.brief .img .brief_del {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3) url(../image/common/icon_delete.svg) no-repeat center;
	background-size: 14px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.brief.open .img .badge {
	background-color: #1EB17B;
	color: #fff;
}

.brief.prod .img .badge {
	background-color: #fff;
	color: #5A5A5A;
}

.brief.fav .img::after {
	display: block;
	content: '';
	background: url(../image/common/icon_fav_02.svg) no-repeat;
	width: 14px;
	height: 21px;
	position: absolute;
	left: 8px;
	top: 1px;
}

.brief .info_area {
	margin-left: 12px;
	flex: 1;
	display: inline-grid;

}

.brief .info_area .nickname {
	font-size: 13px;
	font-weight: 600;
	color: #999;
	line-height: 16px;
}

.brief .info_area p {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.brief .info_area .pack_current {
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 224px;
}

.brief .info_area .pack_current .number {
	font-size: 16px;
	font-weight: 700;
	color: #1EB17B;
	display: flex;
	align-items: center;
}

.brief .info_area .pack_current .number::before {
	display: block;
	content: '';
	width: 28px;
	height: 23px;
	background: url(../image/banner/icon_mylocal.svg) no-repeat center;
	background-size: 20px;
	border-right: 1px solid #1EB17B;
	margin-right: 12px;
}

.brief .info_area .pack_current .attend {
	display: flex;
	margin-left: auto;
}

.brief .info_area .post_tit {
	color: #3b3c39;
	margin-top: 0;
}

.brief .info_area .loc_info {
	display: flex;
	align-items: center;
	margin-top: 8px;
}

.brief .info_area .loc_info .loc_catg {
	min-width: 37px;
	padding-right: 8px;
	border-right: 1px solid #AEAEAE;
	box-sizing: border-box;
}

.brief .info_area .loc_info .loc_catg span {
	padding-top: 16px;
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	color: #5A5A5A;
	background: url(../image/common/icon_map_02.svg) no-repeat top center;
	background-size: 14px;
}

.brief .info_area .loc_info .addr {
	flex: 1;
	font-size: 15px;
	line-height: 20px;
	color: #5A5A5A;
	padding-left: 12px;
	margin-top: 0;
}

.brief .map_info {
	margin-left: 12px;
	flex: 1;
}

.brief .map_info h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #313743;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.brief .map_info .desc {
	margin-top: 6px;
	color: #5A5A5A;
	font-size: 15px;
	line-height: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.brief .map_info .addr {
	margin-top: 6px;
	padding-left: 20px;
	background: url(../image/common/icon_map_02.svg) no-repeat left center;
	background-size: 14px;
}

.brief .map_info .addr p {
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	color: #5A5A5A;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.brief.brief_chk {
	padding-right: 44px;
}

.brief.brief_chk .img {
	width: 80px;
	height: 80px;
}

.brief.brief_chk .link_chk {
	width: 32px;
	height: 32px;
	background: url(../image/common/btn_brief.svg) no-repeat 0 0;
	background-size: 32px;
	position: absolute;
	right: 0;
	bottom: 10px;
	z-index: 1;
}

/* ============================== [ 추천팩 ] ========================================================================================== */
.rec_pack {
	/* width: 270px; */
	border-radius: 12px;
	border: 1px solid #fff;
	background-color: #fff;
	overflow: hidden;
	position: relative;
}

.rec_pack::before {
	display: block;
	content: '';
	width: 100%;
	height: 106px;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
	z-index: 1;
	opacity: 0.4;
}

.rec_pack .img_area {
	position: relative;
	overflow: hidden;
}

.rec_pack .img_area .img {
	width: 100%;
	aspect-ratio: 3 / 4;
	/* height: 80vw; */
	/* height: 293px; */
}

.rec_pack .img_area .user_info {
	position: absolute;
	/* right: 12px;
	top: 12px; */
	/* left: 12px; */
	left: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	z-index: 2;
}

.rec_pack .img_area .pack-info {
	position: absolute;
	right: 12px;
	top: 12px;
	/* left: 12px;
	bottom: 12px; */
	z-index: 2;
	background-color: #BBF2BE;
	border-radius: 68px;
	width: 34px;
	height: 64px;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.rec_pack .img_area .pack-info .txt {
	background-color: white;
	border-radius: 0 0 68px 68px;
	/* height: 32px; */
	text-align: center;
	width: 100%;
	height: 50%;
	margin-top: 15%;
	padding-top: 20%;
	color: #313743;
	font-weight: 700;
	font-size: 15px;
}


.rec_pack .img_area .user_info span {
	font-weight: 600;
	/* font-size: 13px; */
	font-size: 14px;
	color: #fff;
}

.rec_pack .img_area .user_info .thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #fff;
	/* margin-left: 6px; */
	margin-right: 6px;
}

.rec_pack .img_area .user_info .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rec_pack .img_area .fav_tit {
	padding-left: 44px;
	height: 48px;
	position: absolute;
	left: 20px;
	top: -1px;
	background: url(../image/common/icon_fav.svg) no-repeat left center;
	display: flex;
	align-items: center;
	z-index: 1;
}

.rec_pack .img_area .fav_tit span {
	font-size: 16px;
	color: #fff;
	font-weight: 500;
	line-height: 18px;
}

.rec_pack .info_area {
	padding: 12px;
	display: flex;
	align-items: center;
}

.rec_pack .spot_num {
	position: relative;
	display: flex;
}

.rec_pack .spot_num::before {
	display: block;
	content: '';
	width: 42px;
	height: 36px;
	background: url(../image/common/icon_spot_pack.svg) no-repeat 0 0;
	border-right: 1px solid #1EB17B;
}

.rec_pack .spot_num .number {
	width: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.rec_pack .spot_num .number span {
	font-weight: 500;
	font-size: 10px;
	color: #1EB17B;
	line-height: 1.3;
}

.rec_pack .spot_num .number em {
	font-size: 24px;
	font-weight: 700;
	color: #1EB17B;
	line-height: 24px;
}

.rec_pack .pack_current {
	margin-left: auto;
}

.rec_pack .pack_current .txt {
	border-bottom: 1px solid #CCCCCC;
	color: #999999;
	font-size: 8px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 8px;
	margin-bottom: 4px;
}

.rec_pack .pack_current .attend {
	width: 123px;
	display: flex;
	justify-content: space-between;
}

.rec_pack .pack_wrapper {
	display: flex;
}

.rec_pack.fav {
	height: 460px;
	/* width: 290px; */
	margin: 0 auto;
}

.rec_pack.fav .img_area .img {
	/* height: 315px; */
	height: 416px;
}

.rec_pack.fav .pack_current {
	padding: 0 12px;
}

/*공유 받은 팩일 때 css 변경 241128 pse*/
.share .rec_pack.fav .img_area .img {
	/* height: 379.2px; */
	height: 416px;
}

.share.fav_wrap h3 {
	margin-bottom: 6px;
}

.share.fav_wrap .fav_pack::after {
	transform: translate(-50%, -43%);
}

.txt_2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	/* position: absolute;
	top: 280px; */
	letter-spacing: -1;
	color: white;
	vertical-align: middle;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 4px;
	margin-right: 10px;
	/* max-width: 90%; */
}

/* ============================== [ 베스트 팩메이커 ] ========================================================================================== */
.pack_maker {
	background-color: #48CC8D;
	padding: 24px 12px 32px;
	position: relative;
}

/* .pack_maker::after {
	display: block;
	content: '';
	background: url(../image/common/pack_flag.png) no-repeat 0 0;
	background-size: auto 100%;
	width: 44px;
	height: 112px;
	position: absolute;
	right: 2px;
	top: 0px;
} */

.pack_maker.type_packer::after {
	background-image: url(../image/common/packer_flag.png);
	height: 82px;
	top: 0;
}

.leader {
	position: relative;
	display: flex;
}

.leader .num {
	display: block;
	width: 36px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 36px auto;
	position: relative;
	text-indent: -9999px;
}

.leader.packer .num {
	background-image: url(../image/common/maker_1.png);
}

.leader.packmaker .num {
	background-image: url(../image/common/maker_2.png);
}

.leader .user_info {
	display: flex;
	align-items: center;
	margin-left: 12px;
}

.leader .user_info .img {
	width: 76px;
	height: 76px;
	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;
}

.leader .user_info .info {
	display: flex;
	flex-direction: column;
	margin-left: 12px;
	width: 160px;
}

.leader .user_info .info .name {
	font-size: 18px;
	font-weight: 700;
	color: #313743;
	margin-bottom: 6px;
}

.leader_pack {
	margin-top: 12px;
	border-radius: 20px;
	overflow: hidden;
}

.pack_tab .leader_pack {
	display: none;
}

.pack_tab .leader_pack.on {
	display: block;
}

.leader_pack .pack_tit {
	background-color: #1EB17B;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px;
}

.leader_pack .pack_tit .tit {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: #fff;
}

.leader_pack .pack_tit .desc {
	margin-top: 7px;
	margin-bottom: 4px;
	color: #313743;
	font-size: 12px;
	font-weight: 500;
	padding: 0 20px;
	text-align: center;
}

.leader_pack .pack_tit .state {
	padding: 6px 0;
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 12px;
}

.leader_pack .pack_tit .state p {
	padding-left: 18px;
	line-height: 130%;
	background-position: left top 0px;
	background-repeat: no-repeat;
	background-size: 16px;
	font-size: 12px;
	font-weight: 500;
	color: #313743;
}

.leader_pack .pack_tit .state p strong {
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	padding-left: 4px;
}

.leader_pack .pack_tit .state .pack {
	background-image: url(../image/common/icon_open_pack.svg);
}

.leader_pack .pack_tit .state .spot {
	background-image: url(../image/common/icon_flag.svg);
}

.leader_pack .pack_tit .state .store {
	background-image: url(../image/common/icon_store.svg);
}

.leader_pack .pack_tit .state .allca {
	background-image: url(../image/common/icon_allca.svg);
}

.leader_pack .pack_tit .state .stamp {
	background-image: url(../image/common/ic_stamp.svg);
}

.leader_pack .pack_tit .state .makepack {
	background-image: url(../image/common/icon_pack_post_02.svg);
}

.leader_pack>a {
	display: block;
	padding: 12px;
	background-color: #fff;
}


/* ============================== [ 데이터없음 ] ========================================================================================== */
.data_none {
	margin-top: 180px;
}

.data_none .img {
	width: 68px;
	height: auto;
	margin: 0 auto;
}

.data_none .txt_01 {
	text-align: center;
	margin-top: 15px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.data_none .txt_02 {
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 500;
	color: #888;
}

/* ============================== [ 팩 UI ] ========================================================================================== */

/* -------------------- 목록:리스트형 ---------------------------------------- */
.pack_group {
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.pack_group .cotn {
	padding: 12px;
	display: flex;
	align-items: center;
}

.pack_group .img_area {
	width: 96px;
	height: 96px;
	position: relative;
}

.pack_group .img_area .img {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	border-radius: 50%;
}

.pack_group .txt_area {
	padding-left: 10px;
	flex: 1;
	width: calc(100% - 96px);
	box-sizing: border-box;
}

.pack_group .nickname {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	width: 100%;
	color: #666;
}

.pack_group .tit {
	margin-top: 8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.385;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.pack_group .addr {
	display: flex;
	margin-top: 8px;
	padding-left: 18px;
	background: url(../image/common/icon_map_02.svg) no-repeat left top;
	background-size: 14px 14px;
}

.pack_group .addr .cnt {
	font-size: 12px;
	line-height: 1.273em;
	font-weight: 500;
}

.pack_group .addr .txt {
	font-size: 11px;
	color: #888;
	line-height: 1.3em;
	margin-left: 4px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.pack_group .pack_info {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
}

.pack_group .pack_info .count {
	margin-right: 20px;
	padding-left: 18px;
	background-image: url(../image/common/icon_people.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 10px 11px;
	box-sizing: border-box;
	width: 84px;
}

.pack_group .pack_info .count p {
	font-size: 11px;
	color: #888;
}

.pack_group .pack_info .count p .current {
	color: #3b3c39;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.364em;
}

.pack_group .pack_info .chat {
	padding-left: 18px;
	background-image: url(../image/common/icon_chat_bk.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
}

.pack_group .pack_info .chat span {
	font-weight: 500;
	font-size: 11px;
	line-height: 1.364em;
}

/* 팩 카운트영역 */
.card_count {
	border-top: 1px solid #e0e0e0;
	background-color: rgba(217, 217, 217, 0.3);
	padding: 12px 18px 28px;
}

.card_count .info_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card_count .info_wrap .tot_card {
	color: #353535;
	font-size: 11px;
	line-height: 1.167em;
}

.card_count .info_wrap .tot_card strong {
	font-weight: 600;
	margin: 0 4px;
	font-size: 12px;
}

.card_count .info_wrap .date {
	font-size: 11px;
	line-height: 1.167em;
	color: #999;
}

.card_count .bar {
	margin-top: 15px;
	position: relative;
}

.card_count .bar .tot_line {
	background-color: #fff;
	height: 4px;
	width: 100%;
	position: relative;
}

.card_count .bar .tot_line span {
	color: #000;
	font-size: 10px;
	line-height: 1.2em;
	position: absolute;
	bottom: -14px;
}

.card_count .bar .tot_line span.start {
	left: 0;
}

.card_count .bar .tot_line span.end {
	right: 0;
}

.card_count .bar .current_line {
	background-color: #28AA7F;
	height: 100%;
	width: 0;
	position: relative;
}

.card_count .bar .current_line span {
	color: #017f55;
	right: -1px;
	font-weight: 700;
	font-size: 11px;
}

/* -------------------- 목록:갤러리형 ---------------------------------------- */
.pack_item {
	height: 32.5vw;
	position: relative;
}

.pack_item .img_area {
	width: 100%;
	height: 35.2vw;
	max-height: 270px;
	position: relative;
}

.pack_item .img_area .img {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.pack_item .txt_area {
	margin-top: 10px;
}

.pack_item .txt_area p.tit {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.385em;
	text-align: center;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	word-wrap: break-word;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pack_gall {
	display: flex;
	flex-wrap: wrap;
	margin: -15px 0 0 -11px;
	padding-top: 15px;
}

.pack_gall li {
	margin: 15px 0 0 11px;
	width: calc(33.33% - 11px);
}

.pack_gall .none .img_area {
	background: #d2d2d2 url(../image/common/logo_none.png) no-repeat center;
	background-size: 59px 19px;
	border-radius: 8px;
	overflow: hidden;
}

/* ALLCA */
.pack_li .allca .pack_group .cotn .img_area .label_allca {
	width: 36px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 10px;
	position: absolute;
	left: -2px;
	top: -1px;
}

.allca .card_count .bar .tot_line span.end {
	color: #702dff;
}

.allca .card_count .bar .current_line {
	background: linear-gradient(180deg, #9635E8 0%, rgba(104, 38, 228, 0.985929) 99.93%, rgba(84, 31, 227, 0.98) 99.94%, #7D56E6 99.95%, #541FE3 99.96%, rgba(84, 31, 227, 4.16366e-12) 99.97%, rgba(84, 31, 227, 4.16366e-12) 99.98%, rgba(84, 31, 227, 2.09599e-08) 99.99%, rgba(84, 31, 227, 0) 100%, rgba(84, 31, 227, 0.98) 100%);
	width: 100%;
}

.allca .card_count .bar .current_line span {
	display: none;
}

.pack_gall .allca .pack_item .img_area .label_allca {
	width: 36px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
}


/* ============================== [ 지도 UI ] ========================================================================================== */

/* 내위치아이콘 */
.my_loc {
	display: none;
	width: 24px;
	height: 24px;
	background-color: #00C987;
	border: 3px solid #fff;
	box-shadow: 0px 4px 15px #15E370;
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
}

.my_loc.on {
	display: block;
}

/* 내위치 버튼 */
.local_btn {
	width: 48px;
	height: 48px;
	position: absolute;
	right: 22px;
	bottom: 12px;
	background-color: rgba(255, 255, 255, .5);
	border-radius: 50%;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
	transition: bottom .35s;
}

.local_btn.on {
	box-shadow: 0px 4px 10px #15E370;
}

.local_btn .i_loc {
	background-image: url(../image/common/icon_mylocal.svg);
	background-repeat: no-repeat;
	background-size: 25px 28px;
	background-position: center center;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.local_btn.on .i_loc {
	background-image: url(../image/common/icon_mylocal_on.svg);
}

/* 선택된위치 */
.pick {
	position: absolute;
}

.pick img {
	position: absolute;
	width: 29px;
	height: 38px;
	left: -13px;
	top: -38px;
}

.pick span {
	display: block;
	font-weight: 500;
	font-size: 14px;
	line-height: 40px;
	width: 90px;
	height: 40px;
	text-align: center;
	background-color: #00C987;
	color: #fff;
	border-radius: 20px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	top: -76px;
	z-index: 1;
}

/* ************************************************************************************************************************************************************
						《 팝업 UI 》
************************************************************************************************************************************************************ */
/* 전체팝업 */
.full_pop {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	display: none;
	width: 100%;
	background-color: #fff;
	height: 100%;
	box-sizing: border-box;
	max-width: 768px;
	margin: 0 auto;
	z-index: 999;
}

.full_pop.on {
	display: block;
}

.full_pop #content {
	height: 100%;
	width: 100%;
	max-width: 768px;
	max-height: calc(100vh - 54px);
	margin: 54px auto 0;
	padding-top: 0;
	box-sizing: border-box;
}

/* 241014 pse padding-bootm 80px 제거 overflow-y:auto; 제거 */

/* 바닥팝업 */
.btm_pop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: -100%;
	transition: bottom .3s;
	margin: 0 auto;
	max-width: 768px;
	width: 100%;
	box-sizing: border-box;
	background-color: #F9F9F9;
	border-radius: 32px 32px 0 0;
	z-index: 9990;
}

.btm_pop.on {
	bottom: 0;
}

.btm_pop .cotn {
	padding: 20px 15px calc(constant(safe-area-inset-bottom) + 20px);
	padding: 20px 15px calc(env(safe-area-inset-bottom) + 20px);
}

.btm_pop .btn_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.btm_pop .btn_wrap .edit {
	display: block;
	width: 84px;
	height: 54px;
}

.btm_pop .btn_wrap .edit~.edit {
	margin-left: 72px;
	position: relative;
	text-align: center;
}

.btm_pop .btn_wrap .edit~.edit::after {
	display: block;
	content: '';
	width: 1px;
	height: 34px;
	position: absolute;
	left: -36px;
	top: 10px;
	background-color: #e0e0e0;
	z-index: -1;
}

.btm_pop .btn_wrap .edit .i_edit {
	display: block;
	width: 14px;
	height: 14px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 8px auto 0;
}

.btm_pop .btn_wrap .edit .i_edit.i_del {
	background-image: url(../image/common/icon_del.svg);
}

.btm_pop .btn_wrap .edit .i_edit.i_cancel {
	background-image: url(../image/common/icon_cancel.svg);
}

.btm_pop .btn_wrap .edit .i_edit.i_report {
	background-image: url(../image/common/icon_report.svg);
}

.btm_pop .btn_wrap .edit span {
	line-height: 16px;
	font-weight: 500;
	margin-top: 8px;
	display: block;
	text-align: center;
	font-size: 14px;
}

/* -------------------- QR PLAY 팝업 ---------------------------------------- */
.full_pop.qr_pop #content {
	padding-bottom: 0;
}

.qr_pop .sub {
	height: 100%;
}

.qr_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
}

.qr_wrap .img_area .img {
	height: auto;
}

.qr_wrap .txt_area {
	margin-top: 30px;
}

.qr_wrap .txt_area .txt_01 {
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
}

.qr_wrap .txt_area .txt_02 {
	text-align: center;
	font-weight: 500;
	line-height: 18px;
	font-size: 14px;
}

.qr_wrap .btn_qr {
	margin-top: 30px;
	border-radius: 23px;
	width: 160px;
	height: 40px;
	font-weight: 500;
	font-size: 15px;
	color: #fff;
}

.qr_wrap.cmplt .btn_qr {
	background-color: #28aa7f;
}

.qr_wrap.fail .btn_qr {
	background-color: #EC6868;
}

.qr_wrap.cmplt .img_area .img {
	width: 101px;
}

.qr_wrap.fail .img_area .img {
	width: 80px;
}

/* 알럿팝업 */
.popup {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	max-width: 270px;
	width: 100%;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background-color: #fff;
	border-radius: 24px;
}

.popup .cotn {
	padding: 24px 18px;
	overflow: hidden;
}

.popup .cotn .img_area {
	margin-bottom: 18px;
}

.popup .cotn .img_area .img {
	display: block;
	height: auto;
	margin: 0 auto;
}

.popup .cotn .img_area.i_noti {
	width: 36px;
	height: 36px;
	margin: 0 auto 18px;
}

.popup .cotn .txt {
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	text-align: center;
}

.popup .cotn .btn_wrap {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.popup .cotn .btn_wrap .btn,
.popup .cotn .btn_wrap2 .btn {
	height: 40px;
	width: 160px;
	border-radius: 24px;
	text-align: center;
	box-sizing: border-box;
}

.popup .cotn .btn_wrap.db .btn {
	width: 100px;
}

.popup .cotn .btn_wrap .btn~.btn {
	margin-left: 9px;
}

.popup .cotn .btn_wrap .btn.main_btn {
	background-color: #702DFF;
	color: #fff;
	border: 2px solid #702dff;
}

.popup .cotn .btn_wrap .btn.sub_btn {
	background-color: #fff;
	color: #702DFF;
	border: 2px solid #702dff;
}

.popup .cotn .btn_wrap .btn span,
.popup .cotn .btn_wrap2 .btn span {
	line-height: 38px;
	font-weight: 500;
	font-size: 15px;
}

.popup .cotn .btn_wrap .btn.color_type3 {
	color: #28aa7f;
}

.popup .cotn .btn_wrap2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	gap: 8px;
}

.popup .cotn .btn_wrap2.db .btn {
	width: 100%;
}

.popup .pop_close {
	display: block;
	width: 36px;
	height: 36px;
	position: absolute;
	right: -15px;
	top: -15px;
}

.popup .spot_close {
	display: block;
	width: 42px;
	height: 42px;
	position: absolute;
	right: 0;
	top: -42px;
	background: url(../image/common/btn_close_pop.svg) no-repeat 0 0;
}

.popup.ar_select .spot_close {
	right: -10px;
}

.swal-custom-z-index {
	z-index: 9999 !important;
	/* 필요한 z-index 값으로 설정 */
}

.swal2-container {
	z-index: 9999 !important;
}

/* NFT발행 팝업 */
.nft_pop_01.popup .cotn .img_area .img {
	width: 66px;
}

.nft_pop_02.popup .cotn .img_area .img {
	width: 112px;
}

.nft_pop_03.popup .cotn .img_area .img {
	width: 36px;
}

/* GET IT 팝업 */
.get_pop {
	max-width: 280px;
	background-color: transparent;
	border-radius: 0;
	padding: 0 20px;
}

.get_pop .img {
	height: auto;
	width: 100%;
}

.get_pop .txt {
	padding-top: 15px;
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* 팩커버만들기 */
.cover_pop .cotn {
	padding: 24px;
}

.cover_pop .cotn .tit {
	font-size: 15px;
	font-weight: 500;
	line-height: 19px;
}

.cover_pop .cotn .co_txt {
	font-size: 12px;
	font-weight: 500;
	color: #666;
	margin-top: 8px;
	line-height: 18px;
}

.cover_pop ul {
	margin-top: 24px;
}

.cover_pop ul li~li {
	margin-top: 12px;
}

.cover_pop ul li a {
	display: flex;
	align-items: center;
	height: 32px;
}

.cover_pop ul li a i {
	display: block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

.cover_pop ul li a i.i_ab {
	background: url(../image/common/icon_album.svg);
}

.cover_pop ul li a i.i_pt {
	background: url(../image/common/icon_camera_4.svg);
}

.cover_pop ul li a i.i_file {
	background: url(../image/common/icon_fold.svg);
}

.cover_pop ul li span {
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
}

/* ============================== [ 공통탭 ] ========================================================================================== */
.tab_area {
	display: flex;
	gap: 1px;
	position: relative;
	z-index: 1;
}

.tab_area .tab {
	flex: 1;
	border-radius: 18px 18px 0 0;
	background-color: #fff;
	opacity: 0.5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #313743;
	font-size: 15px;
	font-weight: 700;
	height: 44px;
}

.tab_area .tab.on {
	opacity: 1;
	color: #5A5A5A;
}

.tab_area .tab span {
	line-height: 15px;
	font-size: 15px;
}

.tab_area .tab.talk span {
	padding-right: 20px;
	background: url(../image/common/icon_chat_dk_14.svg) no-repeat right center;
	background-size: 14px;
}

.tab_area .tab.pre {
	background-color: #AEAEAE;
	color: #fff;
}

.tab_area .tab.talk.on span {
	background-image: url(../image/common/icon_chat_bk.svg)
}

/* ============================== [ 데이터없음 ] ========================================================================================== */
.empty {
	height: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.empty .tit {
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	padding-top: 80px;
	background: url(../image/common/chip_21.png)no-repeat top center;
	color: #313743;
}

.empty .desc {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #5A5A5A;
	line-height: 14px;
}

.rv_none {
	height: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.rv_none .tit {
	font-weight: 500;
	font-size: 15px;
	line-height: 19px;
	padding-top: 80px;
	background: url(../image/common/chip_22.png)no-repeat top center;
	color: #313743;
}

.rv_none .desc {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #5A5A5A;
	line-height: 14px;
}

.empty.spot_empty .tit {
	background-image: url(../image/common/chip_14.png);
	background-size: 82px auto;
}

/* ============================== [ 내 주변 추천 팩 ] ========================================================================================== */
.rec_pack_slide {
	/* background-color: #313743; */
	/* padding: 32px 0 36px; */
	padding: 32px 0 18px;
}

.rec_pack_slide h2 {
	padding: 0 15px;
	margin-bottom: 12px;
	color: #313743;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
}

.rec_pack_slide h3 {
	padding: 0 15px;
	margin-bottom: 12px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
}

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

.rec_pack_slide .rec_slide {
	/* width: 270px; */
	width: 60vw;
	opacity: 0.5;
	position: relative;
}


.rec_pack_slide .rec_slide.swiper-slide-active {
	opacity: 1;
}

.rec_pack_slide .rec_slide .txt {
	margin-top: 12px;
	/* color: #fff; */
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}



/* ============================== [ chatbot ] ========================================================================================== */
.chatbot_pop #content {
	padding-bottom: 0;
}

.bot_inner {
	background-color: #D2EDE0;
	height: calc(100vh - 118px);
	overflow-y: auto;
}

.bot_inner .bot_tit {
	padding: 24px 18px;
}

.bot_inner .bot_tit .txt_wrap {
	position: relative;
}

.bot_inner .bot_tit .txt_wrap::after {
	display: block;
	content: '';
	width: 97px;
	height: 68px;
	background: url(../image/common/chip_19.png) no-repeat 0 0;
	position: absolute;
	right: 0;
	top: 0;
}

.bot_inner .bot_tit img {
	width: 179px;
	height: auto;
	display: block;
}

.bot_inner .bot_tit p {
	margin-top: 6px;
	font-weight: 500;
	line-height: 16px;
	color: #313743;
}

.btm_fixed.chat_fixed {
	background-color: #fff;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
	padding: 12px 12px calc(const(safe-area-inset-bottom) + 12px);
	max-width: 768px;
	margin: 0 auto;
	z-index: 2;
}

.bot_list_wrap {
	padding: 0 12px 24px;
}

.bot_list .group {
	display: flex;
}

.bot_list .group~.group {
	margin-top: 24px;
}

.bot_list .group .img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	box-sizing: border-box;
}

.bot_list .group .txt_area {
	padding-left: 8px;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: baseline;
	max-width: 254px;
}

.bot_list .group .txt_area .name {
	color: #0D8872;
	font-weight: 600;
	line-height: 16px;
}

.bot_list .group .txt_area .txt {
	margin-top: 6px;
	background-color: #fff;
	border-radius: 0 12px 12px 12px;
	padding: 6px 12px;
	font-size: 15px;
	line-height: 20px;
	color: #313743;
	box-sizing: border-box;
}

.bot_list .group.write {
	justify-content: flex-end;
}

.bot_list .group.write .txt_area {
	align-items: flex-end;
}

.bot_list .group.write .txt_area .txt {
	border-radius: 12px 0 12px 12px;
	background-color: #C590FB;
}

/* ============================== [ post ] ========================================================================================== */
.gallery_wrap .gall_slide .img {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 100%;
}

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

.thumb_wrap {
	margin-top: -25px;
	border-radius: 18px 0 0 0;
	background-color: #313743;
	padding: 20px 0 40px;
	position: relative;
	z-index: 1;
}

.thumb_wrap .swiper {
	padding: 0 20px;
}

.thumb_wrap .thumb_slide {
	width: 80px;
	cursor: pointer;
}

.thumb_wrap .thumb_slide .img {
	width: 80px;
	height: 54px;
	border-radius: 10px;
	border: 2px solid transparent;
	box-sizing: border-box;
	overflow: hidden;
}

.thumb_wrap .thumb_slide.swiper-slide-thumb-active .img {
	border-color: #fff;
}

.posting {
	margin-top: -25px;
	position: relative;
	z-index: 1;
}

.posting .post_tit {
	background-color: #E4E5E9;
	border-radius: 18px 18px 0 0;
	padding: 24px 24px 56px;
}

.posting .post_tit .title {
	font-size: 22px;
	font-weight: 600;
	line-height: 30px;
	color: #000;
}

.posting .post_tit p {
	margin-top: 6px;
	padding-left: 20px;
	font-size: 15px;
	line-height: 20px;
	color: #5A5A5A;
	background-position: left top 2px;
	background-repeat: no-repeat;
	background-size: 14px auto;
}

.posting .post_tit .loc {
	background-image: url(../image/common/icon_map_05.svg);
}

.posting .post_tit .chat {
	background-image: url(../image/common/icon_chat_gy_3.svg);
}

.posting .post_tit .user_info {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.posting .post_tit .user_info .name {
	font-weight: 600;
	color: #5A5A5A;
	flex: 1;
	margin-right: 6px;
	text-align: right;
}

.posting .post_tit .user_info .img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
	background: url(../image/temp/profile_none.png) no-repeat 0 0;
	background-size: 100% auto;
}

.posting .tab_area {
	margin-top: -44px;
}

.posting .post_content {
	padding: 24px 24px 60px;
}

.posting .post_content .edit .title {
	color: #313743;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
}

.posting .post_content .edit p {
	font-size: 15px;
	margin-top: 24px;
	line-height: 26px;
	color: #313743;
}

.posting .post_content .edit .date {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: #999;
	margin-top: 24px;
	text-align: right;
}

.posting .post_content .copy {
	margin-top: 24px;
}

.posting .post_content .copy p {
	color: #999;
	font-weight: 600;
	line-height: 16px;
	text-indent: -15px;
	padding-left: 15px;
	word-break: keep-all;
}

.posting .post_content .copy p::before {
	content: '※';
}

.posting .post_content .copy p strong {
	color: #313743;
}

.posting .post_content .copy p a {
	color: #017f55;
	text-decoration: underline;
	margin-left: 12px;
}

/* ============================== [ channel ] ========================================================================================== */
.channel_top {
	padding: 12px 15px 68px;
	background-color: #48CC8D;
}

.channel_top .leader_pack .pack_tit .state {
	gap: 0;
	width: 100%;
	justify-content: space-between;
}

.channel_top .leader_pack .pack_tit .state.duo {
	max-width: 220px;
}

.channel_user {
	/* height: 76px; */
	height: 100px;
	display: flex;
	/* align-items: flex-end; */
	/* justify-content: space-between; */
	position: relative;
}

.channel_user .packer {
	display: flex;
	flex-direction: column;
	padding: 6px 12px;
	border-radius: 18px;
	gap: 4px;
	transition: .2s;
	z-index: 2;
}

.channel_user .packer.left {
	align-items: flex-start;
}

.channel_user .packer.right {
	align-items: flex-end;
}

.channel_user .packer p {
	font-weight: 600;
	font-size: 11px;
	margin-left: 4px;
	color: #FFFFFF;
	transition: .2s;
}

/* .channel_user .packer.on {background-color: #1EB17B;} */
/* .channel_user .packer.on p {color: #fff;} */
.channel_user .user_info {
	position: absolute;
	/* left: 50%; */
	left: 4.5rem;
	/* top: 0; */
	top: 10%;
	transform: translateX(-50%);
}

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

/* .channel_cont {margin-top: -44px; flex-grow: 1;} 241014 pse flex-grow 추가 */
.channel_cont {
	display: flex;
	flex-direction: column;
	margin-top: -44px;
	flex-grow: 1;
	height: calc(100% - 255px);
}

.sub {
	display: flex;
	flex-direction: column;
	height: 100%
}

/* 241014 pse sub 관련 css 추가 */
#bottom_page {
	width: 100%;
	height: calc(100% - 44px);
	overflow-y: auto;
}

/*241014 pse channel_feed bottom_page 관련 css 추가*/

/* talk목록 */
.chat_list_wrap {
	padding: 24px 12px 0;
}

.chat_list_wrap.msg {
	padding-top: 36px;
	padding-bottom: 70px;
}

.chat_list_wrap .text_input {
	margin-bottom: 24px;
}

.chat_list_wrap .brief~.brief {
	margin-top: 24px;
}

.chat_list .group {
	display: flex;
	position: relative;
}

.chat_list .group~.group {
	margin-top: 24px;
}

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

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

.chat_list .group .txt_area {
	flex: 1;
	margin-left: 8px;
}

.chat_list .group .txt_area .chat_info {
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	padding-right: 30px;
}

.chat_list .group .txt_area .chat_info .user {
	color: #666;
}

.chat_list .group .txt_area .chat_info .date {
	color: #ababab;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 500;
}

.chat_list .group .txt_area .txt_des {
	margin-top: 6px;
}

.chat_list .group .txt_area .txt_des .txt {
	color: #282924;
	font-size: 15px;
	line-height: 20px;
}

.chat_list .group .txt_area .trans .txt {
	color: #AEAEAE;
	font-size: 12px;
	line-height: 18px;
	text-decoration: underline solid;
}



.chat_list .group .txt_area .txt_des .loc {
	color: #AEAEAE;
	line-height: 18px;
	font-size: 14px;
}

.chat_list .group .txt_area .txt_des .loc::before {
	content: ' / ';
}

.chat_list .group .txt_area .txt_des .num {
	color: #AEAEAE;
	font-size: 13px;
}

.btn_edit {
	position: absolute;
	right: 0;
	top: -3px;
}

.btn_edit a {
	width: 22px;
	height: 18px;
	display: block;
	background: url(../image/common/icon_edit.svg) no-repeat 0 0;
	background-size: 100% 100%;
}

.chat_more {
	margin-top: 20px;
	padding-top: 34px;
	background: url(../image/common/chip_07.png) no-repeat top center;
	background-size: 44px 32px;
}

.chat_more .btn_more {
	display: block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 12px;
}

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

.gre .user {
	color: #6BFFCF !important;
}

.pur .user {
	color: #702DFF !important;
}

/* FEED목록 */
.feed_li .chat_list .group .txt_area {
	margin-left: 12px;
}

.feed_li .chat_list .group .txt_area .chat_info .date {
	margin-left: 0;
}

.feed_li .chat_list .group .txt_area .chat_info {
	padding-right: 0;
}

.feed_li .chat_list .group .txt_area .txt_des {
	display: flex;
	justify-content: space-between;
}

.feed_li .chat_list .group .txt_area .txt_des div {
	flex: 1;
}

.feed_li .chat_list .group .txt_area .txt_des .txt {
	color: #3b3c39;
	font-size: 15px;
	line-height: 20px;
}

.feed_li .chat_list .group .txt_area .txt_des .txt a {
	text-decoration: underline;
	text-underline-position: under;
}

.feed_li .chat_list .group .txt_area .trans .txt {
	color: #AEAEAE;
	font-size: 12px;
	line-height: 18px;
	text-decoration: underline solid;
}


.feed_li .chat_list .group .txt_area .txt_des .feed_img {
	margin-left: 10px;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
}

.feed_li .chat_list .group .txt_area .txt_des .feed_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feed_li .chat_list .group .txt_area .emoji {
	margin-top: 8px;
	height: 56px;
}

.feed_li .chat_list .group .txt_area .emoji img {
	width: auto;
	height: 100%;
}

/* ============================== [ Near ] ========================================================================================== */
.near #contents {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 54px);
	padding-bottom: calc(env(safe-area-inset-bottom) + 54px);
}

.near_wrap {
	height: calc(100vh - (108px - constant(safe-area-inset-bottom)));
	height: calc(100vh - (108px - env(safe-area-inset-bottom)));
	position: relative;
	overflow: hidden;
}

.near_wrap .map_area {
	height: 100%;
	position: relative;
}

.map_top {
	width: 100%;
	z-index: 1;
}

.map_top .search_area {
	padding: 0 8px;
}

.map_top .search_area .inner {
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	background-color: #fff;
	border-radius: 6px;
	display: flex;
	overflow: hidden;
}

.map_top .search_area .menu {
	width: 40px;
	height: 40px;
	background: url(../image/common/icon_menu.png) no-repeat 0 0;
}

.map_top .search_area input {
	height: 40px;
	flex: 1;
	font-size: 16px;
	font-weight: 500;
	min-width: 0;
}

.map_top .search_area .mic {
	width: 40px;
	height: 40px;
	background: url(../image/common/icon_mic.png) no-repeat 0 0;
}

.catg {
	margin-top: 8px;
}

.catg .swiper {
	padding: 0 8px 0 8px;
}

.catg_slide {
	width: auto;
}

.catg_slide a {
	display: inline-block;
	border: 1px solid #E4E5E9;
	border-radius: 30px;
	color: #999;
	padding: 0 12px;
	font-weight: 600;
	line-height: 28px;
	background-color: #fff;
	transition: .2s;
}

.catg_slide a.on {
	background-color: #B46AFF;
	border-color: #B46AFF;
	color: #fff;
}

.catg_slide a.all {
	font-weight: 700;
	font-size: 15px;
}

.catg_slide a.all.on {
	background-color: #313743;
	border-color: #313743;
	color: #fff;
}

.catg_slide a.pack {
	font-size: 14px;
}

.catg_slide a.pack.on {
	background-color: #1EB17B;
	border-color: #1EB17B;
}

.catg_slide a.pack span {
	padding-left: 20px;
}

.catg_slide a.pack.ic_spot span {
	background: url(../image/common/icon_flag.svg) no-repeat left center;
	background-size: 18px auto;
}

.catg_slide a.pack.ic_pack span {
	background: url(../image/common/icon_pack_post.svg) no-repeat left center;
	background-size: 18px auto;
}

.map_area .count {
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: #000;
	position: absolute;
}

.map_area .count.lg {
	width: 70px;
	height: 70px;
}

.map_area .count.pack {
	background-color: rgba(55, 237, 135, .75);
}

.map_area .count.post {
	background-color: rgba(212, 170, 255, .75);
}

.map_area .pin {
	position: absolute;
}

.map_area .map_bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
}

.map_area .location {
	background: url(../image/common/btn_loc.svg) no-repeat 0 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	position: absolute;
	right: 12px;
	top: -48px;
	transition: .2s;
}

.map_area .location.on {
	background-image: url(../image/common/btn_loc_on.svg);
}

.map_area .my_location {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	box-shadow: 0 4px 15px #15E370;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 4px solid #fff;
	background-color: #37ED87;
	box-sizing: border-box;
	z-index: 1;
	transition: .2s;
}

.map_area .my_location.on {
	opacity: 1;
	visibility: visible;
}

.map_brief {
	padding: 18px 12px;
	box-sizing: border-box;
	background-color: #fff;
	width: 100%;
	border-top: 1px solid #AEAEAE;
	position: relative;
}

/* ============================== [ 랭킹 ] ========================================================================================== */
.ranking_top .pack_maker {
	/* padding-bottom: 68px; */
}

/* .ranking_cont {margin-top: -44px;} */
.ranking_cont {
	/* margin-top: -44px; */
	height: calc(100% - 267px);
	display: flex;
	flex-direction: column;
}

.ranking_inner {
	padding: 12px;
	height: 90%;
}

.my_rank {
	padding: 12px 0;
	background-color: #F5F5F5;
	border-radius: 12px;
	display: flex;
	align-items: center;
}

.my_rank .my_txt {
	width: 90px;
	text-align: center;
	display: block;
	font-weight: 600;
	color: #5A5A5A;
}

.my_rank .rank_crt {
	width: 146px;
	display: flex;
	align-items: center;
}

.my_rank .rank_crt .crt {
	margin-left: 4px;
	color: #313743;
	font-weight: 600;
}

.my_rank .rank_crt .crt strong {
	font-size: 18px;
	font-weight: 700;
}

.my_rank .state {
	display: flex;
	margin-left: auto;
}

/* .ranking {margin-top: 12px; overflow-y: auto; height: 50dvh; padding-bottom: env(safe-area-inset-bottom, 0px);} */
.ranking {
	margin-top: 12px;
	overflow-y: auto;
	height: calc(100% - 53px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ranking li~li {
	margin-top: 12px;
}

.ranking li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ranking li .num {
	width: 24px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-weight: 600;
	position: relative;
}

.ranking li:first-child .num {
	background: url(../image/common/medal_1.png) no-repeat center;
	text-indent: -9999px;
}

.ranking li .user_info {
	display: flex;
	align-items: center;
	flex: 1;
}

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

.ranking li .user_info .name {
	margin-left: 8px;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	width: 134px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.ranking li .state {
	display: flex;
}


/* ============================== [ 팩 메인 ] ========================================================================================== */
.packMain #contents {
	padding-top: 0;
}

.packMain #header.header_pack {
	/* background-color: transparent; */
	background-color: rgba(0, 0, 0, 0.2);
	border-bottom: none;
	box-shadow: none;
	transition: background-color .2s;
}

.packMain #header .header_wrap .tit_ctrl a.back {
	background-image: url(../image/common/icon_back_wh.svg);
}

.packMain #header.pack_head_on {
	background-color: rgba(204, 204, 204, .9);
}

.packMain #header.pack_head_on .header_wrap .btn_area .btn_head.btn_user a .name {
	color: #313743;
}

.packMain #header.pack_head_on .header_wrap .tit_ctrl a.back {
	background-image: url(../image/common/icon_back.svg);
}

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

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

.packMain #header .header_wrap .btn_openApp {
	background: url(../image/common/icon_box_arrow_up_right_02.svg) no-repeat calc(100% - 9px) center;
	background-size: 12px auto;
	line-height: 28px;
	display: inline-block;
	border: 1px solid #AEAEAE;
	border-radius: 40px;
}

.packMain #header .header_wrap .btn_openApp p {
	padding: 6px 28px 6px 12px;
	font-size: 14px
}

.pack_main_visual {
	position: relative;
}

.pack_main_visual .bg_visual {
	height: 615px;
	overflow: hidden;
}

.pack_main_visual .bg_visual img {
	filter: blur(30px);
}

.pack_main_visual .bg_visual::after {
	display: block;
	content: '';
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: .4;
}

.fav_wrap {
	width: 312px;
	position: absolute;
	left: 50%;
	top: calc(constant(safe-area-inset-top) + 67px);
	top: calc(env(safe-area-inset-top) + 67px);
	transform: translateX(-50%);
}

.fav_wrap h3 {
	margin-bottom: 32px;
	font-weight: 600;
	font-size: 22px;
	color: #fff;
	line-height: 30px;
	letter-spacing: -1px;
}

.fav_wrap .fav_pack {
	position: relative;
}

.fav_wrap .fav_pack::after {
	display: block;
	content: '';

	width: 344px;
	/* 가장 큰 이미지 기준 */
	height: 382px;
	/* background: url(../image/common/bg_pack_card.png) no-repeat 0 0; */
	background:
		url(../image/common/bg_pack_card_v2_1.png) no-repeat center center,
		url(../image/common/bg_pack_card_v2_2.png) no-repeat center center;
	/* width: 358px;
	height: 421px; */
	background-size: 328px 382px, 344px 324px;
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.fav_wrap .btn_area {
	display: flex;
	margin-left: auto;
	float: right;
}

.fav_wrap .btn_area .btn_head.btn_user {
	width: auto;
	height: 32px;
	display: flex;
	align-items: center;
	/* margin-bottom: 29px */
}

.fav_wrap .btn_area .btn_head p {
	flex: 1;
	font-weight: 600;
	color: #fff;
	margin-left: 6px;
	transition: .2s
}

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

.pack_cont {
	margin-top: -44px;
}

.fav_pack .rec_pack .spot_num::before {
	display: none;
}

.overview_wrap {
	padding: 24px 12px;
}

.overview_wrap .state {
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.overview_wrap .state .cont {
	padding-left: 18px;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 14px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	display: flex;
	align-items: center;
}

.overview_wrap .state .cont span {
	font-size: 13px;
	margin-left: 4px;
}

.overview_wrap .state .cont.mebr {
	background-image: url(../image/common/icon_mebr.svg);
}

.overview_wrap .state .cont.allca {
	background-image: url(../image/common/icon_allca.svg);
}

.overview_wrap .state .cont.chat {
	background-image: url(../image/common/icon_chat_bk_2.svg);
}

.overview_desc {
	/**margin-top: 36px;**/
	padding: 0 12px;
	font-size: 15px;
	line-height: 26px;
}

.spot_info {
	/**margin-top: 36px;**/
	margin-top: 24px;
	padding: 0 12px;
}

.spot_info .tit_area {
	display: flex;
	align-items: center;
	/**justify-content: space-between;**/
}

.spot_info .tit_area h4 {
	font-weight: 700;
	font-size: 15px;
}

.spot_info .tit_area p {
	line-height: 16px;
	font-size: 11px;
	font-weight: 500;
	padding-left: 18px;
	background: url(../image/common/icon_map_02.svg) no-repeat left top;
	background-size: 14px;
	display: flex;
	align-items: center;
}

.spot_info .tit_area p strong {
	margin: 0 4px;
	font-size: 13px;
	font-weight: 500;
}

.spot_info ul {
	margin-top: 24px;
}

.spot_info ul li {
	position: relative;
}

.spot_info ul li~li {
	margin-top: 24px;
}

.overview_wrap .date {
	margin-top: 48px;
	text-align: right;
	color: #999;
	font-size: 12px;
	font-weight: 500;
}

/* 제작일, 신고하기 */
.date_report_wrap {
	display: flex;
	margin-top: 48px;
	justify-content: space-between;
	align-items: center;
}

.report_btn {
	display: flex;
	border-radius: 40px;
	padding: 4px 12px;
	border: 1px solid #AEAEAE;
	align-items: center;
	gap: 4px;
}

.btn_start {
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 12px 12px calc(constant(safe-area-inset-bottom) + 12px);
	padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
	box-sizing: border-box;
}

.btn_start .cont {
	height: 54px;
	background-color: #313743;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	border-radius: 100px;
}

.btn_start button {
	width: 100%;
	height: 100%;
	display: block;
}

.btn_start button span {
	font-weight: 600;
	font-size: 18px;
	color: #fff;
	padding-left: 32px;
	background: url(../image/common/icon_start.svg) no-repeat left center;
	background-size: 28px auto;
	line-height: 28px;
	display: inline-block;
}

.btn_start button strong {
	color: #37ED87;
	font-weight: 600;
	font-size: 18px;
}

.btn_start button span.btn_openApp {
	font-weight: 600;
	font-size: 18px;
	color: #fff;
	padding-left: 32px;
	background: url(../image/common/icon_box_arrow_up_right.svg) no-repeat left center;
	background-size: 22px auto;
	line-height: 28px;
	display: inline-block;
}

.btn_start ul {
	display: none;
	padding: 0 3px;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.btn_start ul li a {
	display: block;
	width: 48px;
	height: 48px;
	background-position: 0 0;
	background-repeat: no-repeat;
}

.btn_start ul li a.map {
	background-image: url(../image/common/btn_spotmap.svg);
}

.btn_start ul li a.ar {
	background-image: url(../image/common/btn_getplay.svg);
}

.btn_start ul li a.spot {
	background-image: url(../image/common/btn_binder.svg);
}

.btn_start.on button {
	display: none;
}

.btn_start.on ul {
	display: flex;
}

/* ============================== [ 메이크 ] ========================================================================================== */
.make_top {
	background-color: #48CC8D;
	padding: 24px 12px 68px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.make_top .txt_img {
	height: 60px;
}

.make_top .state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 12px;
}

.make_top .state p {
	font-weight: 500;
	font-size: 11px;
	padding-left: 18px;
	background-size: 14px;
	background-position: left center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	line-height: 20px;
}

.make_top .state strong {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	margin-left: 4px;
}

.make_top .state p.open_pack {
	background-image: url(../image/common/icon_open_pack.svg);
}

.make_top .state p.make_pack {
	background-image: url(../image/common/icon_make_pack.svg);
}

.make_cont {
	margin-top: -44px;
}

.make_cont .brief_li {
	padding: 24px 12px 64px;
}

.make_cont .brief_li .brief~.brief {
	margin-top: 24px;
}

/* ============================== [ making_spot ] ========================================================================================== */
.make_spot #content {
	padding-bottom: calc(constant(safe-area-inset-bottom));
	padding-bottom: calc(env(safe-area-inset-bottom));
}

.make_spot_pop #content {
	max-height: calc(100vh - 115px);
}

.make_spot_wrap {
	height: calc(100vh - (54px - constant(safe-area-inset-bottom)));
	height: calc(100vh - (54px - env(safe-area-inset-bottom)));
	position: relative;
	overflow: hidden;
}

.make_spot_wrap .map_area {
	height: calc(100% - 1px);
	position: relative;
}

.making_info_pop {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(197, 144, 251, .7);
	border: 2px solid #C590FB;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	width: 257px;
	box-sizing: border-box;
	border-radius: 24px;
	z-index: 2;
}

.making_info_pop p {
	text-align: center;
	font-size: 15px;
	color: #000;
	line-height: 20px;
	margin-bottom: 12px;
}

.making_info_pop p span {
	margin: 0 2px;
	position: relative;
	width: 14px;
	height: 17.5px;
	display: inline-block;
}

.making_info_pop p span img {
	position: absolute;
	left: 0;
	top: 3px
}

.brief_srch {
	background-color: #fff;
	padding: 24px 12px 12px;
	width: 100%;
	height: calc(100% - 90px);
	position: absolute;
	left: 0;
	top: 90px;
	z-index: 3;
	box-sizing: border-box;
	overflow-y: auto;
}

.brief_srch .brief~.brief {
	margin-top: 24px;
}

.make_spot_wrap.spot_detail .map_top {
	display: none;
}

.make_spot_wrap.spot_detail .location {
	display: none;
}

.make_spot_wrap.spot_detail .map_bottom {
	display: block;
	height: calc(100% - 60px);
	background-color: #fff;
	z-index: 2;
}

.make_spot_wrap.spot_detail .map_area {
	overflow-y: auto;
}

.make_spot_wrap.spot_detail .btn_fixed {
	z-index: 10;
}

.dt_wrap {
	padding-bottom: 80px;
	position: relative;
}

.dt_brief {
	background-color: #313743;
	padding: 12px 0;
}

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

.dt_brief .swiper .brief_slide {
	width: 240px;
}

.dt_brief .swiper .img {
	border-radius: 10px;
	overflow: hidden;
	height: 162px;
}

.dt_wrap .dt_txt {
	padding: 24px;
	font-size: 15px;
	line-height: 26px;
}

.spot_detail .close_dt {
	position: absolute;
	left: 12px;
	top: 10px;
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	background: #fff url(../image/common/icon_down_arr.svg) no-repeat 0 0;
}

.spot_detail .btn_select {
	font-weight: 700;
	font-size: 15px;
}

.spot_detail .btn_select span {
	color: #fff;
	padding-right: 24px;
	background: url(../image/common/icon_select_chk.svg) no-repeat right center;
}


/* ============================== [ myplay ] ========================================================================================== */
.myplay_top {
	background-color: #48CC8D;
	padding: 24px 12px 78px;
}

.myplay_top .state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 8px;
}

.myplay_top .state p {
	padding-left: 18px;
	line-height: 14px;
	background-position: left top 0px;
	background-repeat: no-repeat;
	background-size: 14px;
	font-size: 11px;
	font-weight: 500;
	color: #313743;
}

.myplay_top .state p strong {
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	padding-left: 4px;
}

.myplay_top .state .pack {
	background-image: url(../image/common/icon_open_pack.svg);
}

.myplay_top .state .spot {
	background-image: url(../image/common/icon_flag.svg);
}

.myplay_top .state .store {
	background-image: url(../image/common/icon_store.svg);
}

.myplay_top .state .allca {
	background-image: url(../image/common/icon_allca.svg);
}

.myplay_cont {
	border-radius: 18px 18px 0 0;
	margin-top: -54px;
	background-color: #fff;
}

.myplay_cont .catg {
	margin-top: 0;
	padding: 12px 0;
}

.myplay_cont .catg_slide a.all.on {
	background-color: #313743;
	border-color: #313743;
	color: #fff;
}

.myplay_cont .catg_slide a.on {
	background-color: #1EB17B;
	border-color: #1EB17B;
}

.myplay_li {
	padding: 0 12px 64px;
}

.myplay_li li~li {
	margin-top: 24px;
}

.myplay_li .brief .info_area {
	position: relative;
}

.myplay_li .card_count {
	margin-top: 12px;
	position: relative;
	border-top: none;
	border-radius: 12px;
}

.myplay_li .card_count .bar .tot_line {
	position: relative;
}

.myplay_li .allca .card_count .bar .tot_line::after {
	width: 62px;
	height: 20px;
	display: block;
	content: '';
	background: url(../image/common/crt_allca.png) no-repeat 0 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* ============================== [ AR ] ========================================================================================== */
.ar_wrap #header {
	background-color: #313743;
}

.ar_wrap .header_wrap h1 {
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	width: 60%;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	white-space: normal;
	text-align: center;
}

.ar_wrap #contents {
	padding-bottom: 0;
}

.ar_map {
	height: calc(100vh - (54px - constant(safe-area-inset-bottom)));
	height: calc(100vh - (54px - env(safe-area-inset-bottom)));
	position: relative;
	overflow: hidden;
}

.spot_card.popup {
	width: 340px;
	max-width: 340px;
	height: 584px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	background: url(../image/common/bg_card.png) no-repeat 0 0;
}

.spot_card.popup .inner {
	padding: 20px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.spot_card .card_content {
	width: 100%;
	height: 479px;
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid #313743;
}

.spot_card .cover {
	width: 100%;
	height: 479px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

.spot_card .cover.on {
	opacity: 1;
	visibility: visible;
}

.spot_card .card_content .img {
	background-color: #fff;
	border-radius: 18px 18px 0 0;
	height: 380px;
	position: relative;
	overflow: hidden;
	display: block;
}

.spot_card .card_content .img.none_img img {
	filter: blur(20px);
}

.spot_card .card_content .img .none {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 1;
}

.spot_card .card_content .img .none strong {
	padding-top: 102px;
	background: url(../image/common/icon_que.svg) no-repeat top center;
	font-size: 15px;
	font-weight: 700;
	color: #37ed87;
	text-align: center;
}

.spot_card .card_content .img .none p {
	margin-top: 10px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	max-width: 152px;
	line-height: 14px;
}

.spot_card .loc_info {
	background-color: #313743;
	padding: 15px 12px;
}

.spot_card .loc_info .txt_wrap {
	padding-left: 36px;
	background: url(../image/common/icon_spot_pack_02.svg) no-repeat left center;
	background-size: 24px auto;
}

.spot_card .loc_info .txt_wrap h3 {
	line-height: 20px;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.spot_card .loc_info .txt_wrap p {
	line-height: 14px;
	font-size: 12px;
	font-weight: 500;
	margin-top: 4px;
	color: #AEAEAE;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.spot_card .desc {
	display: block;
	box-sizing: border-box;
	height: 380px;
	background-color: #fff;
	padding: 12px;
	font-size: 15px;
	line-height: 26px;
	color: #000;
	overflow-y: auto;
}

.spot_card .more_content {
	height: 31px;
	background-color: #48CC8D;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spot_card .more_content.on img {
	transform: rotate(180deg);
}

.spot_card .card_link {
	margin-top: 12px;
	border-radius: 12px;
	padding: 6px 12px 6px 48px;
	font-size: 16px;
	font-weight: 500;
	color: #3b3c39;
	line-height: 20px;
	background: rgba(255, 255, 255, .8) url(../image/common/icon_pack_post_02.svg) no-repeat left 12px center;
	background-size: 24px;
	display: block;
	letter-spacing: -0.5px;
}

.spot_card .card_link span {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ar_select.popup {
	padding: 12px 12px 24px;
	width: 320px;
	max-width: 320px;
	height: 488px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.ar_select .select_tit {
	border-bottom: 1px solid #E4E5E9;
	font-weight: 700;
	font-size: 20px;
	line-height: 48px;
	text-align: center;
}

.ar_select .cont {
	height: calc(100% - 102px);
	overflow-y: auto;
}

.ar_select .cont ul {
	padding-top: 12px;
}

.ar_select .cont li~li {
	margin-top: 6px;
}

.ar_select .cont li label {
	position: relative;
}

.ar_select .cont li label input[type="radio"] {
	position: absolute;
	height: 0;
	width: 0;
	border: none;
	margin: 0;
	padding: 0;
}

.ar_select .cont li label div {
	transition: background-color .3s;
	display: flex;
	align-items: center;
	background-color: #F5F5F5;
	border-radius: 12px;
	padding: 12px;
	cursor: pointer;
}

.ar_select .cont li label p {
	flex: 1;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ar_select .cont li label i {
	transition: .3s;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff url(../image/common/icon_check.svg) no-repeat center;
	border: 1px solid #E4E5E9;
}

.ar_select .cont li label input:checked~div {
	background-color: #48CC8D;
}

.ar_select .cont li label input:checked~div i {
	border-color: #48CC8D;
	background-image: url(../image/common/icon_checked.svg);
}

.ar_select .btn_fixed {
	padding-top: 12px;
}

.ar_select .btn_fixed .btn {
	height: 40px;
	border-radius: 40px;
	background-color: #1EB17B;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	width: 100%;
}

.binder_wrap {
	padding: 24px 12px 0;
	height: 100%
}

.binder_wrap .item~.item {
	margin-top: 36px;
}

.binder_wrap .binder_tit {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

.binder_wrap .card_count {
	margin-top: 12px;
	border-top: none;
	border-radius: 12px;
	position: relative;
}

.binder_wrap .card_count .info_wrap .tot_card {
	background: none;
	padding-left: 0;
	color: #999999;
	line-height: 18px;
}

.binder_wrap .card_count .info_wrap .tot_card strong {
	font-size: 15px;
	color: #313743;
	margin-top: -2px;
}

.binder_wrap .state {
	margin-top: 12px;
}

.binder_wrap .tot_card {
	line-height: 16px !important;
	font-size: 11px;
	font-weight: 500;
	padding-left: 18px;
	display: inline-block;
	background: url(../image/common/icon_flag.svg) no-repeat left top 0;
	background-size: 14px;
}

.binder_wrap .tot_card strong {
	vertical-align: middle;
	font-size: 13px;
	color: #1EB17B;
	margin-left: 4px;
}

.binder_li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	overflow-y: auto;
}

.binder_li li {
	width: calc(33.33% - 6px);
	max-height: 153px;
	overflow: hidden;
	border: 1px solid #E4E5E9;
	border-radius: 12px;
	position: relative;
	background: #fff url(../image/common/logo_none_02.png) no-repeat center;
}

.binder_li li .img {
	position: relative;
	width: 100%;
	height: auto;
}

/* 241013 pse padding 제거 */
.binder_li li .img img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* ============================== [ 스피너 기능 ] ========================================================================================== */
.spinner-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9998;
}

.spinner {
	width: 50px;
	height: 50px;
	border: 6px solid #f3f3f3;
	border-top: 6px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}