@charset "utf-8";

/* 비주얼 영역 */
#main_visual {position: relative; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center; background-image: url(/images/intranet/main/main_visual.jpg); height:350px;}
#main_visual > div {position: absolute; left:0; right:0; bottom:80px; text-align: center;}
#main_visual > div * {animation-name:fadeInUp; display:block}
#main_visual > div span {font-size: 150%; font-weight: 400; -webkit-animation-delay:0.5s; animation-delay:0.5s; color:#fff}
#main_visual > div strong {font-size: 200%; font-weight: 700;  -webkit-animation-delay:1s; animation-delay:1s; color:#ffecb9}

.wrap_container {position: relative;}
.main_contents {background: #eeeef1;}

.m_pad {padding-top:2%; padding-bottom: 2%;}
.m_pad_top {padding-top:140px}


/* 갤러리 */
.gallery .cell { text-align: left; overflow: hidden; }
.gallery .cell img {width:100%}
.gallery .cell a {overflow: hidden; display: block;}
.gallery .cell p {  display: block;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size:90%;}
.gallery .cell p span { display: block;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 110%; font-weight: 400;  line-height:40px; padding-top:10px}
.gallery .cell p i { font-family: 'Roboto'; color:#777; font-weight: 400;  line-height: 20px; }


.bbs.grid_container .row {margin-left: -5px; margin-right: -5px;}
.bbs > .row > .col_6 {padding-left: 5px; padding-right: 5px;}
.bbs > .row > .col_6 > div{margin:5px 0; padding:20px 30px; background:#fff; box-shadow: 3px 3px 3px rgba(0,0,0, 0.05); height:370px}
.bbs .view li {position: relative; width: 100%;}
.bbs .view li.title::before{content:''; position:absolute; left:0; top:9px; width:30px; height:20px; background-color: #a7aeba; background-image: url(/images/intranet/main/list_icon.png);}
.bbs .view li.title > a{display:block; padding-left:40px; width:calc(100% - 100px);width:-webkit-calc(100% - 100px); line-height: 35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 90%;}
.bbs .view li.title > .date{ position: absolute; right:10px; z-index: 3; top:9px;font-size: 90%; font-family: 'Roboto'; color:#777}

.m_title{position: relative;font-size: 130%; font-weight: 500; padding-bottom:3%; padding-left:50px; color:#333 !important; border-bottom: 1px solid #eee; margin-bottom: 20px; line-height:35px}
.bbs > .row > .col_6 .m_title::before{content: ''; width: 46px; height: 46px; position: absolute; left:-5px; top:-5px; }
.bbs > .row > .col_6:nth-child(1) .m_title::before{background: url(/images/intranet/main/m_icon01.png);}
.bbs > .row > .col_6:nth-child(2) .m_title::before{background: url(/images/intranet/main/m_icon02.png);}
.bbs > .row > .col_6:nth-child(3) .m_title::before{background: url(/images/intranet/main/m_icon03.png);}
.bbs > .row > .col_6:nth-child(4) .m_title::before{background: url(/images/intranet/main/m_icon04.png);}

.more { position: absolute; right:5px; top:0px; font-size: 0;width:40px; height:40px;line-height:40px;}
.more:after {content:'\f067'; position: absolute; left:0; right: 0; top: 0px;  font-size:14px; color:#444; font-family: 'FontAwesomeS';text-align:center; }


@media only screen and (max-width:1330px){

}
@media only screen and (max-width:1100px){

}
@media only screen and (max-width:991px){
  .m_pad {padding-top:5%; padding-bottom:5%;}
 .bbs .col_6 {flex: 0 0 100%; max-width: 100%; }
 .bbs .gallery .col_6.cell {flex: 0 0 50%; max-width: 50%; }
  #main_visual { height:200px;}
  #main_visual > div {bottom:60px; }
  .bbs > .row > .col_6 > div{ height:auto}


}

@media only screen and (max-width:880px){

  .bbs .view li.title > a, .bbs .view li.title > .date{ font-size:16px;}
.bbs > .row > .col_6 > div{padding:10px 15px;}

  

}

@media only screen and (max-width:650px){
 .m_title{padding-bottom:3px;margin-bottom: 5px;padding-left:40px}
 .bbs .gallery .col_6.cell {flex: 0 0 100%; max-width: 100%;padding:0}
.gallery .cell p span { padding-top:0px;} 
.gallery .cell p  { margin-bottom:20px}
.main_contents {font-size:90%}
  .bbs .view li.title > a, .bbs .view li.title > .date{ font-size:14px;}

}

@media only screen and (max-width:500px){


}