@charset "utf-8";

/* top_img */
.top_img .inner {background:linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url(../img/performance/performance_top_bg.jpg)no-repeat center center;
                background-size:cover;}

/* contents */
.contentW {width:100%; background:#fff;}

.contentW .inner {width:58.5rem; margin:0 auto; padding:5rem 0;}
.contentW .inner:after {content:''; display:block; clear:both;}

.contentW .inner .content {overflow: hidden;}
.contentW .inner .content .cont {position:relative; width:32%; overflow:hidden; float:left; margin-bottom: 1.5rem; color:#333; border:1px solid #ddd; box-sizing:border-box;}
.contentW .inner .content:last-child .cont {margin-bottom: 0;}
.contentW .inner .content .cont:nth-child(2), .contentW .inner .content .cont:nth-child(5) {margin-left: 2%; margin-right: 2%;}

.contentW .content .cont .top {position:relative;}
.contentW .content .cont .top img {width:100%;}
.contentW .content .cont .top .darkness {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0; transition:all .6s linear;}
.contentW .content .cont .top .darkness ul {position:absolute; top:50%; left:50%; width: 100%; transform: translate(-50%, -50%);}
.contentW .content .cont .top .darkness ul li {font-size:0.8rem; text-align: center; color:#fff; user-select:none;}

/* 기존
.contentW .content .top .btn-plus {position:absolute; top:50%; left:50%; background:#145DAB; width:2.5rem; height:2.5rem; border-radius:50%; text-align:center; opacity:0; transition:all .3s linear; transform:translate(-50%,-50%) scale(2);}
.contentW .content .top .btn-plus span {font-size:1.7rem; color:#fff; user-select:none;}
*/
.contentW .content .cont .top:hover .darkness {opacity:1;}
.contentW .content .cont .top:hover .btn-plus {opacity:1; transform:translate(-50%,-50%) scale(1);}

.contentW .content .cont .bottom {height: 284px; padding:1rem 0 0 0; border-top:1px solid #ddd;}
.contentW .content .cont .bottom h2 {padding:0 0.75rem 0.75rem 0.75rem; font-size: 0.9rem; text-align:center;}
.contentW .content .cont .bottom ul {padding:0 0.75rem 0.75rem 0.75rem;}
.contentW .content .cont .bottom ul li {font-size:0.8rem; line-height:1rem;}
.contentW .content .cont .bottom ul li.tit {font-weight: bold;}
.contentW .content .cont .bottom ul.fs14 li {font-size: 0.7rem;}

@media (max-width:1186px ){

    /* contents */
    .contentW .inner {width:90%;}

}

@media (max-width:1023px ){

    /* contents */
    .contentW .content .cont .bottom {height: 306px;}

}

@media (max-width:999px ){

    /* contents */
    .contentW .inner .content .cont {width:48%;}
    .contentW .inner .content .cont:nth-child(2), .contentW .inner .content .cont:nth-child(5) {margin-left: 0; margin-right: 0;}
    .contentW .inner .content .cont:nth-child(odd) {margin-right: 2.2%; margin-bottom: 1.5rem;}
    .contentW .inner .content:last-child .cont {margin-bottom: 0;}
}

@media (max-width:636px ){

    /* contents */
    .contentW .inner .content .cont {float:none; width:100%; margin-bottom: 1.5rem;}
    .contentW .inner .content .cont:nth-child(odd) {margin-right: 0;}
    .contentW .inner .content:last-child .cont {margin-bottom: 1.5rem;}
    .contentW .inner .content:last-child .cont:last-child {margin-bottom: 0;}
}

@media ( min-width:0px ) and ( max-width:900px ){


}