@charset "utf-8";

.pdi_sub_bg .bg_img {height: 100%; transform: scale(1.1); animation: sub_bg_ani 2.5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);}
@keyframes sub_bg_ani {0%{transform: scale(1.08);} 100%{transform: scale(1);}}
.pdi_sub_bg {background: none;overflow: hidden;}
.pdi_bg01 .bg_img{ background:url('/resources/img/sub/pdi_sub_vis01.jpg') no-repeat center/cover;}
.pdi_bg02 .bg_img{ background:url('/resources/img/sub/pdi_sub_vis02.jpg') no-repeat center/cover;}
.pdi_bg03 .bg_img{ background:url('/resources/img/sub/pdi_sub_vis03.jpg') no-repeat center/cover;}
.pdi_bg04 .bg_img{ background:url('/resources/img/sub/pdi_sub_vis04.jpg') no-repeat center/cover;}
.pdi_bg05 .bg_img{ background:url('/resources/img/sub/pdi_sub_vis05.jpg') no-repeat center/cover;}
.pdi_bg06 .bg_img{ background:url('/resources/img/sub/pdi_sub_vis06.jpg') no-repeat center/cover;}
.pdi_bg07 .bg_img{ background:url('/resources/img/sub/pdi_sub_vis07.jpg') no-repeat center/cover;}
/* project List 서브메인 이미지 제거 */
.pdi_bg_re {height:initial;}
.pdi_bg_re .bg_img{background: none;}



