/* --------------------------------campaign_list_common-------------------------------- */ /* sort 정렬 */ #campaign_list .sorting_wrap {position:absolute; top:.28rem; right:0; z-index:1; display:flex; gap:.88rem; justify-content:space-between} #campaign_list .sorting_wrap select {background:#FFF; border:1px solid #DADADA; font-weight:400; font-size:.88rem; line-height:120%; color:#666; padding:.66rem 5rem .66rem 1.11rem; border-radius:10px; text-align:left; appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; position:relative; background:url(/front/images/common/ico_sort.svg) no-repeat right 1.11rem center} #campaign_list .sorting_wrap select option {font-weight:400; font-size:.78rem; line-height:120%; color:#555} @media screen and (max-width:1024px) { #campaign_list .sorting_wrap {position:unset; margin-bottom:2.28rem; gap:1rem} #campaign_list .sorting_wrap .sort {flex:1 0 0} #campaign_list .sorting_wrap select {width:100%; background:url(/front/images/common/ico_sort.svg) no-repeat 90% center; font-size:1rem} #campaign_list .sorting_wrap select option {font-size:1rem} } /* md */ @media screen and (max-width:767px) { #campaign_list .sorting_wrap select {padding:.94rem 2rem .94rem 1.42rem} } /* sm */ /* list 리스트 */ #campaign_list {margin:8.6rem auto 0} #campaign_list > .inner {width:92%; max-width:1100px; margin:0 auto; position:relative} #campaign_list .title {margin-bottom:2.38rem; font-weight:800; font-size:2.11rem; line-height:2.6rem; color:#2B2B2B} #campaign_list .list {font-size:0; display:flex; flex-wrap:wrap; gap:4rem 2.22rem; margin:0 auto 5.55rem;} #campaign_list .list li {width:calc((100% - 4.44rem)/3); background:#FFF; /* margin-bottom:4.44rem; */ display:inline-block} #campaign_list .fd_box {position:relative; background:#FFF; border:1px solid #DADADA; box-shadow:1rem 1rem 3rem rgba(0,0,0,.1); overflow:hidden; border-radius:1.66rem; display:block} #campaign_list .fd_box figure {padding-bottom:calc(214/340*100%); overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:cover; border-bottom:1px solid #E9E9E9} #campaign_list .fd_box .fd_txt {padding:1.66rem 1.33rem; position:relative} #campaign_list .fd_box .fd_txt h3 {height:4rem; font-weight:600; font-size:1.33rem; line-height:2rem; letter-spacing:-.02em; color:#3A3A3A; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical} #campaign_list .fd_box .fd_label {position:absolute; top:1.25rem; left:1.25rem; background:#2D2D2D; border-radius:2rem; font-weight:400; font-size:.88rem; color:#F0F0F0; width:3.77rem; height:2.11rem; display:flex; justify-content:center; align-items:center} #campaign_list .fd_process {position:absolute; top:-3.33rem; right:1.33rem} #campaign_list .fd_process .pg_info {position:absolute; top:50%; left:50%; z-index:2; transform:translate(-50%,-50%); text-align:center} #campaign_list .fd_process .pg_info .pg_percent {font-size:.88rem; font-weight:700} #campaign_list .fd_process .pg_info .pg_percent span {font-size:1.33rem; font-weight:800} #campaign_list .fd_process .pg_info .pg_comment {font-size:.77rem; color:#3A3A3A; font-weight:500} #campaign_list .fd_process .chart {position:relative; width:4.44rem; height:4.44rem; border-radius:50%; transition:.3s; background:lightgray; display:inline-block} #campaign_list .fd_process .chart:after {content:''; background:#fff; position:absolute; top:50%; left:50%; width:3.77rem; height:3.77rem; border-radius:50%; transform:translate(-50%,-50%)} #campaign_list .fd_process .chart-bar {width:inherit; height:inherit; border-radius:50%} #campaign_list .fd_box .btn_wrap {display:flex; justify-content:space-between; align-items:center; flex-direction:row; height:2.66rem; line-height:2.66rem; background-color:#F5F5F5} #campaign_list .fd_box .btn_wrap [class^="btn_"] {flex:1; color:#3A3A3A; font-size:.77rem; font-weight:500; display:flex; justify-content:center; align-items:center; gap:.55rem; height:100%} #campaign_list .fd_box .btn_wrap [class^="btn_"]:not(:last-child) {border-right:1px solid #E5E5E5} #campaign_list .fd_box.fd_fund .btn_wrap [class^="btn_"] i, #campaign_list .fd_box.fd_volunteer .btn_wrap [class^="btn_"] i {display:inline-block; width:.88rem; height:.88rem; background-size:auto 100%; background-repeat:no-repeat; background-position:center} #campaign_list .fd_box .btn_wrap .btn_like i {background-image:url(/front/images/common/ico_like.svg)} #campaign_list .fd_box .btn_wrap .btn_like.active i {background-image:url(/front/images/common/ico_like_on.svg)} #campaign_list .fd_box .btn_wrap .btn_share i {background-image:url(/front/images/common/ico_share.svg)} #campaign_list .fd_box .btn_wrap .btn_sponsor i {background-image:url(/front/images/common/ico_sponsor.svg)} #campaign_list .fd_box.fd_contest .btn_wrap .btn_contest {display:block; padding:0 1.33rem; position:relative; color:#fff; font-weight:500; font-size:.88rem} #campaign_list .fd_box.fd_contest .btn_wrap .btn_contest::after {content:''; display:block; position:absolute; background:url(/front/images/common/ico_arrow_circleBg.svg) center /100% auto no-repeat; width:1.33rem; height:1.33rem; top:50%; right:1.33rem; transform:translateY(-50%)} #campaign_list .fd_box.fd_contest .btn_wrap .btn_contest strong {font-weight:800} @media screen and (max-width:1024px) { #campaign_list .list li {width:calc((100% - 2.22rem)/2)} #campaign_list .fd_box .fd_txt h3 {font-size:1.3rem; height:3.75rem; line-height:1.875rem} #campaign_list .fd_box .fd_txt {padding:1.4rem 2rem} }/* md */ @media screen and (max-width:767px) { #campaign_list .title {margin-bottom:1rem} #campaign_list .list {gap:2.22rem; margin: 0 auto 2.28rem;} #campaign_list .list li {width:100%} #campaign_list .fd_box {border-radius:2.14rem} #campaign_list .fd_box .fd_label {top:1.72rem; left:1.72rem; font-size:1.14rem; height:2.72rem; width:4.86rem} #campaign_list .fd_box .fd_txt {padding:2.14rem 1.72rem} #campaign_list .fd_box .fd_txt h3 {font-size:1.58rem; height:4.28rem; line-height:2.14rem} #campaign_list .fd_box .btn_wrap {height:3.42rem; line-height:3.42rem} #campaign_list .fd_box .btn_wrap [class^="btn_"] {gap:6px; font-size:1rem} #campaign_list .fd_box.fd_contest .btn_wrap .btn_contest {font-size:1.14rem; padding:0 1.72rem} #campaign_list .fd_box.fd_contest .btn_wrap .btn_contest::after {width:1.72rem; height:1.72rem} #campaign_list .fd_box.fd_fund .btn_wrap [class^="btn_"] i, #campaign_list .fd_box.fd_volunteer .btn_wrap [class^="btn_"] i {width:1.07rem; height:1.07rem} #campaign_list .fd_process {top:-4.54rem; right:1.72rem} #campaign_list .fd_process .chart {width:5.72rem; height:5.72rem} #campaign_list .fd_process .chart:after {width:4.86rem; height:4.86rem} #campaign_list .fd_process .pg_info .pg_percent {font-size:1.14rem} #campaign_list .fd_process .pg_info .pg_percent span {font-size:1.72rem} #campaign_list .fd_process .pg_info .pg_comment {font-size:1rem} }/* sm */ /* 더보기버튼 */ #campaign_list .btn_more{margin:0 auto 6.44rem; padding:0; background:#FFF; border:1px solid #6C6C6C; border-radius:30px; font-weight:400; font-size:1.33rem; line-height:120%; height:3.55rem; text-align:center; letter-spacing:-.03em; color:#6C6C6C; display:block; width:11.6rem; display:flex; justify-content:center; align-items:center; gap:.5rem} #campaign_list .btn_more::after{content:''; display:inline-block; background:url(/front/images/common/ico_more.svg) center center no-repeat transparent; width:1rem; height:1rem} @media screen and (max-width:767px) { #campaign_list .btn_more {margin:0 auto 4rem; font-size:1rem; width:7.86rem; height:3rem; gap:.64rem} #campaign_list .btn_more::after {width:10px; height:10px} }/* sm */ /* --------------------------------campaign_list_common end-------------------------------- */