@charset 'utf-8';

/* common unit
* * * * * * * * * * * * * * * * * * * * * * * * */
input.fr-input { display:block; width:100%; height:4.6rem; font-size:1.4rem; border-radius:0.5rem; background-color:#fff; border:1px solid #D6D6D6; padding:0 1.5rem; box-sizing:border-box; }

.select-box { position:relative; }
.select-box:after { content:""; position:absolute; right:1.0rem; top:50%; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_select_arrow.svg'); background-size:100% auto; width:1.4rem; height:1.4rem; transform:translateY(-50%); }
.select-box .select { display:block; width:100%; height:4.6rem; border:1px solid #D7D7D7; border-radius:0.7rem; cursor:pointer; box-sizing:border-box; padding:0 3.0rem 0 1.0rem; font-size:1.4rem; color:#8E8E8E; outline:none; }

label.check-box { position:relative; font-size:1.2rem; line-height:1.45; color:#000; }
label.check-box input { display:none; }
label.check-box span { display:block; padding-left:2.5rem; }
label.check-box span:before { position:absolute; left:0; top:0.1rem; display:block; width:1.6rem; height:1.6rem; border-radius:0.3rem; border:1px solid #666666; background-repeat:no-repeat; background-position:center; box-sizing:border-box; overflow:hidden; content:""; }
label.check-box input:checked + span:before { border-color:#5B009A; background-color:#5B009A; background-image:url('../img/icons/ic_checked.svg'); }

.ta { display:block; width:100%; border:1px solid #D7D7D7; padding:1.0rem 1.5rem; font-size:1.4rem; line-height:1.45; box-sizing:border-box; height:14.0rem; border-radius:7px; background-color:#fff; }
.ta::placeholder { opacity:0.5; }

.btn-basic { display:flex; align-items:center; justify-content:center; height:4.6rem; width:11.0rem; background-color:#5B009A; color:#fff; font-size:1.6rem; font-weight:500; border-radius:0.5rem; outline:none; cursor:pointer; border:0; box-sizing:border-box; }
.btn-basic.gray { background-color:#909090; }
.btn-basic.white { background-color:#fff; border:1px solid #D6D6D6; color:#676767; }

.btn-basic.w100 { width:100%; }

.btn-basic.completion { background-color:#5B009A; border-color:#5B009A; color:#fff; }

/* btn-box */
.btn-box { margin-top:1.0rem; }
.btn-box.i3 { display:flex; gap:0.6rem; }
.btn-box.i3 .btn-basic { width:100%; }

.bo-tail { display:flex; align-items:center; justify-content:center; margin-top:2.5rem; gap:0.5rem; }

.tail-btns { margin-top:3.0rem; }



/* container */
.container { position:relative; padding:1.5rem 1.0rem; min-height:calc(100svh - 10.0rem); box-sizing:border-box; }
.container h3.h3 { font-size:2.0rem; line-height:1.35; text-align:center; font-family:'LaundryGothic'; margin-bottom:1.5rem; font-weight:700; }
.container h3.h3.stamp { }
.container h3.h3.stamp span { position:relative; display:inline-block; padding-top:5.3rem; }
.container h3.h3.stamp span:before { content:""; position:absolute; left:-4.2rem; top:0; display:block; width:7.0rem; height:5.8rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_foot_stamp.svg'); background-size:100% auto; }

.hgroup { margin-bottom:1.5rem; }
.hgroup h3.h3 { margin-bottom:1.0rem; }
.hgroup .text { font-size:1.2rem; line-height:1.35; text-align:center; font-weight:700; }



/* 0. 인트로 
* * * * * * * * * * * * * * * * * * * */
#intro { position:relative; background-color:#ffa601; width:100svw; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-direction: column; }
#intro:before,
#intro:after { content:""; display:block; position:absolute; background-repeat:no-repeat; background-position:center top; background-size:100% auto; }
#intro:before { left:1.6rem; top:1.0rem; width:42%; aspect-ratio: 4 / 5; background-image:url('../img/contents/img_footprints01.svg'); }
#intro:after { right:1.6rem; bottom:4.5rem; width:45%; aspect-ratio: 4 / 5; background-image:url('../img/contents/img_footprints02.svg'); background-position:center bottom; }
#intro .emblem { position:relative; width:65%; z-index:10; }
#intro .emblem img { width:100%; height:auto; }
#intro .main-title { position:relative; font-size:2.0rem; line-height:1.35; margin-top:2.0rem; font-family:'LaundryGothic'; font-weight:700; z-index:10; padding-bottom:7.0rem; }
#intro .emblem, #intro .main-title { opacity: 0; transition: opacity 1s ease-in-out; }


/* 0. 로그인 
* * * * * * * * * * * * * * * * * * * */
#login { position:relative; background-color:#ffa601; width:100svw; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-direction: column; }
#login:before,
#login:after { content:""; display:block; position:absolute; background-repeat:no-repeat; background-position:center top; background-size:100% auto; }
#login:before { left:1.6rem; top:1.0rem; width:42%; aspect-ratio: 4 / 5; background-image:url('../img/contents/img_footprints01.svg'); }
#login:after { right:1.6rem; bottom:4.5rem; width:45%; aspect-ratio: 4 / 5; background-image:url('../img/contents/img_footprints02.svg'); background-position:center bottom; }

#login h3 { font-size:2.0rem; line-height:1.35; color:#000; margin-bottom:1.5rem; font-family:'LaundryGothic'; font-weight:700; }
#login .login-list { position:relative; width:100%; padding:0 4.5rem; padding-bottom:7.0rem; box-sizing:border-box; z-index:10; }
#login .login-list li { margin-bottom:1.4rem; }
#login .login-list li .btn-basic { display:flex; align-items:center; justify-content:center; width:100%; height:5.2rem; cursor:pointer; border:0; color:#313131; background-color:#fff; font-size:1.6rem; border:0; outline:none; cursor:pointer; }
#login .login-list li .btn-basic span { position:relative; display:inline-block; padding-left:3.8rem; }
#login .login-list li .btn-basic span:before { content:""; position:absolute; left:0; top:-0.5rem; display:block; width:3.3rem; height:3.1rem; background-position:center; background-repeat:no-repeat; }
#login .login-list li .btn-basic.kakao span { }
#login .login-list li .btn-basic.kakao span:before { background-image:url('../img/icons/ic_kakao.svg'); background-size:3.3rem auto; }
#login .login-list li .btn-basic.naver span { padding-left:3.7rem; }
#login .login-list li .btn-basic.naver span:before { background-image:url('../img/icons/ic_naver.svg'); background-size:2.9rem auto; }


/* 0. 회원가입 
* * * * * * * * * * * * * * * * * * * */
.terms-box { }
.terms-box .terms-list { padding:2.5rem 1.5rem; background-color:#f2f2f2; border-radius:0.5rem; }
.terms-box .terms-list li { position:relative; margin-bottom:1.4rem; padding-right:7.0rem; }
.terms-box .terms-list li:last-child { margin-bottom:0; }
.terms-box .terms-list li .check-box { }
.terms-box .terms-list li .btn-terms-view { position:absolute; right:0; top:0; color:#666666; }
.terms-box .all-agree { margin-top:1.5rem; padding-left:1.5rem; }
.terms-box .all-agree label { font-weight:700; color:#000000; font-size:1.4rem; }
.terms-box .all-agree label.check-box span:before { top:0.3rem; }

.terms-area { position:relative; border:1px solid #DDDDDD; border-radius:0.5rem; padding:2.0rem 1.5rem; font-size:1.2rem; line-height:1.45; box-sizing:border-box; height:calc(100svh - 25.0rem); overflow-y:auto; }
.terms-area .tit { text-align:center; font-size:1.5rem; margin-bottom:2.0rem; }
.terms-area + .tail-btns { margin-top:1.0rem; }

.hgroup + .form-box { margin-top:3.0rem; }

.join-complete-msg { text-align:center; margin:6.0rem 0; }
.join-complete-msg .text1 { font-size:1.6rem; line-height:1.35; font-weight:700; }
.join-complete-msg .text2 { font-size:1.2rem; line-height:1.35; margin-top:1.4rem; }




/* 1. 커뮤니티 
* * * * * * * * * * * * * * * * * * * */
/* 1) 글 목록 */
.bo-list { }
.bo-list .bo-hd {  padding: 0 1.0rem; margin-bottom:0.5rem; }
.bo-list .bo-hd h3 { font-size: 20px; line-height: 1.35; font-family: 'LaundryGothic'; color: #000;font-weight: 700; text-align:center; }

.pager { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:30px; display:none; width:100%; }
.pager .btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background-repeat:no-repeat; background-position:center; }
.pager .btn.prev { background-image:url('../img/icons/ic_page_prev.svg'); }
.pager .btn.next { background-image:url('../img/icons/ic_page_next.svg'); }
.pager .num { display:flex; align-items:center; justify-content:center; width:40px; height:40px; font-size:14px; color:#9D9D9D; }
.pager .num.current { color:#1E9D8B; font-weight:500; }


/* list-type1 */
.list-type1 { }
.list-type1 li { border-radius:7px; background-color:#fff; border:1px solid #E7E7E7; padding:1.5rem; margin-bottom:1.0rem; }
.list-type1 li .title { font-size:1.6rem; line-height:1.35; font-weight:700; margin-bottom:0.2rem; }
.list-type1 li .info-rel { display:flex; justify-content: space-between; }
.list-type1 li .info-rel .info { display:flex; gap:0.7rem; font-size:1.2rem; }
.list-type1 li .info-rel .info .writer { display:flex; align-items: center; color:#6C6C6C; }
.list-type1 li .info-rel .info .date { display:flex; align-items:center; color:#6C6C6C; }

.info2 { position:relative; display:flex; gap:1.0rem; }
.info2 span { position:relative; padding-left:1.5rem; font-size:1.2rem; line-height:1.45; color:#9D9D9D; background-repeat:no-repeat; background-position:left center; background-size:1.3rem auto; }
.info2 span.like { background-image:url('../img/icons/ic_like.svg'); }
.info2 span.like.on { background-image:url('../img/icons/ic_like_on.svg'); }
.info2 span.comment { background-image:url('../img/icons/ic_comment.svg'); }
.info2 span.view { background-image:url('../img/icons/ic_view.svg'); background-size:1.5rem auto; padding-left: 1.7rem; }

.list-type1 li .w-content { display:grid; grid-template-columns:14.0rem 1fr; gap:1.0rem; margin-top:0.7rem; }
.list-type1 li .w-content .thumb { aspect-ratio:1.5; }
.list-type1 li .w-content .thumb img { object-fit: cover; width:100%; height:100%; }
.list-type1 li .w-content .summary { font-size:1.3rem; line-height:1.35; }
.list-type1 li .w-content .btn-view { color:#A9A9A9; cursor:pointer; }

.list-type1 li .w-content-photo { display:block; grid-template-columns:14.0rem 1fr; gap:1.0rem; margin-top:0.7rem; }
.list-type1 li .w-content-photo .summary { font-size:1.3rem; line-height:1.35; }
.list-type1 li .w-content-photo .btn-view { color:#A9A9A9; cursor:pointer; }
.list-type1 li .w-content-photo .thumb { }
.list-type1 li .w-content-photo .thumb img { width:100%; height:auto; }

/* list-type2 */
.list-type2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.0rem; margin-bottom:1.0rem; }
.list-type2 li { position:relative; border-radius:7px; background-color:#fff; overflow:hidden; aspect-ratio:1; }
.list-type2 li .thumb { height:100%; }
.list-type2 li .thumb a { display:block; height:100%; }
.list-type2 li .thumb img { object-fit: cover; width:100%; height:100%; }
.list-type2 li .info-wr { position:absolute; left:0; bottom:0; right:0; z-index:1; padding:0 1.0rem 1.0rem 1.0rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); }
.list-type2 li .info-wr .title { font-size:1.4rem; line-height:1.25; }
.list-type2 li .info-wr .title a { color:#fff; }

.list-type2 li .info-wr .info2 { margin-top:0.5rem; }
.list-type2 li .info-wr .info2 span { color:#fff; }
.list-type2 li .info-wr .info2 span.like { background-image:url('../img/icons/ic_like_w.svg'); }
.list-type2 li .info-wr .info2 span.like.on { background-image:url('../img/icons/ic_like_w_on.svg'); }
.list-type2 li .info-wr .info2 span.comment { background-image:url('../img/icons/ic_comment_w.svg'); }

/* list-type3 */
.list-type3 { }
.list-type3 li { border-radius:7px; background-color:#fff; border:1px solid #E7E7E7; padding:1.5rem 1.0rem 1.0rem 1.0rem; margin-bottom:1.0rem; }
.list-type3 li .title { font-size:1.6rem; line-height:1.35; font-weight:700; }

.user-wr { position:relative; display:grid; grid-template-columns:3.5rem 1fr;gap:1.0rem; margin-top:0.8rem; }
.user-wr .u-thumb { display:block; width:3.5rem; height:3.5rem; border-radius:3.5rem; overflow:hidden; }
.user-wr .u-thumb img { width:100%; height:100%; object-fit: cover; }
.user-wr .info { display:flex; align-items:flex-start; justify-content:center; flex-direction: column; }
.user-wr .info .writer { display:block; font-size:1.2rem; line-height:1.35; color:#6C6C6C; }
.user-wr .info .date { display:block; font-size:1.2rem; line-height:1.35; color:#6C6C6C; }

.list-type3 li .thumb { margin-top:1.25rem; aspect-ratio:2.0; }
.list-type3 li .thumb img { width:100%; height:100%; object-fit: cover; }
.list-type3 li .summary { font-size:1.3rem; line-height:1.35; margin-top:0.7rem; }
.list-type3 li .summary .btn-view { color:#A9A9A9; cursor:pointer; }

.list-type3 li .w-tail { position:relative; border-top:1px solid #D2D2D2; padding-top:1.0rem; margin-top:1.0rem; }

.advertising-banner { border:0 !important; padding:0 !important; border-radius:7px; overflow:hidden; }
.advertising-banner a { display:block; }
.advertising-banner.tail { margin-top:2.0rem; }

.btn-sharing { position:absolute; right:0.5rem; top:1.0rem; display:block; width:1.5rem; height:1.6rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; background-image:url('../img/icons/ic_sharing.svg'); border:0; cursor:pointer; }


/* 2) 글 상세 */
.details-wr { position:relative; background-color:#F1F1F1; margin:-1.5rem -1.0rem; padding:1.5rem 1.0rem; }
.bo-details { border-radius:7px; background-color:#fff; border:1px solid #E7E7E7; padding:1.5rem; margin-bottom:1.0rem; }
.bo-details .title { font-size:1.6rem; line-height:1.45; font-weight:700; }
.bo-details .user-wr { }

.bo-details .info2 { position:absolute; right:0; bottom:0.2rem; display:flex; gap:1.0rem; }
.bo-details .info2 .btn-sharing { position:static; background-image:url('../img/icons/ic_sharing_on.svg');}
.bo-details .info2 .btn-edit { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 0; background-color: #5B009A; color: #fff; padding: 0.2rem 0.5rem; border-radius: 0.4rem; }
.bo-details .info2 .btn-del { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 0; background-color: #FE0707; color: #fff; padding: 0.2rem 0.5rem; border-radius: 0.4rem; }

#bo-content { margin-top:1.0rem; padding:1.5rem 0; border-top:1px solid #E7E7E7; font-size:1.4rem; line-height:1.45; }
#bo-content img:not(.emoti) { width:100%; height:auto; }

#bo-content .link-preview { display:grid; grid-template-columns:50px 1fr; gap:10px; cursor: pointer; border: 1px solid #eee; border-radius: 8px; padding: 10px; box-sizing:border-box; }

#bo-content .link-preview .thumb { }
#bo-content .link-preview .text-box { overflow:hidden; }
#bo-content .link-preview .text-box .title { }
#bo-content .link-preview .text-box .description { color: #666; font-size: 1.3rem; line-height:1.35; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing:border-box; }
#bo-content .link-preview .text-box .site { color: #999; font-size: 1.2rem; line-height:1.35; margin-top:0.5rem; }


/* rel-btns */
.rel-btns { position:relative; background-color:#F1F1F1; margin: 0 -1.0rem; padding:0 1.0rem; }
.rel-btns .icon-btn { display:inline-block; cursor:pointer; font-size: 1.4rem; line-height:1.30; }
.rel-btns .btn-like { background: none; border: none; cursor: pointer; padding: 5px; font-size: 1.7rem; color:#666; line-height: 1.0; z-index: 1; }
.rel-btns .btn-like.active { color: #ff4b4b; }
.rel-btns .btn-like:hover { color: #ff4b4b; }


/* comment-wr */
.comment-wr { position:relative; margin:0 -1.0rem; }

.comment-write { background-color:#F1F1F1; padding:2.0rem 1.0rem; }
.comment-write dt { position:relative; font-size:1.4rem; line-height:1.35; font-weight:500; margin-bottom:0.5rem; padding-left:0.5rem; }
.comment-write dt .btn-my-comment { position:absolute; right:1.0rem; bottom:0.2rem; color:#282828; border:0; cursor:pointer; font-size:1.2rem; line-height:1.45; text-decoration:underline; }
.comment-write dd .text-area { }
.comment-write dd .btn-area { display:flex; align-items:center; justify-content:flex-end; margin-top:0.5rem; }
.btn-basic.addimg span { background-repeat:no-repeat; background-position:left center; background-image:url('../img/icons/ic_add_img.svg'); background-size:2.3rem auto ; padding-left:2.5rem; }

.comment-list { margin-top:2.0rem; padding:0 1.0rem; }
.comment-list li { border-bottom:1px solid #E7E7E7; padding:1.5rem 0; }
.comment-list li .info { position:relative; display:flex; align-items:center; margin-bottom:0.7rem; gap:0.7rem; }
.comment-list li .info > p { display:flex; align-items:center; font-size:1.0rem; color:#6C6C6C; }
.comment-list li .info .writer { font-size:1.3rem; font-weight:700; color:#000; }
.comment-list li .info .date { font-size:1.2rem; }

.comment-list li .info .opt-btn-box { position:absolute; right:0; top:0;}
.comment-list li .info .opt-btn-box .btn-opt-menu { display:block; width:2.0rem; height:2.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_comment_menu.svg'); background-size:1.2rem auto ; border:1px solid #ddd; cursor:pointer; }
.comment-list li .info .opt-btn-box .btn-list { position:absolute; right:0; top:0; display:flex; align-items:center; flex-flow: column; background-color:#FFFFFF; width:62px; border-radius:0.7rem; box-shadow:0 0 5px #aaa; z-index:0; padding:5px 0; display:none; }
.comment-list li .info .opt-btn-box .btn-list .btn { display:flex; align-items:center; justify-content:center; width:100%; height:24px; border:0; cursor:pointer; font-size:13px; font-weight:500; color:#5B009A; }
.comment-list li .info .opt-btn-box .btn-list .btn.del { color:#909090; }

.comment-list li .comment { font-size:1.3rem; line-height:1.45; color:#000; }
.comment-list li .rel-btns { display:flex; align-items:center; gap:0.5rem; margin-top:1.0rem; }
.comment-list li .rel-btns .btns { display:flex; align-items:center; font-size:1.2rem; width:auto; height:2.0rem; border:1px solid #C1C1C1; padding:0 1.0rem; background-color:#fff; color:#000; border-radius:1.5rem; }
.comment-list li .rel-btns .btns em { color:#909090; margin-left:0.2rem; }

.comment-comment { margin-top:1.0rem; }
.comment-comment .btn-area { display:flex; align-items:center; justify-content:flex-end; gap:0.5rem; margin-top:1.0rem; }
.comment-comment .btn-area .btns { display:flex; align-items:center; justify-content:center; font-size:1.3rem; background-color:#fff; border:1px solid #5B009A; color:#5B009A; padding:0 2.0rem; height:2.5rem; border-radius:0.5rem; }
.comment-comment .btn-area .btns.cancel { color:#6C6C6C; border-color:#6C6C6C; }

.reply-list { margin-top:1.5rem; }
.reply-list li { position:relative; padding-left:2.0rem; border-top: 1px solid #E7E7E7; border-bottom: 0;}
.reply-list li:before { content:""; position:absolute; left:0; top:1.5rem; display:block; width:1.4rem; height:1.3rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_reply.svg'); background-size:100% auto; }

/* pager */
.pager { display:flex; align-items:center; justify-content:center; margin-top:2.0rem; width:100%; }
.pager .btn { display:flex; align-items:center; justify-content:center; width:3.0rem; height:3.0rem; background-repeat:no-repeat; background-position:center; background-size:0.7rem auto; box-sizing:border-box; }
.pager .btn.prev { background-image:url('../img/icons/ic_prev_bk@2x.png'); }
.pager .btn.next { background-image:url('../img/icons/ic_next_bk@2x.png'); }
.pager .num { display:flex; align-items:center; justify-content:center; width:3.0rem; height:3.0rem; font-size:1.4rem; color:#9D9D9D; border:0; box-sizing:border-box; }
.pager .num.current { color:#5B009A; font-weight:500; }


/* 3) 글 작성 */
.bo-writer { padding-bottom:10.0rem; }
.form-list { }
.form-list .list { }
.form-list .list li { margin-bottom:1.0rem; }

.rel-option { position:relative; margin-top:1.0rem; padding:0 1.25rem; }
.rel-option .btns { display:flex; gap:2.0rem; }
.rel-option .btn { width:2.8rem; height:2.8rem; border:0; cursor:pointer; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.rel-option .btn.camera { background-image:url('../img/icons/ic_camera.svg'); }
.rel-option .btn.video { background-image:url('../img/icons/ic_video.svg'); }
.rel-option .btn.youtube { background-image:url('../img/icons/ic_youtube.svg'); }
.rel-option .btn.link { background-image:url('../img/icons/ic_link.svg'); background-size:80% auto;}
.rel-option .btn.emoticon { background-image:url('../img/icons/ic_emoticon.svg'); background-size:90% auto;}

/* ly-option */
.ly-option { position:absolute; top:4.0rem; left:0; right:0; background-color:#fff; border-radius:0.7rem; overflow:hidden; border:1px solid #D6D6D6; z-index:10; display:none; }

/* ly-link-box */
#ly-link-box { padding:0 1.0rem; }
#ly-link-box .search-box { position:relative; margin:0 -1.0rem; display:grid; grid-template-columns:3.5rem 1fr 3.5rem; }
#ly-link-box .search-box .btn-search { height:4.2rem; border:0; cursor:pointer; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_search_gray.svg'); font-size:0; }
#ly-link-box .search-box .fr-input { border:0; height:4.2rem; font-size:1.4rem; padding:0; }
#ly-link-box .search-box .btn-close { height:4.2rem; border:0; cursor:pointer; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_close_gray.svg'); background-size:2.0rem auto; font-size:0; }
#ly-link-box .link-details-info { padding:1.5rem 0; display:grid; grid-template-columns:9.0rem 1fr; gap:1.0rem; border-top:1px solid #D6D6D6; }
#ly-link-box .link-details-info .thumb { }
#ly-link-box .link-details-info .thumb img { width:100%; object-fit: cover; }
#ly-link-box .link-details-info .text-box { }
#ly-link-box .link-details-info .text-box .title { font-size:1.4rem; line-height:1.35; font-weight:700; }
#ly-link-box .link-details-info .text-box .hash-tag { font-size:1.2rem; line-height:1.35; margin-top:0.5rem; }
#ly-link-box .link-details-info .text-box .site { font-size:1.2rem; line-height:1.35; color:#AFAFAF; margin-top:1.0rem; }
#ly-link-box .link-details-info .btn-area { display:flex; align-items:center; justify-content:flex-end; margin-top: 1.0rem; }
#ly-link-box .link-details-info .btn-area .btn-basic { width: 5rem; height:3.0rem; font-size: 1.2rem; }

/* ly-emoticon-box */
#ly-emoticon-box { padding:1.5rem 1.0rem; height:20.0rem; }
#ly-emoticon-box .btn-close { position:absolute; right:0; top:0; width:3.5rem; height:3.5rem; border:0; cursor:pointer; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_close_gray.svg'); background-size:2.0rem auto; z-index:10; }
#ly-emoticon-box .scrollbar-inner { height:100%; }
#ly-emoticon-box .scroll-content { padding-right:1.0rem; }
#ly-emoticon-box .scrollbar-inner > .scroll-element.scroll-y { top: 10%; }

/* attach-photo */
.attach-photo { margin-top:1.5rem; }
.attach-photo dt { font-size:1.4rem; line-height:1.45; padding:0 1.3rem; }
.attach-photo dd { }
.attach-photo dd .guidelines { padding:0 1.3rem; }
.attach-photo dd .guidelines li { position:relative; font-size:1.2rem; line-height:1.35; padding-left:1.0rem; margin-top:0.2rem; margin-bottom:0; }
.attach-photo dd .guidelines li:before { content:"·"; position:absolute; left:0; top:0; }

.attach-photo dd .photo-list { margin-top:1.5rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:0.5rem; }
.attach-photo dd .photo-list li { position:relative; background-color:#D6D6D6; border-radius:0.7rem; aspect-ratio:1; overflow:hidden; }
.attach-photo dd .photo-list li img { width:100%; height:auto; }
.attach-photo dd .photo-list li .btn-del { position:absolute; right:0.5rem; top:0.5rem; width:2.4rem; height:2.4rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_del.svg'); background-size:100% auto; border:0; cursor:pointer; }

/* youtube-list */
.youtube-list { margin-bottom:30px; }
.youtube-list li { display:grid; grid-template-columns:140px 1fr; gap:10px; margin-bottom:10px; }
.youtube-list li .thumb { border-radius: 4px; overflow:hidden; }
.youtube-list li .thumb img { width:100%; height:auto; }
.youtube-list li .info { position:relative; }
.youtube-list li .info .title { font-size: 13px; color: #333; line-height: 1.4; padding-right:30px; }
.youtube-list li .info .hash-tag { font-size: 12px; line-height: 1.4; margin-top: 5px; color: #666; }
.youtube-list li .info .btn-del { position:absolute; right:0; top:-5px; display:block; cursor:pointer; border:0; width:25px; height:25px; outline:none; }


/* 2. 주변 
* * * * * * * * * * * * * * * * * * * */
/* 1) 지도 */
#map { }
#map .container { position:relative; padding:0;  }
#map-area { position:relative; width:100%; height: calc(100svh - 10.0rem); overflow:hidden; }
#map-area iframe { position:absolute; left:0; top:0; right:0; bottom:0; width:100% !important; height:100% !important; }
#map-area #map-filter { background-color:transparent; box-shadow:none; }

/* tab-menu */
.tab-menu { position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:0.5rem; z-index:10; }
.tab-menu li { }
.tab-menu li .tab-link { display:flex; align-items:center; justify-content:center; width:100%; height:3.0rem; font-size:1.3rem; background-color:#fff; border-radius:3.2rem; border:0; cursor:pointer; box-shadow:1px 1px 1px #ccc; border:1px solid #E9E9E9; box-sizing:border-box; }
.tab-menu li .tab-link span { position:relative; padding-left:1.2rem; }
.tab-menu li .tab-link span:before { content:""; position:absolute; left:0; top:50%; display:block; width:1.6rem; height:1.6rem;  background-repeat:no-repeat; background-position:center; background-size:100% auto; transform:translateY(-50%); }
.tab-menu li.current .tab-link { border-color:#5B009A; }

/* top-fixed-btns */
.tab-menu.top-fixed-btns { position:fixed; top:4.5rem; left:0; width:100%; height:5.0rem; padding:0 1.0rem; background-color:#F1F1F1; align-items:center; min-width:290px; max-width:768px; margin:0 auto; box-sizing:border-box; }

/* map-filter */
#map-filter { box-shadow:0 1px 3px #ccc; }
#map-filter li .tab-link span { padding-left:2.0rem; }
#map-filter li .tab-link span:before { }
#map-filter li .tab-link.dog-hospital span { }
#map-filter li .tab-link.dog-cafe span { padding-left:1.7rem; }
#map-filter li .tab-link.dog-shop span { padding-left:1.7rem; }
#map-filter li .tab-link.companion-shop span { }

#map-filter li .tab-link.dog-hospital span:before { background-image:url('../img/icons/ic_hospital.svg'); }
#map-filter li .tab-link.dog-cafe span:before { background-image:url('../img/icons/ic_cafe.svg'); background-size:1.5rem auto; }
#map-filter li .tab-link.dog-shop span:before { background-image:url('../img/icons/ic_shop.svg'); background-size:1.4rem auto; }
#map-filter li .tab-link.companion-shop span:before { background-image:url('../img/icons/ic_companion_shop.svg'); width:19px; }

#map-filter li.current .tab-link.dog-hospital span:before { background-image:url('../img/icons/ic_hospital_on.svg'); }
#map-filter li.current .tab-link.dog-cafe span:before { background-image:url('../img/icons/ic_cafe_on.svg'); }
#map-filter li.current .tab-link.dog-shop span:before { background-image:url('../img/icons/ic_shop_on.svg'); }
#map-filter li.current .tab-link.companion-shop span:before { background-image:url('../img/icons/ic_companion_shop_on.svg'); }


/* tail-fixed-btns */
.tab-menu.tail-fixed-btns { position:fixed; left:1.0rem; bottom:6.7rem; right:1.0rem; display:flex; align-items:center; justify-content:center; }
.tab-menu.tail-fixed-btns li .tab-link { min-width:8.6rem; padding:0 1.0rem; }
.tab-menu.tail-fixed-btns li .tab-link span:before { width:1.8rem; height:1.8rem; }

.tab-menu.tail-fixed-btns li .tab-link.view-map span { padding-left:2.0rem; }
.tab-menu.tail-fixed-btns li .tab-link.view-list span { padding-left:1.9rem; }

.tab-menu.tail-fixed-btns li .tab-link.view-map span:before { background-image:url('../img/icons/ic_view_map.svg'); }
.tab-menu.tail-fixed-btns li .tab-link.view-list span:before { background-image:url('../img/icons/ic_view_list.svg'); background-size:1.5rem auto; }

.tab-menu.tail-fixed-btns li.current .tab-link.view-map span:before { background-image:url('../img/icons/ic_view_map_on.svg'); }
.tab-menu.tail-fixed-btns li.current .tab-link.view-list span:before { background-image:url('../img/icons/ic_view_list_on.svg'); }

/* 지도 - 현재위치 , 필터*/
#map .wing_r_action_btn { position:absolute; right:10px; bottom:115px; width:40px; z-index:10; }
#map .wing_r_action_btn .btn { margin-top:5px; }
#map .btn_filter,
#map .btn_current_location { display:block; width:40px; height:40px; border-radius:40px; border:0; outline:none; cursor:pointer; background-repeat:no-repeat; background-position:center; background-size:24px auto; }
#map .btn_filter { background-color: #005dff; background-image:url('../img/icons/ic_filter@2x.png'); }
#map .btn_current_location { background-color:rgba(0,0,0,0.5); background-image:url('../img/icons/ic_current_location@2x.png'); background-size:22px auto; }
#map .btn_current_location.on { background-image:url('../img/icons/ic_current_location_on@2x.png'); }

/* 2) 목록 */
#place-list { background-color:#f1f1f1; }
#place-list .container { padding:6.0rem  1.0rem 5.0rem 1.0rem; }

/* shop-list */
.shop-list { }
.shop-list li { position:relative; display:grid; grid-template-columns:6.5rem 1fr; gap:1.0rem; background-color:#fff; padding:1.5rem; margin-bottom:1.0rem; border-radius:0.7rem; }
.shop-list li .thumb { border-radius:0.5rem; overflow:hidden; aspect-ratio:1; }
.shop-list li .thumb img { width:100%; height:100%; object-fit: cover; }
.shop-list li .info { }
.shop-list li .info .title { font-size:1.6rem; line-height:1.25; margin-bottom:0.5rem; }
.shop-list li .info .title strong { }
.shop-list li .info .title .category { display:inline-block; font-size:1.2rem; color:#9D9D9D; }
.shop-list li .info .business-hours { font-size:1.2rem; line-height:1.35; }
.shop-list li .info .business-hours strong { color:#5B009A; }
.shop-list li .info .address { font-size:1.2rem; line-height:1.35; }
.shop-list li .info .address strong { font-size:1.2rem; vertical-align:middle; margin-right:0.5rem; }
.shop-list li .info .address span { vertical-align:middle; }
.shop-list li .info .address .btn-copy { display:inline-block; width:1.2rem; height:1.2rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_copy.svg'); background-size:100% auto; cursor:pointer; border:0; vertical-align:middle; }

.gm-style-iw { }
.gm-style-iw.gm-style-iw-c { padding:15px 10px !important; }
.gm-style-iw .gm-style-iw-chr { position: absolute; right:0; top:0; }
.gm-style-iw .gm-style-iw-chr .gm-ui-hover-effect { border:0 !important; outline:none; cursor:pointer; }

.gm-style-iw .gm-style-iw-d  { padding:0; }
.gm-style-iw .gm-style-iw-d .map-info-window { display:grid; grid-template-columns:40px 1fr; gap:2px 10px; }
.gm-style-iw .gm-style-iw-d .info-image { position: relative; width: 40px; height: 40px; margin-bottom:7px; }
.gm-style-iw .gm-style-iw-d .info-image img { width:100%; height:100%; object-fit: cover; }
.gm-style-iw .gm-style-iw-d h3.place-name { display:flex; align-items:center; font-size:14px; line-height:1.35; color:#000; font-weight:500; margin-bottom:7px; padding-right: 15px; }
.gm-style-iw .gm-style-iw-d p.t1 { font-size:12px; line-height:1.35; grid-column: 1 / 3; }
.gm-style-iw .gm-style-iw-d p.tel { font-size:12px; line-height:1.35; grid-column: 1 / 3; }


/* 3. 스케쥴 
* * * * * * * * * * * * * * * * * * * */
#schedule { background-color:#f1f1f1; }
#schedule .container { padding:5.0rem  1.0rem 1.5rem 1.0rem;  }

#schedule-category.tab-menu { }
#schedule-category.tab-menu li .tab-link { cursor:default; }
#schedule-category.tab-menu li .tab-link span { font-size:1.2rem; }
#schedule-category.tab-menu li .tab-link span:before { width:0.8rem; height:0.8rem; border-radius:0.8rem; }
#schedule-category.tab-menu li:nth-child(1) .tab-link span:before { background-color:#5B009A; }
#schedule-category.tab-menu li:nth-child(2) .tab-link span:before { background-color:#FF56A7; }
#schedule-category.tab-menu li:nth-child(3) .tab-link span:before { background-color:#FFBD43; }
#schedule-category.tab-menu li:nth-child(4) .tab-link span:before { background-color:#60CDFF; }


.calendar-wr { background-color:#fff; border-radius:0.7rem; padding:2.0rem 1.5rem 6.5rem 1.5rem; box-sizing:border-box; }
.calendar-wr .calendar-top { position:relative; display:flex; justify-content: space-between; margin-bottom:0.7rem; }
.calendar-wr .calendar-top .month-year { font-size:1.6rem; color:#6B7897; line-height:1.45; font-weight:500; }
.calendar-wr .calendar-top .page-btns { display:flex; gap:1.0rem; align-items:center; }
.calendar-wr .calendar-top .page-btns .btn { display:block; width:2.5rem; height:2.5rem; border-radius:3.0rem; border:1px solid #D2D2D2; background-repeat:no-repeat; background-position:center; background-size:0.8rem auto; }
.calendar-wr .calendar-top .page-btns .btn.prev { background-image:url('../img/icons/ic_prev.svg'); }
.calendar-wr .calendar-top .page-btns .btn.next { background-image:url('../img/icons/ic_next.svg'); }

.calendar-wr .calendar-body { position:relative; min-height:calc(100svh - 28.5rem); } 
.calendar-wr .calendar-body .week { display:grid; grid-template-columns:repeat(7, 1fr); border-bottom:1px solid #e8e9ea; }
.calendar-wr .calendar-body .week span { display:flex; justify-content:center; align-items:center; font-size:1.4rem; height:3.2rem; color:#34485E; } 

/* week-cont */
.week-cont { position:relative; /* min-height:calc(100vh - 33.0rem); */ display:grid; grid-template-columns:repeat(1, 1fr); }
.week-cont .row { display:grid; grid-template-columns:repeat(7, 1fr); border-bottom:1px solid #e8e9ea; }
.week-cont .row .col { padding:0.3rem; min-height:5.5rem; box-sizing:border-box; }
.week-cont .row .col .col-wrap { cursor:pointer; height: 100%; }
.week-cont .row .col .col-wrap .date { display:flex; align-items:center; gap:0.2rem; font-size:1.3rem; }
.week-cont .row .col .col-wrap .date em { display:flex; align-items:center; justify-content:center; width:2.0rem; height:2.0rem; border-radius:2.0rem; font-size:1.3rem; color:#555; box-sizing:border-box; font-weight:400; }
.week-cont .row .col .col-wrap .date .tag-category { display:flex; gap:0.2rem; }
.week-cont .row .col .col-wrap .date .tag-category span { display:block; width:0.8rem; height:0.8rem; border-radius:0.8rem; }
.week-cont .row .col .col-wrap .date .tag-category .ca1 { background-color:#5B009A; }
.week-cont .row .col .col-wrap .date .tag-category .ca2 { background-color:#FF56A7; }
.week-cont .row .col .col-wrap .date .tag-category .ca3 { background-color:#FFBD43; }
.week-cont .row .col .col-wrap .date .tag-category .ca4 { background-color:#60CDFF; }

.week-cont .row .col .col-wrap .schedule-wrap { margin-top:0.2rem; }
.week-cont .row .col .col-wrap .schedule-wrap .schedule-li { font-size:1.0rem; line-height:1.35; }
.week-cont .row .col .col-wrap .schedule-wrap .schedule-li.event1 { color:#5B009A; }
.week-cont .row .col .col-wrap .schedule-wrap .schedule-li.event2 { color:#FF56A7; }
.week-cont .row .col .col-wrap .schedule-wrap .schedule-li.event3 { color:#FFBD43; }
.week-cont .row .col .col-wrap .schedule-wrap .schedule-li.event4 { color:#60CDFF; }

/* today */
.week-cont .row .col#today .col-wrap .date em { border:1px solid #7C86A2; font-weight:700; }
/* disable */
.week-cont .row .col.disable .col-wrap .date em,
.week-cont .row .col.disable .col-wrap .schedule-wrap .schedule-li { color:#ccc !important; }
.week-cont .row .col.disable .col-wrap .date .tag-category span { background-color:#ccc !important; }

/* calendar-tail */
.calendar-wr .calendar-tail { position:fixed; left:0; right:0; bottom:8.5rem;  display:flex; align-items:center; justify-content:center; margin-top:1.0rem; z-index:10; }
.calendar-wr .calendar-tail .btn-reg-schedule { display:flex; align-items:center; justify-content:center; width:11.4rem; height:3.2rem; border-radius:3.2rem; border:1px solid #5B009A; background-color:#fff; font-size:1.3rem; }
.calendar-wr .calendar-tail .btn-reg-schedule span { position:relative; padding-left:2.0rem; }
.calendar-wr .calendar-tail .btn-reg-schedule span:before { content:""; position:absolute; left:0; top:0; width:1.9rem; height:1.9rem; background-image:url('../img/icons/ic_reg.svg'); background-size:100% auto; }

/* layer-schedule */
.layer-schedule { position:fixed; left:0; top:0; right:0; bottom:0; height:100svh; background-color:#fff; min-width:290px; z-index:1001; display:none; }
.layer-schedule .layer-top { position:relative; background-color:#9747ff; height:4.8rem; }
.layer-schedule .layer-top h2 { text-align:center; font-size:2.2rem; line-height:1.45; padding-top:0.8rem; color:#fff; }
.layer-schedule .layer-top .btns { position:absolute; top:0; width:4.8rem; height:4.8rem; background-repeat:no-repeat; background-position:center; border:0; cursor:pointer; outline:none; }
.layer-schedule .layer-top .btn-close { left:0; background-image:url('../img/icons/ic_close@2x.png'); background-size:1.5rem auto; }
.layer-schedule .layer-top .btn-add { right:0; background-image:url('../img/icons/ic_add@2x.png'); background-size:2.0rem auto; }
.layer-schedule .layer-top .btn-delete { right:0; background-image:url('../img/icons/ic_delete@2x.png'); background-size:1.8rem auto; }
.layer-schedule .layer-top .btn-modify { right:4.8rem; background-image:url('../img/icons/ic_modify@2x.png'); background-size:2.0rem auto; }
.layer-schedule .layer-top .btn-save { right:0; background-image:url('../img/icons/ic_save@2x.png'); background-size:2.0rem auto; }

.layer-schedule .layer-cont { height:calc(100svh - 4.8rem);  overflow-y:auto; box-sizing:border-box; }
.layer-schedule .schedule-list { }
.layer-schedule .schedule-list li { position:relative; display:flex; flex-direction: column; padding:0.5rem 5.0rem 0.5rem 3.0rem; border-bottom:1px dashed #ddd; }
.layer-schedule .schedule-list li:before { content:""; position: absolute; top: 1.8rem; left: 1.0rem; width: 1.0rem; height: 1.0rem; border-radius: 1.0rem; }
.layer-schedule .schedule-list li strong { font-size:1.5rem; line-height:1.35; font-weight:400; }
.layer-schedule .schedule-list li .time { font-size:1.2rem; line-height:1.35; color:#777; }
.layer-schedule .schedule-list li.category1:before { background-color:#5B009A; }
.layer-schedule .schedule-list li.category2:before { background-color:#FF56A7; }
.layer-schedule .schedule-list li.category3:before { background-color:#FFBD43; }
.layer-schedule .schedule-list li.category4:before { background-color:#60CDFF; }
.layer-schedule .schedule-list li.no-list { text-align:center; padding:5.0rem 0; }

.layer-schedule .schedule-list li .schedule-content { display:flex; flex-direction: column; }

.layer-schedule .schedule-list li .schedule-actions { position:absolute; right:1.0rem; top:50%; transform:translateY(-50%);  display:flex; gap:0.2rem; align-items:center; flex-flow: column; }
.layer-schedule .schedule-list li .schedule-actions .btns { display:flex; align-items:center; justify-content:center; background-color:#5B009A; color:#fff; font-size:1.1rem; font-weight:400; border-radius:0.3rem; outline:none; cursor:pointer; border:0; padding:0.2rem 0.5rem; box-sizing:border-box; }
.layer-schedule .schedule-list li .schedule-actions .btns.btn-delete { background-color:red; }


/* 일정 */
.layer-view-schedule { }
.layer-view-schedule .layer-cont { padding:2.0rem; }
.layer-view-schedule .layer-cont .title { position:relative; padding-left:2.0rem; font-size:1.7rem; line-height:1.45; }
.layer-view-schedule .layer-cont .title:before { content:""; position: absolute; top: 0.7rem; left: 0rem; width: 1.0rem; height: 1.0rem; border-radius: 1.0rem; }
.layer-view-schedule .layer-cont .title.category01:before { background-color:#5B009A; }
.layer-view-schedule .layer-cont .title.category02:before { background-color:#FF56A7; }
.layer-view-schedule .layer-cont .title.category03:before { background-color:#FFBD43; }
.layer-view-schedule .layer-cont .title.category04:before { background-color:#60CDFF; }

.layer-view-schedule .layer-cont dl.cont { display:grid; grid-template-columns:5.5rem 1fr; margin-top:1.5rem; }
.layer-view-schedule .layer-cont dl.cont.member { }
.layer-view-schedule .layer-cont dl.cont.alarm { }

.layer-view-schedule .layer-cont dl.cont dt { color:#777; }
.layer-view-schedule .layer-cont dl.cont dd { font-size:1.4rem; line-height:1.45; }
.layer-view-schedule .layer-cont dl.cont dd .time-group { display:flex; flex-direction: column; }

/* 일정 입력 */
.layer-write-schedule { }
.layer-cont .form-box { }
.layer-cont .form-box dl { display:grid; grid-template-columns:6.0rem 1fr; padding:1.0rem; border-bottom:1px dashed #ddd; }
.layer-cont .form-box dl:last-child { border-bottom:0; }
.layer-cont .form-box dl dt,
.layer-cont .form-box dl dd { display:flex; align-items:center;  }
.layer-cont .form-box dl dd .select-box { width:100%; }
.layer-cont .form-box dl dd .select-box .select { color:#000; }
.layer-cont .form-box dl dd.date-time { display:grid; grid-template-columns:repeat(2, 1fr); gap:0.5rem; }
.layer-cont .form-box dl.memno { display:block; padding:1.5rem 1.0rem; }
.layer-cont .form-box dl.memno dt { margin-bottom:0.5rem; }


/* 4. 프로필 
* * * * * * * * * * * * * * * * * * * */
.wrap.type2 { /* padding-bottom:0; */ padding-top:6.0rem; }
.wrap.type2 #hd .head { min-height: 6.0rem; }
.wrap.type2 .container { min-height: calc(100svh - 14.0rem); padding: 1.5rem 2.0rem; }

.wrap.type2 .tail-fixed-btns { padding:2.0rem; display:grid; grid-template-columns:repeat(2, 1fr); gap:1.0rem; }
.wrap.type2 .tail-fixed-btns .btn-basic { width:100%; font-size:1.4rem; }
.wrap.type2 .tail-fixed-btns .btn-basic.border0 { border:0; }

.wrap.type2 .btn-back { position:absolute; left:1.5rem; top:50%; display:block; width:4.0rem; height:4.0rem; background-repeat:no-repeat; background-position:center;  background-image:url('../img/icons/ic_back.svg'); background-size:3.0rem auto; transform:translateY(-50%); }
.wrap.type2 .btn-notification { position:absolute; right:1.5rem; top:50%; display:block; width:3.0rem; height:3.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_notification.svg'); background-size:2.1rem auto; transform:translateY(-50%); }
.wrap.type2 .btn-notification .new { position:absolute; right:-0.3rem; top:0.1rem; display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; background-color:#FE0707; font-size:1.0rem; border-radius:1.0rem; overflow:hidden; color:#fff; z-index:1; }
.wrap.type2 .btn-close { position:absolute; right:1.5rem; top:50%; display:block; width:3.2rem; height:3.2rem; background-repeat:no-repeat; background-position:center;  background-image:url('../img/icons/ic_page_close.svg'); background-size:90% auto; transform:translateY(-50%); }


#profile .profile-img-wr { position:relative; text-align:center; margin-bottom:1.0rem; }
#profile .profile-img-wr .profile-img { display:block; width:10.0rem; height:10.0rem; border-radius:10.0rem; overflow:hidden; margin:0 auto; }
#profile .profile-img-wr .profile-img img { object-position: 100% 100%; object-fit: cover; display: block; width: 100%; height: 100%; }
#profile .profile-img-wr .btn-modify-thumb { position:absolute; left:50%; top:0; display:block; width:2.0rem; height:2.0rem; background-repeat:no-repeat; background-position:center;  background-image:url('../img/icons/ic_set.svg'); background-size:100% auto; transform:translateX(200%); border:0; cursor:pointer; outline:none; }

#profile .profile-img-wr .profile-change { position:absolute; left:50%; bottom:0.5rem; display:block; margin-left:6.5rem; padding-right:2.5rem; cursor:pointer; }
#profile .profile-img-wr .profile-change:after { content:""; position:absolute; right:0; top:0; display:block; width:3.0rem; height:3.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_arrow_right_link.svg'); background-size:0.8rem auto; }
#profile .profile-img-wr .profile-change .thumbs { display:flex; }
#profile .profile-img-wr .profile-change .thumbs li { width:3.0rem; height:3.0rem; border-radius:3.0rem; overflow:hidden; margin-left:-1.0rem; }
#profile .profile-img-wr .profile-change.none:after { display:none; }


#profile .profile-name { font-size:1.6rem; text-align:center; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
#profile .profile-name strong { }
#profile .profile-name .btn-modify-name { display:inline-block; width:1.8rem; height:1.8rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_modify_name.svg'); background-size:100% auto; border:0; cursor:pointer; }
#profile .user-email { text-align:center; font-size:1.4rem; line-height:1.45; color:#6C6C6C; margin-top:0.5rem; }

#profile .rel-btns { padding:0; margin:0; background-color:transparent; margin-top:3.0rem; }
#profile .rel-btns li { margin-top:1.0rem; }
#profile .rel-btns li .btn-basic { width:100%; height:5.0rem; font-size:1.6rem; }
#profile .rel-btns li .btn-basic.white { border:2px solid #5B009A; color:#5B009A; }
#profile .rel-btns li .btn-basic.gray { background-color:#EBEBEB; color:#5B009A; }

#profile .profile-img-wr .empty-content { text-align:center; padding:2.0rem 0; }




/* pop-wr */
.pop-wr { position:fixed; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.75); z-index:1001; min-width:290px; display:none; }
.pop-wr .pop-box { position:absolute; left:50%; width:24.0rem; top:50%; margin:0 auto; min-height:150px; padding:3.0rem 1.8rem 2.0rem 1.8rem; background-color:#fff; border-radius:1.0rem; overflow:hidden; box-sizing:border-box; transform:translate(-50%, -50%); }
.pop-wr .btn-pop-close { position:absolute; right:1.0rem; top:1.0rem; width:2.0rem; height:2.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_pop_close.svg'); background-size:100% auto; border:0; cursor:pointer; }

.pop-wr .form-box { }
.pop-wr .form-box dl { margin-bottom:1.5rem; }
.pop-wr .form-box dt { font-size:1.3rem; line-height:1.45; color:#6C6C6C; margin-bottom:0.5rem; }
.pop-wr .form-box dd { }

.pop-wr .tail-btns { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-top:2.0rem; }
.pop-wr .tail-btns .btn-basic { width:5.6rem; height:2.4rem;  border:1px solid #5B009A; background-color:#fff; color:#5B009A; border-radius:2.6rem; }
.pop-wr .tail-btns .btn-basic.cancel { color:#666666; border-color:#666666; }

.pop-wr .btn-add-image { display:block; border:0; cursor:pointer; width:8.2rem; height:8.2rem; border-radius:1.0rem; overflow:hidden; background-color:#ECECEC; }
.pop-wr .btn-add-image img { object-fit: cover; width: 100%; height: 100%; }

.pop-wr .form-box dl.add-image dt { text-align:center; margin-bottom:1.0rem; }
.pop-wr .form-box dl.add-image dd .btn-add-image { margin:0 auto; }


/* profile-list */
.profile-list { margin-top:1.5rem; }
.profile-list li { margin-bottom:1.5rem; }
.profile-list li .link { position:relative; display:flex; align-items:center; justify-content:flex-start; width:100%; height:6.0rem; border:1px solid #5B009A; border-radius:0.5rem; box-sizing:border-box; padding:0 1.0rem; gap:2.5rem; font-size:1.6rem; font-weight:500; color:#5B009A; }
.profile-list li .link:after { content:""; position:absolute; right:2.0rem; top:50%; display:block; width:3.0rem; height:3.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_arrow_right_link.svg'); background-size:0.7rem auto; transform:translateY(-50%); }
.profile-list li .link .thumb { width:5.0rem; height:5.0rem; border-radius:5.0rem; overflow:hidden; }
.profile-list li .link .thumb img { object-position: 100% 100%; object-fit: cover; display: block; width: 100%; height: 100%; }
.profile-list li .link .name { }

.profile-list li .btn-add-profile { border-color:#A8A8A8; justify-content:center; color:#9D9D9D; }
.profile-list li .btn-add-profile:after { display:none; }
.profile-list li .btn-add-profile span { position:relative; display:inline-block; padding-left:2.5rem; background-repeat:no-repeat; background-position:left center; background-image:url('../img/icons/ic_profile.svg'); background-size:2.0rem auto; }

/* form-box */
.form-box { }
.form-box .list { }
.form-box .list li { margin-bottom:1.0rem; }
.form-box .list li input.fr-input {  }
.form-box .list li.tel { display:grid; grid-template-columns:1fr 1.0rem 1fr 1.0rem 1fr; }
.form-box .list li.tel span { display:flex; align-items:center; justify-content:center; color:#CBCBCB; }
.form-box .list li.tel .fr-input { text-align:center; }



/* 알림 */
#notification { }
#notification .container { padding-top:0; }

#notification .notification-list { position:relative; overflow-y:auto; height:calc(100svh - 11.0rem); padding-right:2.0rem; margin-right:-2.0rem; }
#notification .notification-list:before { content:""; position:absolute; left:0; right:2.0rem; top:0; display:block; height:1px; background-color:#E7E7E7; }
#notification .notification-list li { position:relative; border-bottom:1px solid #E7E7E7; padding:2.0rem 0.5rem; font-size:1.4rem; line-height:1.45; }
#notification .notification-list li .title { font-size:1.6rem; line-height:1.45; font-weight:700; padding-right:2.0rem; }
#notification .notification-list li .text-content { font-size:1.3rem; line-height:1.45; margin-top:0.5rem; }
#notification .notification-list li .date { font-size:1.2rem; text-align:right; margin-top:1.0rem; color:#6C6C6C; }
#notification .notification-list li .btn-del { position:absolute; right:0; top:1.0rem; display:block; width:2.4rem; height:2.4rem; background-repeat:no-repeat; background-position:left center; background-image:url('../img/icons/ic_del.svg'); background-size:100% auto; cursor:pointer; border:0; border:0; outline:none; }
#notification .notification-list li.empty { text-align:center; border-bottom:0; padding:5.0rem 0; font-size:1.6rem; }
