@charset "utf-8";

/* 모바일 목록 */
@media all and (max-width:767px) {
	.responsive #bo_list .float-left.float-md-none {
		margin-right:1.0rem;
	}
	.responsive #bo_list .na-title {
		margin-bottom:0.14rem;
	}
}

/* 게시판 읽기 */
#bo_v_title {
	font-size:23px;
	font-weight:bold;
	line-height:1.4;
	letter-spacing:-1px;
}
#bo_v_con {
	min-height:200px; 
	word-break:break-all;
	overflow:hidden
}
@media all and (max-width:575px) {
	.responsive #bo_v_title {
		font-size:20px;
		line-height:1.5;
	}
	.responsive #bo_v_con { 
		min-height:140px; 
	}
}

#bo_v_con img {
	max-width:100%;
	height:auto
}
#bo_v_img {
	width:100%;
	text-align:center;
	overflow:hidden;
	zoom:1;
}
#bo_v_img:after {
	display:block;
	visibility:hidden;
	clear:both;
	content:"";
}
#bo_v_img a.view_image {
	display:block;
}
#bo_v_img img {
	margin-bottom:1.0rem;
}

/* 게시판 읽기 : SNS 공유 */
#bo_v_sns_icon { 
	margin:-5px auto; 
}
#bo_v_sns_icon img { 
	width:40px; 
	border-radius:50%; 
	margin:5px;
}

/* 게시판 댓글 : 내용 */
.cmt-reply {
	top:0;
	left:-16px;
}
.by-writer { 
	background:#fbefef !important;
	border-top:1px solid #f6cece !important;
}
.cmt-content {
	word-break:break-all;
	overflow:hidden
}
.cmt-content img {
	max-width:100%;
	height:auto
}

/* 게시판 댓글 : 대댓글, 수정, 삭제 */
.cmt-btn ul { 
	list-style: none; 
	margin: 0; 
}
.cmt-btn ul > li { 
	float: left; 
	font-size:12px;
	padding: 0 10px; 
}
.cmt-btn ul > li::before { 
	float: left; 
	color:#ccc; 
	content: "|"; 
	margin-left:-12px;
}
.cmt-btn ul > li:last-child { 
	padding-right:0;
}
.cmt-btn ul > li:first-child::before, 
.cmt-btn ul > li.no-bar::before { 
	content: ""; 
	margin-left:0; 
}
.cmt-btn ul > li > a { 
	float:left;
	color:#888;
	white-space:nowrap;	
}

/* 게시판 댓글 : 쓰기폼 */
#fviewcomment #wr_content { 
	resize:none; 
}
@media all and (max-width:575px) {
	.responsive .cmt-box {
		border-right:0 !important;
	}
	.responsive #bo_vc_w .cmt-box {
		border-left:0 !important;
		border-radius:0 !important;
	}
	.responsive #bo_vc_login {
		border-left:0 !important;
		border-right:0 !important;
		border-radius:0 !important;
	}
}

/* 게시판 댓글 : SNS 등록 */
#bo_vc_opt ol {	
	margin:0;
	padding:0;
	list-style:none;
	zoom:1; 
	background:#ccc;
	border-radius:3px;
}
#bo_vc_opt ol:after { 
	display:block;
	visibility:hidden;
	clear:both;
	content:""; 
}
#bo_vc_opt ol li { 
	float:left;
	margin:0; 
}
#bo_vc_send_sns ul { 
	margin:0;
	padding:0;
	list-style:none;
	zoom:1; 
}
#bo_vc_send_sns ul:after { 
	display:block;
	visibility:hidden;
	clear:both;
	content:""; 
}
#bo_vc_send_sns ul li {	
	float:left;
	margin:0 1.0rem 0 0;
}
#bo_vc_send_sns input {	
	margin:0 0 0 0.5rem;
}

/* 게시판 쓰기 */
#bo_w .list-group-item {
	padding-left:0;
	padding-right:0;
	border-left:0;
	border-right:0;
}
#bo_w #wr_content { 
	margin-bottom:1.0rem !important;
}
@media all and (max-width:575px) {
	#bo_w .list-group-item {
		padding-left:1.0rem;
		padding-right:1.0rem;
	}
	.responsive #bo_w #wr_content {
		max-height:160px !important;
	}
}


