.document_popup_menu { display: none !important; }

#creativeField { position: absolute; right: 0px; top:80px; width: 25%;  box-sizing: border-box; padding-left: 20px; }
#creativeField  .selectBox  { width: 100%; }
#creativeField  .selectBox li a i { display: none; }
#creativeField  .selectBox li.on a i { display: inline-block; }

#board {position: relative; padding: 100px 0}
#board .boardFilter { margin-bottom: 20px; }
#board .boardFilter .selectBox { float: left; margin: 0 10px 0 0;  height: }
#board .portCount { background: transparent !important;  overflow: visible !important; font-size: 32px;  }
#board .portCount span { position: absolute; left: 25px; top:25px;  white-space: nowrap;  display: block; }

#board .portfolioList {position: relative;}
#board .cardList  {margin-left: -25px; margin-right: -25px;}
#board .cardList >li { display: block; width: 33.33%; padding: 0 25px 50px ; float: left; box-sizing: border-box; opacity: 1; transition: .4s; }
#board .cardList .card {background: #f4f7f9; padding: 20px 30px;}
#board .cardList .card .category_area {display: block; border-bottom: 1px solid #dbdee0; padding-bottom: 15px; color: #767675;}
#board .cardList .card .title {display: block;color: #000; font-size: 33px; font-weight: 700; word-break: keep-all; letter-spacing: -1px; padding-top: 25px; line-height: 1.3; height: 3.9em; margin-bottom: 30px; overflow: hidden; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
	#board .cardList .info li {font-size: 12px; margin-right: 10px;}
#board .cardList .info li {float: left; color: #767675; font-size: 18px; margin-right: 20px; line-height: 1; position: relative;}
#board .cardList .info li:before {display: block; content: ''; width: 1px; height: 16px; background: #767675; position: absolute; right: -10px; top: 0;}
#board .cardList .info li:last-child {margin-right: 0;}
#board .cardList .info li:last-child:before {display: none;}
#board .cardList >li .client { }

.pagination {padding: 20px 0 0; text-align: center; overflow: hidden; }
.pagination_area {display: inline-block;}
.pagination a {float: left; border-left: none; text-decoration: none; width: 40px; height: 40px; line-height: 40px; font-size: 20px; color: #666;}
.pagination a:first-child { border-left: 1px solid #ccc; }
.pagination a.direction { border:1px solid #ccc;  box-sizing: border-box}
.pagination a.direction i { vertical-align: 1px !important; font-size: 13px;}
.pagination a:hover, .pagination a:focus {  background: #f4f4f4; }
.pagination a.current {color: #000;}

.detailScreenWrap {position: fixed;  left: 0px; right:0px; bottom:0px; top:0px;   z-index: 999; display: none; }
.detailScreenWrap .bg {position: fixed;  left: 0px; right:0px; bottom:0px; top:0px; background: rgba(0,0,0,.3) !important;  opacity: 0; transition: all 0.5s; }
.detailScreenWrap .bg iframe {position: fixed; left: 50%;  bottom:0px; top:0px; width: 1500px;  margin-left: -750px;  display: block;  height: 100%; z-index: 100;  }
.detailScreenWrap.active  {display: block; }
.detailScreenWrap.active .bg {transition: all 0.5s; opacity: 1.0; }
.detailScreenWrap .bg .detailCloseBtn { position: fixed;  top:30px; right:-100px; margin-left: 730px;  transition: all 1.5s; z-index: 101; cursor: url(http://183.111.174.4/web/contents/images/spade_pointer_on.cur) 12 0, auto !important;}
.detailScreenWrap.active .bg .detailCloseBtn { right: 30px;   }
 
#creativeField .hoverSwitch {display: block; position: absolute; left: -40px; top: 9px; text-transform: uppercase; width: 40px; height: 25px; line-height: 25px; text-align: center;color: #fff; letter-spacing: 1px; border: 1px solid #fff;}
#creativeField .hoverSwitch:focus {outline: 0}
#creativeField .hoverSwitch.on {background: #fff; color: #244a9a; font-weight: 600;}
 
#board .pagerWrap {position: fixed; left: 0; top: 51.5%; right: 25px; z-index: 99; margin: 0 auto; height: 0;}
#board .pagerWrap .row {float: right; transform: translateY(-50%); margin-top: -4px;}
#board .pagerWrap a, #board .pagerWrap strong {display: block; text-align: center;}

#board .pagerWrap a .arrow, #board .pagerWrap strong .arrow {display: block; width: 17px; height: 20px; background: transparent; opacity: 1}
#board .pagerWrap .prev .arrow {background-image: url(http://183.111.174.4/modules/board/skins/sp_board/images/3_icon_upArrow.png);}
#board .pagerWrap strong .arrow {opacity: .3;}
/* #board .direction {padding: 15px 0;} */
#board .pagerWrap .next .arrow {background-image: url(http://183.111.174.4/modules/board/skins/sp_board/images/3_icon_downArrow.png);}

#board .pagerWrap .pager {padding: 5px 0;}
#board .pagerWrap .pager span {display: block; position: relative; color: #fff;}
#board .pagerWrap .pager .currentPage {position: relative;}
#board .pagerWrap .pager .currentPage:before {display: block; content: ''; height: 16px; width: 1px; background: #fff; position: absolute; right: 8px; top: 13px; transform: rotate(40deg)}
#board .pagerWrap .pager .totalPage {text-align: right;}

#board .boardControl {padding-top: 30px;}
@media all and (max-width: 1366px) {
	
}
@media all and (max-width: 1280px) {
	#board .cardList .card .title {font-size: 30px;}
}
@media all and (max-width: 1112px) {
	
}
@media all and (max-width: 1024px) {
	#board .cardList {margin-left: -15px; margin-right: -15px;}
	#board .cardList >li {padding: 0 15px 30px;}
	#board .cardList .card {padding: 20px;}
	#board .cardList .card .title {font-size: 25px;}
	#board .cardList .info li, #board .cardList .card .category_area {font-size: 15px;}
}
@media all and (max-width: 960px) {
	
}
@media all and (max-width: 840px) {
	
}
@media all and (max-width: 789px) {
	#board {padding: 80px 0;}
	#board .cardList >li {width: 50%;}
	#board .pagination {margin-top: 30px;}
}
@media all and (max-width: 680px) {
}
@media all and (max-width: 560px) {
	#board .cardList {margin-left: -10px; margin-right: -10px;}
	#board .cardList >li {padding: 0 10px 20px;}
	#board .cardList .card {padding: 20px;}
	#board .cardList .card .category_area {padding-bottom: 5px;}
	#board .cardList .card .title {font-size: 19px; margin-bottom: 20px; padding-top: 10px; }
	#board .cardList .info li:before {height: 9px; right: -5px;}
}
@media all and (max-width: 479px) {
}
@media all and (max-width: 380px) {
	#board .cardList .card .title {font-size: 17px;}
	#board .cardList .info li {float: none; font-size: 10px; margin-right: 0; line-height: 1.4;}
	#board .cardList .info li:before {display: none;}
}
@media all and (max-width: 320px) {
	#board .cardList >li {width: 100%;}
	#board .cardList .card .title {font-size: 21px;}
}