@charset "UTF-8";

/* Page Title */

ul.list {width:100%; border-top:1px solid #ddd;  margin-top:10px}
ul.list li {width:100%; display:inline-block; border-bottom:1px solid #ddd;  padding:10px 0; line-height:1.2;  }
ul.list li a {font-size:1.1em; font-weight:600; color:#333; width:100%; display:inline-block;  margin-bottom:3px} 
ul.list li p {font-size:.93em;  color:#555; width:100%; display:inline-block;  } 
ul.list li span {font-size:.93em;  color:#777; width:100%; display:inline-block;  } 

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

.row {display: table-row;background: #fff; }
.row.header {font-weight:600; color: #fff; background:#333;}

.cell { padding: 10px 12px; display: table-cell; vertical-align:middle;  text-align:Center;  border-bottom:1px solid #ddd; color:#666; font-size:1.05em}
.cell a {color:#333 !important}

.row.header .cell { color: #fff}

.tit  {width:70%; text-align:left; font-weight:600; line-height:1.3}
.tit a:hover {text-decoration:underline}
.cell.no {width:50px; }
.cell.date {white-space:nowrap;}
.cell.hit {white-space:nowrap;}

.none_list  {width:100%;  background-color:#f9f9f9; padding:10px; box-sizing:border-box; font-size:1em; display:flex; justify-content:center;  }
.none_list input {border:none; height:35px; padding-left:10px; font-size:.95em }
.none_list input::placeholder { color:#333}

.none_list a {display:flex; align-items:center; background-color:#333; color:#fff !important; border-radius:3px; line-height:1; padding:0 20px; font-size:.95em}

@media screen and (max-width:1000px) {
 .tit  {width:60%;  }
 }

@media screen and (max-width:800px) {
	.table { display: block; }

	.row {padding:13px 2%; display: block;  border-bottom:1px solid #ddd}
	.row.header {padding: 0; height: 2px; }
	.row.header .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;  }
	.cell a {width:100%;  display:inline-block}
	.cell_col {display:inline-block; width:auto; font-size:.9em}
	 
	.tit  {width:100%; font-size:1.05em; }
	.row .tit:before { display:none }

	.no {display:none}
 

}
 
 
/*뷰페이지*/
 
  
p.view_title {font-size:1.05em;  line-height:1.3;  font-weight:600; color:#fff; width:100%; padding:10px 2%; box-sizing:border-box; display:inline-block; text-align:Center;  background-color:#333;  }
p.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; }


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

div.view_content {width:100%; display:inline-block;  border-bottom:1px solid #ddd; padding:20px 0; }
div.vedio_frame {width:100%; margin-top:20px}
div.chart_box {width:100%; margin-top:-1px; box-sizing:border-box;  border:1px solid #ddd; overflow:hidden}

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.90em; background-color:#2478be; color:#fff; padding:4px 15px; border-radius:5px; margin-right:10px;}

div.reple {width:100%; display:flex; border-bottom:1px solid #ddd;  padding:15px 0; font-size:1em; color:#666;  background-color:#fff; box-sizing:border-box;}
div.reple  b {color:#333; font-weight:600;   width:90px}
div.reple  p {width:calc(100% - 90px);}

.list_next  {width:100%;   padding:11px 0; box-sizing:border-box; border-bottom:1px solid #ddd; line-height:0} 
.list_next p {width:100%; display:flex; font-size:1em; line-height:1; color:#999; margin:5px 0;   }
.list_next p:last-child {text-align:left; }
.list_next b {font-weight:600; color:#333; width:90px; }
.list_next a {width:calc(100% - 90px); white-space: nowrap; overflow:hidden;  text-overflow: ellipsis; }


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

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

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

}

 

  
/*페이지*/


.page     {text-align:center;  width:100%; margin-top:10px; display:inline-block; font-size:0}
.page   ul { width:100%; text-align:center; }
.page   li { display:inline-block; font-size:13px; 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 !important;}

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

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

}


.write {width:100%; display:flex;  justify-content:space-between; flex-wrap:wrap; margin-bottom:-20px }
.write li {  width:50%;  padding-right:10px; padding-bottom:20px;  box-sizing:border-box;  }
.write li.right {padding-right:0; padding-left:10px}
.write li.box_100 {padding-left:0; padding-right:0;  width:100%}

.write li p {width:100%; font-weight:500; font-size:1.15em;  padding-bottom:10px;} 
.write li p span {float:right;  font-weight:400; margin-top:3px; font-size:.85em; color:#666}

.write li  input[type="text"] {width:100%;
    height:47px;
    font-size: 1em;
    border-radius: 5px;
    text-indent: 10px;
	border:1px solid #ddd; box-sizing:border-box; 
}
.write li  input[type="password"] {width:100%;
    height:47px;
    font-size: 1em;
    border-radius: 5px;
    text-indent: 10px;
	border:1px solid #ddd; box-sizing:border-box; 
}

.write li  select { 
    height:47px;
    font-size: 1em;
    
	border:1px solid #ddd; color:#666;
}
.write li  textarea { 
    width:100%; 
	height: 200px;
    font-size: 1em;
    border-radius: 5px;
   box-sizing:border-box; 
	border:1px solid #ddd; color:#666; padding:10px;
}
.write li select {border-radius:5px; box-sizing:border-box; padding-left:10px}


.write li  input[type="file"] {font-size:.90em}

.write li.mail  div {width: calc(100% - 130px); display:flex; align-items:center}
.write li.mail  input[type="text"] {width:50%;}
.write li.mail span {margin:0 5px}
.write li.mail select {margin-left:5px}

.write li div {display:flex}
.write li div a {width:80px; margin-left:auto; display:flex; align-items:center; justify-content:center}
 
.write li div input[type="text"] {width:calc(100% - 90px)}


 @media screen and (min-width:800px) {
  .write li.name input {width:calc(50% - 10px)}

}
 @media screen and (max-width:800px) {
		.write li {width:100%; padding-bottom:15px; padding-right:0;   }
		.write li.right {padding-right:0; padding-left:0}
 
 }


/*서치*/
 						
.search     {margin-top:30px;  width:100%; display:flex; justify-content:center }
.search  input  {width:30%;  margin:0 5px; border:1px solid #ddd; padding-left:10px; font-size:0.93em; color:#666}
.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 !important; line-height:37px; font-size:0.95em; font-weight:500; padding:0 30px; display:inline-block; vertical-align:middle;}
									   
  
/*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;
  transition: 0.7s;   align-items:center;
  color: #333; width:100%; display:flex;  padding:10px; box-sizing:border-box; 
}

.faq   p.icon {width:30px; line-height:30px; background-color:#f1f1f1; text-align:center; border-radius:50%; margin-right:15px; vertical-align:middle} 

.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;
  line-height: 1.4;
  font-size:1em; color:#666;
  padding:10px;   
}

.faq  dd div.a  { width:100%; display:flex; align-items:center }
  

 
ul.event_list {width:100%;   display:flex ; margin-bottom:20px; flex-wrap:wrap}
ul.event_list li {width:31.5%; ; color:#111 !important; transition: all 0.3s;} 
ul.event_list li a {width:100%; box-sizing:border-box} 
ul.event_list li .img  {width:100%; overflow:hidden; position:relative; padding-bottom:50%; border-radius:5px}
ul.event_list li .img img {min-width:100%; min-height:100%; max-width:150%; position:absolute; left:50%; top:50%; transition: all 0.3s; transform: translate(-50%, -50%);}

ul.event_list li h3 {font-size:1.3em; font-weight:600; line-height:1.3; display:block; margin:20px 0 5px 0}
 
ul.event_list li p {font-size:1em; font-weight:400; line-height:1.3; color:#555;
    width: 100%;
   
     
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
	margin-bottom:3px;

}


ul.event_list li span {font-size:.9rem; font-weight:300;  color:#555; }
/* ul.event_list li a:hover  .img img {filter:grayscale(100%); opacity:.8}
 */ul.event_list li a:hover h3 {color:#ff4a00}
ul.event_list li a:hover p {color:#111}

.magazin_list {display:flex}
.magazin_list .b_box {width:42%; position:relative }
.magazin_list ul.event_list {width:55%; margin-left:auto; margin-top:0; }
.magazin_list ul.event_list li .img  { border-radius:5px}
.magazin_list ul.event_list li {width:48%;  } 


.magazin_list .b_box .img  {width:100%; overflow:hidden; position:relative; padding-bottom:50%; border-radius:5px}
.magazin_list .b_box .img img {min-width:100%; min-height:100%; max-width:150%; position:absolute; left:50%; top:50%; transition: all 0.3s; transform: translate(-50%, -50%);}

.magazin_list .b_box  h3 {font-size:1.5em; font-weight:600; line-height:1.3; display:block; margin:20px 0 10px 0}
 
.magazin_list .b_box  p {font-size:1em; font-weight:400; line-height:1.35; color:#555;
    width: 100%;
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
	margin-bottom:5px;

}


.magazin_list .b_box span {font-size:.9rem; font-weight:300;  color:#555; }
/* .magazin_list .b_box a:hover  .img img {filter:grayscale(100%); opacity:.8}
 */.magazin_list .b_box a:hover h3 {color:#ff4a00}
.magazin_list .b_box a:hover p {color:#111}

.magazin_list span.label {position:absolute; right:15px; top:15px; z-index:999; font-size:1.15rem; font-weight:600;  border:1px solid #ff4a00; color:#ff4a00; padding:5px 15px }

 @media all and (min-width:900px) {
             ul.event_list li {  margin-right:2.7%; } 
            ul.event_list li:nth-child(3n) {margin-right:0}

			ul.event_list li:nth-child(n + 4) {margin-top:30px}
			.magazin_list ul.event_list {justify-content:space-between}
			.magazin_list ul.event_list li {margin-right:0 } 
			.magazin_list ul.event_list li:nth-child(n + 3) {margin-top:25px}

}
 @media all and (max-width:900px) {
			ul.event_list { justify-content:space-between}
			ul.event_list li {width:48%;} 
			ul.event_list li:nth-child(n + 3) {margin-top:20px}
			ul.event_list li h3 {font-size:1.1rem;  margin:10px 0 3px 0 }

			ul.event_list li p {font-size:.95rem}

			.magazin_list {flex-wrap:wrap}
			.magazin_list .b_box {width:100%; }
			.magazin_list ul.event_list {width:100%;  margin-top:20px; }

 			.magazin_list .b_box h3 {font-size:1.1rem;  margin:10px 0 3px 0 }
 			.magazin_list .b_box p {font-size:.95rem}

 			.magazin_list span.label {font-size:.95rem }



}