@charset "utf-8";

/* **************************************** *
* 공통 레이아웃
* **************************************** */
#content{margin:0 auto; padding-top:80rem; padding-bottom:110rem; max-width:450rem;}
#content:has(#footer){padding-bottom:0;}
.content-wrap{position:relative; overflow:hidden; width:100%; margin-right:auto; margin-left:auto; padding-right:20rem; padding-bottom:25rem; padding-left:20rem; /* z-index:2; :*/;}
section .content-wrap{padding-bottom:0;}

/* **************************************** *
* 서브페이지
* **************************************** */
/* 커뮤니티 */
#content.commu{padding-bottom:50rem;}
#content.commu:has(.content-tab){padding-top:55rem;}
#content.commu section{padding:40rem 0;}
#content.commu section:last-child{padding-bottom:0;}

.content-tab{border-top:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1;}
.tabs > li{padding:9rem 14rem; font-weight:400; font-size:15rem; color:#a1a1a1; white-space:nowrap;}
.tabs li.active{font-weight:700; color:var(--c-01);}

.commu-recomm,
.content-slide,
.commu-banner{padding-top:0 !important;}
.content-slide{padding-bottom:0 !important;}
.commu-main-list__thum{overflow:hidden;height:86rem;margin-right: 15rem;min-width:86rem;border-radius:5rem;}
.commu-main-list__thum img{display:block; width:100%; height:100%; object-fit:cover;}
.commu-main-list__item + .commu-main-list__item{border-top:1px solid #ebebeb;}
.commu-main-list__item{padding:16rem 0rem;}
.commu-main-list__item > i{margin-right:20rem; font-weight:800; font-size:17rem; color:#dbdbdb; min-width:16rem;}
.commu-main-list__item:first-child{padding-top:0;}
.commu-main-list__info > strong{line-height:1.3;margin-top:8rem;color:var(--b-01);word-break: keep-all;}
.commu-main-list__info{width:100%;}
.commu-main-list__info{width:100%;}

.swiper-tabs{display:flex; align-items:center; overflow-x:scroll;}
.content-slide .swiper-slide{border-radius:0;}
.commu-expert{padding-bottom:40rem;}
.expert-list__item{display:flex; align-items:center; padding:18rem 0; background:var(--f); text-align:center; border-radius:10rem; flex-direction:column; align-content:center;}
.expert-list{display:flex; gap:8rem;}
.expert-list__item .cmn-thum{width:75rem; height:75rem;}
.expert-list__item .tag-list{display:flex; justify-content:center; align-items:center; margin-top:7rem; gap:0rem 5rem; flex-wrap:wrap;}
.expert-list__item > strong{margin-top:10rem; font-size:16rem; color:var(--b-01);}
.expert-list__reply{margin-top:17rem; padding:2rem 5rem; border:1px solid #ddd; font-size:12rem; border-radius:4rem;}
.expert-list__reply i{margin-left:2rem; font-weight:600;}
a.btn-write{position:fixed; right:10rem; bottom:80rem; z-index:999; width:53rem; height:53rem; background:var(--c-02) url(../img/ic-write.svg) no-repeat 49% 49%; background-size:16rem; font-size:0; border-radius:100%;}

/* 커뮤니티 리스트 */
.commu-user .cmn-thum{position:absolute; left:0; width:37rem; height:37rem; background-size:16rem;}
.commu-item{position:relative; padding-top:20rem; padding-bottom:20rem; padding-left:46rem;}
.commu-list{position:relative; padding-top:25rem !important;}
.commu-list__inr > strong{color:var(--b-01);}
.commu-item > strong{display:-webkit-box; font-size:16rem; color:var(--b-01);}
.commu-item + .commu-item{border-top:1px solid #eee;}
.commu-item:first-child{padding-top:0;}
.commu-list__inr .tag-list{margin-top:1rem;}
.commu-info{display:flex; align-items:center; position:relative; margin-top:30rem;}
.commu-info__inr{display:flex; align-items:flex-start; position:absolute; right:0rem;}
.commu-info > span{width:18rem; height:18rem; background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}
.commu-info__inr li{display:flex; align-items:center; position:relative; font-weight:300; font-size:12rem; color:#B6B6B6;}
.commu-info__inr li:first-child::after{content:""; display:block; width:3rem; height:3rem; margin:0rem 5rem; background:#ddd; border-radius:100%;}
.commu-item > p{margin-top:5rem;}
.commu-list__thum,
.commu-item > strong{margin-top:17rem;}
.commu-list__thum{overflow:hidden; border-radius:10rem;}

.btn-like{width:20rem !important; margin-right:16rem; background-image:url(../img/ic-heart.svg);}
.btn-like.on{background-image:url(../img/ic-heart_on.svg);}
.btn-comment{background-image:url(../img/ic-comment.svg);}

/* 글쓰기 */
.sec-line{display:block; height:5px; background:#F5F5F5; border-top:1px solid #EAEAEA;}
.sec-line--v2{display:block; border-bottom:1px solid #ededed;}

.commu-view .commu-item{padding-bottom:40rem; padding-left:0;}
.commu-view .commu-user{padding-left:47rem;}
.commu-view .commu-info{margin:0; padding:13rem 0rem;}
.commu-view .commu-item > strong{font-size:17rem; word-break:auto-phrase;}
.commu-reply .commu-item{padding:20rem 0rem; padding-left:47rem !important;}
.commu-user__inr > i{display:block; line-height:1.2; font-size:12rem; color:#b3b3b3;}
.commu-reply  .commu-user{padding-left:0;}
.commu-reply .commu-item > p{margin-top:7rem; font-size:14rem;}
.commu-reply .commu-item .commu-item{padding:0; padding-top:25rem; border:0;}
.commu-user__inr > strong{font-size:14rem; color:var(--b-01);}
.commu-item.new .commu-user__inr > strong{position:relative;}
.commu-item.new .commu-user__inr > strong::after{content:"new"; margin-left:2rem; font-size:9rem; color:var(--c-02); text-transform:uppercase; vertical-align:text-top;}
.commu-item.new{display:none;}
.commu-reply .commu-item > p + *{margin-top:4rem;}

.reply-box textarea{height:55rem; padding:8rem 10rem; border:0; font-size:14rem; border-radius:0;}
.reply-box{display:none; position:relative; border:1px solid #E5E5E5;}
.reply-box.on{display:block; height:90rem; margin-top:9rem;}
.reply-box__btn{position:absolute; right:15rem; bottom:13rem; width:auto; font-weight:800; color:#cdcdcd;}
.reply-box__btn.on{color:#656565;}

.btn-reply{font-size:12rem; color:#c3c3c3; text-align:left;}
.btn-reply.hide{display:none;}
.btm-fix{position:fixed; bottom:0; z-index:10; width:100%;}

#reply-input{display:flex; align-items:center; box-shadow:0px -1px 10px 0px rgba(0, 0, 0, 0.07);}
#reply-input > figure{position:absolute; left:10rem;}
#reply-input input{width:100%; padding-left:46rem; border:0; border-top:1px solid #eee; font-size:14rem; border-radius:0;}
#reply-input button{position:absolute; right:0; width:60rem; font-weight:700;}

/* 글쓰기 */
.commu-write .commu-write__tit{padding-left:0; border:0; border-bottom:1px solid #e5e5e5; border-radius:0;}
.commu-write__cont{height:40vh; padding-top:10rem; padding-left:0; border:0; border-radius:0;}
.commu-write .swiper-tabs{overflow:visible; margin:30rem 0rem; gap:10rem;}
.commu-write .swiper-tabs li{position:relative; border-radius:6rem;}
.commu-write input[type="text"]::placeholder,
.commu-write textarea::placeholder{color:#B6B6B6!important;}
.commu-write__photo{display:flex; align-items:center; position:relative; padding:20rem 20rem; border-top:1px solid #eee; font-weight:500; font-weight:400; color:var(--b-01); text-align:left;}
.commu-write__photo i{width:22rem; height:30rem; margin-right:10rem; background:url(../img/ic-camera.svg) no-repeat 50% 50%;}
.commu-write__btm  input{width:auto; width:calc(100% - 40rem); margin:0 20rem; padding-left:0; border:0; border-top:1px solid #eee; border-radius:0;}
.commu-write__delate{position:absolute; top:-7rem; right:-7rem; width:23rem; height:23rem; background-color:var(--c-02); background-position:50% 50%; border-radius:40rem; background-image:url(../img/common/ic-cancle_w.svg); background-repeat:no-repeat;}
.commu-write__img{overflow:hidden; border-radius:7rem;}

/* 솔루션 */
#content.solution{padding-bottom:80rem;}
.solution-tit img{height:124rem;}
.solution .sec-tit{display:block; margin-top:20rem; margin-bottom:0rem;}
.solution-write__txt{margin-top:9rem; min-height:150rem;}

/* 솔루션 답변 */
*[class^="talk-con"]{display:flex; justify-content:flex-end; align-items:flex-start; position:relative;}

.solution-tit{padding-top:20rem;}
.solution .sec-tit span{border-bottom:1px solid; font-weight:600; color:var(--c-01);}

.talk-con__txt{display:flex; align-items:flex-start; width:100%; padding:18rem; border-radius:10rem; max-width:300rem; flex-direction:column;}
.talk-con--reply .talk-con__txt{background:var(--c-01); color:var(--f);}
.talk-con .talk-con__txt{background:#F5F5F5;}
.talk-con--reply .cmn-thum{width:35rem; height:35rem; border:1px solid #ddd;}
.talk-con--reply .cmn-info__user{position:absolute; top:0; left:0;}
.talk-wrap .cmn-info__user strong{font-size:13rem;}
.talk-con--reply{padding-top:31rem;}
.talk-wrap{display:flex; align-items:stretch; margin-top:25rem; flex-direction:column; gap:10rem;}
.talk-con__btn{display:flex; justify-content:flex-start; width:100%; margin-top:35rem; flex-direction:column; gap:6rem;}
.talk-con__btn > *{padding:14rem 0rem; background:#fff; font-weight:700; font-size:15rem; color:var(--c-01); border-radius:6rem;}
.talk-btn--c{color:#fff;}
.talk-con--reply .expert-list{display:grid; grid-template-columns:1fr 1fr; max-width:300rem;}
.talk-con--reply .expert-list__item{border:1px solid #eee; flex:50%;}
.talk-con--reply:has(.expert-list){padding-top:0rem;}
.talk-con--reply .select-btn::after{background-image:url(../img/common/arrow-basic_w.svg);}
.talk-con--reply .select-btn{color:rgba(255,255,255,0.6)!important; border-color:rgba(255,255,255,0.3);}
.talk-con__txt > input{margin-top:11rem; background:none; color:#fff; border-color:rgba(255, 255, 255, 0.3);}
.talk-con__txt > .select-wrap{margin-top:5rem;}
.talk-con--reply .select-btn.on{color:#fff !important;}
.talk-con--reply .expert-list__item.on{border:3rem solid var(--c-01);}
.talk-con__txt > input:focus{border-color:rgba(255, 255, 255, 0.3);}

/* 솔루션 결제 */
.solution-pay .sec-line{margin-top:30rem; margin-bottom:30rem;}
.solution-pay .solution-item__inr > i{font-weight:500; color:#a1a1a1;}
.solution-pay .solution-item__inr  strong > i{margin-left:3rem; color:var(--b-01);}
.solution-pay .solution-item__inr strong{font-size:17rem;}
.solution-pay .solution-item__inr em{display:block; margin-top:1rem; font-weight:800; font-size:15rem;}
.solution-pay .solution-item__inr em i{margin-left:4rem; font-weight:400; text-decoration:line-through;}