/*  */
.pc-only {display: block;}
.mo-only {display: none;}

@media (max-width: 767px) {
  .pc-only {display: none;}
  .mo-only {display: block;}
}

.youtube-video {background-color: #000; position: absolute; left: 50%; top: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); z-index: -3;}

.youtube-video iframe {position: absolute; left: 0; top:0; width: 100%; height: 100%;}

/* */

#subContainer {margin-top: 150px; min-height: 450px;}
.img-none {display: none;}
.main_photo > a {display: table; margin: 20px auto;}


.photo_output,
.photo_output > tbody,
.photo_output > tbody > tr,
.photo_output > tbody > tr > td {display: block;}
.photo_output > tbody > tr > td:nth-of-type(2) {animation-delay: 0.2s;}
.photo_output > tbody > tr > td:nth-of-type(3) {animation-delay: 0.4s;}
.photo_output > tbody > tr > td:nth-of-type(4) {animation-delay: 0.6s;}
.photo_output > tbody > tr::after {content: ""; display: block; clear: both;}
.photo_output > tbody > tr > td {float: left; width: 25%; padding: 5px;}
.photo_output > tbody > tr > td > table {width: 100%;}
.photo_output > tbody > tr > td > table > tbody > tr:nth-of-type(2) {display: none;}
.photo_output > tbody > tr > td > table > tbody > tr > td.board_output_gallery_img {position: relative;}
.photo_output > tbody > tr > td > table > tbody > tr > td.board_output_gallery_img > a {display: block; position: relative; overflow: hidden; height: calc(23vw * 9 / 16);}

.photo_output td.board_output_gallery_img > a .photo-overlay {position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background-color: rgba(0,0,0,.8); z-index: 5; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;}
.photo_output td.board_output_gallery_img > a:hover .photo-overlay {opacity: 1;}
.photo_output td.board_output_gallery_img > a .photo-overlay .photo-info {display: table; width: 100%; height: 100%;}
.photo_output td.board_output_gallery_img > a .photo-overlay .photo-info .info-inner {display: table-cell; text-align: center; vertical-align: middle;}
.photo_output td.board_output_gallery_img > a .photo-overlay .photo-info .info-inner h4 {margin: 0; line-height: 23px; font-family: 'Noto Sans KR',sans-serif; font-size: 17px; font-weight: 700; color: #fff;}


.board-category table {display: none;}
.board-category ul {display: table; margin: 0 auto; text-align: center;}
.board-category ul li {display: inline-block; margin: 0 6px; font-size: 15px;}
.board-category ul li a {display: inline-block; padding: 3px 15px; border: 1px solid #000; color: #000;}
.board-category ul li:hover a {background-color: #1c96d5; border-color: #1c96d5; color: #fff;}
.board-category ul li.active a {background-color: #1c96d5; border-color: #1c96d5; color: #fff;}
.photo_list {width: 100%}
.photo_list > tbody > tr {display: block;}
.photo_list > tbody > tr::after {content: ""; display: block; clear: both;}
.photo_list > tbody > tr > td {display: block; float: left; padding: 5px;}
.photo_list > tbody > tr > td > table ,
.photo_list > tbody > tr > td > table > tbody,
.photo_list > tbody > tr > td > table > tbody > tr,
.photo_list > tbody > tr > td > table > tbody > tr > td {display: block;}


.photo_list.grid3 > tbody > tr {
	display: block; 
	float: left;
	width: 33.3%;
}



.board_grid4 .photo_list .bbsnewf5 tr:first-child a {height: calc(24vw * 9 / 16);}
.photo_list .bbsnewf5 tr:first-child a {position: relative; display: block; overflow: hidden; height: calc(1110px/3 * 9 / 16);}


.photo_list .bbsnewf5 tr:first-child a > img {position: absolute; top: 50%; transform: translateY(-50%);}
.photo_list .bbsnewf5 > table > tbody > tr > td {}
.photo_list .bbsnewf5 .photo-overlay {position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background-color: rgba(0,0,0,.8); z-index: 5; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;}
.photo_list .bbsnewf5 a:hover .photo-overlay {opacity: 1;}
.photo_list .bbsnewf5 .photo-overlay .photo-info {display: table; width: 100%; height: 100%;}
.photo_list .bbsnewf5 .photo-overlay .photo-info .info-inner {display: table-cell; text-align: center; vertical-align: middle;}
.photo_list .bbsnewf5 .photo-overlay .photo-info .info-inner h4 {margin: 0; line-height: 23px; font-family: 'Noto Sans KR',sans-serif; font-size: 17px; font-weight: 700; color: #fff;}

.photo_output img {position: absolute; top: 50%; transform: translateY(-50%);}
.photo_list a img {display: block; width: 100%; height: 100%; transition: transform 0.3s ease-out; object-fit: cover;}


.wb_photo_read {width: 100%; border: 0;}
.wb_photo_read tbody > tr:nth-of-type(1) > td {border: 0;}
.wb_photo_read tbody > tr:nth-of-type(1) > td.board_bgcolor {display: none;}
.wb_photo_read tbody > tr:nth-of-type(1) > td.board_desc {position: relative; padding-bottom: 20px; text-align: center; font-family: 'Noto Sans KR',sans-serif; font-size: 24px; font-weight: 700;}
.wb_photo_read tbody > tr:nth-of-type(1) > td.board_desc::after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: #189ace;}

.board_description {border: 0;}
.wb_photo_read #post_area {padding: 20px 0 0;}
.wb_photo_read #post_area img {max-width: 100% !important;}

.paging {display: table; margin: 30px auto 50px;}
.paging b {display: inline-block; width: 30px; height: 30px; line-height: 30px; background: #1c96d5; border-radius: 60px; color: #fff; text-align: center;}

.board-list {display: block; margin: 0 auto; width: 100px;}

.board-arrow {position: fixed; top: 50%; transform: translateY(-50%); padding: 0; background: rgba(0,0,0,.1); border: 0;}
.board-arrow:hover {background: rgba(0,0,0,1); color: #fff;}
.board-prev {left: 0;}
.board-next {right: 0;}
.board-prev i,.board-next i {margin-left: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 25px;}

/* ?Όλ°? κ²μ? ?€????Ό μΆκ?? */
.wb_brd_list {width:100%; margin-bottom:30px; border-top:2px solid #000;}
.wb_brd_list thead td {padding:10px 20px; line-height:1.8; background:#f9f9f9; border-bottom: 1px solid #ddd;}
.wb_brd_list tbody td {padding:8px 20px; color:#666; line-height:1.8; border-bottom:1px solid #dedede;}
.wb_brd_list tbody td.bbsno {width: 10%;}
.wb_brd_list tbody tr:hover td {background:#f9f9f9}
.brd_line {height:3px; background:#000}
.bbsnewf5 a:hover {color: #1c96d5 !important}
.bbsnewf5 input[type='image'] {vertical-align: middle; padding: 0; margin: 0;}


#main_wrap #news .wb_board_output {
  margin: 0 auto;
  width: 80%;
  border-top: 2px solid #000;
}

#main_wrap #news .wb_board_output tr {
  position: relative;
  padding: 20px 20px 20px 70px;
  border-bottom: 1px solid #ddd;
}

#main_wrap #news .wb_board_output tr::after {
  content: "\e649";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #1c96d5;
  border-radius: 100px;
  font-family: 'themify';
  color: #fff;
  text-align: center;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}

#main_wrap #news .wb_board_output tr {
  display: block;
  width: 100%;
}

#main_wrap #news .wb_board_output tr td {
  display: inline-block;
}

#main_wrap #news .wb_board_output tr td[width='1%'] {
  display: none;
}

#main_wrap #news .wb_board_output tr td[align="center"] {
  float: right;
}

#main_wrap #news .wb_board_output tr td a {
  font-size: 16px;
}

#main_wrap #news .wb_board_output tr:hover td a {
  color: #1c96d5;
}

.main_photo .board_output .board_output_gallery_img a > img {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease-out;
	object-fit: cover;
}

.board_sublist {position: relative;}
.board_sublist .board_button {
	position: absolute;
	right: 0;
	bottom: 0;
}

.wb_search input,
.wb_search select {
	padding: 0;
	margin-bottom: 0;
	min-height: 28px;
}

.wb_search #search_table {
	margin: 0 auto 30px;
}

.wb_search #search_table select::-ms-expand {
  display: block;
}

.wb_search .est_cate_cell select {
	display: none;
}

.wb_search .est_keyword_cell #search_display1 input {
	width: 300px;
	min-height: 35px;
}

.wb_search .est_btn_cell input {
	margin-left: 5px;
}


@media (min-width:992px) {
    /* ??¬?κ°? */
    #about .about-transform {transform: translateY(20px);}
}



@media (max-width: 991px) {

    .photo_list > tbody > tr > td {width: 50%;}

		.photo_list.grid3 > tbody > tr {width: 50%;}
		.photo_list.grid3 > tbody > tr > td {width: 100%;}

		

		.photo_list.grid3 .bbsnewf5 tr:first-child a {
			height: calc(910px/3 * 9 / 16);
		}
		
    .photo_output > tbody > tr > td {width: 50%;}
    #post_area img {max-width: 98%; height: auto !important;}


    .photo_output > tbody > tr > td:nth-of-type(2) {animation-delay: 0.2s;}
    .photo_output > tbody > tr > td:nth-of-type(3) {animation-delay: 0s;}
    .photo_output > tbody > tr > td:nth-of-type(4) {animation-delay: 0.2s;}

    #main_wrap #news .wb_board_output {width: 100%;}

    .photo_list .bbsnewf5 tr:first-child a {height: calc(45vw * 9 / 16);}
		.board_grid4 .photo_list .bbsnewf5 tr:first-child a {
			height: calc(45vw * 9 / 16);
		}
    .photo_output > tbody > tr > td > table > tbody > tr > td.board_output_gallery_img > a {height: calc(45vw * 9 / 16);}
}

@media (max-width: 767px) {
  .portfolio-grid.work-4col li {width: 50%;}
  #subContainer {margin-top: 80px;}

  .board-category ul li {margin: 6px; font-size: 13px;}

  .photo_list .bbsnewf5 .photo-overlay .photo-info .info-inner h4 {font-size: 14px; line-height: 1.5;}
	.photo_list.grid3 .bbsnewf5 tr:first-child a {height: calc(45vw * 9 / 16);}

  .wb_photo_read tbody > tr:nth-of-type(1) > td.board_desc {padding-bottom: 10px; font-size: 18px;}
  .wb_photo_read #post_area {padding: 30px 0 0;}
  .paging {margin-top: 30px;}
  .board-prev i,.board-next i {margin-left: 0; width: 35px; height: 35px; line-height: 35px; text-align: center; font-size: 20px;}

  .wb_board tbody td img {max-width:100%;}
  .wb_brd_list thead td {padding: 5px 10px;}
  .wb_brd_list td.att_title:nth-child(1) {display:none}
  .wb_brd_list td.att_title:nth-child(3) {display:none}
  .wb_brd_list td.bbsno {display:none}
  .wb_brd_list td.bbswriter {display:none}
  .wb_brd_list td.bbsetc_dateof_write {display:none}
  .wb_brd_list td.bbsetc_view_count {display:none}

  .photo_output td.board_output_gallery_img > a .photo-overlay .photo-info .info-inner h4 {font-size: 14px;}

  #main_wrap #news .wb_board_output tr {
    padding: 20px 5px 20px 40px;
  }

  #main_wrap #news .wb_board_output tr::after {
    left: 0px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  #main_wrap #news .wb_board_output tr td a {
		display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-height: 30px;
    max-height: 30px;
    -webkit-box-orient: vertical;
    font-size: 14px;
  }

  .board_sublist {margin-bottom: 30px;}

	#services .feature-box-3 figcaption .text-large:first-of-type {
		font-size: 16px;
	}
	#services .feature-box-3 figcaption .text-large:last-of-type {
		font-size: 13px;
		line-height: 1.5;
	}

	#services .grid-item.feature-box-3 figure:hover figcaption {
		transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
	}

	.wb_search #search_table {
		width: 70%;
	}
	
	.wb_search .est_keyword_cell #search_display1 input {
		min-height: 28px;
		max-height: 28px;
		width: 100%;
	}

	.wb_search .est_btn_cell input {
		max-height: 28px;
	}

}
