@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:#0799d3;}

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

.row.header .cell { color: #fff; border-bottom:none}

.tit  {width:70%; text-align:left; font-weight:600; line-height:1.3}
.tit a:hover {text-decoration:underline}
.tit span {font-weight:500; padding:2px 5px; font-size:.95em; margin-right:5px; background-color:#f9f9f9; border:1px solid #333;  color:#333}
.tit span.red { background-color:#0799d3;  border:1px solid #0799d3; color:#fff }
 


.cell.no {width:50px; }
.cell.date {white-space:nowrap;}
.cell.hit {white-space:nowrap;}
.cell.name {white-space:nowrap;}

.none_list  {width:100%;  background-color:#f9f9f9; padding:10px; box-sizing:border-box; font-size:1em; display:flex; justify-content:center;  }
 
@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:#0799d3;  }
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.view_content img {max-width:100%}


div.reple {width:100%; display:flex; border:2px solid #0799d3;   padding:15px; font-size:1em; color:#666;   box-sizing:border-box; background-color:#fff}

div.reple  b {color:#333; font-weight:600;   width:90px}
div.reple  p {width:calc(100% - 90px);}

.list_next  {width:100%;   padding:8px 0; box-sizing:border-box; border-bottom:1px solid #ddd; line-height:0; font-size:.98em} 
.list_next p { width:100%; display:flex; font-size:1em; line-height:1; color:#999; margin:8px 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 span.file {width:100%; display:block; }
	p.view_info span.file a {margin-top:3px}

}

 

  
/*페이지*/


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

}

 

/*서치*/
 						
.search     {margin-top:25px;  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.93em; font-weight:500; padding:0 30px; display:inline-block; vertical-align:middle;}
									   
  
  
.write {width:100%; display:flex;  justify-content:space-between; flex-wrap:wrap; margin-bottom:-20px }
.write li { width:100%; /*   padding-right:10px; */  box-sizing:border-box; margin-bottom:15px; display:inline-block;    }
.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:600; font-size:1.1em; height:32px} 
.write li p span {float:right;  font-weight:400; margin-top:3px; font-size:.85em; color:#666}
.write li div {  display:flex;   width:100%; align-items:center; }
.write li div.radio_wrap input {margin-right:5px}

.write li div.flex div { width:auto; display:inline-block;  margin-right:15px  }
.write li div.flex div p {width:100%}

.write li div.bg_box {background-color:#f5f5f5; padding:20px; border-radius:5px;  box-sizing:border-box; margin-top:20px}

.write li div.flex.bg_box  {flex-wrap:wrap; justify-content:space-between}
.write li div.flex.bg_box div  {width:49%; margin-right:0}
.write li div.flex.bg_box div:last-child {width:100%; margin-top:13px;}

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


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

.write li  select { 
    height:43px;
    font-size: .97em;
	border-radius: 5px; padding:0 5px;
	border:1px solid #ddd; color:#666;
	}
.write li  textarea { 
    width:100%; 
	height: 200px;
    font-size: .97em;
	border-radius: 5px;
   box-sizing:border-box; 
   background-color:#fff; 
	border:1px solid #ddd; color:#666; padding:10px;
	}
.write li  input[type="file"] {font-size:.90em}

 

.write li div {display:flex}
.write li div a {width:120px; margin-left:auto; display:flex; align-items:center; justify-content:center; white-space:nowrap; margin-left:10px; line-height:41px}
 
.write li div.tel   { justify-content:space-between}
.write li div.tel input[type="text"] {width:31.5%;  }

.write li div.email input[type="text"] {width:30%; max-width:300px; margin-right:5px}
.write li div.email input[type="text"]:nth-child(2) {margin-left:5px}

.form_box {border:1px solid #ddd; border-radius:8px; max-width:730px; margin:0 auto; box-sizing:border-box; padding:30px 30px 50px 30px; box-shadow: 5px 5px 10px rgb(0 0 0 / 6%); }
 



 @media screen and (min-width:900px) {
 
		.join .write li {width:100%;  }
		.join .write li  input[type="text"] {width:300px; max-width:100%}
		.join .write li  input[type="password"] {width:300px; max-width:100%}
		.join .write li div.tel   { justify-content:flex-start}
		.join .write li div.tel input[type="text"] {width:150px  }
		.join .write li.right {  padding-left:0}

}

 @media screen and (max-width:900px) {
		.write li {width:100%;  padding-right:0;}
		.write li.right {padding-right:0; padding-left:0}
 
		.write li div.bg_box  {padding:15px 15px 20px 15px}
		.write li div.flex.bg_box div  {width:100%; margin-top:8px !important; }
		
		.form_box {padding:0; box-shadow:none; border:none }
 
  }

  
div.view_content .write  {margin-top:-5px}
div.view_content .write li {width:50%; border-bottom:1px solid #ddd; padding-bottom:10px; }
div.view_content .write li p {  height:auto; }
div.view_content .write li.box_100 {width:100%;  }

 @media screen and (max-width:900px) {
  div.view_content .write li {width:100%;   }

}


/*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.gall {width:100%; display:flex; flex-wrap:wrap;   }
 ul.gall li {width:32%; margin-right:2%; text-align:center}
 ul.gall li:nth-child(3n) {margin-right:0}
 ul.gall li:nth-child(n + 4) {margin-top:20px}

 ul.gall li * {width:100%; display:inline-block; line-height:1.35em;  }
 ul.gall li div {width:100%; padding-bottom:60%; border:1px solid #ddd;  overflow:hidden; position:relative; }
 ul.gall li img {width:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);  transition: all 0.3s ease-out;} 
 ul.gall li:hover img {width:110%; }
 ul.gall li div.none {border:1px solid #ddd; box-sizing:border-box; } 
 ul.gall li div.none img {width:60%}
 ul.gall li:hover div.none  img {width:60%; }


 ul.gall li h3 { width:100%; margin-top:12px; font-size:1.2em; font-weight:600; color:#222;
  overflow: hidden; 
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
   word-breal:break-all;  margin-bottom:3px;
 
 }

ul.gall.ebook li   {width:23.5%}
ul.gall.ebook li:nth-child(3n) {margin-right:2%}
ul.gall.ebook li:nth-child(4n) {margin-right:0}
ul.gall.ebook li:nth-child(n + 4) {margin-top:0}
ul.gall.ebook li:nth-child(n + 5) {margin-top:20px}
ul.gall.ebook li h3 {margin-bottom:0}
ul.gall.ebook li div {border:none; padding-bottom:135%; }
 

 ul.gall li p {font-size:.98em; font-weight:400; color:#555;
 overflow: hidden; 
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word; 
 }
 ul.gall li span {font-size:.88em;   font-weight:400; color:#999}


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

		ul.gall.ebook li   {width:48%}
		ul.gall.ebook li:nth-child(2n) {margin-right:0}
		ul.gall.ebook li:nth-child(n + 3) {margin-top:20px}



}