@media (min-width:991px) {
    .wrapper { overflow-x: initial !important; }
    #bo_v_con { overflow: initial !important; }
}


/* 업데이트 여기서부터 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* list-project 리스트 & 본문 스타일 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@media all {
    html {
        /* 스크롤 부드럽게 이동 */
        scroll-behavior: smooth;
    }
    .list-project {
        --list-font-size-pc: 10;
        --list-font-size-mob: 10;
        font-size: min( calc( var(--list-font-size-mob) / 450 * 100vw ), calc(var(--list-font-size-pc) * 1px) );
        display: grid; gap:2em; padding: 0 !important; margin: 0 !important;
        line-height: 1.7;
    }

    /* 최상단 */
    .list-project > .itemV1 { 
        display: grid !important; grid-template-columns: 420px 2fr;
        align-items: center; list-style-type: none;
        border: 1px solid #e3e3e3; 
    }
    .list-project > .itemV1 .img {
        width: 100%; position: relative;   
    }
    .list-project > .itemV1 .chk-box {
        position: absolute; left: 5px; top: 5px; z-index: 1; 
    }
    .list-project > .itemV1 .img .img-item {
        display: block; height: 0; padding-bottom: calc(600 / 420 * 100%);
        overflow: hidden; position: relative;
    }
    .list-project > .itemV1 .img img {
        position: absolute; left: 50%; top: 50%;
        transform:translate(-50%,-50%);
        width: 100%;
        border-radius: 0 !important;
    }
    
    /* itemBox */
    .list-project .itemBox {
        /* textBox2 textWrap1 패딩 */
        --textBox-padding-left:min(calc(40 / 1920 * 100vw),40px);
        --textBox-padding-right:2em;

        padding: 1em 2.5em 1em 4em;
        border-left: 1px solid #eee;
    }
    /* itemBox - textBox1(상단내용) */
    .list-project .itemBox .textBox1 {
        border-bottom: 1px solid #dcdcdc; 
        padding-left: 1em; padding-bottom: 2em;
    }
    .list-project .itemBox .textBox1 > .text-sub {
        grid-column: 1/3; color: #0066b2;
        font-size: 2em; font-weight: bold; line-height: 1.4;
        padding-bottom: 0.2em;
    }
    .list-project .itemBox .textBox1 > .title {
        font-size: 4em; font-weight: bold; line-height: 1.4;
        color: #000;
    }
    .list-project .itemBox .textBox1 > .title-v1 {
        font-size: 3.5em; font-weight: bold; line-height: 1.4;
        color: #1b1b1b;
    }
    
    .list-project .itemBox .textBox3 {
        border-bottom: 1px solid #dcdcdc;
        padding: 2em 0; display: grid; gap:2.5em;
        padding-left: var(--textBox-padding-left);
        padding-right: var(--textBox-padding-right);
    }
    .list-project .itemBox .textBox3 .item-v1 .dt-v1 {
        font-size: 1.5em; color: #535353;
    }
    .list-project .itemBox .textBox3 .item-v1 .dd-v1.plus-item {
        display: flex; align-items: baseline; gap:1.6em;
    }
    .list-project .itemBox .textBox3 .item-v1 .dd-v1 .plus-item-v1 {
        display: flex; align-items: baseline; gap:0.5em;
    }
    /* 퍼센트 */
    .list-project .itemBox .textBox3 .item-v1 .dd-v1 .Cumulative_Percent {
        font-size: 2.5em; color: #ffac22;
    }
    .list-project .itemBox .textBox3 .item-v1 .dd-v1 .plus-item-v1 .big {
        font-size: 4em; color: #434343; line-height: 1;
    }
    .list-project .itemBox .textBox3 .item-v1 .dd-v1 .plus-item-v1 .small {
        font-size: 1.5em; color: #666; line-height: 1;
    }
    .list-project .itemBox .textWrap1 {
        padding: 12px 0 0;
        padding-left: var(--textBox-padding-left);
        padding-right: var(--textBox-padding-right);
        display: flex; justify-content: space-between;
        gap:2em; align-items: center;
    }
    .list-project .itemBox .textWrap1 .listV1 {
        padding-left: 0 !important;
        margin: 0 !important;
        list-style-type: none !important;
        font-size: 1.5em; color: #434343;
    }
    .list-project .itemBox .textWrap1 .listV1 > li {
        display: flex !important; gap:2.3em;
    }
    .list-project .itemBox .textWrap1 .listV1 > li:not(:last-child) {
        margin-bottom: 0.3em;
    }
    .list-project .itemBox .textWrap1 .box-v1 {
        --box-v1-height:50px;
        display: flex; height: var(--box-v1-height); align-items: stretch;
        gap:1em;
    }
    .list-project .itemBox .textWrap1 .box-v1 #sns_gongyu {
        width: var(--box-v1-height); border-radius: 8px;
        font-size: 1.8em;
    }
    .list-project .itemBox .textWrap1 .box-v1 .more > a {
        display: block; color: #fff; background: #ffac23;
        font-size: 2em; line-height: var(--box-v1-height);
        border-radius: 8px; font-weight: bold;
        padding: 0 min(calc(60 / 1920 * 100vw),60px);
    }

    /* 네비게이션 */
    .list-project #tab_navV1 {
        position: sticky;  top:50px; z-index: 999;
        background: #fff; width: 100%;
        font-size: 1.6em; display: flex; gap:1em; padding: 1em 0;
        font-weight: 500;
    }
    .list-project #tab_navV1 .tab {
        padding:0.4em 1em; text-align: center;
		border-radius:0.3em; min-width: 9.4em;
        border: 1px solid #0066b2; color: #333;
    }
    .list-project #tab_navV1 .tab.active {
        background: #0066b2; color: #fff;
    }

    /* 단체 소개 ~ 후원자 선물 */
    .list-project .view-content-inner { 
        font-size: 16px; padding: 0 0 1.5em; 
        display: grid; grid-template-columns: 2fr 1fr;
        gap:1.5em;
    }
    .list-project .view-content-inner .box-inner .box1 .title1 {
        font-size: 1.8em; border-bottom: 1px solid #d2d2d2;
        padding: 0.7em; line-height: 1.4; position: relative;
    }
    .list-project .view-content-inner .box-inner .box1 .title1:before {
        content: ''; position: absolute; left: 0; top: 0.95em; width: 6px;
        height: 1em; background: #0066b2;
    }
    .list-project .view-content-inner .box-inner .box1 .title1.plus-item {
        display: flex; gap:1em; justify-content: space-between;
    }
    .list-project .view-content-inner .box1 .link-v1 {
		display: block; color: #fff; font-weight: bold; font-size: 18px;
		background: #0066b2; text-align: center;
        padding:0.5em min(calc(50 / 1920 * 100vw),50px);
        border-radius: 0.3em;
	}
    .list-project .view-content-inner .box1 .link-v1 > i { margin-left: 0.3em; }
    .list-project .view-content-inner .box-inner .box1:not(.last) {
        margin-bottom: 3em; padding-bottom: 2em;
    }
    .list-project .view-content-inner .box-inner .box1 .box2:not(.last) {
        margin-bottom: 3em;
    }
    .list-project .view-content-inner .box1 .title1 { 
        font-size: 1.2em; margin-bottom: 1.4em;
        font-weight: bold;
    }
    .list-project .view-content-inner .box1 .jilmun {
        position: relative; margin-bottom: 1em;
        line-height: 1.4;
    }
	.list-project .view-content-inner .box1 .guideBox {
		padding-left: 2em; font-size: 16px; margin-bottom: 2.5em;
	}
	.list-project .view-content-inner .box1 .guideBox.last {
		margin-bottom: 0;
	}
	.list-project .view-content-inner .box1 .guide_title {
		font-weight: bold; font-size: 1.2em; color: #313131; line-height: 1.4;
		padding-bottom: 0.5em;
	}
	.list-project .view-content-inner .box1 .guide_text {
		color: #888; padding-left: 2em; line-height: 1.8;
	}
	.list-project .view-content-inner .box1 .guide_text ol {
		color: #515151; padding-left: 1em !important; 
	}
	.list-project .view-content-inner .box1 .guide_text .important {
		color: #0066b2;
	}
	.list-project .view-content-inner .box1 .guide_title > i { margin-right: 0.2em; }
    .list-project .view-content-inner .box1 .dapbeon {
        position: relative; padding-left: 2em;
    }
    .list-project .view-content-inner .box1 .dapbeon:before {
        content: 'A'; position: absolute; left: 0; top: -0.4em; font-weight: bold;
        font-size: 1.5em; width: 1em; text-align: center;
    }
    
    .list-project .view-content-inner .box-sticky {
        position: sticky; top: 150px; 
    }
    
    /* 게시물 없을 때 */
    .list-none {
        text-align: center;
    }
    
     
}
@media (max-width:1400px) {
    .list-project .view-content-inner {
        grid-template-columns: 1fr 1fr;
    }
	.list-project .view-content-inner .box1 .guideBox {
		padding-left: 0.5em;
	}
	.list-project .view-content-inner .box1 .guide_text {
		padding-left: 1.2em;
	}
    .list-project .view-content-inner .box-inner .box1 .title1.plus-item {
        display: grid; justify-content: initial;
    }
}
@media (1050px <= width <= 1400px) {
    .list-project > .itemV1 {
        grid-template-columns: 1fr 1fr;
    }
	.list-project .itemBox .textBox1 > .title {
		font-size: 3.4em;
	}
	.list-project .itemBox .textBox1 > .title-v1 {
		font-size: 3em;
	}
    .list-project .itemBox .textWrap1 {
        display: grid; justify-content: initial;
    }
	.list-project .itemBox .textWrap1 .box-v1 .more {
        flex:1; text-align: center;
    }
}
@media (max-width:1050px) {
    .list-project > .itemV1 {
        grid-template-columns:1fr;
    }
    .list-project .itemBox {
        padding: 2em;
        border-left: none; border-top: 1px solid #eee;
    }
    .list-project .itemBox .textBox1 > .title {
        font-size: 2.8em; margin-bottom: 0.3em;
    }
    .list-project .itemBox .textBox1 > .title-v1 {
        font-size: 2.4em;
    }
    .list-project #tab_navV1 { font-size: 1.6em; gap:0.5em; }
    .list-project #tab_navV1 .tab {
        flex:1; min-width: initial; padding: 0.8em 0.5em;
    }
    .list-project .view-content-inner { grid-template-columns: 1fr; }
    .list-project .view-content-inner .box1 { line-height: 1.6; }
}
@media (max-width:768px) {
    .list-project .itemBox .textWrap1 {
        display: grid; justify-content: initial;
    }
    .list-project .itemBox .textWrap1 .box-v1 .more {
        flex:1; text-align: center;
    }
    .list-project #tab_navV1 { 
        position: fixed; top: auto; left: 0; bottom: 0;
        padding:5px;
    }
    .list-project #tab_navV1 .tab {
        padding: 0 0.3em; height: 40px; line-height: 40px;
        flex:auto;
    }
    #footer { padding-bottom: 50px; }
    #nt_sidebar_move { bottom: 50px !important; }
}
@media (max-width:580px) {
    .list-project #tab_navV1 { font-size: 1.4em; gap:0.2em; }
	.list-project .view-content-inner .box-inner .box1 .title1 {
		font-size: 1.4em;
	}
	.list-project .view-content-inner .box1 .link-v1 {
		font-size: 16px;
	}
	.list-project .view-content-inner .box1 .guideBox {
		font-size: 15px;
	}
	.list-project .view-content-inner .box1 .guide_title {
		font-size: 1.1em;
	}
}









