@charset "utf-8";

/* ************************************************************************************************************************************************************
						《 #4_pack_map CSS 》
************************************************************************************************************************************************************ */
/* 2023-10-11 추가 */
.btn_wrap.btn_fixed{position:fixed;bottom:0;left:50%;width:100%;max-width:768px; background-color:#fff; transform:translateX(-50%); padding:15px 15px calc(constant(safe-area-inset-bottom) + 15px);padding:15px 15px calc(env(safe-area-inset-bottom) + 15px);box-sizing:border-box;}
.btn_fixed .btn{padding:10px 0; height:40px; box-sizing:border-box;}
.btn_fixed .btn span {font-size:15px; line-height:1.3;}

.pack_info #header .header_wrap h1 {bottom:0; transform:translate(-50%);}
.pack_info #header .header_wrap h1 .img {width:59px;}
.pack_info #contents {padding-bottom:calc(env(safe-area-inset-bottom) + 54px); padding-bottom:calc(const(safe-area-inset-bottom) + 54px);}

/* talkList */
.talk_list {padding:0 15px;}
.talk_list .group {padding:2px 0; display:flex; align-items:center;}
.talk_list .group .user {font-size:11px; font-weight:500; line-height:13px; color:#ababab; margin-right:8px;}
.talk_list .group .txt {color:#fff; font-weight:500; font-size:14px; line-height:18px; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; flex:1;}

/* pack 타이틀 */
.pack_title {background:rgba(242, 242, 242, 0.7); padding:10px 15px; box-sizing:border-box; text-align:center; width:100%;}
.pack_title h2 {font-weight:500; font-size:14px; line-height:20px; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical;}

/* ============================== [ 팩>메인 ] ========================================================================================== */

/* 팩타이틀 영역 */
.pack_box {margin-top:24px; padding:0 20px;}
.pack_box .card {max-width:290px; width:100%; margin:0 auto; box-shadow:0px 4px 20px rgba(0, 0, 0, 0.15); border-radius:30px; overflow:visible; background-color:#fff; position:relative;}
.pack_box .card::after {display:block; content:''; background-repeat:no-repeat; background-position:0 0; background-image:url(../image/common/chip_06.png); background-size:64px auto; position:absolute; right:17px; bottom:-17px; width:64px; height:40px;}
.card .box_tit {padding:17px 15px 8px;}
.card.pack_group .box_tit .nickname {text-align:center;}
.card.pack_group .box_tit .tit {text-align:center; font-size:18px; display:block;}
.card.pack_group .box_info {display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid #e0e0e0;}
.card.pack_group .box_info .addr {margin-top:0; background-size:18px 18px; height:18px;}
.card.pack_group .box_info .addr .txt {font-weight:400; color:#3b3c39; margin-left:8px; line-height:18px;}
.card.pack_group .box_info .addr .txt .cnt {font-size:14px; vertical-align:middle; margin:0 3px;}
.card.pack_group .box_info .pack_info {margin-top:0; padding-top:0; border:none;}
.card.pack_group .box_info .pack_info .count {width:auto; background-size:13px 15px; padding-left:22px; margin-right:0; height:18px;}
.card.pack_group .box_info .pack_info .count p {color:#3B3C39; font-weight:400; display:flex; align-items:center;}
.card.pack_group .box_info .pack_info .count p .current {font-size:14px; font-weight:500; margin-right:4px; vertical-align:middle; line-height:18px;}
.card.pack_group .box_info .pack_info .count p .tot {margin-left:2px; color:#ababab;}
.card.pack_group .box_info .pack_info .count p .tot::before {content:'/ ';}

.card.pack_group .box_tit.user_i_nick .tit {margin-top:0;}
.card.pack_group .box_tit.user_i_nick .user_i {margin-top:8px;}
.card.pack_group .box_tit.user_i_nick .user_i a {display:flex; align-items:center; justify-content:center;}
.card.pack_group .box_tit.user_i_nick .user_i figure {width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-sizing:border-box; }
.card.pack_group .box_tit.user_i_nick .user_i span {color:#666; font-size:11px; font-weight:500; margin-left:4px;}

/* NFT버튼 */
.btn_nft {display:none; position:absolute; right:-11px; bottom:-30px; width:110px; height:82px; z-index:1;}
.btn_nft a {display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; background-size:100% 100%;}
.btn_nft a.rcv {background-image:url(../image/common/chip_08.png);}
.btn_nft a.cmplt {background-image:url(../image/common/chip_09.png);}

/* allca인경우 */
.pack_box .allca.card::after {display:none;}
.card.allca .box_info .addr .txt {padding-right:40px; background:url(../image/common/allca.svg) no-repeat right center; background-size:32px 16px; display:flex; align-items:center;}
.card.allca .btn_nft {display:block;}

/* 카드영역 */
.card .flip {width:100%; height:357px; perspective:1100px; cursor:pointer;}
.card .flip.on .box_cotn {transform:rotateY(180deg);}
.card .box_cotn {position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:.3s;}
.card .box_cotn .img_wrap {padding:0 3px 3px 3px; box-sizing:border-box; width:100%; height:100%; position:absolute; backface-visibility:hidden;}
.card .box_cotn .img_wrap::after {display:block; content:''; width:22px; height:18px; background:url(../image/common/icon_text.svg) no-repeat 0 0; background-size:cover; position:absolute; top:15px; right:15px;}
.card .box_cotn .img_wrap .img {width:100%; height:100%; overflow:hidden; border-radius:0 0 30px 30px;}
.card .box_cotn .txt_wrap {position:absolute; width:100%; height:100%; backface-visibility:hidden;}
.card .box_cotn .txt_wrap {transform:rotateY(180deg);}
.card .box_cotn .txt_wrap .txt_top {padding:12px 12px 0; width:100%; box-sizing:border-box; height:32px;}
.card .box_cotn .txt_wrap .txt_top .txt_des {display:flex; align-items:center; position:relative; height:20px;}
.card .box_cotn .txt_wrap .txt_top .txt_des .img {width:32px; height:auto; margin-right:7px;}
.card .box_cotn .txt_wrap .txt_top .txt_des .clear {color:#000; font-size:11px; line-height:18px;}
.card .box_cotn .txt_wrap .txt_top .txt_des .clear span {font-size:14px;}
.card .box_cotn .txt_wrap::after {display:block; content:''; background:url(../image/common/icon_photo.svg) no-repeat 0 0; width:16px; height:12px; background-size:100%; width:16px; height:12px; position:absolute; right:15px; top:15px;}
.card .box_cotn .txt_wrap .txt {height:calc(100% - 66px); font-size:14px; box-sizing:border-box; overflow-y:auto; padding:15px 15px 22px; font-weight:500; line-height:18px;}
.card .box_cotn .txt_wrap .date {padding:8px 0 13px; text-align:center; color:#666; font-size:10px; line-height:1.3; border-top:1px solid #e0e0e0;}

/* live talk */
.talk_wrap {margin-top:30px; position:relative;}
.talk_wrap::after {display:block; content:''; width:100%; height:calc(100% + 210px); position:absolute; left:0; top:-210px; background-color:#272727; z-index:-1;}
.talk_wrap .talk_tit {margin:0 15px; padding-bottom:2px; display:flex; align-items:center; justify-content:space-between; height:32px; position:relative; border-bottom:1px solid #3B3C39;}
.talk_wrap .talk_tit .tit_area {padding-right:52px; background:url(../image/common/chip_07.png) no-repeat right center; background-size:44px auto;}
.talk_wrap .talk_tit .tit_area p {color:#ff762b; font-weight:600; line-height:34px;}
.talk_cnt {font-size:14px; line-height:16px; font-weight:500; color:#fff; padding-left:24px; background:url(../image/common/icon_chat_wh.svg) no-repeat left center; background-size:16px 16px;}
.talk_wrap .talk_list {margin-top:7px; padding-bottom:21px;}

/* GET IT 버튼 */
.btn_get {margin:6px auto; width:180px; height:48px; background-color:#702DFF; border-radius:24px; display:block; color:#fff; font-size:15px; font-weight:600;}
.btn_get span {display:inline-block; line-height:30px; padding-right:36px; background:url(../image/common/icon_down.svg) no-repeat right center; background-size:30px 30px;}

/* ============================== [ 팩>MAP ] ========================================================================================== */
.map_pack #contents{padding-bottom:calc(constant(safe-area-inset-bottom) + 54px); padding-bottom:calc(env(safe-area-inset-bottom) + 54px);}
.pack_local_wrap {height:calc(100vh - (108px - constant(safe-area-inset-bottom))); height:calc(100vh - (108px - env(safe-area-inset-bottom))); position:relative; overflow:hidden;}
.pack_local_wrap .pack_title {position:absolute; left:0; top:0; z-index:10;}

/* 지도영역 */
.pack_local_wrap .map_area {height:100%; position:relative;}
.pack_local_wrap .spot {width:50px; height:63px; position:absolute;}
.pack_local_wrap .spot a ,
.pack_local_wrap .spot a img {display:block; width:100%; height:100%; transition:transform .3s;}
.pack_local_wrap .spot.non.on a {transform:scale(1.8);}
.pack_local_wrap .spot .loc {border:2px solid #00C987; background-color:#fff; border-radius:18px; position:absolute; left:-15px; bottom:-30px; padding:8px 11px; box-sizing:border-box; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; z-index:1;}
.pack_local_wrap .spot .loc p {padding-left:21px; background:url(../image/common/icon_map_03.svg) no-repeat left center; background-size:14px auto; font-weight:500; font-size:14px; line-height:18px; word-wrap:break-word; word-break:keep-all; white-space:nowrap;}
.pack_local_wrap .spot.on .loc {opacity:1; visibility:visible;}

/* 댓글정보 */
.spot_pack_info {background-color:#fff; position:absolute; left:0; bottom:-100%; width:100%; z-index:2; transition:bottom .3s;}
.spot_pack_info.on {bottom:0;}
.spot_pack_info .chat_tit {display:flex; align-items:center; padding:11px 15px;}
.spot_pack_info .chat_tit .num {padding-left:21px; background:url(../image/common/icon_map_03.svg) no-repeat left center; background-size:13px auto; font-size:11px; font-weight:500; line-height:16px;}
.spot_pack_info .chat_tit .tit {margin-left:8px; font-weight:600; font-size:18px; line-height:24px; flex:1; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;}
.spot_pack_info .talk_list {background-color:#252525; padding:12px 15px; height:216px; overflow-y:auto;}

/* ============================== [ BINDER ] ========================================================================================== */
.bd_state .card_count {background-color:#fff; border-top:none; padding:24px 15px 13px;}
.bd_state .card_count .info_wrap .tot_card {line-height:16px;}
.bd_state .card_count .bar .tot_line {background-color:#ededed;}
.bd_list {padding:0 15px;}
.bd_list .pack_gall {margin:-7px 0 0 -7px;}
.bd_list .pack_gall li {margin:7px 0 0 7px; width:calc(33.33% - 7px);}

/* allca */
.bd_state.allca .card_count .info_wrap .tot_card {padding-right:36px; background:url(../image/common/allca.svg) no-repeat right center; background-size:32px 16px;}

/* ============================== [ spot상세팝업 ] ========================================================================================== */
.spot_pop {background-color:#252525;}
.spot_pop #head {background-color:#252525; border-bottom-color:#252525;}
.spot_pop #head .header_wrap .tit_ctrl a.close {background-image:url(../image/common/icon_close_wh.svg);}
.spot_pop #content {padding-bottom:30px;}

/* spot상세정보 */
.detail_card {padding:0 15px; width:100%; max-width:375px; margin:0 auto; box-sizing:border-box;}
.detail_card .cotn {background-color:#fff; border-radius:24px; overflow:hidden; position:relative;}
.detail_card .img_area {width:100%; padding:2px 2px 0; box-sizing:border-box;}
.detail_card .img_area .img {display:block; width:100%; height:100%; border-radius:24px 24px 0 0; overflow:hidden;}
.detail_card .txt_area {padding:12px 15px;}
.detail_card .txt_area .tit {font-weight:600; font-size:18px; line-height:24px;}
.detail_card .txt_area .info {margin-top:4px; color:#666; font-size:11px; font-weight:500; line-height:13px;}
.detail_card .txt_area .txt {margin-top:4px; font-weight:500; font-size:14px; line-height:18px; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.detail_card .txt_area .date {text-align:right; line-height:20px; margin-top:4px; font-size:11px; color:#888;}
.detail_card .btn_more {width:24px; height:24px; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); background:url(../image/common/icon_arr_down.svg) no-repeat 0 0; background-size:24px 24px;}
.detail_card .txt_area.on .txt {-webkit-line-clamp:inherit;}
.detail_card .txt_area.on ~ .btn_more {transform:translateX(-50%) rotate(180deg);}
.pop_talk {position:relative; margin-top:12px;}
.pop_talk .talk_wrap {margin-top:0;}
.pop_talk .talk_wrap .talk_tit {border-bottom:none; height:30px; padding-bottom:0;}
.pop_talk .talk_wrap .talk_list {margin-top:0; padding-bottom:12px;}
.pop_talk .talk_list .group {padding:3px 0;}

/* ============================== [ LIVE TALK ] ========================================================================================== */
.talk_pop #head {border-bottom:none;}

/* 데이터없음 */
.talk_inner .data_none {margin-top:200px;}
.talk_inner .data_none .img {width:72px;}

/* 채팅입력 */
.talk_inner .btm_fixed {background-color:#F9F9F9; position:fixed; left:0; right:0; bottom:0; width:100%; box-sizing:border-box; padding:10px 15px calc(env(safe-area-inset-bottom) + 10px); padding:10px 15px calc(const(safe-area-inset-bottom) + 10px);max-width:768px; margin:0 auto;}


/* 2023.10.11 추가 */
/* ============================== [ 유저프로필 ] ========================================================================================== */
.nick_tit {padding-top:60px; position:relative; text-align:center; margin-bottom:15px;}
.nick_tit::after {display:block; content: ''; width:100%; height:60px; background-color:#f9f9f9; box-shadow: inset 0 -4px 30px 0 rgba(0, 0, 0, .1); position:absolute; left:0; top:0; z-index:-1;}
.nick_tit .thum_img {width:78px; height:78px; margin:0 auto; box-sizing:border-box; margin-top:-44px; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.25);}
.nick_tit .thum_img img {width:100%; height:100%; object-fit: contain;}
.nick_tit .state_msg {margin-top:14px; font-size:15px; font-weight:500; line-height:20px;}
.nick_tit .list_msg {margin-top:8px; line-height:20px;}
.nick_tit .list_msg a {font-weight:700; text-decoration:underline;}
.nick_tit .list_msg strong {font-weight:700;}

/* 탭 */
.tab_wrap {display:flex;}
.tab_wrap .tab {padding:10px; flex:1; font-size:16px; font-weight:500; color:#000; text-align:center; box-sizing:border-box; border-bottom:1px solid #D2D2D2;}
.tab_wrap .tab.on {font-weight:700; color:#28aa7f; border-bottom:3px solid #28aa7f;}
.tab_wrap .tab span {line-height:18px;}

/* ============================== [ 프로필 이미지 설정 ] ========================================================================================== */
.pf_img_set {padding:25px 15px 80px;}
.pf_img_set .setting {margin-bottom:35px;}
.pf_img_set .setting .tit {font-size:15px; line-height:20px; font-weight:700;}
.set_btn {display:flex; margin-top:15px;}
.set_btn label {display:block; flex:1; padding:11px 0; border-radius:20px; border:1px solid #ababab; background-color:#fff; text-align:center; position:relative; cursor:pointer;}
.set_btn label input {overflow:hidden; font-size:0; line-height:0; position:absolute; left:-10%; top:-10%; height:0; width:0;}
.set_btn label ~ label {margin-left:12px;}
.set_btn label span {font-size:12px; padding-right:26px;}
.set_btn label.pt span {background:url(../image/common/icon_photo_03.svg) no-repeat right center; background-size:18px auto;}
.set_btn label.album span {background:url(../image/common/icon_album_02.svg) no-repeat right center; background-size:18px auto;}

.pf_li {padding-top:10px; display:flex; flex-wrap:wrap; justify-content:space-between;}
.pf_li label {cursor:pointer; width:25%; position:relative;}
.pf_li label div {width:80px; height:80px; margin:0 auto; display:flex; align-items:center; justify-content:center;}
.pf_li label figure {width:66px; height:66px; border:2px solid #fff; border-radius:50%; box-sizing:border-box;}
.pf_li label figure img {width:100%; height:100%; object-fit:contain;}
.pf_li label input:checked ~ div figure {width:80px; height:80px; box-shadow:0 4px 10px 0 rgba(0, 0, 0, .25); border:5px solid #702DFF;}
.pf_li input[type="radio"] {overflow:hidden; font-size:0; line-height:0; position:absolute; left:-10%; top:-10%; height:0; width:0;}

/* ============================== [ 스팟보기 ] ========================================================================================== */
.spot_talk {position: absolute; left: 0; bottom: 0; width: 100%; height: 144px; background-color:rgba(37, 37, 37, .7);}
.spot_talk::after {display:block; content: ''; width:100%; height:45px; background: linear-gradient(0deg, rgb(96, 96, 96) 0%, rgba(0,0,0,0) 100%); position:absolute; left:0; bottom:0;}
.spot_talk .talk_list {height: 100%; overflow-y: auto; padding:8px 15px; box-sizing: border-box; position:relative;}
.spot_talk .talk_list .group {padding:3px 0;}
.spot_talk .talk_list .group .txt {font-size: 15px;}

/* 버튼 */
.control_wrap {position: absolute; left: 10px; top: 50px; width: calc(100% - 20px); display: flex;}
.control_list {margin-left: 8px;}
.r_cotn {margin-left: auto; display:flex;}
.control_label {margin-top:5px; position:relative; display:block; cursor:pointer;}
.control_label input {border:none; font-size:0; line-height:0; opacity:0; position:absolute; left:-10px; top:-10px; height:0; width:0;}

.control {display: block; width: 32px; height: 32px; background-color: #fff; box-shadow:0 4px 8px 0 rgba(0, 0, 0, .25); border-radius:50%; transition:box-shadow .1s;}
.control.loc_btn .i_loc {display: block; width: 32px; height: 32px; background:url(../image/map/icon_my_loc.svg) no-repeat center center; background-size:18px 18px;}
input:checked ~ .loc_btn {box-shadow:0 4px 8px 0 #702DFF;}
input:checked ~ .loc_btn .i_loc {background-image:url(../image/map/icon_my_loc_on.svg); background-size:24px 24px;}

.control.coord_btn .i_coord {display: block; width: 32px; height: 32px; background:url(../image/map/icon_arr.svg) no-repeat center center; background-size:16px 16px;}
input:checked ~ .coord_btn {box-shadow:0 4px 10px 0 rgba(0, 204, 102, .7);}
input:checked ~ .coord_btn .i_coord {background-image:url(../image/map/icon_arr_on.svg); background-size:24px 24px;}

/* 유저아이콘 */
.user_list {display: flex;}
.user_list a ~ a {margin-left: -12px;}
.user_list a.user_icon {width: 36px; height: 36px;}
.user_icon {display: block; width: 32px; height: 32px; border:3px solid #fff; box-shadow:0 2px 10px 0 rgba(0, 0, 0, .25); border-radius:50%; box-sizing: border-box;}
.user_icon.u_g {border-color:#0CFF65;}
.user_icon.u_p {border-color:#5B20FF;}
.user_icon img {width: 100%; height: 100%;}

/* ===== 지도 위 컨텐츠 ===== */
.meta_pin {position: absolute; width: 36px; height: 42px;}
.meta_pin img {width: 100%; height: 100%;}

/* 스팟보기 > 내 위치 핀 */
.spot_my_pin {position:absolute; width:24px; height:24px; background-color:#702DFF; border:3px solid #fff; box-sizing:border-box; box-shadow:0 4px 8px 0 rgba(81, 28, 227, .7); border-radius:50%;}
.spot_my_pin::after {display:block; content:''; width:8px; height:8px; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); background-color:#fff; opacity:.5; border-radius:50%;}

/* 핀 */
.user_pin {position: absolute;}
.user_pin a.user_icon {width: 36px; height: 36px;}
.user_pin .my_pin {position: absolute; right: -4px; bottom: -4px; display: block; width: 18px; height: 18px; background-color: #702DFF; border:3px solid #fff; box-shadow:0 4px 8px 0 rgba(81, 28, 227, .7); box-sizing: border-box; border-radius: 50%;}
.user_pin .my_pin::after {display: block; content:''; width: 6px; height: 6px; background-color:rgba(255, 255, 255, .5); border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.user_pin.coord_pin .user_icon {box-shadow:0 2px 10px 0 rgba(12, 255, 101, .7);}
.user_pin.coord_pin .my_coord {position:absolute; right:-4px; bottom:-4px; display:block; width:18px; height:18px; border-radius:50%; background:#fff url(../image/map/icon_arr_on.svg) no-repeat center center; background-size:12px 12px; box-shadow:0 4px 8px 0 rgba(12, 255, 101, .7);}

/* 스위치 */
.btn_switch {position:relative; margin-top:4px;}
.btn_switch .forms_chk {position:relative; display:block; cursor:pointer; width:52px; height:24px;  border-radius:16px; box-shadow:0 4px 10px 0 rgba(0, 0, 0, .25);}
.btn_switch .forms_chk .icon {box-sizing:border-box; position:absolute; left:3px; top:3px; width:18px; height:18px; background-color:#ffffff; box-shadow:0 4px 4px 0 rgba(0, 0, 0, .25); border-radius:50%; transform:translateX(0); z-index:1; transition:transform 0.2s 0.1s ease-in-out;}
.btn_switch .forms_chk .bg {display:block; box-sizing:border-box; border:3px solid #888888; background-color:#888888; border-radius:40px; position:absolute; left:0; top:0; height:100%; width:100%; box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, .25); transition: transform .2s, background-color .2s;}
.btn_switch .forms_chk .switch {display:flex; justify-content: flex-end; align-items: center; position:absolute; top:0; height:inherit; color:#fff; font-size:10px;}
.btn_switch .forms_chk .switch.on {left:9px; opacity:0; visibility:hidden; transition: .3s;}
.btn_switch .forms_chk .switch.off {right:8px; transition: .3s;}
.btn_switch .forms_chk input:checked ~ .icon {transform:translateX(28px);}
.btn_switch .forms_chk input:checked ~ .bg {border-color:#702DFF; background-color:#702DFF;}
.btn_switch .forms_chk input:checked ~ .on {opacity:1; visibility:visible;}
.btn_switch .forms_chk input:checked ~ .off {opacity:0; visibility:hidden;}

/* 말풍선 */
.tool {position:absolute; left:50%; top:-25px; transform: translateX(-50%); background:rgba(0, 0, 0, .7); border-radius:4px; padding:2px 10px; box-sizing:border-box; z-index:1; max-width:165px;}
.tool::after {display:block; content: ''; background:url(../image/map/text_arr.svg) no-repeat 0 0; background-size:8px 4px; width:8px; height:4px; position:absolute; left:50%; bottom:-4px; transform: translateX(-50%);}
.tool p {color:#fff; font-size:13px; white-space:nowrap; line-height:16px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; width:100%;}