
.table { width: 100%; display: table;  }

.row {display: table-row; background: #fff; font-size:1em; }
.row.th {font-weight:600; color: #fff; background:#333;}
.row.notice {background-color:#eff8fc}
 
.cell { padding:11px 12px; display:table-cell; vertical-align:middle;  text-align:Center;  border-bottom:1px solid #ddd; color:#666}
.cell a {color:#111}
.row.th .cell { color: #fff}

.cell.td_tit  {width:55%; text-align:left; font-weight:600; line-height:1.3; font-size:1em}
.cell.td_tit a:hover {text-decoration:underline}
.cell.td_tit p  {width:100%;  font-weight:400; margin-top:2px; line-height:1.2; font-size:.97rem;
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
	color:#555;
}
.cell.td_tit span {background-color:var(--main_c); color:#fff; width:20px; height:20px; display:inline-flex; align-items:center; font-weight:300; font-size:13px;   justify-content:center; line-height:0; border-radius:2px; vertical-align:5px;  box-sizing:border-box}
.cell.no {width:50px; }
.cell.class {width:100px; }
  

@media screen and (min-width:900px) {
  
   .cell.name {width:100px; white-space:nowrap;  }
   .cell.date {width:100px;  white-space:nowrap;   }
   .cell.hit {width:80px; white-space:nowrap;  }

}
 
@media screen and (max-width:1100px) {
	 .cell.td_tit  {width:50%; }
 }


@media screen and (max-width:900px) {
	.table { display: block; font-size:1em }
    .table * {line-height:1.3}
	.row {padding:13px 2%; display: block;  border-bottom:1px solid #ddd}
	.row.th {padding: 0; height: 2px; }
	.row.th .cell { display: none; }
	  
	.row .cell:before { margin-bottom: 3px; content:attr(data-title); text-transform: uppercase;color:#555;}
	.cell { padding:0; padding-right:5px; display: block; border-bottom:none; text-align:left}
 	.cell_col {display:inline-block; width:auto; font-size:.9em;  }
	 
	.cell.td_tit  {width:100%; font-size:1.05em;  display:inline-block}
    .cell.no {display:none}
	.cell_col.cell_select {width:100%; margin-bottom:8px }

  
}
 
 
/*뷰페이지*/
 
  
p.view_title {font-size:1.1em;  line-height:1.3;  font-weight:600; color:#fff; width:100%; padding:10px 2%; box-sizing:border-box; display:inline-block; text-align:Center; box-sizing:border-box; background-color:#333;  }
div.view_info {font-size:0.95em; font-weight:400; color:#666; width:100%;  border-bottom:1px solid #ddd; padding-bottom:13px; padding-top:13px; 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 }

.result2 div.view_info {font-size:1.05em; color:#333}

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;}

.result2.view h4 {font-size:25px; margin-bottom:10px; }
.result2.view .view_info + .flex {gap:40px; margin-top:50px}

.result2.view .left_area {width:60%; }
.result2.view .left_area .flex { gap:10px;  }

.result2.view .left_area .thumbnail {width:80%; padding-bottom:60%; line-height:0;   position:relative;  border:1px solid #ddd; box-sizing:border-box}
.result2.view .left_area .thumbnail img {max-width:100%; max-height:100%; position:absolute; left:50%; top:50%;  transform: translate(-50%, -50%);}

.result2.view .left_area ul {display:flex;  width:20%; gap:10px; flex-direction:column; align-items:flex-start}
.result2.view .left_area ul li {width:100%; }
.result2.view .left_area ul li p {width:100%; overflow:hidden; padding-bottom:100%;   position:relative;}
.result2.view .left_area ul li p img {min-width:100%; max-width:none; height:100%; position:absolute; left:50%; top:50%;  transform: translate(-50%, -50%);  border:1px solid #ddd; box-sizing:border-box}


.result2.view .right_area {width:40%}
.result2.view .right_area h4 {border-bottom:1px solid #ddd; padding-bottom:10px;  }
.result2.view .right_area dl {width:100%; display:flex; flex-wrap:wrap;  font-size:1.06em; margin-top:30px }
.result2.view .right_area dl dt {width:20%; font-weight:600;  flex-shrink:0; margin-bottom:10px }
.result2.view .right_area dl dd {width:80%; font-weight:300;  margin-bottom:10px}

.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:600; color:#333; width:80px; display:inline-block}
.list_next p a {color:#222}


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

		p.view_title { width:100%; padding:0;  padding-top:10px;  text-align:left; color:#333; background-color:#fff;  border-top:2px solid #333; }
		div.view_info span::after {  margin:0 3px 0 6px}
		div.view_info {padding-top:5px; font-size:.9em; padding-bottom:10px}
		div.view_info + div.view_info {padding-top:10px}

		div.view_info span.file {width:100%; display:block; }
		div.view_info span.file a {margin-top:3px}

				
		.result2.view h4 {font-size:17px;  }
		.result2.view .view_info + .flex {gap:20px; margin-top:20px}
		.result2.view .left_area {width:100%}
		.result2.view .left_area .thumbnail {width:100%;}
		.result2.view .left_area ul {flex-direction: row; width:100%}
		.result2.view .left_area ul li {  width:33.333%}

 		.result2.view .right_area {width:100%}
		.result2.view .right_area h4 { margin-bottom:15px}
		.result2.view .right_area dl { font-size:1em; margin-top:15px}
		 .result2.view .right_area dl dt {width:100px}
		 .result2.view .right_area dl dd {width:calc(100% - 100px)}


 
}

 
.gall   {  margin-top:80px}
.gall ul.flex {width:100%; gap:20px; flex-wrap:wrap;  }
.gall  * { transition: all 0.3s ease;}
.gall ul.flex li {width:calc(25% - 15px);  border-radius:20px; padding:0; background-color: rgb(246, 248, 252); }
.gall ul.flex li img {width:100%; border-radius:20px;}
.gall ul.flex li h5 {font-size:1.2em; color:#000; font-weight:700;  margin-bottom:5px}
.gall ul.flex li .text {padding:27px 20px 30px 20px; 	color:#333;   font-size:1em;  font-weight:200;   line-height:1.3;  box-sizing:border-box; }
.gall ul.flex li .img {width:100%; padding-bottom:100%; display:block;  border-radius:20px;}
.board ul li:hover h5 {text-decoration:underline}
/* .board ul li:hover img {filter: grayscale(100%)}
 */
 @media all and (max-width:900px) {
		.gall ul.flex li {width:calc(50% - 10px); background:none; border-radius:10px}
		.gall ul.flex li img {  border-radius:10px;}
		.gall ul.flex li .text {padding:0; font-size:.95em }
		.gall ul.flex li h5 {font-size:1.1em; margin-top:15px }

}


.btn_wrap {width:100%; display:inline-block }
 a.list_btn {
    text-align: center;
    line-height: 31px;
    padding: 0 20px;
    font-weight: 400;
    font-size: 0.95em;
    float: right;
    margin-top: 15px;
    margin-left: 5px;
    background-color: #fff;
	border:1px solid #ddd; 
    border-radius: 3px;
    color: #222;
}


  
/*페이지*/


.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:0.9rem; font-weight:500;  }
 

.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:800px) {

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

}

   
/*FAQ*/
.faq dl {width:100%; border-top:1px solid #ddd; margin-bottom:-1px;  }
 

.faq  dt {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  cursor: pointer; 
  align-items:center;
  transition: 0.7s; 
  font-size:1em;   
  color: #333; 
  width:100%; 
  display:flex; 
  padding:10px;
  font-weight:500; 
  box-sizing:border-box; 
}

.faq  dt span.icon {width:28px; line-height:28px; font-size:1rem; background-color:var(--main_c); color:#fff; display:inline-block; flex-shrink:0; margin-right:20px; text-align:center; border-radius:50%; }
.faq  dt span.icon {background-color:var(--main_c); color:#fff; width:25px; height:25px; display:inline-flex; align-items:center; font-weight:300; font-size:15px;   justify-content:center; line-height:0; border-radius:2px; vertical-align:5px;  box-sizing:border-box}

 
.faq  dt div {font-weight:600}

.faq  dt:hover { background: #f9f9f9; }

.faq  dt img {vertical-align:middle; margin-right:5px}
.faq  dd {
  background-color: #f9f9f9;
  display: none;
  border-bottom: 1px solid #ddd;    
  font-size:1em; color:#666;
  padding:10px;   
}

.faq  dd div.a  { width:100%; display:flex; align-items:center }
  
@media (max-width:800px) {
  .faq  dt {font-size:1.05rem}
}



/*search*/
 						
.search {margin-top:30px;  width:100%; display:flex;  justify-content:flex-end}
.search input  {width:30%;  border:1px solid #ddd; padding-left:10px; font-size:0.93em; color:#666; margin:0 5px}
.search select  { font-size:0.93em; 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:0.95em; font-weight:500; padding:0 30px; display:inline-block; vertical-align:middle;}
									   
 
 
 
.application p.r {margin-top:40px; color:#666; font-size:.98em; font-weight:300}
.application ul {width:100%; border:3px solid var(--main_c); padding:30px;  box-sizing:border-box; display:flex; flex-wrap:wrap;  /* max-width:800px; */ margin:0 auto;  margin-top:50px;}
.application ul li {width:100%; display:flex; align-items:center; margin-bottom:25px; box-sizing:border-box;    color:#333; line-height:1.5}
  
.application ul li h3 {font-size:1.05em; margin-bottom:5px; font-weight:600; color:#333; width:170px; flex-shrink:0; line-height:1.1; }

.application ul li >  div {width:100%; display:flex; align-items:Center}
.application ul li >  div.flex_none {display:inline-block}
.application ul li >  div > div {width:100%}

.application ul li input {vertical-align:middle;}
.application ul li input + a.s_btn { margin-left:5px; line-height:35px}
.application ul li select {height:37px; font-size:.95em; padding:0 5px; box-sizing:border-box; color:#333; border:1px solid #999;  }

.application ul li  input[type="file"] { 
    font-size:.95em; 

}

.application ul li  input[type="checkbox"] { 
 margin-right:5px; 

}
.application ul li  input[type="text"] { 
    height: 40px;
    font-size: .95em;
     width:100%; 
	 border:none; border-bottom:1px solid #333;  box-sizing:border-box; 
	}
 
.application ul li textarea { 
    height: 150px;
	width:100%;
    font-size: .95em;
      padding:10px;  
	border:1px solid #333; box-sizing:border-box; 
	}
 
.application ul li div.check_div  {flex-wrap:wrap; border-top:1px solid #ddd; border-left:1px solid #ddd;}
.application ul li div.check_div p {width:50%; border-bottom:1px solid #ddd;  border-right:1px solid #ddd; box-sizing:border-box; padding:10px; }
.application ul li div.check_div p b {font-weight:500; margin-right:15px}
 
.application ul li div.email input[type="text"] {width:30%;  margin-right:10px}
.application ul li div.email input[type="text"]:nth-child(2) {width:70%; margin-left:10px}

.application p.info_txt {color:#444; font-size:.97em}
.application .radio_div {display:flex}
.application .radio_div p  {margin-right:20px}

.privacy_text {width:100%; height:150px; font-size:.95em; line-height:1.5;  color:#333; box-sizing:border-box; padding:10px}
.privacy_check {margin-top:10px; }
 
.privacy_check b {color:#000; font-weight:600; text-decoration:underline}


@media screen and (max-width:900px) {
		.application ul {padding:0; border:none}
		.application ul li {flex-wrap:wrap; padding:13px 0; margin-bottom:0}
		.application ul li.col-2 {width:100%; padding-right:0}
		.application ul li.col-2:nth-child(2n) {padding-right:0; padding-left:0}

		.application ul li h3 {width:100%; margin-bottom:5px }

		.application ul li >  div {width:100%; }
		.application  .flex.gap10 {gap:5px; margin-top:10px}.application  .flex.gap10 p {width:100%; }

}

.application h4.tit {font-size:1.3em}

.info_pre {width:100%; border:1px solid #999;  box-sizing:border-box; padding:15px; margin-top:10px; font-size:.97em; line-height:1.4; color:#444;  }
.info_pre + div {   text-align:right; margin-top:10px; box-sizing:border-box; color:#444}