/* 후원하기 스타일 ----------- */
@media all {
    .form-support {
        --font-size-pc: 10;
        --font-size-mob: 10;
        --border-color:#dcdcdc;
        --size1: 3.4em;
        font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) );
        margin: 4em 0; 
    }
	/* 완료중이면 후원하기 지우기 */
	.form-support.hidden { display: none !important; }
    .form-support .title-v1 {
        font-size: 1.8em; margin-bottom: 1em;
    }
    .form-support .title-v1 > i {
        color: #0066b2; font-size: 1.4em; margin-right: 0.2em;
    }
    .form-support .box-list {
        font-size: 1.6em; border: 1px solid var(--border-color);
        margin-bottom: 2em; background: #fafcff; padding:1.4em 1em;
    }
    .form-support .box-list > ul {
        display: grid !important; gap:1.5em;
        margin: 0 !important; padding: 0 !important;
    }

    /* 추가 및 수정 230201 시작 */
    .form-support .box-list > ul > li:not(.text) {
        flex:1; background: #fff; position: relative;
        border: 1px solid var(--border-color); border-radius: var(--size1);
        overflow: hidden;
    }
    .form-support .box-list > ul > li.text {
        list-style: none; justify-self: center; 
        font-size: min(calc(14 / 450 * 100vw),15px);
        line-height: 1.5;
        color: #535353;
    }
    /* 추가 및 수정 230201 끝 */

    .form-support .box-list > ul > li .icon1 {
        position: absolute; left: 0; top: 0; background: #d2d2d2; 
        width: var(--size1); height: var(--size1); line-height: var(--size1); text-align: center;
        border-radius: var(--size1);
    }
    .form-support .box-list > ul > li .icon1 i {
        color: #fff; font-size: 1.4em;
    }
    .form-support .box-list > ul > li .input1 {
        width: 100%; height: var(--size1); line-height: var(--size1); 
        padding-left: calc( var(--size1) + 1em );
    }
    .form-support .box-list #btn_submit {
        background: #fff; color: #0066b2; margin-top: 2em;
        border: 1px solid #0066b2; font-weight: 500;
        padding: 0.7em 2.6em; border-radius: 0.5em;
    }
    .form-support .box-list #btn_submit:hover {
        background: #0066b2; color: #fff;
    }

    .form-support #info_gude_v1 { 
        margin: 0; padding-left: 1em; line-height: 1.8;
        color: #000; list-style-type: square;
    }
}

