@charset "utf-8";

.list-none { font-size: 16px; padding: 3em 0; }


/* list-project 리스트 & 본문 스타일 */
@media all {
    .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; 
    }
    .list-project .view-content-inner { font-size: 1.6em; padding: 1.5em 0; }
    .list-project .view-content-inner .box1 { padding: 4em 0; }
    .list-project .view-content-inner .box1:not(.border-none) {  
        border-bottom: 1px solid #d2d2d2;
    }
    .list-project .view-content-inner .box1 .title1 { font-size: 1.2em; margin-bottom: 1.4em; }
    
    /* 게시물 없을 때 */
    .list-none {
        text-align: center;
    }
    
    .list-project > li { 
        display: grid !important; grid-template-columns: 420px 2fr;
        align-items: center; list-style-type: none;
        border: 1px solid #e3e3e3; 
    }
    
    /* 썸네일 - 리스트 */
    .list-project > li .img {
        width: 100%; position: relative;   
    }
    .list-project > li .chk-box {
        position: absolute; left: 5px; top: 5px; z-index: 1; 
    }
    .list-project > li .img .img-item {
        display: block; height: 0; padding-bottom: calc(600 / 420 * 100%);
        overflow: hidden; position: relative;
    }
    .list-project > li .img img {
        position: absolute; left: 50%; top: 50%;
        transform:translate(-50%,-50%);
        width: 100%;
        border-radius: 0 !important;
    }
    
    /* itemBox */
    .list-project .itemBox {
        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;
        display: grid; grid-template-columns: 1fr auto;
        align-items: end;
    }
    .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: #313131;
    }
    .list-project .itemBox .textBox1 > .more > a {
        display: block; color: #fff; background: #0066b2;
        font-size: 1.6em; padding: 0.6em 2.1875em 0.7em;
        border-radius: 2em;
    }
    .list-project .itemBox .textBox1 > .more > .move_down {  
        background: #ff0000;
    }
    .list-project .itemBox .textBox1 > .more > .move_down > i { margin-left: 0.5em; }
    /* itemBox - textBox2(하단내용) */
    .list-project .itemBox .textBox2 {
        font-size: 1.6em; padding: 1.25em;
        display: grid; grid-template-columns: 1fr; gap:2em; 
        align-items: start;
    }
    .list-project .itemBox .textBox2 .listV1 {
        list-style-type: none !important; padding: 0 !important; margin: 0 !important;
    }
    .list-project .itemBox .textBox2 .listV1 > li {
        padding-left: 1.1em; position: relative; color: #959595;
        line-height: 1.4;
        display: grid !important; grid-template-columns:1fr 2fr; gap:0 2.2em;
    }
    .list-project .itemBox .textBox2 .listV1 > li:not(:last-child) {
        margin-bottom: 0.4em;
    }
    .list-project .itemBox .textBox2 .listV1 > li::before {
        content: '■'; position: absolute; left: 0; top: 0.5em; color: #0066b2;
        font-size: 0.5em;
    }
    .list-project .itemBox .textBox2 .listV1 > li > span {
        display: block;
    }
    .list-project .itemBox .textBox2 .inner2 {
        display: grid; gap:0.8em; width: 600px;
    }
    .list-project .itemBox .textBox2 .inner2 .cost-now {
        display: block;
    }
    .list-project .itemBox .textBox2 .inner2 .cost-now .price {
        font-size: 1.125em;
    }
    .list-project .itemBox .textBox2 .inner2 .cost-now .unit {
        color: #959595;
    }
    .list-project .itemBox .textBox2 .inner2 #gauge {
        background: #e5e5e5; height: 1em; width: 100%;
        border-radius: 1em; overflow: hidden;
    }
    .list-project .itemBox .textBox2 .inner2 #gauge .bar {
        display: block; background: #fab037; height: 100%; border-radius: inherit;
    }
    .list-project .itemBox .textBox2 .inner2 .box1 {
        display: flex; justify-content: space-between; width: 100%;
    }
    .list-project .itemBox .textBox2 .inner2 .box1 .cost-goal .gauge {
        color: #ec0e6f;
    }
    .list-project .itemBox .textBox2 .inner2 .box1 .deadline .num {
        color: #0066b2;
    }    

    /* more */
    .list-project.more {
        color: #fff; display: block; text-align: center; margin-top: 6.6em;
    }
    .list-project.more > a {
        display: inline-block; background: #0066b2; color: #fff;
        font-size: 1.5em; padding: 1em 4em;
    }

    #index .section3 .list-project > li[data-scroll="out"] {
        opacity: 0.5; transform: translateY(15%);
    }
}
@media (max-width:1400px) {
    .list-project > li {
        grid-template-columns: 400px 1fr;
    }
}
@media (max-width:1200px) {
    .list-project > li {
        grid-template-columns:1fr;
    }
    .list-project .itemBox {
        padding: 2em 2.5em 2em 4em;
        border-left: none; border-top: 1px solid #eee;
    }
}
@media (max-width:991px) {
    .list-project .itemBox {
        padding: 2em;
    }
    .list-project .itemBox .textBox1 {
        grid-template-columns: 1fr;
    }
    .list-project .itemBox .textBox1 > .title {
        font-size: 3em;
    }
    .list-project .itemBox .textBox1 > .text-sub {
        grid-column: initial;
    }
    .list-project .itemBox .textBox1 > .more > a {
        display: inline-block; margin-top: 1em;
    }
    .list-project .itemBox .textBox2 {
        grid-template-columns: 1fr; justify-content: center;
        padding: 1.25em 0;
    }
    .list-project .itemBox .textBox2 .listV1 > li {
        gap:1.5em; grid-template-columns: 1fr 2fr;
    }
    .list-project .itemBox .textBox2 .listV1 > li::before {
        top: 0.6em;
    }
    .list-project .itemBox .textBox2 .inner2 { width: 100%; }
}