@charset "utf-8";

/* portfolio_1 */
#portfolio_1 #pageCont{max-width: 1650px; height: 100%; padding-top: 140px;}
#portfolio_1 .top{width: 100%; height: 450px;}
#portfolio_1 .top .pic{padding-right: 20px; }
#portfolio_1 .top .pic img{max-height: 450px;cursor: pointer;}
#portfolio_1 .slick-prev {left: 0; position: absolute; top: 50%; width: 70px; height: 100%; transform: translate(0, -50%); cursor: pointer; border: none; outline: none; background:linear-gradient(90deg, rgba(0, 0, 0, 0.4), hsla(0, 0%, 100%, 0)); z-index: 1; opacity: 0; transition: 0.5s;}
#portfolio_1 .slick-prev::before{content:"<"; color: #000;}
#portfolio_1 .top:hover .slick-prev,
#portfolio_1 .top:hover .slick-next{opacity: 1; transition: 0.5s;}
#portfolio_1 .slick-next {right: 0; position: absolute; top: 50%; width: 70px; height: 100%; transform: translate(0, -50%); cursor: pointer; border: none; outline: none; background:linear-gradient(270deg, rgba(0, 0, 0, 0.4), hsla(0, 0%, 100%, 0)); z-index: 1; opacity: 0; transition: 0.5s;}
#portfolio_1 .slick-next::before{content:">"; color: #000;}

#portfolio_1 .txt{margin-top: 40px; display: flex; font-family: 'Pretendard';}
#portfolio_1 .txt p{margin-bottom: 5px; font-size: 14px;}
#portfolio_1 .txt .t-left{color: #bbb; width: 150px; font-weight: 500;}

@media screen and (max-width:1700px){
    #portfolio_1 #pageCont{margin: 0 30px 100px;}
}

@media all and (max-width:768px){
	#portfolio_1 .txt{margin-top: 0;}
	#portfolio_1 #pageCont{padding-top: 70px;}
}