.agreeType1 { 
	display:flex; align-items:center; gap:0.5em; color: #777; font-weight: bold; margin-top: 0.5rem; 
	padding-left: 2em;
}
.agreeType1.admin { justify-content:center; }

/* 모달 */
.modal-backdrop { z-index: 2000; }
.modal { z-index: 9999; }
.modal-body { height: 400px; position: relative; }
.modal-body > * { position: absolute; left: 0; top: 0; padding: 10px 15px 30px !important; overflow-y: auto; height: 400px; line-height: 1.4; }
.modal-title { font-size: 18px; color: #000; }


/* 후원자리스트 스타일 */
@media all {
    .form-list-of-supporter {
        --font-size-pc: 10;
        --font-size-mob: 10;
        --border-color:#dbe7fd;
        font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) );
        padding: 2em 0 6em;
    }
    .form-list-of-supporter .title-v1 {
        font-size: 1.8em; margin-bottom: 1em; display: flex; align-items:center;
    }
    .form-list-of-supporter .title-v1 > i {
        color: #0066b2; font-size: 1.6em; margin-right: 0.35em;
    }
    .form-list-of-supporter .title-v1 b { color: #ff0000; margin-left: 0.3em; }
    .form-list-of-supporter .box-list-wrap {
        border-top: 1px solid var(--border-color);    
        font-size: 1.6em;
    }
    .form-list-of-supporter .box-list {  
        border-left: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
        display: grid; grid-template-columns: 1fr;
        align-items: center; list-style-type: none !important;
        margin: 0 !important; padding: 0 !important;
    }
    .form-list-of-supporter .box-list > li {
        position: relative; padding: 0.8em; text-align: center;
        background: #fafcff; color: #626262; height: 100%;
    }
    .form-list-of-supporter .box-list > li.item-date {
        color: #1b54a4;
    }
    .form-list-of-supporter .box-list > li.item-delete {
        padding-right: max(0.8em,calc(30 / 1920 * 100vw));
    }
    .form-list-of-supporter .box-list > li.item-delete > a {
        display: inline-block; color: #fff; background: #1b54a4;
        font-size: 0.875em; padding: 0.5em 1.5em; border-radius: 2em;
    }

    .cancel-comment {
        display: inline-block; color: #fff; background: #c10101 !important;
        font-size: 0.875em; padding: 0.5em 1.5em; border-radius: 2em;

    }
}
@media (max-width:991px) {
    .form-list-of-supporter .box-list {
        grid-template-columns: 1fr; padding: 0.4em 0;
    }
    .form-list-of-supporter .box-list > li { padding: 0.4em; }
    .form-list-of-supporter .box-list > li:not(.none-bar):after {
        display: none;
    }
}

/* 여기까지 업데이트 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */