/*------------------------------------------------------------------------------------------

8.portfolio_list.php

------------------------------------------------------------------------------------------*/

.portfolio_wrap{width:100%; height:auto; padding-top:120px; padding-bottom:50px; background-color: #e8e8e8;}
.portfolio_wrap .txt_box{width:calc(100% - 40px); max-width:450px; margin:120px auto 130px auto;}
.portfolio_wrap .txt_box > h1{font-size:3.125rem; color:#000; font-weight: 400; text-align: center; letter-spacing: 4px; height:3.125rem;}
.portfolio_wrap .txt_box > p{font-size:1.25rem; color:#000; font-weight: 400; text-align: center;}
.portfolio_wrap .sort_wrap{width:100%; max-width:948px; margin:0 auto 36px auto; overflow-x: scroll; -ms-overflow-style:none; -moz-overflow-style:none;}
.portfolio_wrap .sort_wrap::-webkit-scrollbar{display:none;}
.portfolio_wrap .sort_innerwrap{width:948px; height:auto; }
.portfolio_wrap .sort_innerwrap:after{content:""; clear:both; display: block;}
.portfolio_wrap .sort_wrap .sort_li{width:138px; height:31px; text-align: center; background-color:#fff; cursor:pointer; margin:0 10px; float:left; box-sizing: border-box;}

.portfolio_wrap .sort_wrap .sort_li > p{font-size:15px; color:#000; font-weight:500; line-height:31px;}
.portfolio_wrap .sort_wrap .sort_li_on{ background-color:#000; transition: all .5s; color:#fff; border:none;}
.portfolio_wrap .sort_wrap .sort_li_on > p{ color:#fff;}


.portfolio_wrap .por_list_wrap{width:100%; max-width:1440px; margin:0 auto; min-height:600px;}
.portfolio_wrap .por_list_wrap:after{content:""; display:block; clear: both;}
.portfolio_wrap .por_list_wrap .preloader_wrap{width:100%; height:400px; text-align: center; line-height: 400px;}

.portfolio_wrap .por_list_wrap  .box { position:relative; width:calc(25% - 20px); margin:10px 10px; float:left;  overflow: hidden;/* 원하는 너비 */}
.portfolio_wrap .por_list_wrap  .box:before { content: ""; display: block; padding-top:130%; /* 1:1 비율 */}
.portfolio_wrap .por_list_wrap  .box .li_wrap { position: absolute; top:0px; right:0; bottom:0; left:0px; width:100%; height:100%; overflow:hidden; }
.portfolio_wrap .por_list_wrap  .box .li_wrap .imgcover{overflow: hidden; position: absolute; top:50%;  left:50%; width:100%; height: 100%; transform: translate(-50%,-50%);}
.portfolio_wrap .por_list_wrap  .box .li_wrap .txt_wrap{position:absolute;left:30px; top:30px; z-index:3} 
.portfolio_wrap .por_list_wrap  .box .li_wrap .txt_wrap > div{opacity:0;  margin-left:-50px; width:32px; height: 2px; background-color: #fff; margin-bottom:20px; opacity:0; transition: all .3s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .txt_wrap > p:nth-child(2){opacity:0; margin-left:-30px; font-size:20px; font-weight: 500; color:#fff; transition: all .3s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .txt_wrap > p:last-child{opacity:0;  margin-left:-10px; font-size:14px; font-weight: 400; color:#fff; transition: all .3s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .txt_wrap.on > div{opacity:1; width:32px; margin-left:0px; height: 2px; background-color: #fff; margin-bottom:20px; transition: all .3s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .txt_wrap.on > p:nth-child(2){ opacity:1; margin-left:0px; font-size:20px; font-weight: 500; color:#fff; transition: all .4s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .txt_wrap.on > p:last-child{ opacity:1; margin-left:0px; font-size:14px; font-weight: 400; color:#fff; transition: all .5s; }
.portfolio_wrap .por_list_wrap  .box .li_wrap .seemore_wrap{position:absolute; left:50%; bottom:30px; transform: translate(-50%,0);z-index:3; text-align: center;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .seemore_wrap > img{opacity:0;   margin:0 auto -20px auto; transition: all .3s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .seemore_wrap > p{opacity:0;  margin-bottom:-20px; font-size:14px; font-weight: 400; color:#fff; transition: all .5s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .seemore_wrap.on > img{ opacity:1;margin:0 auto 10px auto; transition: all .3s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .seemore_wrap.on > p{ opacity:1;font-size:14px;  margin-bottom:0px; font-weight: 400; color:#fff; transition: all .5s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .red_cover{position:absolute; width:100%; height:100%; background-color: rgba(172,45,46,0); transition:all .5s; z-index:1; }
.portfolio_wrap .por_list_wrap  .box.on .li_wrap .red_cover{background-color: rgba(172,45,46,0.8); transition:all .7s;}
.portfolio_wrap .por_list_wrap  .box .li_wrap .imgcover > img{position:absolute; top:50%; left:50%;  transform:translate(-50%,-50%); transition:all .5s; z-index:0 }
.portfolio_wrap .por_list_wrap  .box.on .li_wrap .imgcover > img{height:103%; width:103%; transition:all .5s;}


.portfolio_wrap .more_wrap{width:100%; max-width:1400px; margin:0 auto; padding:30px 0;text-align: center; display: none;}
.portfolio_wrap .more_wrap > a > img{width:40px; margin:0 auto; }




@media only screen and (max-width: 790px){
	.portfolio_wrap .sort_wrap{height:48px;}
}

@media only screen and (max-width: 768px){
	.portfolio_wrap .por_list_wrap  .box{width:calc(33.33% - 20px);}
}

@media only screen and (max-width: 640px){
	.portfolio_wrap .por_list_wrap  .box{width:calc(50% - 20px);}
	.portfolio_wrap .txt_box{margin-top:50px; margin-bottom:30px;}
}

@media only screen and (max-width: 375px){
	.portfolio_wrap .por_list_wrap  .box{width:calc(100% - 20px);}
}


/*------------------------------------------------------------------------------------------

9.portfolio_inside.php

------------------------------------------------------------------------------------------*/
.portfolio_inside_wrap{width:100%; height:auto; margin-bottom:50px;}
.portfolio_inside_wrap .pofol_mainimg_wrap{width:100%; height:100vh; background-size: cover; background-position:center;}
.portfolio_inside_wrap .mainimg_wrap_mobile{width:100%; height:100vh; background-size:cover; background-position:center; display:none;}
.portfolio_inside_wrap .inside_wrap{width:calc(100% - 30px); max-width:1400px; margin:0 auto;}
.portfolio_inside_wrap .inside_wrap .txt_wrap{width:100%; height:auto; margin-bottom:100px; margin-top:70px;}
.portfolio_inside_wrap .inside_wrap .txt_wrap:after{content:""; display:block; clear:both;}

.portfolio_inside_wrap .inside_wrap .txt_wrap .first_line{width:100%;}
.portfolio_inside_wrap .inside_wrap .txt_wrap .first_line:after{content:""; display:block; clear:both;}
.portfolio_inside_wrap .inside_wrap .txt_wrap .first_line > hr{width:55px; height:5px; background-color: #000000; margin-bottom: 18px; display: inline-block; float:left; border:none;}
.portfolio_inside_wrap .inside_wrap .txt_wrap .first_line .info_wrap{float:right; width:calc(100% - 55px); max-width:300px;}
.portfolio_inside_wrap .inside_wrap .txt_wrap .first_line .info_wrap > p{float:right; font-size:20px; font-weight: 700; margin-left:25px;}

.portfolio_inside_wrap .inside_wrap .txt_wrap .title_wrap{float:left; width:calc(100% - 300px); max-width:500px; height:auto; text-align: left; float:left;}
.portfolio_inside_wrap .inside_wrap .txt_wrap .title_wrap > p:nth-child(1){font-size:50px; color:#000; font-weight: 600; word-break: keep-all; }
.portfolio_inside_wrap .inside_wrap .txt_wrap .title_wrap > p:last-child{font-size:20px; color:#777777; font-weight: 400; word-break: keep-all; margin-top:20px;}

.portfolio_inside_wrap .inside_wrap .txt_wrap  .btn_wrap{float:right; width:155px; margin-top:20px;}
.portfolio_inside_wrap .inside_wrap .txt_wrap  .btn_wrap > a{width:155px; height:33px; border:1px solid #000; font-size:15px; font-weight: 400; text-align: center; line-height: 33px; display: block; float:right;}

.portfolio_inside_wrap .inside_wrap .img_wrap > img{width:100%; display:block;}
.portfolio_inside_wrap .inside_wrap .back_wrap{text-align: center; margin-top:50px;}
.portfolio_inside_wrap .inside_wrap .back_wrap img{margin:0 auto;}

@media only screen and (max-width: 768px){
	.portfolio_inside_wrap .inside_wrap .txt_wrap .btn_wrap{float:right;}
	.portfolio_inside_wrap .inside_wrap .txt_wrap .btn_wrap{margin-top:5px;}
}

@media only screen and (max-width: 425px){
	.portfolio_inside_wrap .pofol_mainimg_wrap{display:none;}
	.portfolio_inside_wrap .inside_wrap .txt_wrap{margin-top:50px;}
	.portfolio_inside_wrap .inside_wrap .txt_wrap .title_wrap{width:calc(100%)}
	.portfolio_inside_wrap .inside_wrap .txt_wrap .title_wrap > hr{width:30px; height:3px;}
	.portfolio_inside_wrap .inside_wrap .txt_wrap .title_wrap > p:nth-child(1){font-size:35px;  }
	.portfolio_inside_wrap .inside_wrap .txt_wrap .title_wrap > p:last-child{font-size:15px; }
	.portfolio_inside_wrap .inside_wrap .txt_wrap .first_line .info_wrap > p{font-size:15px;}
	.portfolio_inside_wrap .inside_wrap .txt_wrap .btn_wrap{width:100%; text-align: center; margin-top:30px; float:left;}
	.portfolio_inside_wrap .inside_wrap .txt_wrap .btn_wrap > a{width:110px; float:left; height:27px; font-size:12px; line-height: 27px; }
}