/* sub common */
.sub .inr{margin:auto; width:94.8%;}
@media(max-width:1280px){
    .sub .inr{width:96%;}
}


/* 포폴 리스트 common */
.area_portfolio{padding-top:10.2rem; transform:none !important;}
.area_portfolio .top{display:flex; margin:8rem 0 2rem; padding-bottom:2rem; align-items:center; justify-content:space-between; border-bottom:2px solid var(--c_000);}
.area_portfolio .top h2{font-size:5rem; color:var(--c_000); font-weight:800;}
.area_portfolio .top .search{display:flex; align-items:center;}
.area_portfolio .top .search .list_num{margin-right:2rem; font-size:1.8rem; color:var(--c_aaa);}
.area_portfolio .top .search .list_num em{display:inline-block; padding:0.1rem 1rem; color:#fff; font-weight:600; background:var(--primary); border-radius:1.6rem;}
.area_portfolio .top .search input{padding:0.8rem 2rem; width:30rem; outline:none; border:2px solid var(--c_000); color:var(--c_454545); background:transparent; font-size:1.8rem; border-radius:3rem;}
.area_portfolio .year_tab{overflow-x:auto; width:100%; overflow-y:hidden; padding-bottom:2rem; margin-bottom:6rem; border-bottom:2px solid var(--c_000);}
.area_portfolio .year_tab ul{display:table; margin:0 auto; table-layout:fixed; overflow-y:hidden;}
.area_portfolio .year_tab ul li{display:table-cell; padding:0 1rem; vertical-align:middle;}
.area_portfolio .year_tab ul li:first-child{padding-left:2rem;}
.area_portfolio .year_tab ul li:last-child{padding-right:2rem;}
.area_portfolio .year_tab ul li a{display:block; padding:0.3rem 1.8rem 0.2rem; font-weight:500; color:var(--c_aaa); border:2px solid var(--c_aaa); font-size:2rem; border-radius:2rem; transition:0.2s ease;}
.area_portfolio .year_tab ul li a.on{color:var(--c_fff); border:2px solid var(--c_000); background:var(--c_000); font-weight:700;}
@media(hover:hover){
    .area_portfolio .year_tab ul li a:hover{border:2px solid var(--c_000);}
}
.area_portfolio .year_tab ul.light{display:table;}
.area_portfolio .year_tab ul.dark{display:none;}
.area_portfolio .list > ul{display:flex; margin-left:-8rem; padding-bottom:12rem; flex-wrap:wrap;}
.area_portfolio .list > ul > li{position:relative; padding-left:8rem; padding-bottom:4rem; margin-bottom:8rem; width:calc(100% / 4); counter-increment:item 1;}
.area_portfolio .list > ul > li:before{content:counter(item) '.'; position:absolute; background:var(--c_000); padding:0.5rem 1rem; color:var(--c_fff); opacity:0;}
.area_portfolio .list > ul > li .img{display:block; width:100%;}
.area_portfolio .list > ul > li .img img{width:100%;}
.area_portfolio .list > ul > li .txt_box{margin-top:2rem; padding-top:2rem; border-top:1px dashed var(--c_ccc);}
.area_portfolio .list > ul > li .txt_box > i{display:block; margin-bottom:0.5rem; color:var(--primary); font-size:1.5rem; font-weight:600;}
.area_portfolio .list > ul > li .txt_box > i.per_pj{color:#13c0e5;}
.area_portfolio .list > ul > li .txt_box em.tit{display:block; margin-bottom:2rem; font-size:2.2rem; font-weight:bold; color:var(--c_111);}
.area_portfolio .list > ul > li .txt_box .pj_info li{display:flex; font-size:1.8rem; color:var(--c_454545);}
.area_portfolio .list > ul > li .txt_box .pj_info li+li{margin-top:0.5rem;}
.area_portfolio .list > ul > li .txt_box .pj_info li b{display:block; font-weight:bold; color:var(--c_222); width:10rem;}
.area_portfolio .list > ul > li .txt_box .pj_info li p{width:calc(100% - 12rem);}
.area_portfolio .list > ul > li .txt_box .pj_info li p i{position:relative; display:inline-block; padding-left:1rem; }
.area_portfolio .list > ul > li .txt_box .pj_info li p i:before{content:'-'; display:block; position:absolute; top:-0.1rem; left:0; font-size:1.8rem; color:var(--c_222);}
.area_portfolio .list > ul > li .txt_box .pj_info li p i:nth-child(1){margin-right:2rem;}
.area_portfolio .list > ul > li .txt_box .pj_hash{margin:2rem 0; font-size:0;}
.area_portfolio .list > ul > li .txt_box .pj_hash li{display:inline-block; margin-right:1rem; font-size:1.8rem; color:var(--c_aaa);}
.area_portfolio .list > ul > li .btn_wrap{position:absolute; display:flex; justify-content:space-between; left:8rem; bottom:0; width:calc(100% - 8rem); font-size:0;}
.area_portfolio .list > ul > li .btn_wrap a{display:block; padding:0.6rem 0; font-size:1.8rem; color:var(--c_222); border:1px solid var(--c_222); font-weight:600; border-radius:0.5rem; text-align:center; transition:0.3s ease;}
.area_portfolio .list > ul > li .btn_wrap a.dark{display:none;}
.area_portfolio .list > ul > li .btn_wrap a+a{margin-left:1rem;}
.area_portfolio svg{display:none;}
.area_portfolio .list > ul > li .btn_wrap.btn03 a{width:calc(100% / 3 - 0.5rem);}
.area_portfolio .list > ul > li .btn_wrap.btn02 a{width:calc(100% / 2 - 0.5rem);}
.area_portfolio .list > ul > li .btn_wrap.btn01 a{width:100%;}
@media(hover:hover){
    .area_portfolio .list > ul > li .btn_wrap a:hover{color:#fff; border:1px solid var(--primary); background:var(--primary);}
}

.paging-div{padding:5rem 0 15rem; display:table; margin-left:auto; margin-right:auto; text-align:center;}
.area_portfolio .page{display:none;}
.area_portfolio .page-active{display:block;}
.paging-div .page-item .page-link{position:relative; padding:0 !important; width:5rem; height:5rem; line-height:4.8rem; border-radius:0 !important; font-size:1.8rem !important; background:transparent; color:var(--c_222);}
.active>.page-link, .page-link.active{background-color:var(--c_222) !important; border-color:var(--c_222) !important; color:var(--c_fff) !important; font-size:1.8rem !important;}
.paging-div .page-item.first .page-link:before,
.paging-div .page-item.first .page-link:after,
.paging-div .page-item.last .page-link:before,
.paging-div .page-item.last .page-link:after,
.paging-div .page-item.prev .page-link:before,
.paging-div .page-item.next .page-link:before{content:''; display:block; position:absolute; top:2rem; width:1rem; height:1rem; border-top:2px solid var(--c_222);}
.paging-div .page-item.first .page-link:before,
.paging-div .page-item.first .page-link:after{border-left:2px solid var(--c_222); transform:rotate(-45deg);}
.paging-div .page-item.first .page-link:before{left:1.8rem;}
.paging-div .page-item.first .page-link:after{left:2.4rem;}
.paging-div .page-item.last .page-link:before,
.paging-div .page-item.last .page-link:after{border-right:2px solid var(--c_222); transform:rotate(45deg);}
.paging-div .page-item.last .page-link:before{right:1.8rem;}
.paging-div .page-item.last .page-link:after{right:2.4rem;}
.paging-div .page-item.prev .page-link:before{left:2.1rem; border-left:2px solid var(--c_222); transform:rotate(-45deg);}
.paging-div .page-item.next .page-link:before{right:2.1rem; border-right:2px solid var(--c_222); transform:rotate(45deg);}
.paging-div .page-item.first .page-link,
.paging-div .page-item.last .page-link,
.paging-div .page-item.prev .page-link,
.paging-div .page-item.next .page-link{font-size:0 !important;}

.scrollbtn_wrap{position:fixed; bottom:3rem; right:1%; z-index:999;}
.scrollbtn{display:none;}
.scrollbtn_wrap p.btn-page-up{margin-bottom:0.6rem;}
.scrollbtn_wrap p.btn-page-up,
.scrollbtn_wrap p.btn-page-dw{position:relative; background-color:rgba(147,147,147,0.5); width:5rem; height:5rem; font-size:0; cursor:pointer; transition:0.2s ease 0s; border-radius:0.8rem;}
.scrollbtn_wrap p.btn-page-up:before,
.scrollbtn_wrap p.btn-page-dw:before{content:""; display:block; position:absolute; top:50%; left:50%; width:1.6rem; height:1.6rem; border-top:2px solid var(--c_fff); border-right:2px solid var(--c_fff);}
.scrollbtn_wrap p.btn-page-up:before{margin-top:0.5rem; transform:translate(-50%,-50%) rotate(-45deg);}
.scrollbtn_wrap p.btn-page-dw:before{margin-top:-0.5rem; transform:translate(-50%,-50%) rotate(135deg);}
@media(hover:hover){
    .scrollbtn_wrap p.btn-page-up:hover,
    .scrollbtn_wrap p.btn-page-dw:hover{background-color:var(--c_333);}
}

@media(max-width:1680px){
    .area_portfolio .list > ul{margin-left:-4rem;}
    .area_portfolio .list > ul > li{padding-left:4rem;}
    .area_portfolio .list > ul > li .btn_wrap{left:4rem; width:calc(100% - 4rem);}
}
@media(max-width:1280px){
    .area_portfolio{padding-top:8.2rem;}
    .area_portfolio .top{margin:4rem 0 2rem;}
    .area_portfolio .year_tab{margin-bottom:5rem;}
    .area_portfolio .list > ul > li{margin-bottom:6rem; width:calc(100% / 3);}
}
@media(max-width:1024px){
    .area_portfolio .top{margin:3rem 0 2rem; padding-bottom:4rem; flex-direction:column;}
    .area_portfolio .top h2{margin-bottom:3rem;}
    .area_portfolio .top .search{flex-direction:column; width:100%;}
    .area_portfolio .top .search p{margin-bottom:1.5rem;}
    .area_portfolio .year_tab{margin-bottom:4rem;}
    .area_portfolio .list > ul > li{width:calc(100% / 2);}
}
@media(max-width:767px){
    .area_portfolio .top .search input{width:80%;}
    .area_portfolio .list > ul{margin-left:-2.5rem;}
    .area_portfolio .list > ul > li{padding-left:2.5rem;}
    .area_portfolio .list > ul > li .txt_box em.tit{font-size:2rem;}
    .area_portfolio .list > ul > li .btn_wrap{left:2.5rem; width:calc(100% - 2.5rem);}
    .paging-div{padding:3rem 0 15rem;}
    .paging-div .page-item .page-link{width:4rem; height:4rem; line-height:3.8rem;}
    .paging-div .page-item.first .page-link:before,
    .paging-div .page-item.first .page-link:after,
    .paging-div .page-item.last .page-link:before,
    .paging-div .page-item.last .page-link:after,
    .paging-div .page-item.prev .page-link:before,
    .paging-div .page-item.next .page-link:before{top:1.4rem;}
    .paging-div .page-item.next .page-link:before{right:1.5rem;}
    .paging-div .page-item.last .page-link:before{right:1.2rem;}
    .paging-div .page-item.last .page-link:after{right:2.1rem;}
    .paging-div .page-item.prev .page-link:before{left:1.5rem;}
    .paging-div .page-item.first .page-link:before{left:1.2rem;}
    .paging-div .page-item.first .page-link:after{left:2.1rem;}
    .area_portfolio .year_tab ul li{padding:0 0.5rem;}
    .area_portfolio .year_tab ul li:first-child{padding-left:1rem;}
    .area_portfolio .year_tab ul li:last-child{padding-right:1rem;}
}
@media(max-width:500px){
    .area_portfolio .list > ul{margin-left:0;}
    .area_portfolio .list > ul > li{padding-left:0; width:100%;}
    .area_portfolio .list > ul > li .btn_wrap{left:0; width:100%;}
}



/* 디자인 common */
.tab_header .tab_btn{font-size:0; overflow-x:auto; white-space:nowrap;}
.tab_header .tab_btn li{display:inline-block; margin-right:1.2rem; padding:0.3rem 1.6rem 0.2rem; font-size:1.8rem; border:2px solid var(--c_aaa); color:var(--c_aaa); border-radius:2rem; font-weight:500; cursor:pointer; transition:0.3s ease;}
.tab_header .tab_btn li.active{border:2px solid var(--c_000); color:var(--c_fff); background:var(--c_000); font-weight:700;}
@media(hover:hover){
    .tab_header .tab_btn li:hover{border:2px solid var(--c_000);}
}
.area_design{padding-top:9.8rem;}
.area_design .img{display:block; padding:8rem 0; margin:auto;}
.area_design .img+.img{margin-top:5rem;}
.area_design .img.pt0{padding-top:0 !important;}
.area_design .img.pb0{padding-bottom:0 !important;}
.area_design .img.p0{padding:0 !important;}
.area_design .img.pt0{padding-top:0 !important;}
.area_design .img.mt0{margin-top:0 !important;}
.area_design .img.w1920{max-width:1920px; width:100%;}
.area_design .img.w1000{max-width:1000px; width:100%;}
.area_design .img.w900{max-width:900px; width:100%;}
.area_design .img.w860{max-width:860px; width:100%;}
.area_design .img.w800{max-width:800px; width:100%;}
.area_design .img.w560{max-width:560px; width:100%;}
.area_design .img img{display:block; width:100%; box-shadow:0 0 10rem rgba(0,0,0,0.2);}
.area_design .img img.shadow_no{box-shadow:none !important;}
@media(max-width:1280px){
    .area_design{padding-top:8rem;}
    .area_design .img{padding:5rem 0;}
}
@media(max-width:767px){
    .area_design .img{padding:3.5rem 0 4rem;}
    .area_design .img+.img{margin-top:3.5rem;}
}