@charset "utf-8";
/* CSS Document */


.blind {position:relative; overflow:hidden; _visibility:hidden; padding:0; margin:0; height:0; font-size:0; line-height:0}
*:first-child+html .blind {visibility:hidden; padding:0; margin:0; height:0; font-size:0; line-height:0}

div.skin_album caption {position:relative; overflow:hidden; _visibility:hidden; padding:0; margin:0; height:0; font-size:0; line-height:0}
*:first-child+html div.skin_free caption {visibility:hidden; padding:0; margin:0; height:0; font-size:0; line-height:0}

div.skin_album {position:relative}
div.skin_album .i_text:hover {border-color:#6699CC}
div.skin_album .i_text:focus {border-color:#32465a}

/* 로그인 */
div.skin_login {position:relative; top:40px; width:400px; margin:0 auto}
div.skin_login > h1 {height:67px; padding:0; margin:0 0 20px 0; text-align:center; background:url(image/title_login.gif) no-repeat center center}
div.skin_login_box {overflow:hidden; clear:both}
div.skin_login_box div.input_wrap {float:left; margin-right:8px}
div.skin_login_box div.item_userid {margin-bottom:10px}
div.skin_login_box .i_text {width:200px; height:16px; padding:8px; margin:0; box-sizing:content-box; border:1px solid #b0b0b0; border-radius:3px; color:#555; vertical-align:middle}
div.skin_login_box .i_label {display:block; float:left; width:60px; height:16px; padding:7px; box-sizing:content-box; font:normal 12px/150% gulim,'굴림'; color:#494f55; vertical-align:middle}
div.skin_login_box div.btn_area_login {float:left; padding:0; margin:0; cursor:pointer}


/* 공지사항 */
div.skin_album ul.board_notice {margin:0; padding:0; list-style:none} 
div.skin_album ul.board_notice li {float:left; width:120px; height:150px; margin:10px} 
div.skin_album ul.board_notice li img {display:inline-block; background:#ccc}
div.skin_album ul.board_notice li.noimage span.thumb {display:block; height:20px; padding:50px 0; text-align:centern; color:#888; background:#f0f0f0; font:normal 11px dotum,'돋움'; text-align:center}
div.skin_album ul.board_notice li.noimage a {text-decoration:none}
div.skin_album ul.board_notice li p {padding:0; margin:0}
div.skin_album ul.board_notice li p.date {margin:0; padding:0; font-size:11px; color:#666}
div.skin_album ul.board_notice a.title {text-decoration:underline !important; color:#20549b !important; font-weight:bold !important}


/*목록*/
div.skin_album > div.login {float:right;} 
div.skin_album > div.login a {padding:3px; font:normal 12px tahoma, sans-serif; color:#0066CC}

div.skin_album ul.board_list {/*clear:both;*/ display:flex; justify-content:flex-start; align-items: stretch; gap:18px; flex-wrap: wrap; overflow:hidden; width:100%; margin:10px 0; padding:10px 0 15px 0; border-top:solid 1px #dfdfdf; /*border-bottom:solid 1px #dfdfdf;*/ list-style:none}
div.skin_album ul.board_list li {/*float:left; width:304px;*/ width:calc((100% / 3) - 12px); height:auto; margin:10px 0 10px 0; padding:0; box-sizing: border-box; overflow:hidden; transition:all .2s ease-in;}
div.skin_album ul.board_list li:nth-child(3) {margin-right: 0;}
div.skin_album ul.board_list li p {margin:2px 0 0; padding:0; font:normal 14px "굴림",gulim; text-align:left; color:#777}

div.skin_album ul.board_list .thumb {display:block; position:relative; width:306px !important; height:160px !important; aspect-ratio: 16 / 9; transition: all .3s ease; overflow: hidden; border-radius:12px;}
div.skin_album ul.board_list .thumb img {display: block; transition:all .2s ease-in; width: 100%; vertical-align: top; object-fit: cover;}
div.skin_album ul.board_list div {display: flex; justify-content: flex-start; align-items: flex-start; gap: 4px; flex-direction: column; padding:12px 4px 8px; font-size: 16px; font-weight:bold;}
div.skin_album ul.board_list a.title {text-decoration:underline !important; color:#20549b !important; font-weight:bold; text-align: left; font-size: 16px; line-height: 140%; word-break: keep-all; overflow-wrap: break-word;}
div.skin_album ul.board_list a.category {padding:2px 0 0 0; text-decoration:none; color:#3d6499}
div.skin_album ul.board_list .comment {padding:0; background:none; font-size:9px !important; font-weight:bold; color:#eb1c25}

div.skin_album ul.board_list li.noimage .thumb {display:block; position:relative; width:306px; height:160px; background:#f0f0f0; color:#888; font:normal 12px dotum,'돋움'; text-align:center; line-height: 160px; vertical-align:middle}
div.skin_album ul.board_list li.noimage div {display: flex; justify-content: flex-start; align-items: flex-start; gap: 4px; flex-direction: column; padding:12px 4px 8px;}
div.skin_album ul.board_list li.noimage a {text-decoration:none;}
div.skin_album ul.board_list li.noimage a.title {text-align: left; font-size: 16px; line-height: 140%;  word-break: keep-all; overflow-wrap: break-word;}

/*
div.skin_album form > div.search {margin:15px 0; text-align:center; vertical-align:middle}
div.skin_album form > div.search label.i_label {margin:0 9px 0 0; vertical-align:middle; vertical-align:middle; cursor:pointer}
div.skin_album form > div.search input.i_check {padding:0; margin:0 4px 0 0; width:13px; height:13px; vertical-align:middle; cursor:pointer}
div.skin_album form > div.search .i_text {padding:2px; height:18px; border:1px solid #b7b7b7}
*/

div.skin_album ul.board_list li:hover { transform:translateY(-8px); }
div.skin_album ul.board_list li:hover .thumb { position:relative; }
div.skin_album ul.board_list li:hover .thumb::after { position:absolute; top:0; left:0; content:"자세히보기"; width:306px; height:160px; background-color:rgba(0,0,0,0.38); color:#fefefe; text-align:center; align-content:center; font-size:16px; font-weight:bold; backdrop-filter: blur(3px);}
div.skin_album ul.board_list li:hover img { transform:scale(1.1); }

div.skin_album ul.board_list li.noimage:hover .thumb { background-color: #ddd;}

div.board_top {width:100%; display:flex; justify-content:space-between; align-content:center;}
div.board_top div.login {display:flex; justify-content:center; align-items:center;}
div.board_top form .search {margin:0; display:flex; align-items:center; }
div.board_top form .search .i_check {margin-left:8px !important;}
div.board_top form .search-box {display:flex; justify-content:center; align-items:center; margin-left:12px;}

div.admin-editbox {margin-top:16px; display:flex; justify-content:center; align-items:center; gap:8px;}
div.admin-editbox button.edit { padding:8px 16px; background-color:#292929; border: none; outline:none; border-radius: 8px; color:#fefefe; transition:all .2s ease-in;}
div.admin-editbox button.del {padding:8px 16px; background-color:#b5b5b5; border:none; outline:none; border-radius:8px; color:#424242; transition:all .2s ease-in;}
div.admin-editbox button.edit:hover {background-color:#000;}
div.admin-editbox button.del:hover {background-color:#a7a7a7; color:#191919;}

/* 보기 */
div.skin_album .board_view {margin:10px 0; border:0; border-collapse:collapse; border-bottom:1px solid #ccc}
div.skin_album .board_view th {height:16px; padding:10px 0 10px 5px; text-align:left; border:0; border-top:1px solid #505050; border-bottom:1px dotted #d0d0d0; background:none; color:#333; font-weight:bold}
div.skin_album .board_view th span.category {font:normal 11px "돋움",dotum; color:#777; padding-left:10px}

div.skin_album .board_view td.detail {clear:both; margin:0; padding:20px 0 20px 5px; height:250px; min-height:250px; vertical-align:top; border:0}
div.skin_album .board_view td.detail div.attachment {overflow:hidden; clear:both; margin-bottom:20px; padding:0}
div.skin_album .board_view td.detail div.attachment ul.list_attach {float:right; margin:0; padding:0; list-style:none}
div.skin_album .board_view td.detail div.attachment ul.list_attach li a {margin:0; text-decoration:none; vertical-align:middle; color:#666} 
div.skin_album .board_view td.detail div.attachment ul.list_attach li a:hover {text-decoration:underline; cursor:pointer}
div.skin_album .board_view td.detail div.attachment ul.list_attach li img {vertical-align:middle}
div.skin_album .board_view td.detail div.photo_attach {text-align:center}
div.skin_album .board_view td.detail div.photo_attach img {margin:10px 0}
div.skin_album .board_view td.detail p {line-height:140%}
div.skin_album .board_view td.detail table {border-collapse:collapse}
div.skin_album .board_view td.detail table th,
div.skin_album .board_view td.detail table td {border:1px solid #000}

div.skin_album .board_view td.article_info {padding:8px 5px; border:0; border-bottom:1px solid #eee}
div.skin_album .board_view td.article_info span.name {padding:0 10px 0 0; border-right:1px solid #eee}
div.skin_album .board_view td.article_info span.hit {padding:0 5px 0 10px}
div.skin_album .board_view td.article_info span.name,
div.skin_album .board_view td.article_info span.hit {font:normal 11px dotum,'돋움'; color:#777}
div.skin_album .board_view td.date {border:0; border-bottom:1px solid #eee; text-align:right; font:normal 11px  tahoma, sans-serif; color:#777}
div.skin_album .board_view td.modify input[type='button'] {text-align:right; background:transparent; border:none; margin:0; padding:0; font:normal 11px/140% dotum, '돋움'; color:#777; cursor:pointer; vertical-align:middle}

div.skin_album .board_view td.modify {padding:0; margin:0; border:0; border-top:1px solid #888; border-bottom:1px dotted #ccc; text-align:right}
div.skin_album .board_view td.modify input[type='button']:hover {text-decoration:underline; color:#104287}
div.skin_album .board_view td.modify input[type='button'].btn_modify {padding:0 5px 0 0; margin:0; border:0; border-right:1px solid #eee}

div.skin_album .btn_list {background:url(image/icon_list.gif) no-repeat 1px 3px; padding-left:12px; border-right:1px solid #dfdfdf; padding-right:10px; margin-right:6px}
div.skin_album .btn_prev {background:url(image/icon_next.gif) no-repeat 1px 5px; padding-left:12px; color:#aaa}
div.skin_album .btn_next {background:url(image/icon_prev.gif) no-repeat 1px 5px; padding-left:12px; border-right:1px solid #dfdfdf; padding-right:10px; margin-right:6px; color:#aaa}
div.skin_album .btn_next a,
div.skin_album .btn_prev a,
div.skin_album .btn_list a {letter-spacing:-0.03em; color:#444; text-decoration:none}



/* 모달윈도우(레이어 팝업-비밀번호입력) */
div.skin_album div.skin_mw {display:none; z-index:100; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%}
div.skin_album div.skin_mw div.bg {padding:0; margin:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=70)}
div.skin_album div.skin_mw div.fg {position:absolute; top:50%; left:50%; margin:-120px 0 0 -200px; width:400px; min-height:60px; background:#fff; box-shadow:1px 1px 7px #333}
div.skin_album div.skin_mw div.cont_wrap {position:relative} 
div.skin_album div.skin_mw div.cont_wrap h1 {padding:15px; margin:0 0 10px 0; background:#eee; font:bold 17px/17px dotum,'돋움'; letter-spacing:-0.05em} 
div.skin_album div.skin_mw div.cont_wrap .btn_area_mw {position:absolute; top:12px; right:12px}
div.skin_album div.skin_mw div.cont_wrap > p.dsc {padding:0; margin:20px 0; text-align:center; color:#444; background:none}
div.skin_album div.skin_mw div.cont_wrap div.password_area {margin:0 0 20px 0; text-align:center}
div.skin_album div.skin_mw div.cont_wrap div.password_area label {color:#666}
div.skin_album div.skin_mw div.cont_wrap .i_text {padding:3px; height:16px; border:1px solid #bbb}



/*쓰기*/
div.skin_album .board_write {padding:0; margin-bottom:10px; border-collapse:collapse; border:0; border-top:1px solid #333; border-bottom:1px solid #ddd}
div.skin_album .board_write th {padding:8px; height:16px; border:0; border-bottom:1px solid #ddd; background:none; text-align:left; white-space:nowrap}
div.skin_album .board_write td {padding:8px; height:16px; border:0; border-bottom:1px solid #ddd; background:none}
div.skin_album .board_write td .i_text {padding:3px; margin:0; width:120px; height:16px; border:1px solid #b7b7b7; box-sizing:content-box}
div.skin_album .board_write td .i_text:hover {border-color:#3c7cd8}
div.skin_album .board_write td .i_text:focus {border-color:#1c58b0}
div.skin_album .board_write td .i_check {padding:0; margin:0 0 0 1px; vertical-align:middle; cursor:pointer}
div.skin_album .board_write td .i_label {vertical-align:middle; padding:0; margin:0; cursor:pointer}
div.skin_album .board_write td.write_section textarea {padding:0; margin:0; width:500px; min-width:100%; max-width:100%; height:300px; resize:none; overflow-y:scroll; border:1px solid #b7b7b7}
div.skin_album .board_write td select {padding:3px; border:1px solid #b7b7b7}


/* 버튼 */
div.skin_album > div.skin_btn_area {margin:10px 0; text-align:right}
div.skin_album > div.skin_btn_area_mov_article {overflow:hidden; clear:both}
div.skin_album > div.skin_btn_area_write {margin:10px 0; text-align:center}
div.skin_album div.fl {float:left}

.skin_button,
.skin_button * {position:relative; margin:0; padding:0; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; border:0; font:normal 12px/90% gulim,'굴림'; white-space:nowrap; background:url(image/button.png) no-repeat; _background:#666; vertical-align:middle; overflow:visible; text-align:center}
.skin_button {margin-right:3px}
.skin_button * {left:4px; cursor:pointer; _cursor:hand; vertical-align:middle}
.skin_button.small {margin-right:4px}

.skin_button.basic,
.skin_button.basic * {height:28px; line-height:28px}
.skin_button.basic * {padding:0 10px 0 5px; color:#fff; background-position:right top; vertical-align:top}
.skin_button.basic.icon {text-align:left; vertical-align:middle}
.skin_button.basic.icon a {padding:0 10px 0 4px; font-weight:bold !important}
.skin_button.basic.icon .write {margin-right:10px; background-position:0 -78px}

.skin_button.small {background-position:left -50px}
.skin_button.small,
.skin_button.small * {height:25px; line-height:25px}
.skin_button.small * {padding:0 6px 0 3px; color:#6a6f77 !important; background:url(image/button.png) no-repeat right -50px; vertical-align:top; line-height:80%}



/* 코멘트 */
div.skin_comment {}
div.skin_comment h1 {padding:5px 0; margin:0; border-bottom:1px solid #ccc; font:bold 16px dotum,'돋움'; color:#333; letter-spacing:-0.05em}
div.skin_comment h1 span.count {font:normal 12px tahoma; color:#0033FF}
div.skin_comment ul.list_comment {padding:0; margin:0; list-style:none}
div.skin_comment ul.list_comment li {position:relative; padding:15px 10px; border-bottom:1px solid #ddd}
div.skin_comment ul.list_comment li div.author_info {margin-bottom:6px}
div.skin_comment ul.list_comment li div.author_info > strong.name {font-weight:bold}
div.skin_comment ul.list_comment li div.author_info > span.userid {margin-right:6px; color:#606060}
div.skin_comment ul.list_comment li div.author_info > span.date {color:#606060}

div.skin_comment ul.list_comment li div.comment_edit {overflow:hidden; clear:both; width:100%; height:100%; margin-top:5px}
div.skin_comment ul.list_comment li div.comment_edit div.textarea_area {margin-right:100px}
div.skin_comment ul.list_comment li div.comment_edit div.textarea_area textarea {width:500px; min-width:100%; max-width:100%; height:60px; padding:4px; margin:0; border:1px solid #ccc; resize:none; overflow-y:scroll}
div.skin_comment ul.list_comment li div.comment_edit div.textarea_area textarea:hover {border-color:#3c7cd8}
div.skin_comment ul.list_comment li div.comment_edit div.textarea_area textarea:focus {border-color:#1c58b0}
div.skin_comment ul.list_comment li div.comment_edit .btn_edit {position:absolute; float:right; top:35px; right:5px; width:90px; height:70px; padding:6px; margin:0; border:1px solid #ddd; border-right:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; border-radius:1px; background:#f5f5f5; color:#444; font-weight:bold; cursor:pointer}
div.skin_comment ul.list_comment li div.comment_edit .btn_edit:hover {background:#ddd; border:1px solid #c0c0c0}

div.skin_comment div.btn_area_comment {position:absolute; top:15px; right:5px}
div.skin_comment div.btn_area_comment button {padding:2px; margin:0 1px; line-height:20px; background:none; border:0; font:normal 11px dotum,'돋움'; color:#606060; cursor:pointer}
div.skin_comment div.btn_area_comment button:hover {color:#0033FF; text-decoration:underline}

div.skin_comment div.comment_input {overflow:hidden; clear:both; position:relative; padding:15px 10px; margin:-1px 0 0 0; background:#e7eaee; border-top:1px solid #bcc1c9; border-bottom:1px solid #bcc1c9}
div.skin_comment div.comment_input div.textarea_area {margin-right:105px}
div.skin_comment div.comment_input div.textarea_area textarea {min-width:100%; max-width:100%; height:60px; padding:4px; margin:0; width:500px; border:1px solid #ccc; resize:none; overflow-y:scroll}
div.skin_comment div.comment_input div.textarea_area textarea:hover {border-color:#3c7cd8}
div.skin_comment div.comment_input div.textarea_area textarea:focus {border-color:#1c58b0}
div.skin_comment div.comment_input .btn_regi {position:absolute; float:right; top:15px; right:10px; width:90px; height:70px; padding:6px; margin:0; border:1px solid #515356; border-radius:1px; background:#5b5f66; color:#fff; font-weight:bold; cursor:pointer}
div.skin_comment div.comment_input .btn_regi:hover {background:#383e47; border:1px solid #2c323c}


/* 레이어팝업 */
div.layer-popup-box {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100; background: rgba(0,0,0,0.68); backdrop-filter: blur(4px);}
div.layer-popup-box div.layer-con-box {min-width: 880px; max-width: 880px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
div.layer-popup-box div.layer-con-box button.layer-close {position: absolute; right: 0; top: 0; width: 36px; height: 36px; color: #fff; border-radius: 50px; background-color: transparent; border: none; outline: none; transition: all .2s ease;}
div.layer-popup-box div.layer-con-box button.layer-close:hover {background-color: rgba(0,0,0,1); border-color: rgba(0,0,0,1);}
div.layer-popup-box div.layer-con-box button.layer-close img {display: block; margin: 0 auto; line-height: 36px; width: 15px; height: 15px;}
div.layer-popup-box div.layer-con-box h2 {text-align: center; font-size: 24px; font-weight: bold; color: #fff;}

/* 이미지 영역 */
div.layer-popup-box div.layer-con-box div.img-box{height: 100%; max-height: calc(100vh - 220px); overflow-y: scroll;}
div.layer-popup-box div.layer-con-box div.img-box img {width: 100%; max-width: 100%; height: auto;}

/*스크롤디자인*/
.scroll-box::-webkit-scrollbar {width: 10px;}
.scroll-box::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.38); border-radius: 20px;}
.scroll-box::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.68);}
.scroll-box::-webkit-scrollbar-track {background: transparent;}

/*swiper-button 디자인*/
div.layer-popup-box div.img-box div.swiper-button-next {left: 900px; color: #fff;}
div.layer-popup-box div.img-box div.swiper-button-prev {left: -70px !important; color: #fff;}

/* 페이지네이션 디자인 */
#ptc_page {text-align:center;}
.no_first, .no_pre,
.no_next, .no_last {display: inline-block; background:#fff !important; border:none !important;}
strong {border-radius: 8px !important;}
#ptc_page a {background:#fff !important; border: none !important;}