.row > .column {padding: 0 8px; transition: 0.5s;}
  
  .row:after {content: ""; display: table; clear: both; transition: 0.5s;}
  
  /* Create four equal columns that floats next to eachother */
  #myModal .Thumbnail{display: flex; padding: 40px 20px 0; justify-content: center; gap: 10px;}
  
  /* The Modal (background) */
  #myModal{transition: 0.5s;}
  .modal { display: none; position: fixed; z-index: 1; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; transition: 0.5s;}
  
  /* Modal Content */
  .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1000px;transition: 0.5s;  }
  
  /* The Close Button */
  .modal .close { color: #424242; position: absolute; top: 10px;right: 25px; font-size: 35px; cursor: pointer;}
  
  /* .modal .close:hover,
  .modal .close:focus { color: #999; text-decoration: none; cursor: pointer;} */
  
  /* Hide the slides by default */
  .modal .mySlides {display: none; transition: 0.5s; object-fit: contain;}
  
  /* Next & previous buttons */
  .modal .prev,
  .modal .next {cursor: pointer; position: absolute; top: 45%; width: auto; padding: 16px; margin-top: -50px; color:#424242; font-size: 40px; transition: 0.5s ease; user-select: none; -webkit-user-select: none;}
  .modal .prev{left: -25%;}
  
  /* Position the "next button" to the right */
  .modal .next {right: -25%;}
  
  /* On hover, add a black background color with a little bit see-through */
  .modal .prev:hover,
  .modal .next:hover {color: #999; }
  
  /* Number text (1/3 etc) */
  /* .modal .numbertext {color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
   */
  /* Caption text */
  /* .modal .caption-container { text-align: center; padding: 2px 16px; color: white; } */
  
  .modal img.demo { cursor: pointer; opacity: 0.3; width: 50px; height: 50px; object-fit: cover; image-rendering: auto; }
  
  .modal .column .active{ opacity: 1; transition: 0.5s;}
  
  .modal img.hover-shadow { transition: 0.3s;}
  
  .modal .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

@media screen and (max-width:1500px){
    .modal {padding-top: 50px; z-index: 105;}
    .modal .prev{left: -10%;}
    .modal .next {right: -10%;}
    .modal-content {max-width: 800px;}
}
@media screen and (max-width:1000px){
    .modal {padding-top: 80px; z-index: 105;}
    .modal .prev{left: 0%;top: 43%;font-size: 25px;}
    .modal .next {right: 0%;top: 43%; font-size: 25px;}
    .modal-content {max-width: 700px;}
    #myModal .Thumbnail{display: flex; padding: 40px 20px 0; justify-content: center; gap: 3%;}
    .modal img.demo {width: 4.5vh; height: 4.5vh;}
}


.memberWrap{padding:50px  50px; border:1px solid #ddd; font-family: 'Gilroy-Light','Pretendard'; margin-top: 50px;}
.memberWrap .mem_tit { font-size:2em; font-weight:700; margin:0 0 30px; color:#222}
.memberWrap p {padding-bottom:3%; font-size: 1em; line-height: 22px;  color:#454545; line-height:1.9em} 
.memberWrap .pro_tit { font-size:1.3em; font-weight:700; color:#222; padding-bottom:0;}

@media screen and (max-width:976px){
	.memberWrap {padding:3%}
}



.layer{position:fixed; display:none; left:0;top:180px; z-index:3000000; width:100%;font-family: 'Gilroy-Light','Pretendard';}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#434343;  border-radius:0 5px 0 5px; color: #fff;}
.layer .close_btn a{display: block;color: #fff;padding:14px 18px; font-size:20px; font-weight:bold;}
.layer .layer_wrap{position:relative;width:100%; max-width:700px; top:0px; margin:0 auto; border-radius:5px; background: #fff; text-align:left; letter-spacing:-0.5px; box-shadow:0 0 10px rgba(0,0,0,0.2);}
.layer .layer_wrap .DB_info_detail{width:100%;  margin:18px auto; padding-bottom:16px; line-height:18px; color: #333;font-size:12px;}
.layer .layer_wrap .DB_info_detail h2{padding:28px 20px;border-bottom:1px solid #eee; font-size:21px; font-weight:bold;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap p{padding:8px;margin-bottom:12px; font-size:13px;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap{width:98%; height:360px; padding:8px 16px; overflow:auto; box-sizing:border-box;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dt{display:block; background: #eee;border-radius:3px; padding:7px 10px; font-weight: bold;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dd{margin-bottom:16px; padding:4px 12px; box-sizing:border-box;}


.port_new{width: 100%; display: flex; flex-wrap: wrap;}
.port_new li{width: 100%; height: 440px;}
.port_new li + li{margin-top: 20px;}
.port_new li a{width: 100%; height: 100%; display: inline-block; position: relative;  background-size: cover !important; overflow: hidden;}
/* .port_new li a::after{content: ''; width: 100%; height: 100%; background: #000; position: absolute; top: 0;left: 0; opacity: 0.5;  transition: 0.3s;} */
/* .port_new li:hover a::after{opacity: 0; transition: 0.3s;} */
.port_new li:hover a{}
.port_new li a .img {overflow: hidden;}
.port_new li a .img img{position: absolute; width: 100%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 1.5s;}
.port_new li:hover a .img img{transform:  translate(-50%, -50%) scale(1.1); filter: blur(8px);}
.port_new li a .txt{position: absolute; display: flex; align-items: center; width: 550px; height: 100%; padding-left:5%; right: -100%; top: 0; z-index: 10;  color: #4e4941; font-family: 'Pretendard'; font-size: 18px; transition: all 1s ease-out; background:url('/images/sub/plist-bg.webp?v=1')no-repeat center center/cover; font-weight: 500;}
.port_new li a .txt p{opacity: 0.7;}
.port_new li a .txt dl{}
.port_new li a .txt dl dt{margin-bottom: 15px; font-size: 14px; opacity: 0.6;}
.port_new li a .txt dl dd{margin-bottom: 40px;}
.port_new li:hover a .txt{right: 0;}

@media screen and (max-width:1300px){
    .port_new{width: 94%; margin: 0 auto;}
}
@media screen and (max-width:787px){
    .port_new li{height: 300px;}
    .port_new li a .txt{right: 0; padding-left: 0; align-items: flex-end; background-image: none; background:linear-gradient(transparent, rgba(0,0,0,0.15)); font-weight: 500; color: #fff; width: 100%; font-size: 1rem;}
    .port_new li a .txt dl{display: flex; flex-wrap: wrap; padding-left: 15px; padding-bottom: 5px;}
    .port_new li a .txt dl dt{width: 35%; margin-bottom: 5px; font-size: 12px;}
    .port_new li a .txt dl dd{width: 65%; margin-bottom: 5px; font-size: 14px;}
}
@media screen and (max-width:568px){
    .port_new li a .img img{width: 100%; height: 100%; object-fit: cover;}
}
@media screen and (max-width:568px){
    .port_new li a .txt dl dt{width: 30%;}
    .port_new li a .txt dl dd{width: 70%;}
}