@charset "utf-8";


/* 갤러리 카테고리 */
.category {display:block; overflow:hidden; text-align:center; margin-bottom:40px;}
.category li {min-width:120px; display:inline-block; border:1px solid #ddd; border-radius:20px;}
.category li a {display:block; padding:10px 5px;}
.category li.on {background:#014693; border:1px solid #014693;}
.category li.on a {color:#fff;}


/* 갤러리 리스트 */
.li01 {}
.li01 li {width:100%;}
.li02 {margin:0 -1%;}
.li02 li {width:50%; padding:0 1%;}
.li03 {margin:0 -1%;}
.li03 li {width:33.333%; padding:0 1%;}
.li04 {margin:0 -1%;}
.li04 li {width:25%; padding:0 1%;}
.li05 {margin:0 -1%;}
.li05 li {width:20%; padding:0 1%;}
.li06 {margin:0 -1%;}
.li06 li {width:16.666%; padding:0 1%;}
.li07 {margin:0 -1%;}
.li07 li {width:14.285%; padding:0 1%;}
.li08 {margin:0 -1%;}
.li08 li {width:12.5%; padding:0 1%;}
.li09 {margin:0 -1%;}
.li09 li {width:11.111%; padding:0 1%;}
.li10 {margin:0 -1%;}
.li10 li {width:10%; padding:0 1%;}


/* 비밀번호 입력 */

.secret_box {position:fixed; width:350px; background:#fff; top:calc(50% - 175px); left:calc(50% - 175px); border:1px solid #ddd; z-index:1001;}
.secret_box .img {text-align:center; background:#f5f5f5; padding:15px 0;}
.secret_box .text {padding:20px;}
.secret_box .text h4 {margin-bottom:20px; font-weight:500; font-size:17px;}
.secret_box .text p {font-size:15px; line-height:120%; word-break:keep-all;}
.secret_box .text .form {display:block; margin:20px 0;}
.secret_box .text .form input {width:100%;}
.secret_box .btn_submit {display:block; text-align:center;}
.secret_box .btn_submit a {display:block; width:100%; background:#014693; color:#fff; padding:10px 0; font-size:15px;}

#modal_back {position:fixed; top:0; right:0; width:100%; height:100%; z-index:1000;}


.gallery01 {display:block; overflow:hidden; text-align:center;}
.gallery01 .list {margin:0;}
.gallery01 li {float:left; margin-bottom:10px;}
.gallery01 li .img_box {border:1px solid #ededed; margin-bottom:15px; width:100%; height:0; padding-bottom:100%;}
.gallery01 li .img_box .thumbnail {position:relative; padding-top:100%; overflow:hidden;}
.gallery01 li .img_box .thumbnail .img {position:absolute; top:0; left:0; right:0; bottom:0; -webkit-transform:translate(50%,50%); -ms-transform:translate(50%,50%); transform:translate(50%,50%);}
.gallery01 li .img_box .thumbnail .img img {position:absolute; top:0; left:0; max-width:100%; height:auto; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}

.gallery01 li .info {text-align:left; padding:15px;}
.gallery01 li .info a {color:inherit; color:#444;}
.gallery01 .list li .info h5 {font-size:21px; font-weight:600; letter-spacing:-0.05em; line-height:120%; min-height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gallery01 .list li .info .writer_info {font-size:15px; letter-spacing:-0.05em; margin-bottom:35px; font-weight:300;}
.gallery01 .list li .info p {font-size:15px; font-weight:300; letter-spacing:-0.05em; line-height:160%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.webzine_gallery01 .list {display:block; overflow:hidden;  border-top:1px solid #ededed;}
.webzine_gallery01 .list li {float:left; border-bottom:1px solid #ededed; padding:15px 20px;}
.webzine_gallery01 .list li .img {float:left; width:210px; height:154px; margin-right:30px; border-radius:5px; overflow:hidden; background:#ddd; text-align:center;}
.webzine_gallery01 .list li .info {float:left; width:calc(100% - 240px); padding:10px 0;}
.webzine_gallery01 .list li .info h5 {font-size:21px; font-weight:600; letter-spacing:-0.05em; line-height:120%; min-height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.webzine_gallery01 .list li .info .writer_info {font-size:15px; letter-spacing:-0.05em; margin-bottom:35px;}
.webzine_gallery01 .list li .info .writer_info span {display:inline-block; margin-right:5px; font-weight:300;}
.webzine_gallery01 .list li .info .writer_info span.writer {font-size:16px; font-weight:900; margin-right:20px;}
.webzine_gallery01 .list li .info p {font-size:15px; font-weight:300; letter-spacing:-0.05em; line-height:160%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.webzine_gallery01 .list li:hover {background:#f8fbfe;}

.webzine_gallery01 .list li.empty_li {text-align:center;}

.webzine_gallery01 .view {}
.webzine_gallery01 .view h5 {font-size:28px; color:#444; letter-spacing:-0.1em;}
.webzine_gallery01 .view .view_writer_info {display:block; overflow:hidden; border-bottom:3px solid #2b84d5; padding:20px 0;}
.webzine_gallery01 .view .view_writer_info ul {}
.webzine_gallery01 .view .view_writer_info ul li {display:inline-block;}
.webzine_gallery01 .view .view_writer_info .left {float:left;}
.webzine_gallery01 .view .view_writer_info .left li {margin-right:10px;}
.webzine_gallery01 .view .view_writer_info .right {float:right;}
.webzine_gallery01 .view .view_writer_info .right li {margin-left:10px;}

.webzine_gallery01 .view .view_link  {display:block; overflow:hidden; border-bottom:1px solid #dddddd;}
.webzine_gallery01 .view .view_link dt {float:left;color:#444444;font-size:16px;margin-right:20px; font-weight:bold; margin-top:-2px; padding:22px 0 12px; width:65px;}
.webzine_gallery01 .view .view_link dd {float:left; padding:22px 0 12px;}
.webzine_gallery01 .view .view_file {display:block; overflow:hidden; border-bottom:1px solid #dddddd;}
.webzine_gallery01 .view .view_file dt {float:left;color:#444444;font-size:16px;margin-right:20px; font-weight:bold; margin-top:-2px; padding:22px 0 12px; width:65px;}
.webzine_gallery01 .view .view_file dd {float:left; padding:22px 0 12px;}
.webzine_gallery01 .view .view_contents {min-height:400px; border-bottom:1px solid #ddd; margin-bottom:30px; padding:30px 0;}

.webzine_gallery01 .view .list_btn_wrap {margin-bottom:50px;}

.webzine_gallery01 .view .comment {}
.webzine_gallery01 .view .comment .comment_ul .comment_li {}
.webzine_gallery01 .view .comment h3 {position:relative; padding-bottom:10px; margin-bottom:10px; font-size:18px; font-weight:400;}
.webzine_gallery01 .view .comment h3:before {position:absolute; left:0; bottom:0; width:80px; height:2px; background:#2b84d5; content:'';}
.webzine_gallery01 .view .comment h3:after {position:absolute; left:0; bottom:0; width:100%; height:1px; background:#f0f0f0; content:'';}
.webzine_gallery01 .view .comment .comment_box {padding:10px 20px;}
.webzine_gallery01 .view .comment .comment_box .comment_writer_info {display:block; overflow:hidden;}
.webzine_gallery01 .view .comment .comment_box .comment_writer_info ul li {font-weight:300;}
.webzine_gallery01 .view .comment .comment_box .comment_writer_info ul.left {float:left;}
.webzine_gallery01 .view .comment .comment_box .comment_writer_info ul.right {float:right; dimargin-top:2px;}
.webzine_gallery01 .view .comment .comment_box .comment_writer_info ul.right li {font-size:14px; letter-spacing:0;}
.webzine_gallery01 .view .comment .comment_box .comment_writer_info ul li h4 {margin-right:30px;}
.webzine_gallery01 .view .comment .comment_box .comment_content {margin-top:10px;}

.webzine_gallery01 .view .comment_form {padding:20px; background:#fafafa; margin-top:50px;}
.webzine_gallery01 .view .comment_form h4 {color:#2b84d5; font-weight:500; margin-bottom:20px;}
.webzine_gallery01 .view .comment_form dl.comment_writer_form {margin:10px 0;}
.webzine_gallery01 .view .comment_form dl.comment_writer_form dt {display:inline-block; margin-right:10px;}
.webzine_gallery01 .view .comment_form dl.comment_writer_form dd {display:inline-block; margin-right:10px;}

.webzine_gallery01 .view .comment_form #comment_content {width:calc(100% - 20px);}

.webzine_gallery01 .view .comment .btn_box {text-align:right;}
.webzine_gallery01 .view .comment .btn_box a {display:inline-block; font-size:14px; font-weight:300; color:#808080; border:1px solid #c6c6c6; padding:5px 8px; background:#fff;}

.webzine_gallery01 .view .comment_btn_wrap {text-align:center; margin-top:20px;}
.webzine_gallery01 .view .comment_btn_wrap a {display:inline-block; width:200px; padding:12px 0; text-align:center; color:#fff; border-radius:23px; margin:0 5px; font-size:16px; background:#014693;}

.list_btn_wrap {display:block; overflow:hidden; margin-top:20px;}
.list_btn_wrap a {float:right; font-size:14px; display:inline-block; padding:5px 8px; margin:0 2px;}
.list_btn_wrap a:last-child {margin-right:0;}
.list_btn_wrap a.btn_write {border:1px solid #3b5fab; color:#3b5fab;}

/* 갤러리 뷰 */
.view .view_btn_wrap {}
.view .view_btn_wrap ul {text-align:center;}
.view .view_btn_wrap ul li {display:inline-block; width:180px; border:1px solid #c6c6c6; margin-left:-4px; background:#fff;}
.view .view_btn_wrap ul li a {display:block; overflow:hidden; padding:15px 0; color:#808080; font-size:14px; font-weight:400;}
.view .view_btn_wrap ul li a.list_btn {background:#e6e6e6;}
.view .view_btn_wrap ul li a.print_btn {}

.view .nb_ul {position:relative;margin:80px 0 20px 0;clear:both;text-align:left}
.view .nb_ul:after {display:block;visibility:hidden;clear:both;content:""}
.view .nb_ul li {border-top:1px solid #ddd;padding:25px 10px; font-size:15px; font-weight:300;}
.view .nb_ul li:last-child {border-bottom:1px solid #ddd}
.view .nb_ul li:hover {background:#fdfdfd}
.view .nb_ul li i {font-size:15px;color:#2b84d5}
.view .nb_ul li .nb_tit {display:inline-block;padding:0 20px 0 0px;color:#2b84d5; vertical-align:top;}
.view .nb_ul li .nb_date {float:right;color:#444444}

@media (max-width:1219px) {
}

@media (max-width:999px) {
}

@media (max-width:799px) {
	.view .nb_ul {margin:20px 0;}
	.view .nb_ul li {padding:10px 0; font-size:90%;}
	.view .nb_ul li .nb_tit {padding:0 3% 0 2%;}
	.view .nb_ul li .nb_date {padding:0 2% 0 3%;}

	.btn_prev a {width:60%; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.btn_next a {width:60%; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}

@media (max-width:499px) {
}


.bottom_wrap {position:relative; clear:both; width:1000%; text-align:left; display:block; overflow:hidden; padding:18px 0px; background:#f7fafc; left:-450%; margin-top:70px;}
.bottom_wrap .left {float:left;}
.bottom_wrap .right {float:right;}

.bottom_wrap #paging { display:inline-block;}
.bottom_wrap #paging ul {display:block; overflow:hidden;}
.bottom_wrap #paging ul li {float:left; width:40px; line-height:40px; border:1px solid #ddd; background:#fff; text-align:center;}
.bottom_wrap #paging ul li a {color:inherit;}
.bottom_wrap #paging ul li.on {background:#495caa; color:#fff; border:1px solid #495caa;}

.bottom_wrap #total {display:inline-block; line-height:34px;font-size:16px;color:#484848; font-weight:500; letter-spacing:-0.03em; margin-right:20px;}
.bottom_wrap #total span {font-size:18px;}
.bottom_wrap #total span b {color:#2b84d5; font-weight:500;}

@media (max-width:1219px) {
}

@media (max-width:999px) {
	.bottom_wrap #total {font-size:110%;}
	.bottom_wrap #total span {font-size:100%;}
}

@media (max-width:799px) {
	.bottom_wrap #total {font-size:100%;}
}

@media (max-width:499px) {
}


.bottom_wrap #search_box {display:inline-block; border-radius:3px;}
.bottom_wrap #search_box:after {display:block;visibility:hidden;clear:both;content:""}
.bottom_wrap #search_box h3 {display:none;}
.bottom_wrap #search_box legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
.bottom_wrap #search_box select{border:0;padding:0px 5px; width:145px; height:34px;float:left; border:1px solid #cccccc; border-radius:5px; margin-right:10px;}
.bottom_wrap #search_box .sch_box {display:inline-block;}
.bottom_wrap #search_box .sch_input{width:295px; height:34px; border:1px solid #cccccc; padding:0px 10px;background-color:transparent; background:#fff; border-radius:5px; overflow:hidden; vertical-align:top; margin-right:8px;}
.bottom_wrap #search_box .sch_input::-ms-input-placeholder {color:#495161;}
.bottom_wrap #search_box .sch_input::-webkit-input-placeholder {color:#495161;}
.bottom_wrap #search_box .sch_input::-moz-placeholder {color:#495161;}
.bottom_wrap #search_box .sch_btn{width:75px; height:34px; border:0;font-size:14px; background:#5163ae; color:#fff; border-radius:5px; overflow:hidden;}
.bottom_wrap #search_box .sch_btn_all {width:75px; height:34px; border:0;font-size:14px; background:#fff; border:1px solid #5163ae; color:#5163ae; border-radius:5px; overflow:hidden;}

@media (max-width:999px) {
	.bottom_wrap #search_box{padding:15px 2%; width:106%; left:-2%;}
	.bottom_wrap #search_box {width:100%;}
	.bottom_wrap #search_box select {width:27%; margin-right:0}
	.bottom_wrap #search_box .sch_bar {width:71%;}
	.bottom_wrap #search_box .sch_input {width:calc(100% - 105px);}
	.bottom_wrap #search_box .sch_btn {}
}


/* 갤러리 글쓰기 */
.write {border-top:3px solid #2b84d5;}
.write dl {display:block; overflow:hidden; width:100%; border-bottom:1px solid #ddd; background:#f7fafc;}
.write dl dt {float:left; width:15%; text-align:center; font-weight:600; padding:20px 0;}
.write dl dt label {}
.write dl dd {float:left; width:85%; padding:12px 15px;  background:#fff;}
.write dl dd.option {padding:19px 15px; font-size:14px;}
.write dl dd.option input[type="radio"], .write dl dd.option input[type="checkbox"] {position:relative; top:1px;}
.write dl dd input[type="text"] {width:100%;}

.write table.timetable {}
.write table.timetable {width:100%; table-layout: fixed;margin-top: 1rem;}
.write table.timetable thead {}
.write table.timetable thead tr {}
.write table.timetable thead tr th {padding:16px 0; font-size:16px; text-align:center;  vertical-align:middle; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fafafa; word-break: keep-all;  }
.write table.timetable tbody tr th {font-size:16px; text-align:center; vertical-align:middle; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fafafa; word-break: keep-all;}
.write table.timetable tbody tr td {font-weight:300; padding:15px 0; font-size:17px; text-align:center; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;}
/*.write table.timetable tbody tr td label {display:block; text-align:left; width:60px; margin:0 auto; margin-top:6px;}*/
.write table.timetable tbody tr td label {display: inline-flex;text-align: left;padding: 0 .7rem;width: 100%;margin: 0 auto;margin-top: 6px;}
.write table.timetable tbody tr td label {margin: 0 auto;}
.write table.timetable tbody tr td label input[type="radio"], input[type="checkbox"] {margin-right: .2rem;}
.write table.timetable tbody tr td label:nth-child(1) {margin-top:0;}
.write table.timetable tbody tr td b {font-weight:400;}

.write_btn_wrap {text-align:center; margin-top:30px; }
.write_btn_wrap a, .write_btn_wrap input[type=submit] {display:inline-block; min-width:150px; padding:12px 0; border-radius:20px; font-size:14px; height:40px; overflow:hidden; vertical-align:top;}
.write_btn_wrap .btn_submit {background:#2b84d5; color:#fff; border:1px solid #2b84d5;}
.write_btn_wrap .btn_cancle {background:#fff; color:#999; border:1px solid #999;}

.filebox input[type="file"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.filebox label { display:inline-block; padding:6px 15px; color:#999; font-size:inherit; line-height:normal; vertical-align:middle; background-color:#fdfdfd; cursor:pointer; border:1px solid #ebebeb; border-bottom-color:#e2e2e2; border-radius:5px; }
/* named upload */
.filebox .upload-name {display:inline-block; padding:6px 15px; /* label의 패딩값과 일치 */ font-size:inherit; font-family:inherit; line-height:normal; vertical-align:middle; background-color:#f5f5f5; border:1px solid #ebebeb; border-bottom-color:#e2e2e2; border-radius:5px; -webkit-appearance:none; /* 네이티브 외형 감추기 */ -moz-appearance:none; appearance:none; }



/*반응형 미디어쿼리*/
@media (max-width:1219px) {
}

@media (max-width:999px) {
}

@media (max-width:799px) {
	.write table.timetable tbody tr td {text-align: center;}
	.write table.timetable tbody tr td label {font-size: .7rem;margin: .5rem auto;text-align: center;display: block;}
	.write table.timetable tbody tr td label input[type="radio"], input[type="checkbox"] {margin:.2rem auto;}
}

@media (max-width:599px) {
}
