ul.gall {width:100%; gap:20px; flex-wrap:wrap}
ul.gall  * {   transition: all 0.3s ease;}
ul.gall li {width:calc(25% - 15px); padding:0; background-color: rgb(246, 248, 252); }

ul.gall li .img_div {width:100%; padding-bottom:100%;   overflow:hidden; position:relative;}
ul.gall li .img {width:100%; height:100%; position:absolute;  left:50%; top:50%; transform: translate(-50%, -50%); background-size:cover !important; background-position:center !important; background-repeat: no-repeat !important}
ul.gall li:hover .img  {width:120%; height:120%; }
ul.gall li .no_img {background-size:50% !important}
ul.gall li:hover .no_img  {width:100%; height:100%; }
 

ul.gall li img {  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}


ul.gall li span {color:#1A89BE;  font-weight:500; display:inline-block; font-size:17px; margin-bottom:10px}
 
ul.gall li span.bg2 {color:#00458A; }
ul.gall li span.bg3 {color:#28A745}
ul.gall li span.bg4 {color:#FFC107}
ul.gall li span.bg5 {color:#E95420 }
ul.gall li span.bg6 {color:#6F42C1 }


ul.gall li h5 {font-size:1.15em; color:#111; font-weight:500;  margin:0px 0 5px 0 }
ul.gall li a {color:#333}
ul.gall li .text {padding:27px 20px 30px 20px;   box-sizing:border-box; }
ul.gall li p { 
    width: 100%;
    
    font-size: .95em;
    color: #333;
    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
} 
ul.gall li:hover h5 {text-decoration:underline}
/* ul.gall li:hover  img {filter: grayscale(100%)}
ul.gall li:hover .img {filter: grayscale(100%)}
 */
 @media all and (max-width:900px) {
		ul.gall {justify-content:space-between; gap:20px 0 }
		ul.gall li {width:48%; background:none }
		ul.gall li .text {padding:0; margin-top:20px}
		ul.gall li span {  font-size:14px}
		ul.gall li h5 {font-size:1.05em;   }


}

.page {text-align:center;   width:100%; margin-top:30px; display:inline-block; font-size:0}
.page ul { width:100%; text-align:center; }
.page li { display:inline-block; font-size:15px; font-weight:400;  }
 

.page a {
	display:inline-block;
 	text-decoration:none; vertical-align:middle;
 	border:1px solid #d1d1d1; background-color:#fff;  width:29px; line-height:29px; height:29px;  margin-left:-1px; color:#999; text-align:Center;
   }

.page img {width:29px; height:29px; vertical-align:top;  }
 
.page a.ov  {border:1px solid #555; background-color:#555; color:#fff;}

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

		.page a { width:25px; line-height:25px; height:25px; }
     	.page img {width:25px; height:25px; vertical-align:top;  }

}

						
.search {margin-bottom:30px;  width:100%; display:flex;  justify-content:flex-end}
.search input  {width:30%; max-width:200px;  border:1px solid #ddd; padding-left:10px; font-size:14px; color:#666; margin:0 5px}
.search select  { font-size:14px;  color:#666; border:1px solid #ddd;  vertical-align:middle; width:100px;  }
.search a {background-color:#333; border-radius:3px; box-shadow:1px 1px 2px #ddd; color:#fff; line-height:33px; font-size:14px; font-weight:500; padding:0 30px; display:inline-block; vertical-align:middle;}
									   
 
 
 

/*뷰페이지*/
 
  
p.view_title {font-size:1.7em;  line-height:1.3;  font-weight:600; color:#000;  width:100%; box-sizing:border-box; display:inline-block;   box-sizing:border-box; }
div.view_info {font-size:0.95em; font-weight:300; color:#666; width:100%;  border-bottom:1px solid #ddd; padding-bottom:20px;  margin-top:10px; display:inline-block; box-sizing:border-box; }

div.view_info span::after {width:1px; height:12px; vertical-align:middle;  content:''; display:inline-block; background-color:#888;  margin:0 5px 0 10px}
div.view_info span:last-child::after {display:none}
div.view_info a:hover {text-decoration:underline }
div.view_info span.file a {display:inline-block; border:1px solid #015bac; padding:0 10px; border-radius:2px; margin-left:3px; color:#015bac }

.view_flex {display:flex;   margin-bottom:50px }
.view_flex .img {width:50%; position:relative}
.view_flex .img img {width:100%; }
.view_flex .right_info {width:45%; margin-left:auto }
.view_flex .view_title {margin-bottom:30px; border-bottom:1px solid #ddd; padding-bottom:15px; font-weight:600 }
.view_flex dl {display:flex; width:100%; }
.view_flex dl dt {width:130px; font-weight:500;  flex-shrink:0}
.view_flex dl + dl {margin-top:10px}
.view_flex .swiper  {width:100%; height:100%; }
.view_flex .swiper-slide {width:100%; height:100%;  flex-shrink:0; display:flex; align-items:center; justify-content:center}

div.view_content {width:100%; display:inline-block;  border-bottom:1px solid #ddd; padding:20px 0; }
div.view_content img {max-width:100%}
div.view_file {width:100%; padding:12px 0 8px 0;  border-bottom:1px solid #ddd; }
div.view_file ul {width:100%; display:flex; flex-wrap:wrap;}
div.view_file ul li {display:inline-block; margin-bottom:5px; }
div.view_file ul li a {display:inline-block; font-size:0.90rem; background-color:#2478be; color:#fff; padding:4px 15px; border-radius:5px; margin-right:10px;}

 
.board_view div.view_content {border-bottom:none}
.board_view .view_flex p.view_title {font-size:1.5em; margin-top:20px}

 
 @media screen and (max-width:900px) {
		p.view_title {font-size:1.3em}
		.view_flex {gap:30px}
		.view_flex .img {width:100%; }
		.view_flex .right_info {width:100%;  }
 		.view_flex dl dt {width:100px;  font-size:14px}
		.view_flex dl dd {  font-size:14px}
		.board_view .view_flex p.view_title {font-size:1.2em; }


 }
.list_next  {width:100%; display:inline-block;  padding:11px 0; box-sizing:border-box; border-bottom:1px solid #ddd; line-height:0} 
.list_next p {width:100%; display:inline-block; font-size:1rem; line-height:1; color:#999;  overflow: hidden;   text-overflow: ellipsis; margin:3px 0;  white-space: nowrap;  }
.list_next p:last-child {text-align:left; }
.list_next b {font-weight:500; color:#333; width:80px; display:inline-block}
.list_next p a {color:#222}
.list_next p a:hover {text-decoration:underline}

 
 
 a.list_btn {
    text-align: center;
    line-height: 31px;
    padding: 0 20px;
    font-weight: 400;
    font-size: 15px;
    float: right;
    margin-top: 15px;
    margin-left: 5px;
    background-color: #fff;
	border:1px solid #ddd; 
    border-radius: 3px;
    color: #444;
}

 
.contatct_form {width:100%; gap:30px 20px; border:1px solid #ddd; box-sizing:border-box; display:flex; flex-wrap:wrap; padding:60px;}
.contatct_form > div {width:100%; display:flex; flex-wrap:wrap; box-sizing:border-box}
  
 
.contatct_form > div.box_50 {width:calc(50% - 10px);   }
.contatct_form > div h4 {font-size:1.2em; flex-shrink:0; font-weight:500;  margin-bottom:5px; width:100%}

.contatct_form > div div.box {width:100%; display:flex; flex-wrap:wrap;  margin-top:5px}
.contatct_form > div span.input_wrap {width:16.666666%}
 
 

.contatct_form > div input[type="text"] {width:100%; height:40px; font-size:1em; border:none; border-bottom:1px solid #000;   -webkit-appearance: none;
   -webkit-border-radius: 0;}
.contatct_form > div input[type="text"]::placeholder {color:#999}
.contatct_form > div input[type="text"]:focus {outline:none }

.contatct_form > div input[type="date"] {color:#333;  height:40px; font-size:1em; border:none; border-bottom:1px solid #000;  
   -webkit-border-radius: 0;}
.contatct_form > div input[type="text"]::placeholder {color:#999; font-weight:400}

.contatct_form > div a {width:180px; white-space:nowrap; text-align:center; line-height:40px; font-size:1em;  background-color:#333; color:#fff;  }

.contatct_form select {height:40px; font-size:.96em; color:#333; margin-right:10px; padding:0 10px}

.contatct_form > div .mail {width:100%}
.contatct_form > div .mail input[type="text"] {width:calc(50% - 20px)}
.contatct_form > div textarea {width:100%; box-sizing:border-box; padding:15px 15px;  height:200px; color:#999; font-size:1em;  font-family: 'pretendard'; line-height:1.3; border:none; background-color:#f1f1f1; margin-top:5px}
.contatct_form > div textarea:focus {outline:none }


.filebox {display:flex; align-items:center; width:100%; max-width:500px }
.filebox .upload-name {
    padding:0;  height:50px; 
     border: 1px solid #fff; 
	 border-bottom:1px solid #333; 
    font-size:1em;  box-sizing:border-box;
    color: #999999; width:calc(100% - 130px); 
}
.filebox label {
    width:130px; text-align:center;
    color: #fff;  box-sizing:border-box; 
     background-color:var(--main_c2); 
    cursor: pointer;  
    line-height:50px;  
	
   
}

.filebox input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
	 
}

.contatct_form > div.flex_wrap  {align-items:center}
.contatct_form > div.flex_wrap h4 {width:auto; margin-bottom:0; margin-right:50px; }
.contatct_form > div.flex_wrap .box_50 {display:flex; align-items:center; }

.contatct_form .privacy_t {font-weight:400;  }
.contatct_form .privacy_t input {margin-right:3px}
.contatct_form .privacy_t a {font-weight:400; margin-left:10px; color:#797979;  }

  
.checkbox-input {
 	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;

	&:checked + .checkbox-tile {
		border-color: var(--main_c);
		box-shadow: 0 5px 10px rgba(#000, 0.1);
		color: var(--main_c);
		&:before {
			transform: scale(1);
			opacity: 1;
			background-color: var(--main_c);
			border-color: var(--main_c);
		}
		
		.checkbox-icon, .checkbox-label {
			color: var(--main_c);
		}
	}
	
	&:focus + .checkbox-tile {
		border-color: var(--main_c);
 		&:before {
			transform: scale(1);
			opacity: 1;
		}
	}
}

.checkbox-tile {
	display: flex;
 
	align-items: center;
	justify-content: center;
     padding:0 30px; 
	height:60px;
	gap:10px;
	 
	border: 1px solid #999;
	background-color: #fff;
	box-shadow: 0 5px 10px rgba(#000, 0.1);
	transition: 0.15s ease;
	cursor: pointer;
 	position: relative;

	&:before {
		content: "";
		position: absolute;
		display: block;
		width:22px;
		height:22px;
		border: 2px solid var(--main_c);
		background-color: #fff;
 		top:-1px;
		left:-1px;
		opacity: 0;
		transform: scale(0);
		transition: 0.25s ease;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
		background-size: 12px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}

	&:hover {
		border-color: var(--main_c);
		&:before {
			transform: scale(1);
			opacity: 1;
		}
	}
}

.checkbox-icon {
	transition: .375s ease;
	color:#999;
	font-size:22px
 
}

.checkbox-label {
	color: #999;
	font-size:1.05em;
	font-weight:400; 
	transition: .375s ease;
	text-align: center;
}


@media all and (max-width:900px) {
		.contatct_form {padding:0; border:none}
		.contatct_form > div.box_50 {width:100% }
		.checkbox-tile {height:48px; padding:0 23px; }
		.checkbox-icon {font-size:20px}
		.checkbox-tile::before {display:none}
}



.checkbox_wrap {width:100%; display:flex; flex-wrap:wrap; margin-top:10px; gap:10px}
.checkbox_wrap input + label {
	display: inline-block;
	  white-space:nowrap;
	box-sizing:border-box; padding:10px 30px;  text-align:Center;
	background-color:#f5f5f5; 
	color:#333;
	font-weight:300;
	font-size:.95em; 
	cursor: pointer; border-radius:5px; 
 }

 .checkbox_wrap input:checked + label { font-weight:400; background-color: var(--main_c); color:#fff }
.checkbox_wrap input { display: none; }