@charset "utf-8";
/* CSS Document */

/*list*/
.gallery{ display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid #ddd; margin-top: 20px; }

.gallery>div{ 
    box-sizing: border-box; margin-bottom: 15px; text-align: center; opacity: 0; position: relative;  z-index: 0;
    animation: picani ease-in-out 1s; animation-fill-mode:forwards;
}
@keyframes picani{ 0%{opacity:0; transform: scale(0.7);} 100% {  opacity:1; transform: scale(1); } }

.gallery>div:hover{ z-index: 1;}

.gallery .galleryImg { 
    border:1px solid #ddd; margin: 0px auto 5px auto; box-sizing: border-box; display: inline-block;
}
.gallery .galleryImg>a{ display: block; overflow: hidden; box-sizing: border-box;  }
.gallery .galleryImg img{ display: block; max-width: 100%; transition: transform 0.25s ease-in-out; position: relative; z-index: 1; } 

.gallery .galleryImg img:hover{ transform: scale(1.15); }
.gallerySbj{ display: flex; align-items: center; padding-bottom: 8px;}
.galleryDate{ font-size: 85%; color:rgba(0, 0, 0, 0.4); border-top: 1px dotted rgba(0, 0, 0, 0.1); text-align: left; }

/*포트폴리오 웹사이트*/
.mn03_01_css { position: relative; z-index: 0;  }
.mn03_01_css .galleryImg{ background: #f7f7f7; width: 100%;  }
.mn03_01_css .galleryImg>a{ width: 100%; height: 100%; padding:15px; display: flex; justify-content: center; align-items: baseline; overflow:initial; }
.mn03_01_css .galleryImg>a>img{ max-height: calc(100% - 10px); max-width: calc(100% -20px); border:5px solid #fff; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); }
.mn03_01_css .galleryImg>a>img:hover{ transform: scale(1.5); }

/*포트폴리오 모바일 웹사이트*/
.mn03_02_css .galleryImg, .mn03_02_css .galleryImg img { width: 100%; max-height:none !important; }
.mn03_02_css .gallerySbj{ justify-content: center; }
.mn03_02_css .galleryDate{ display: none; }

/*포트폴리오 CI/BI*/
.mn03_04_css .galleryImg, .mn03_04_css .galleryImg img { width: 100%; max-height:none !important; }
.mn03_04_css .gallerySbj{ justify-content: center; }
.mn03_04_css .galleryDate{ display: none; }

/*view*/
.bbsView > * { animation: viewani ease-in-out 0.5s; animation-fill-mode:forwards; opacity: 0; }
@keyframes viewani{ 0%{opacity:0; transform: translateY(20px); } 100% {  opacity:1; transform: translateY(0px); } }
.bbsView>*:nth-child(2){ animation-delay: 0.2s }
.bbsView>*:nth-child(3){ animation-delay: 0.4s }

@media screen and (min-width: 501px) { 
    /*.gallery .galleryImg img{ max-height: calc(930px * 0.3333 - 10px); }*/
    /*max-height:930px(본문 conts의 width)*/

    /*.mn03_01_css>.galleryImg{ padding:9px; }*/
    .mn03_02_css>.galleryImg{ padding:9px; }
    .mn03_04_css>.galleryImg{ padding:9px; }
    
    #mn03_01_bbshead>.tab>a{ flex-basis: 75px;}
}
@media screen and (max-width: 500px) {
    .gallery>div{ width: calc(50% - 5px); }
    .gallery .galleryImg img{ max-height: calc(50vw - 20px - 5px); }

    .mn03_01_css>.galleryImg{ height: calc(50vw - 20px - 5px); }
    .mn03_01_css .galleryImg>a{ padding:10px;  }

    .mn03_02_css>.galleryImg{ padding:5px; }
}