@charset "utf-8";
/*
 * Name     : common.css
 * Version  : 1.0
---------------------------------------------------
*/



/*  */
section {overflow: hidden;}
article {padding: 130px 0;}

@media only screen and (max-width: 991px) {
	article {padding: 80px 0;}
}


@media only screen and (max-width: 767px) {
	html {font-size: 14px;}
	article {padding: 60px 0;}
}

/* ------------------------------
 *font 
------------------------------ */
/* font-family */
.font-roboto {font-family: 'Roboto', sans-serif;}

/* font-size */
/* .font-size-60 {font-size: 60px}
.font-size-45 {font-size: 45px}
.font-size-40 {font-size: 40px}
.font-size-30 {font-size: 30px}
.font-size-23 {font-size: 23px}
.font-size-18 {font-size: 18px} */

/* font-size */
.title-small {font-size: 23px;}
.title-large {font-size: 45px;}
.title-extra-large {font-size: 60px;}


/* font-color */
.text-white {color: #fff;}
.text-black {color: #000;}
.text-extra-dark-gray {color: #232323;}
.text-dark-gray {color: #626262;}
.text-extra-medium-gray {color: #757575;}
.text-medium-gray {color: #939393;}
.text-extra-light-gray {color: #b7b7b7;}
.text-light-gray {color: #d6d5d5;}
.text-very-light-gray {color: #ededed;}
.text-point-color {color: #4faad5;}


@media only screen and (max-width: 991px) {
	/* 
	.font-size-60 {font-size: 50px}
	.font-size-45 {font-size: 40px}
	.font-size-40 {font-size: 35px}
	.font-size-30 {font-size: 28px}
	.font-size-23 {font-size: 20px}
	.font-size-18 {font-size: 17px} 
	*/

	.title-small {font-size: 20px;}
	.title-large {font-size: 40px;}
	.title-extra-large {font-size: 50px;}

}

@media only screen and (max-width: 767px) {
	/* 
	.font-size-60 {font-size: 40px}
	.font-size-45 {font-size: 35px}
	.font-size-40 {font-size: 28px}
	.font-size-30 {font-size: 23px}
	.font-size-23 {font-size: 18px}
	.font-size-18 {font-size: 15px} 
	*/
	.title-small {font-size: 18px;}
	.title-large {font-size: 25px;}
	.title-extra-large {font-size: 30px;}
}





/* ------------------------------
 * opacity
------------------------------ */
.opacity-very-light {position: absolute; height: 100%; width: 100%; opacity: 0.2; top:0; left: 0;}
.opacity-light {position: absolute; height: 100%; width: 100%; opacity: 0.3; top:0; left: 0;}
.opacity-extra-medium {position: absolute; height: 100%; width: 100%; opacity: 0.5; top:0; left: 0;}
.opacity-medium {position: absolute; height: 100%; width: 100%; opacity: 0.75; top:0; left: 0;}
.opacity-full {position: absolute; height: 100%; width: 100%; opacity: 0.8; top:0; left: 0;}
.opacity-full-dark {position: absolute; height: 100%; width: 100%; opacity: 0.9; top:0; left: 0;}
.opacity-overlay {position: absolute; height: 100%; width: 100%; opacity: 1; top:0; left: 0;}


.opacity1 {opacity:.1}
.opacity2 {opacity:.2}
.opacity3 {opacity:.3}
.opacity4 {opacity:.4}
.opacity5 {opacity:.5}
.opacity6 {opacity:.6}
.opacity7 {opacity:.7}
.opacity8 {opacity:.8}
.opacity9 {opacity:.9}


/* ------------------------------
 * bg-color
------------------------------ */
.bg-transparent {background-color: transparent;}
.bg-white {background-color:#fff;}
.bg-black {background-color:#000;}
.bg-extra-dark-gray {background-color:#1c1c1c;}
.bg-dark-gray {background-color:#757575;}
.bg-extra-medium-gray {background-color:#939393;}
.bg-medium-gray {background-color:#dbdbdb;}
.bg-extra-light-gray {background-color:#e0e0e0}
.bg-medium-light-gray {background-color:#ededed}
.bg-light-gray {background-color:#f7f7f7}
.bg-very-light-gray {background-color:#fafafa}


/* background */
.parallax {position: relative; background-size: cover; overflow: hidden; background-attachment: fixed  }
.fix-background {position: relative;  background-size: cover; animation-duration: 0s; animation-fill-mode: none; -webkit-animation-duration: 0s;  -webkit-animation-fill-mode: none; -moz-animation-duration: 0s;  -moz-animation-fill-mode: none; -ms-animation-duration: 0s; -ms-animation-fill-mode: none; -o-animation-fill-mode: none; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-attachment: fixed }
.cover-background {position: relative !important; background-size: cover !important; overflow: hidden !important; background-position: center !important; background-repeat: no-repeat !important;}



/* ------------------------------
 * feature-box
------------------------------ */
.feature-box-1 {overflow: hidden; position: relative;}
.feature-box-1 figure img {
	width: 100%;
	cursor: auto;

	transition: transform .3s;
	-webkit-transition: transform .3s;
	-moz-transition: transform .3s;
	-ms-transition: transform .3s;
	-o-transition: transform .3s;
}

.feature-box-1 figure:hover img,
.feature-box-1 figure:focus img {
	opacity: 1;
	-ms-transform: none;
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	transform: none;
}


.feature-box-1 figure:hover img {
	transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-ms-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transform: scale(1.09,1.09);
	-webkit-transform: scale(1.09,1.09);
	-moz-transform: scale(1.09,1.09);
	-ms-transform: scale(1.09,1.09);
	-o-transform: scale(1.09,1.09);
}

.feature-box-1 figure figcaption {
	position: absolute;
	left: 0px;
	top: auto;
	z-index: 9;
	bottom: 0px;
	transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	transition: transform .35s ease-out;
	-webkit-transition: transform .35s ease-out;
	-moz-transition: transform .35s ease-out;
	-ms-transition: transform .35s ease-out;
	-o-transition: transform .35s ease-out;
	padding: 0 15px 0;
	width: auto;
	height: auto;
	text-align: left;
	opacity: 1;
	cursor: default;
}

.feature-box-1 figure figcaption p {
	opacity: 0;
	display: none;
}

.feature-box-1 figure:hover figcaption p {
	opacity: .8;
	display: block;
}

.feature-box-1 figure:hover figcaption {
	transform: translateY(-30px);
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	-o-transform: translateY(-30px);
}

/* ------------------------------
 * hover-option
------------------------------ */
.hover-option-1 figcaption {
	height: 100%;
	padding: 20px
}

.hover-option-1 .hover-main {
	transform: none;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	display: table;
	height: 100%;
	top: 0;
	width: 100%;
}

.hover-option-1 .hover-box {
	display: table-cell;
	height: 100%;
	padding: 20px;
	vertical-align: middle;
}

.hover-option-1 figure:hover .hover-box {
	background: rgba(0, 0, 0, .8);
	color: #fff;
}


.hover-option-1 figure:hover img {
	opacity: .8
}

.container .hover-option-1 .hover-box {
	padding: 10px;
}

.normal-slider {
	overflow: hidden;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
	padding-right: 10px;
	padding-left: 10px;
}

.row {
	margin-right: -10px;
	margin-left: -10px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
	padding-right: 10px;
	padding-left: 10px;
}


/*==============================================================
	board
==============================================================*/
.cate-list .board-category ul,
.recruit-board-cate ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	margin-bottom: 40px;
}

#recruit-board-frame {
	display: none;
}


.cate-list .board-category ul > li,
.recruit-board-cate ul > li {border: 1px solid #000;}
.cate-list .board-category ul > li.active,
.recruit-board-cate ul > li.active {background-color: #000;}
.cate-list .board-category ul > li > a,
.recruit-board-cate ul > li > a {
	display: block;
	padding: 3px 8px;
}
.cate-list .board-category ul > li.active > a,
.recruit-board-cate ul > li.active > a {color: #fff;}

.board-normal > table {width: 100%;}
table.admin-button {width: auto;}

.board-normal > table > thead td {
	padding: 18px 12px;
	letter-spacing: -0.03em;
	font-size: 18px;
	text-align: center;
}

.board-normal > table > thead td > font {
	font-size: inherit !important;
	color: inherit !important;
}

.recruit-section .board-contents thead,
.recruit-board-content thead {
	display: none;
}

.board-normal .board-contents {
	margin-bottom: 40px;
}

.board-normal .board-contents > tbody tr > td,
.recruit-board-content .board-contents > tbody tr > td {
	padding: 30px 0;
	border-bottom: 1px solid #ddd;
}

.recruit-board-content .bbschk {display: none;}

.board-normal .board-contents > tbody tr:first-of-type > td,
.recruit-board-content .board-contents > tbody tr:first-of-type > td {
	border-top: 2px solid #000;
}

@media only screen and (max-width: 767px) {
	.board-normal .board-contents > tbody tr > td,
	.recruit-board-content .board-contents > tbody tr > td {
		padding: 20px 0;
	}
	
}


.board-paging {
	display: flex;
	justify-content: center;
	white-space: nowrap;
	font-size: 0;
}

.board-paging > b,
.board-paging > a {
	display: block;
	position: relative;
	width: 35px;
	height: 35px;
	line-height: 30px;
	margin-left: -1px;
	background: #fff;
	border: 1px solid #dee2e6;
	text-align: center;
	font-size: 1rem;
}

.board-paging > b {
	background-color: #00ADDA;
	border-color: #00ADDA;
	color: #fff;
}

.board-write-button {
	display: flex;
	justify-content: end;
}

/* 게시판 목록 */
.board-normal-read {
  width: 100%;
  margin-bottom: 30px;
  border-top: 2px solid #000;
}

.board-normal-read tbody td {
  padding: 10px 15px;
  border-bottom: 1px solid #dedede;
}

.board-normal-read tbody td.board_bgcolor,
.board-normal-read tbody td.board_desc {
	font-family: inherit;
	font-size: 14px;
}

.board-normal-read tbody td.board_bgcolor {
  background-color: #f9f9f9;
  border-right: 1px solid #ddd;
}

.board-normal-read tbody td.no-padding {
  padding: 0 !important;
  border-bottom: none
}

.board-normal-read tbody td.board_description {
  padding: 0;
}


@media screen and (max-width:991px) {
  #post_area img {
    width: 100%;
    height: auto !important;
  }
}

/* 게시판 글쓰기 */
.board-write {border-top: 2px solid #000;}
.board-write > tbody > tr > td {
	padding: 10px 15px;
	width: 20%;
  border-bottom: 1px solid #dedede;
}
.board-write tbody td.board_bgcolor, 
.board-write tbody td.board_desc {
	font-family: inherit;
	font-weight: 400;
	font-size: 14px;
}

.board-write tbody td.board_bgcolor {
	background-color: #f9f9f9;
  border-right: 1px solid #ddd;
}

.board-write tbody td.board_desc > br {display: none;}
.board-write tbody td.board_desc input {height: 35px;}
.board-write tbody td.board_desc > textarea {
	display: block;
	width: 100% !important;
	max-height: 100px;
}


/* 갤러리 목록 */
.board-gallery .board-contents {
	margin-bottom: 30px;
}

.board-gallery .board-contents > .row {
	flex-wrap: wrap;
	row-gap: 60px;
}

.board-gallery .board-contents > .row > div {
	position: relative;
	width: 33%;
}

.board-gallery .board-contents table {
	display: none;
}

.board-gallery .board-delete-check {
	position: absolute;
	top: 10px;
	left: 20px;
}

.board-contents figure a {
	display: block;
}

.board-gallery .gallery-ect {font-size: 0;}
.board-gallery .gallery-ect > div {
	font-size: 1rem;
}

.masonry-board .masonry-list .gallery-item,
.main-masonry-gallery > .gallery-item {
	overflow: hidden;
	padding: 15px 10px;
	width: 33.3%;
	height: auto;
}

.masonry-board .masonry-list .gallery-item img,
.main-masonry-gallery > .gallery-item img {
	transition: all .3s;
}

.masonry-board .masonry-list .gallery-item:hover img, 
.main-masonry-gallery > .gallery-item:hover img {
	transform: scale(1.1);
}


.masonry-board .masonry-list .gallery-item figure,
.main-masonry-gallery > .gallery-item figure {
	overflow: hidden;
	position: relative;
	border-radius: 10px;
}


.main-masonry-gallery > .gallery-item img {
	width: 100% !important;
	height: auto !important;
}

.masonry-board .masonry-list .gallery-item figcaption,
.main-masonry-gallery > .gallery-item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	min-height: 30%;
	background-color: #212121;
	transition: all .3s;
}

.masonry-board .masonry-list .gallery-item:nth-of-type(3n - 1) figcaption,
.main-masonry-gallery > .gallery-item:nth-of-type(3n - 1) figcaption {
	top: 0;
	background-color: rgba(0,0,0,.5);
	opacity: 0;
}

.masonry-board .masonry-list .gallery-item:hover:nth-of-type(3n - 1) figcaption,
.main-masonry-gallery > .gallery-item:hover:nth-of-type(3n - 1) figcaption {
	opacity: 1;
}

.masonry-board .masonry-list .gallery-item figcaption > a,
.main-masonry-gallery > .gallery-item figcaption > a {
	display: block;
	padding: 20px;
	width: 100%;
	height: 100%;
	color: #fff;
}

@media screen and (max-width:767px) {
	.masonry-board .masonry-list .gallery-item,
	.main-masonry-gallery > .gallery-item {
		padding: 10px 5px;
		width: 50%;	
	}
	
	.masonry-board .masonry-list .gallery-item figcaption,
	.main-masonry-gallery > .gallery-item figcaption {
		
		min-height: 30%;
	}
	
	.masonry-board .masonry-list .gallery-item figcaption > a,
	.main-masonry-gallery > .gallery-item figcaption > a {
	padding: 15px;
}
	
}