@charset "utf-8";

.board-list {  }

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

/* List */
.list-wrap .tile > .a {  }
.list-wrap .tiles .content { position: relative; margin-top: 0; padding: 20px; z-index: 2; background: #fafafa; border: 1px solid #eee; border-top: 0;
	font-family: 'NotoSans'; overflow: hidden; transition-duration: 300ms; display:flex; flex-wrap: wrap; justify-content: center; align-items: baseline;}
.list-wrap .tiles .tile { margin-top: 30px; }
.list-wrap .tiles .head { font-size: 1.25rem; font-weight: 600; text-align: center; width:100%; margin-top: 10px;}
.list-wrap .tiles .desc {  font-size: 1rem; text-align: center;  width:100%; color:#777}
.list-wrap .tiles .desc3{ font-size: 1.125rem; font-weight:500;margin-top: 10px;  }
.list-wrap .tiles .desc2 {width:100%; text-align:center; padding-top:10px;  font-size: 1.125rem;}
.list-wrap .tiles .shadow { position: absolute; left: 50%; bottom: 2px; width: 96%; height: 50%; margin-left: -48%; box-shadow: 0 5px 7px #999; transition-duration: 500ms; }
.list-wrap .tiles .overlay-desc { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px; background: rgba(0, 0, 0, 0.4); color: white;
	font-size: 14px; transition-duration: 500ms; }
.list-wrap .tiles .image a { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; }

.list-wrap .a:hover .shadow { opacity: 0; }
.list-wrap .a:hover { transform: translateY(-20px) !important; }

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

@media (max-width:1023px) {  }
@media (max-width:767px) { .list-wrap .tiles .head { font-size: 20px;  }
.list-wrap .tiles .desc { margin-top: 10px; font-size: 15px; text-align: center;  width:100%; color:#555} }
@media (max-width:480px) {  }


/* Page */
.list-wrap .list-more { margin: 30px 0; text-align: center; }
.list-wrap .list-more a { color: #aaa; }
.list-wrap .list-more a i { font-size: 3rem; }

.list-wrap .pagination { padding-top:20px; }
.list-wrap .pagination a, .view-wrap .pagination a { color:#333 !important; }
.list-wrap .pagination .active a, .view-wrap .pagination .active a { color:#fff !important; background:#444 !important; border-color:#444 !important; }



/* View */
.view-wrap {  }
.view-wrap .top { display: flex; flex-wrap: wrap; justify-content: center; }

.view-wrap .left { width: 30%; padding: 50px 20px; }
.view-wrap .right { width: 70%; padding: 50px 20px 100px 50px; }


.view-wrap .a { position: relative; }
.view-wrap .a .content { position: relative; margin-top: 0; padding: 20px; z-index: 2; background: #fafafa; border: 1px solid #eee; border-top: 0;
	font-family: 'NotoSans'; overflow: hidden; transition-duration: 300ms; justify-content: center; }
.view-wrap .a .image { position: relative; }
.view-wrap .a .img { padding-top: 100%; box-shadow:7px 7px 5px rgba(0,0,0, 0); }
.view-wrap .a .head { font-size: 20px; font-weight: 400; text-align: center; padding-right:5px; }
.view-wrap .a .desc { margin-top: 5px; font-size: 14px; text-align: center; }
.view-wrap .a .shadow { position: absolute; left: 50%; bottom: 2px; width: 96%; height: 50%; margin-left: -48%; box-shadow: 0 5px 7px #999; transition-duration: 500ms; }
.view-wrap .a .overlay-desc { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px; background: rgba(0, 0, 0, 0.4); color: white; text-align: center;
	font-size: 14px; transition-duration: 500ms; }
.view-wrap .a .sns { display: flex; align-items: center; justify-content: center; width: 50%; margin: 20px auto 0; padding: 20px 15px 0; border-top: 1px solid #ccc; }
.view-wrap .a .sns a { display: block; width: 32px; height: 32px; line-height: 32px; margin: 0 3px; border-radius: 50%; background: #666; text-align: center; color: white; }
.view-wrap .a .sns a:hover { color: #00a0e0; }
.view-wrap .view-sns a { margin:0 3px; }
.view-wrap .view-sns a:nth-child(2),
.view-wrap .view-sns a:nth-child(3),
.view-wrap .view-sns a:nth-child(4),
.view-wrap .view-sns a:nth-child(5),
.view-wrap .view-sns a:nth-child(7) { display: block; }

.view-wrap .right .header-block { display: flex; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #004071; }
.view-wrap .right .header-block h2 { flex: 1; font-size:2rem; }
.view-wrap .right .header-block h2 span {font-size:1.5rem; font-weight:400;}
.view-wrap .right .header-block .view-sns { margin: 0; text-align: right; }
.view-wrap .right .header-block .view-sns img { width: 40px; }
.view-wrap .right .header-block .view-sns a { width: 40px; height: 40px; }
.view-wrap .right .header-block .view-sns a i { line-height: 40px; font-size: 25px; }
.view-wrap .right ul { margin-top: 25px; }
.view-wrap .right ul li { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 15px; border-radius: 5px; transition-duration: 300ms;}

.view-wrap .right ul li .k { width: 150px; padding: 6px 0; border-radius: 5px; border: 1px solid #ddd; color:#333; font-size: 15px; text-align: center; transition:all .3s; }
.view-wrap .right ul li:hover .k {background: #004071; color:#fff; }
.view-wrap .right ul li .k span {  }
.view-wrap .right ul li .v { width:calc(100% - 150px); padding: 0 20px 10px; }

.view-wrap .right ul a.down_btn {display:inline-block; margin-top:3em; padding:15px 30px; background-color: #004071; color:#fff; transition:.3s;}
.view-wrap .right ul a.down_btn:hover { background:#787878;}

.view-wrap .content-wrap { margin-top:-1px; border-top-width: 0px; border-top-style:solid; border-top-color: #ccc; border-bottom:1px solid #ccc; padding:40px 0; }
.view-wrap .content-wrap .title { padding: 10px; border: 1px solid #ccc; text-align: center; }
.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-thumb-active { opacity: 1; }

.view-wrap .content { max-width:900px; margin:30px auto 0; padding-top:0px; border-top:0px solid #ccc; line-height:160%;  }
.view-wrap .content img { max-width:100%; margin-bottom: 20px ; margin-top: 20px;}

@media (max-width: 1023px) {
	.view-wrap .left { width: 40%; }
	.view-wrap .right { width: 60%; }
}


@media (max-width: 960px) {
	.view-wrap .left { width:100%; padding: 20px 70px; }
	 
	.view-wrap .right { width:100%; padding: 40px 0; }

	.view-wrap .right .header-block h2 { width: 100%; text-align:center; }
	.view-wrap .right .header-block .view-sns { width: 100%; }



  .view-wrap .content { padding-top:40px; }
}

@media (max-width: 768px) {
  .view-wrap .content-wrap { padding:20px 10px; }
	.view-wrap .content .content_tit, .view-wrap .content .content_desc {width:100%;}

  .view-wrap .content .content_tit {padding-bottom:1em; text-align:center;}
  .view-wrap .right ul li .k { width: 110px; }
  .view-wrap .right ul li .v { width:calc(100% - 110px); }
}

.view-btn { margin:0 0 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, .write-wrap .form-ele textarea { width:100%; height:100px; }
.write-wrap .form-ele textarea.textareaBig {width:100%; height:400px; }
.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; }
}