@charset "UTF-8";  
.subbanner{
/*  background: url(../images/portfoliobanner.png) no-repeat; */
  background-size: cover;
  height: 400px;
background-position: center center;
position: relative;
z-index: -1
}

.subbanner .inner h2,
.subbanner .inner h1{
  color: #FFF;
text-align: center;
font-family: Pretendard;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%); /* IE 9 */
-webkit-transform:translate(-50%, -50%);
}
.irisportfolio{
padding: 40px 10px 60px 10px;
}
.irisportfolio h3{
  text-align: left;
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 20px;

}
.irisportfolio h4{
  color: #000;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 32px;
}

 .tabbuttonWrap{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
/* width: 100%; */

} 
.tablink {
  outline: none;
  cursor: pointer;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 5px;
border: 1px solid #D9D9D9;
color: #7A7A7A;
text-align: center;
font-weight: 400;
line-height: normal;
}

.tablink:hover {
  color: #FFB526;
border: 1px solid #FFB526;
}
.description>.ch{
  margin-right: 10px;
}
.description span{
  display: block;
  margin-bottom: 6px;
  color: #7A7A7A;
font-family: Pretendard;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.description b{
  color: #000;
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;

}
/* Style the tab content */
.tabcontent {

display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 40px;
}
.tabcontent img{
width: 49%;
object-fit: cover;

}

.tabcontentsWrap .concept{
  box-sizing: border-box;
  background: #F5F5F5;
  padding:20px 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tabcontentsWrap .concept b{
  display: block;
  color: #000;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 12px;
}
.tabcontentsWrap .concept p{
  color: #000;
font-family: Pretendard;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.tabcontentsWrap .tabcontent span,
.tabcontentsWrap .tagbox span{
  display: inline-block;
  margin-right: 5px;
  padding:4px 14px;
  color: #7A7A7A;
text-align: center;
font-family: Pretendard;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
  border-radius: 30px;
border: 1px solid #7A7A7A;
}


/* 마그네틱 팝업 관련style------ */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	/* ideally, transition speed should match zoom duration */
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}