.catelist .list-box {display: -moz-box; display: -ms-flexbox; display: flex;-webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.catelist .list-box .list-cont {position: relative; width:calc( (100% - 120px) / 4); height: 270px; margin: 0 40px 40px 0; overflow: hidden;transition: all .3s;}
.catelist .list-box .list-cont:hover {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 69.09%, rgba(0, 0, 0, 0.65) 82.9%, rgba(0, 0, 0, 0.95) 100%);}
.catelist .list-box .list-cont:nth-child(4n){margin-right: 0;}
.catelist .list-box .list-cont .bg { transition: all .3s;}
.catelist .list-box .list-cont.cate1 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list1.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate2 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list2.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate3 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list3.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate4 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list4.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate5 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list5.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate6 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list6.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate7 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list7.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate8 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list8.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate9 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list9.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate10 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list10.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate11 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list11.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont.cate12 .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/resources/img/sub/cate_list12.jpg) no-repeat center/cover;}
.catelist .list-box .list-cont .bg::before { content:''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.85%, rgba(0, 0, 0, 0.55) 84.11%, rgba(0, 0, 0, 0.7) 100%); box-sizing: border-box;}
.catelist .list-box .list-cont:hover .bg{scale: 1.1;}
.catelist .list-box .list-cont .tit {position: absolute; left: 20px; bottom: 20px;}
.catelist .list-box .list-cont .tit span {color: #fff; font-size: 26px; font-weight: 450; line-height: 1; letter-spacing: -0.01em; text-transform: capitalize;}
.catelist .list-box .list-cont .tit img {opacity: 0; width: 20px; transform: translateY(3px);transition: all .3s;}
.catelist .list-box .list-cont:hover .tit img {opacity: 1; transform: translate(12px,3px);}


.pj_list .sub_tit {font: 500 32px/100% 'Open Sans'; margin-bottom: 53px;}
.pj_list .sub_tit.toCat { font:500 24px/100% 'Open Sans'; margin-top: 30px; margin-bottom: 0px; }
.pj_list .sub_tit.toCat a{display: inline-block;}
.pj_list .sub_tit.toCat a::before { content: ""; width:18px; height:18px; background: url('/resources/img/sub/project_i.png') no-repeat center/contain; display: inline-block; margin-right: 10px;}
.pj_list .project_wrap {display: -moz-box; display: -ms-flexbox; display: flex;}
.pj_list .project_wrap .list_box {width: 34%; min-width: 410px;}
.pj_list .project_wrap .list_box .list > a {display: block; margin-bottom: 9px; padding-right:22px; padding-bottom: 11px; font-size: 20px; line-height: 1; }
.pj_list .project_wrap .list_box .list > a > span { display: block; line-height: 1; }
.pj_list .project_wrap .list_box .list > a.active{margin-bottom: 16px; border-bottom: 1px solid #333;}
.pj_list .project_wrap .list_box .list > a.imtbg { background: none !important; }
.pj_list .project_wrap .list_box .list > a.active > span { position: relative;font-weight: 500; }

.pj_list .project_wrap .list_box .list > a span::after{ content: ''; display: inline-block; width: 16px; height: 16px; background: url('/resources/img/sub/cate_list2_arrow.png') no-repeat center/contain; position: absolute; top: 50%; right: -10px; transform: translateY(-50%); opacity: 0; transition: all .3s; }
.pj_list .project_wrap .list_box .list > a.active span::after{right: -15px; opacity: 1;}
.pj_list .project_wrap .img_box {width: 66%;}
.pj_list .project_wrap .img_box .imgs {position: sticky; top: 0;}
.pj_list .project_wrap .img_box .top{height: 540px;}
.pj_list .project_wrap .img_box .btm{display: -moz-box; display: -ms-flexbox; display: flex; height: 290px; margin-top: 40px;}
.pj_list .project_wrap .img_box .img{height: 100%;transition: all .3s;}
.pj_list .project_wrap .img_box .btm .img {width: calc( (100% - 40px) / 3 ); margin-right: 40px;}
.pj_list .project_wrap .img_box .btm .img:last-child {margin-right: 0;}




@media screen and (max-width:1440px){
    
    .contents .inner {width: 100%; padding:0 40px; box-sizing: border-box;}
    .catelist .list-box .list-cont {width: calc( (100% - 90px) / 4);height: 230px;margin: 0 30px 30px 0;}
    .catelist .list-box .list-cont .tit span {font-size: 24px;letter-spacing: -0.02em;}
    .catelist .list-box .list-cont:hover .tit img {transform: translate(5px,3px);}
}

@media screen and (max-width:1300px){
    .catelist .list-box .list-cont {width: calc( (100% - 60px) / 3);}
    .catelist .list-box .list-cont:nth-child(4n) {margin-right: 30px;}
    .catelist .list-box .list-cont:nth-child(3n) {margin-right: 0;}
}
@media screen and (max-width:1100px){
    .pj_list .sub_tit { font: 500 22px/100% 'Open Sans';}
    .pj_list .sub_tit.toCat {font-size: 18px;}
    .pj_list .project_wrap .list_box .list > a { font-size: 16px; margin-bottom: 8px; padding-bottom: 7px;}
    .pj_list .project_wrap .list_box {width: 34%;min-width: 328px;}
    .pj_list .project_wrap .img_box .top {height: 440px;}
    .pj_list .project_wrap .img_box .btm {height: 220px; margin-top: 20px;}
    .pj_list .project_wrap .img_box .btm .img {width: calc( (100% - 20px) / 3 );margin-right: 20px;}
}
@media screen and (max-width:1024px){
    .contents {padding: 100px 0 160px 0;}


    .catelist .list-box .list-cont .tit img {display: none;}

    .pj_list .project_wrap .img_box .btm .img {width: calc( (100% - 20px) / 2 );}
    .pj_list .project_wrap .img_box .btm .img3 {margin-right: 0;}
    .pj_list .project_wrap .img_box .btm .img4 {display: none;}
}
@media screen and (max-width:768px){
    .contents .inner {padding:0 20px;}

    .catelist .list-box .list-cont {width: calc( (100% - 20px) / 2);height: 200px;margin: 0 20px 20px 0;}
    .catelist .list-box .list-cont:nth-child(3n) {margin-right: 20px;}
    .catelist .list-box .list-cont:nth-child(2n) {margin-right: 0px;}
    .catelist .list-box .list-cont .tit span {font-size: 22px;}
    .catelist .list-box .list-cont .tit {left: 16px;bottom: 16px;}
    .catelist .list-box .list-cont .bg::before {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 84%, rgba(0, 0, 0, 0.8) 100%);}
    
    .pj_list .sub_tit {margin-bottom: 26px;}
    .pj_list .project_wrap .img_box {display: none;}
    .pj_list .project_wrap .list_box {width: 100%;}
    .pj_list .project_wrap .list_box .list > a.active {border:none;}
    .pj_list .project_wrap .list_box .list > a.active span::after {display: none;}
    .pj_list .project_wrap .list_box .list > a span { position: absolute !important;top: 50%; width: calc(100% - 36px); line-height: 1.2; transform: translateY(-50%); left: 18px; font-weight: 450 !important; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.8);}
    .pj_list .project_wrap .list_box .list > a {position: relative; padding: 0; height: 90px; margin-bottom: 10px !important; font-size: 18px;}
    .pj_list .project_wrap .list_box .list > a::before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.5) 100%);}
    .pj_list .project_wrap .list_box .list > a { background: initial; }
  
  
    /* .pj_list.mas .list > a:nth-child(1) {background: url('/resources/img/sub/ADLP1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(2) {background: url('/resources/img/sub/CLR1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(3) {background: url('/resources/img/sub/cgd1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(4) {background: url('/resources/img/sub/dpr1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(5) {background: url('/resources/img/sub/elc1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(6) {background: url('/resources/img/sub/gtpp1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(7) {background: url('/resources/img/sub/hppd1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(8) {background: url('/resources/img/sub/ihr1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(9) {background: url('/resources/img/sub/NLTD1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(10) {background: url('/resources/img/sub/ttlc1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(11) {background: url('/resources/img/sub/ulcd1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(12) {background: url('/resources/img/sub/wec1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(13) {background: url('/resources/img/sub/ywprc1.jpg') no-repeat center/cover;}
    .pj_list.mas .list > a:nth-child(14) {background: url('/resources/img/sub/zi1.jpg') no-repeat center/cover;}*/
} 

@media screen and (max-width:600px){
.contents {padding: 100px 0 120px 0;}

.catelist .list-box .list-cont { width: calc( (100% - 10px) / 2); height: 130px; margin: 0 10px 10px 0;}
.catelist .list-box .list-cont .tit span {font-size: 18px; text-shadow: 0 0 5px rgba(0,0,0,0.8);}

/* .catelist .list-box .list-cont:nth-child(3n) {margin-right: 10px;}
.catelist .list-box .list-cont:nth-child(2n) {margin-right: 0px;}
.catelist .list-box .list-cont .tit { left: 12px; bottom: 10px;}
.catelist .list-box .list-cont .bg::before {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 78%, rgba(0, 0, 0, 0.85) 100%);} */
.catelist .list-box .list-cont {width: 100%;height: 90px;margin: 0 0px 10px 0 !important;}
.catelist .list-box .list-cont .bg::before {background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 100%);}
.catelist .list-box .list-cont .tit { left: 18px; bottom: 50%; transform: translateY(50%);}

.pj_list .project_wrap .list_box .list > a {font-size: 18px;}
}