@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; border-bottom:1px solid #e0e0e0; 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 {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;}
.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; background-image:url(../image/common/icon_my.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);}

#header.head_type {background-color: transparent; box-shadow: none; border:none}
.post_detail #contents {padding-top: 0;}

/* -------------------- 탭바 ---------------------------------------- */
.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);}

/* -------------------- 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;}
.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;}
.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;}
.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 {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{background-color:#EC6868;color:#fff; border-color:#EC6868;}
.btn_wrap .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;}


/* ============================== [ 타이틀 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:8px; background:#fff url(../image/common/icon_arr_down_bk.svg) no-repeat right center; background-size:36px; font-size:15px; font-weight:500; width:100%; box-sizing:border-box; height:40px; 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_chat {min-width:50px; box-sizing:border-box; display:block; font-size:13px; color:#5A5A5A; padding-left:18px; background: url(../image/common/icon_talk.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;}

/* ============================== [ 요약 ] ========================================================================================== */
.brief {display:flex; align-items:center; position: relative;}
.brief .img {width:100px; height:100px; 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;}
.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:20px; background: url(../image/common/icon_spot_pack.svg) no-repeat center; background-size: 16px; 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: 24px; border:2px 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%; height:293px;}
.rec_pack .img_area .user_info {position:absolute; right:12px; top:12px; display:flex; align-items:center; z-index:2;}
.rec_pack .img_area .user_info span {font-weight:600; font-size:13px; 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;}
.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.fav {width:290px; margin: 0 auto; }
.rec_pack.fav .img_area .img  {height:315px;}
.rec_pack.fav .pack_current {padding: 0 12px;}

/* ============================== [ 베스트 팩메이커 ] ========================================================================================== */
.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:-6px;}
.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: 14px; background-position: left top 0px; background-repeat: no-repeat; background-size: 14px; font-size:11px; 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 > 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:100%; 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); overflow-y:auto; margin:54px auto 0; padding-top:0; box-sizing:border-box; padding-bottom:80px;}

/* 바닥팝업 */
.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 {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 {line-height:38px; font-weight:500; font-size:15px;}
.popup .cotn .btn_wrap .btn.color_type3 {color:#28aa7f;}
.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;}

/* 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;}
.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; 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;}
.chat_fixed.btm_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;}

.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; max-width: 306px; width:100%; justify-content: space-between;}
.channel_top .leader_pack .pack_tit .state.duo {max-width: 220px;}
.channel_user {height: 76px; display: flex; align-items: flex-end; justify-content: space-between; position: relative;}
.channel_user .packer {display: flex; align-items: center; padding: 6px 12px; border-radius: 18px; transition: .2s;}
.channel_user .packer p {font-weight: 600; margin-left: 4px; color: #313743; transition: .2s;}
.channel_user .packer.on {background-color: #1EB17B;}
.channel_user .packer.on p {color: #fff;}
.channel_user .user_info {position: absolute; left:50%; top:0; 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;}

/* talk목록 */
.chat_list_wrap {padding:24px 12px 0;}
.chat_list_wrap.msg {padding-top: 36px;}
.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 .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 .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 {position: absolute; left: 0; top: 12px; width: 100%;}
.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_inner {padding: 12px 12px 0;}
.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;}
.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 {background-color: transparent; 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);}
.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: ''; background: url(../image/common/bg_pack_card.png) no-repeat 0 0; width: 358px; height: 421px; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); z-index: -1;}

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

.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; 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;}

.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 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;}
.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; overflow: hidden;}
.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: 12px;}
.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;}
.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;}
.binder_li li {width:calc(33.33% - 6px); 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; padding-top:100%;}
.binder_li li .img img {position:absolute; left:0; top:0; width:100%; height:100%;}