@charset "utf-8";

.board-list { margin-top:20px; }

/* Top Search */
.list-tsearch { border:1px solid #ddd; background:#fafafa; padding:20px 15px 3px; margin-bottom:15px; }

/* List */
.list-wrap { width:100%; }
.list-admin { text-align:center; margin:15px 0px; }
.list-btn .sort-drop { min-width:120px !important; left:auto !important; right:0px !important; }
.list-btn .sort-drop .sort a { color:crimson !important; font-weight:bold !important; }
.is-pc .ko .list-btn .sort-drop { font-size: 12px; }

.list-wrap .hover-img-alpha70 .a:hover .image::after { background-color: rgba(205, 108, 56, 0.7) !important; }
.list-wrap .hover-a-border7 .a:hover::after { /* border-color:red; */ /* 마우스호버 테두리 재정의 */ }

.list-wrap .tiles .tile > .a {  }
.list-wrap .tiles .content { margin-top:0; padding:10px 30px; }
.list-wrap .tiles .content .head { font-size: 16px; font-weight:700; }
.list-wrap .tiles .content .desc {  }

.list-wrap .tiles .content ul { overflow:hidden; }
.list-wrap .tiles .content ul::after { display:block; content:""; clear:both; }
.list-wrap .tiles .content ul li { float:left; color:#888; padding-bottom:2px; white-space:nowrap; text-overflow:ellipsis; font-size:14px; }
.list-wrap .tiles .content ul li:nth-child(1) { width:30%; color:#666; }
.list-wrap .tiles .content ul li:nth-child(2) { max-width:70%; }

.list-wrap .tiles .more { color:white; }
.list-wrap .tiles .more div { margin-top:5px; color:white; font-size:16px; }
.list-wrap .tiles .more .head { color:white; }
.list-wrap .tiles .more .line { display:inline-block; background-color:white; width:100px; height:1px; margin:6px 0; }
.list-wrap .tiles .more .desc { color:white; }
.list-wrap .tiles .more .btn-viewlayer { margin-right: 3px; }
.list-wrap .tiles .more a { margin-top:20px; color:white; }

/* View Layer 스타일 - Start */
.list-wrap .view-layer { position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:100; background:#333; overflow:hidden; display:none; }
body.view-layer-on { overflow:hidden; }
body.view-layer-on .list-wrap .view-layer { display:block; }
.list-wrap .view-layer .view-layer-wrap { position:relative; width:100%; height:100%; overflow:auto; }
.list-wrap .view-layer .view-layer-wrap::after { content:""; display:block; clear:both; }

.list-wrap .view-layer .top { position: absolute; width:100%; height: 50px; background: #111; }
.list-wrap .view-layer .bottom { position: absolute; bottom: 0; width:100%; height: calc(100vh - 50px); }

.list-wrap .view-layer .top .logo { height: 40px; margin-left: 10px; margin-top: 5px; }

.list-wrap .view-layer .col { float:left; height: 100%; }
.list-wrap .view-layer .left { width: 75%; background:#222; }
.list-wrap .view-layer .right { width: 25%; background:#333; color:white; overflow:auto; }

.list-wrap .view-layer .image { height:100%; }
.list-wrap .view-layer .image-child { width:100%; position:relative; }
.list-wrap .view-layer .swiper-container {  }

.list-wrap .view-layer .gallery-top {  }
/* background-size: cover :: 배경 이미지를 요소 공간에 꽉채워보이지만, 비율을 유지하기에 일부 짤리는 부분이 있다. */
/* background-size: contain :: 요소 공간 안에 배경 이미지를 짤림 없이 꽉채워보이지만, 비율을 유지하기에 요소에 여백이 생긴다. */
.list-wrap .view-layer .gallery-top .swiper-slide { height:calc(100vh - 50px); background-size: cover; background-repeat: no-repeat; background-position: center; }

.list-wrap .view-layer .thumbs-wrapper { position:absolute; left:0; right:0; bottom:0; background: rgba(0, 0, 0, 0.75); z-index: 1; padding-top: 5px; }
.list-wrap .view-layer .thumbs-wrapper2 { position: relative; }
.list-wrap .view-layer .gallery-thumbs { position: relative; }
.list-wrap .view-layer .gallery-thumbs .swiper-slide { padding-bottom:calc(100% * 2/3 / 5); /* 슬라이드 수 5 */ opacity:0.4; cursor:pointer; }
.list-wrap .view-layer .gallery-thumbs .swiper-slide-active { opacity:1; }
.list-wrap .view-layer .gallery-thumbs .prev,
.list-wrap .view-layer .gallery-thumbs .next { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 20px; cursor: pointer; z-index: 10; }
.list-wrap .view-layer .gallery-thumbs .prev { left: 5px; }
.list-wrap .view-layer .gallery-thumbs .next { right: 5px; }

.list-wrap .view-layer .content { margin:80px 0 30px; padding:0 30px; }
.list-wrap .view-layer .data-subject { margin-bottom:40px; }
.list-wrap .view-layer .line { width:100px; height:4px; border-radius:2px; font-size:0; line-height:0; }
.list-wrap .view-layer .data-desc { margin-top:40px; color:#ccc; line-height:160%; }
.list-wrap .view-layer .items { margin:30px 0; padding:30px 0px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.list-wrap .view-layer .items ul.item { padding:5px 0; }
.list-wrap .view-layer .items ul.item::after { content:""; display:block; clear:both; }
.list-wrap .view-layer .items ul.item li { float:left; }
.list-wrap .view-layer .items ul.item li:nth-child(1) { color:#ccc; font-weight:700; }
.list-wrap .view-layer .items ul.item li span { margin-left: 5px; color: white; font-weight: 400; }

.list-wrap .view-layer a.btn-close { position:absolute; top:4px; right:4px; z-index:2; color:#ccc; border:1px solid transparent; overflow:hidden; }
.list-wrap .view-layer a.btn-close:hover { border-color:#aaa; }
.list-wrap .view-layer a.btn-close > div { position:relative; width:40px; height:40px; }
.list-wrap .view-layer a.btn-close > div > div { position:absolute; width:25px; height:3px; left:50%; top:50%; border-radius:2px; background-color:#aaa; }
.list-wrap .view-layer a.btn-close > div > div:nth-child(1) { transform:translate(-50%, -50%) rotate(45deg) scaleX(1.2); }
.list-wrap .view-layer a.btn-close > div > div:nth-child(2) { transform:translate(-50%, -50%) rotate(-45deg) scaleX(1.2); }

@media (min-width:1024px) {
	.list-wrap .view-layer .gallery-thumbs .swiper-slide { padding-bottom:calc(100% * 2/3 / 8); /* 슬라이드 수 7 */ }
}

@media (max-width: 1300px) {
	.list-wrap .view-layer .left { width: 65%; }
	.list-wrap .view-layer .right { width: 35%; }
}

@media (max-width:1023px) {
	.list-wrap .view-layer .items { padding:30px 0; }
}
@media (max-width: 767px) {
	.list-wrap .view-layer .col { float:none; width:100%; height:auto; }
	.list-wrap .view-layer .left { background:#333; }
	.list-wrap .view-layer .gallery-top .swiper-slide { background-size: contain; }

	.list-wrap .view-layer .content { margin-top:50px; padding:0 20px; }

	.list-wrap .view-layer .bt { display:block; text-align:center; }
	.list-wrap .view-layer .bt a { display:inline-block }
}
/* View Layer 스타일 - End */

.list-wrap .wr-none { padding:50px 0px; text-align:center; color:#888; }

@media (max-width:1023px) {  }
@media (max-width:767px) {  }
@media (max-width:480px) {  }


/* View */
.view-wrap {  }
.view-wrap .item { float:left; border-top:1px solid #ccc; }
.view-wrap .item1 { width:40%; }
.view-wrap .item2 { width:60%; }

.view-wrap .item .table { height:450px; }

.view-wrap .item1 .table .cell { padding-left:20px; padding-right:10px; }
.view-wrap .item1 .table .img { padding-bottom:75%; box-shadow:7px 7px 5px rgba(0,0,0, 0); }

.view-wrap .item2 .table .cell { padding:0 20px 0 60px; }
.view-wrap .item2 h2 { font-size:25px; }
.view-wrap .item2 table { width:100%; border-top:1px solid; border-bottom:1px solid; border-color:#ccc; }
.view-wrap .item2 tr {  }
.view-wrap .item2 th { width:25%; padding:10px 0; }
.view-wrap .item2 td { color:#888; }
.view-wrap .item2 td a { color:#888; }

.view-wrap .content-wrap { margin-top:-1px; border-top-width:3px; border-top-style:solid; border-bottom:1px solid #ccc; padding:40px 0; }

.view-wrap .swiper-container { max-width:900px; margin-top:10px; }
.view-wrap .gallery-top .swiper-slide { padding-bottom:56.25%; }
.view-wrap .gallery-thumbs .swiper-slide { width:20%; padding-bottom:11.25%; opacity:0.4; cursor:pointer; }
.view-wrap .gallery-thumbs .swiper-slide-active { opacity:1; }

.view-wrap .content { max-width:900px; margin:60px auto 0; padding-top:50px; border-top:1px solid #ccc; }
.view-wrap .content img { max-width:100%; }

@media (max-width:991px) {
	.view-wrap .item {  }
}
@media (max-width:767px) {
	.view-wrap .item1 { width:100%; border-width:0; }
	.view-wrap .item2 { width:100%; border-width:0; margin-top:20px; }

	.view-wrap .item .table { height:auto; }
	.view-wrap .item1 .table .cell { padding:0; }
	.view-wrap .item2 .table .cell { padding-left:10px; padding-right:10px; }
}


.view-btn { margin:0px 0px 30px; }
.view-btn i { margin-right:2px; }

@media all and (max-width:460px) {
	.responsive .view-btn i { margin-right:0px; }
}

.list-page { padding-top:20px; }


/* Write */
.write-wrap { width:100%; overflow:hidden; }
.write-wrap h2 { letter-spacing:-1px; padding:0px; margin:10px 0px 30px; }
.write-wrap table { width:100%; border:0px; min-width:500px;}
.write-wrap table td { border:0px; border-bottom:1px solid #ddd; padding:8px 15px !important; line-height:20px; vertical-align:middle; }
.write-wrap .form-label label { font-weight:normal; margin-right:15px; vertical-align:middle; line-height:20px; }
.write-wrap .form-label label input { padding:0px !important; margin:0px !important; vertical-align:middle; }
.write-wrap .form-line { border-bottom:2px solid orangered; height:1px; }
.write-wrap .form-title { border-bottom:2px solid orangered; line-height:24px; }
.write-wrap .form-title-thin { border-bottom:1px solid orangered; line-height:24px; }
.write-wrap .sub-title { padding-right:0px !important; width:140px; }
.write-wrap .sub-title span { display:block; border-right:1px solid #ddd; padding-right:10px; }
.write-wrap .sub-title span b { font-weight:normal; }
.write-wrap .form-group { margin-bottom:8px; }
.write-wrap .form-text { margin:10px 0px 20px; }
.write-wrap .form-text textarea { height:100px; }
.write-wrap .form-sign { margin:20px 0px; }
.write-wrap .write-file { border:0;box-shadow:none; }
.write-wrap .write-btn { margin:15px 0px 25px; text-align:center; }
.write-wrap .delete-file { margin:0px; padding:0px 10px; font-weight:normal; }
.write-wrap .delete-file label { font-weight: normal; }

.write-wrap .help-block { margin-bottom:5px; }
.write-wrap .help-block li { margin-bottom:0; }

#variableFiles { width:100%; margin:0 !important; border:0; }
#variableFiles td { padding:3px 0px !important; border:0; }
#variableFiles input[type=file] { box-shadow : none; border: 1px solid #ccc !important; outline:none; }
#variableFiles .form-group { margin:0; }
#variableFiles .col-sm-12 .form-group { margin:6px 0px; }
#variableFiles .checkbox-inline { padding-top:0px; font-weight:normal; }

@media (max-width:991px) { 
	.responsive .view-col.pull-left, 
	.responsive .view-col.pull-right { float:none !important; }
}