@charset "utf-8";
/* CSS Document */
.bod_box { clear:both;margin:20px auto 0;}
.search-container {float:none;
  overflow: hidden;
  width:100%;
  vertical-align: middle;
  white-space: nowrap;
}
.search-container input#search{
  width: 100%;
  height: 35px;
  margin-bottom:10px;
  background: #e2e2e2;
  border: none;
  font-size: 10pt;
  float: left;
  color: #585858;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.flickr_ban {width: 100%; display: block; margin-bottom: 10px;}
.flickr_ban a {display: block;  width:130px; height:38px; vertical-align: middle;}
 .flickr_ban img {max-width: 100%; height: auto; vertical-align: middle;}

table.bodtype {width:100%;margin:0 auto;border-collapse: separate;
    border-spacing: 0px;
    line-height: 1.5;table-layout:fixed;}
table.bodtype th:nth-of-type(1)  { width:15%;}
table.bodtype th:nth-of-type(2)  {width:60%; }
table.bodtype th:nth-of-type(3)  {width:25%; }


.bod_icon { display:block; width:40px; font-size:12px; text-align: center; background-color:#0d1c4b;  color:#fff; font-weight:400; padding: 0 5px;border-radius: 5px; overflow: hidden;margin: 0 auto;}

table.bodtype th { padding:10px 0px; text-align:center; border-top:2px solid #65686f;border-bottom:1px solid #65686f;}

table.bodtype th { font-size:14px;}
table.bodtype td { font-size:14px;}
table.bodtype td { padding:10px 0; border-bottom:1px solid #adafb2; text-align:center;}
table.bodtype td.tline { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:80px;width: 50%;}

table.bodtype th.viewtit { padding:15px 15px; font-size:16px; text-align:left; font-weight:700; line-height:2em; border-top:2px solid #65686f;border-bottom:1px dashed #b2b3b7;}
table.bodtype td.viewtline02 {text-align:left;padding:15px 15px; border-bottom:1px solid #d0d0d0; font-weight:700;}
table.bodtype td.viewtline02 img {vertical-align:middle; margin-left:1%;}

table.bodtype td.tline02 { width:30%;text-align:left;padding:10px 0px 10px 15px; border-top:1px solid #adafb2;border-bottom:1px solid #adafb2; }
table.bodtype td.tline03 {width:30%;text-align:left;padding:10px 0px 10px 15px; border-top:1px solid #adafb2;border-bottom:1px solid #adafb2; }
table.bodtype td.tline02_1 { width:70%;text-align:left;padding:10px 0px 10px 15px; border-top:1px solid #adafb2;border-bottom:1px solid #adafb2; line-height:1.8em;}
table.bodtype td.tline03_1 {width:70%;text-align:left;padding:10px 0px 10px 15px; border-top:1px solid #adafb2;border-bottom:1px solid #adafb2; line-height:1.8em;}

table.bodtype td.conbox {text-align:left;padding:30px 0px; border-bottom:1px solid #b2b3b7;line-height:2em; overflow:hidden;}
table.bodtype td.conbox img {max-width:100%; height: auto;}
	
.bodformbtn {display:inline-block; width:20%;height:38px;background:#1a1a1a;font-size:16px; color:#ffffff; border: none;outline: none; cursor: pointer; } 

table.bodtype td.tline { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:200px;width: 50%;}
	
.bodbtnbox { margin-top:30px; width:100%; text-align: right;}
.bodbtnbox .bodbtn { background:#111;width:80px; padding:5px; margin-left:75%;}
.bodbtnbox .bodbtn a { display:block;width:100%;height:30px;  padding:5px 0; text-align:center; font-weight:500; color:#ffffff; text-decoration:none;}
.dalink { padding-left:0px;}


.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}


.content-details p{
  color: #fff;
  font-size:24px; font-weight: 700; width:50px; height: 50px; line-height: 50px; text-align: center;border-radius: 50px; overflow: hidden; background-color: #2aa3ff;position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fadeIn-top{
  top: 20%;
}

@media screen and (min-width:375px)  {
    
}
@media screen and (min-width:768px)  {
	.bodbtnbox .bodbtn { margin-left:87%;}
    
}
@media screen and (min-width:1024px)  {   
    /* board */
.bod_box { clear:both;margin:30px 0;}
.bod_box .bodlist { float:left; width:50%;}
.bod_icon { width:50px; font-size:14px;padding: 0 5px;}

    .flickr_ban {position: relative;margin-bottom: 0px;}
.flickr_ban a {position: absolute; right:270px; width:180px; height:53px; }
    
.search-container {float: right;
  overflow: hidden;
  width: 260px;
  vertical-align: middle;
  white-space: nowrap;
}
.search-container input#search{
  width: 260px;
  height: 45px;
  margin-bottom:10px;
  background: #f2f2f2;
  border:0;
  font-size: 10pt;
  float: left;
  color: #585858;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.search-container input#search::-webkit-input-placeholder {
   color: #585858;
}
 
.search-container input#search:-moz-placeholder { /* Firefox 18- */
   color: #585858;  
}
 
.search-container input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #585858;  
}
 
.search-container input#search:-ms-input-placeholder {  
   color: #585858;  
}

.search-container button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
 
  border: none;
  background: #0d1c4b;
  height: 45px;
  width: 50px;
  color: #fff;
  opacity: 0;
  font-size: 10pt;
 
  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

.search-container input {outline: none;}
.search-container:hover button.icon, .search-container:active button.icon, .search-container:focus button.icon{
    outline: none; cursor:pointer;
    opacity: 1;
    margin-left: -50px;
  }
 
  .search-container:hover button.icon:hover{
    background: #28387b;
  }
  
.bodlist select {width: 35%; font-size:16px;padding: .4em .5em;
						border: 1px solid #dcdcdc; background-color:#fff;background-image: url(/images/common/select_icon.png);background-repeat:no-repeat; background-position:95% 50%;
						border-radius: 0px;-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none; }  
select::-ms-expand {display: none;}
.bodformbtn {display:inline-block; width:60px;height:38px;background:#333;font-size:16px; color:#ffffff; border: none;outline: none; cursor: pointer; } 

table.bodtype th:nth-of-type(1)  { width:15%;}
table.bodtype th:nth-of-type(2)  {width:65%; }
table.bodtype th:nth-of-type(3)  {width:20%; }
table.bodtype th { font-size:16px;}
table.bodtype td { font-size:16px;}	

table.bodtype th.viewtit { padding:15px 15px; font-size:18px;}

table.bodtype td.tline { text-align:left;white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:600px;width:80%; padding-left:10px;}
table.bodtype td.tline a:hover { color:#28387b;}

table.bodtype td.tline02 { width:15%; }
table.bodtype td.tline03 {width:15%;}
table.bodtype td.tline02_1 { width:85%;}
table.bodtype td.tline03_1 {width:85%;}

table.bodtype td.rino {border-right:0px dashed #d0d0d0;}
table.bodtype th.rino {border-right:0px dashed #d0d0d0;}

table.bodtype td.viewtline {text-align:left; border-bottom:2px solid #65686f; font-weight:500;}

.dafile { display:inline-block;width:20%; text-align:left;padding-left:50px;padding-right:50px;font-weight:300;}
    .downfile { display:inline-block; text-align:left;padding-left:50px;padding-right:10px;font-weight:300;}
    .downfile a:after {content: '/'; display: inline-block; padding: 0 10px;}
    .downfile a {display: inline-block;}
    .downfile a:hover {color: #2aa3ff;}

table.bodtype td.conbox {padding:30px 15px;}

.bodbtnbox .bodbtn { width:100px; padding:5px; margin-left:90%;}
    table.bodtype td .bod_link {display:inline-block;padding-left:30px;}
    table.bodtype td .bod_link a {display:inline-block; text-decoration: underline; color: #40478c; font-weight: 400;} 
}
@media screen and (min-width:1200px)  {
     
    .bodbtnbox .bodbtn { margin-left:92%;}
}

/* 갤러리 */
ul.gallery_area {display: flex; /* Flex 컨테이너로 설정 */
  flex-wrap: wrap; /* 필요에 따라 줄 바꿈 */
 justify-content:flex-start;
  align-items: center; /* 왼쪽 정렬 (필요에 따라 center, space-around 등 사용) */
   margin-top:30px; /* 아이템 사이의 간격 */
  }

ul.gallery_area li {
  width: 100%; /* grow, shrink, basis (필요에 따라 조정) */
  margin-bottom: 30px;
}

ul.gallery_area li .gallery_thumb {  border-radius: 10px; overflow: hidden;}
ul.gallery_area li .gallery_thumb img {
  width: 100%; /* 이미지의 너비를 썸네일 요소에 맞춤 */
  height: 100%; /* 이미지 비율 유지 */
  display: block; /* 이미지 아래의 빈 공간 제거 */
    object-fit: cover;
}
.img-hover {
  transition: transform 0.3s ease; /* 부드러운 효과를 위한 transition 설정 */
}

.img-hover:hover {
  transform: scale(1.3); /* 마우스 오버 시 이미지 확대 */
}
ul.gallery_area li span {width: 100%; height:45px; display: block; margin-top: 20px;display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal;text-overflow:ellipsis;overflow:hidden;}
ul.gallery_area li span:hover {color: #28387b;}

@media screen and (min-width:768px)  {
ul.gallery_area li {flex: 0 0 150px; margin-left:12px; margin-right:12px; margin-bottom:25px;}
    ul.gallery_area li .gallery_thumb {height:113px; }
    ul.gallery_area li:nth-child(4n) {margin-right: 0;}
}
@media screen and (min-width:1024px)  { 
ul.gallery_area li {flex: 0 0 180px; margin-left:28px; margin-right:28px; margin-bottom: 30px;}
    ul.gallery_area li .gallery_thumb {height:135px; }
}
@media screen and (min-width:1200px)  {    
    ul.gallery_area li {flex: 0 0 225px;}
    ul.gallery_area li .gallery_thumb {height:169px; border-radius: 20px;}
}
@media screen and (min-width:1400px)  {
    
}
@media screen and (min-width:1440px)  {
 ul.gallery_area li {flex: 0 0 250px;}
    ul.gallery_area li .gallery_thumb {height:188px; }

}
@media screen and (min-width:1920px)  { 
    ul.gallery_area li {flex: 0 0 300px;}
    ul.gallery_area li .gallery_thumb {height: 225px; }
  
}
