@charset "UTF-8";
/********************************************************
■ 사이트 초기 설정
********************************************************/
:root {
    /* 테마 전체 색상 */
    --main-color1:#329ad7;
    --main-color2:#329ad7;
    --main-color3:#0b1c39;
    --main-color1-rgb:50, 154, 215;
    --main-color2-rgb:50, 154, 215;
    --main-color3-rgb:11, 28, 57;
    --main-width:1400px;

	/* sns 색상 */
    --kakao-color:#ffe500;
    --instagram-color:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b);
    --naver-color:#06be34;
    --facebook-color:#435e99;
    --youtube-color:#d4262c;
    --twiter-color:#27a9e0;

    /* 게시판 아이콘 색상 */
	--board-secret-color:#333;
	--board-new-color:#eeb506;
	--board-hot-color:#d91426;
	--board-file-color:#333;
	--board-link-color:#195dae;

    /* .c padding값 */
    --c-padding:15px;

	/* 메인&서브 좌우 패딩 */
    --top-padding:2%;
}

@media (max-width: 1600px) {
    :root {
        --top-padding:30px;
    }
}

@media (max-width: 1400px) {
	:root {
		--main-width:100vw;
	}
}

@media (max-width: 1024px) {
    :root {
        /* .c padding값 */
        --c-padding:20px;
        --top-padding:var(--c-padding);
    }
}

@font-face {
   font-family: 'framd';
   src: /*url(../font/NotoSansKR-Medium-Hestia.woff2) format('woff2');*/
	   url(font/framd.woff) format('woff'),
	   url(font/framd.eot) format('opentype');
}

@font-face {
   font-family: 'framdit';
   src: /*url(../font/NotoSansKR-Medium-Hestia.woff2) format('woff2');*/
	   url(font/framdit.woff) format('woff'),
	   url(font/framdit.eot) format('opentype');
}

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
.txt-bc1, i.txt-bc1, a.txt-bc1, a.txt-bc1:link, a.txt-bc1:visited, .txt-hover-bc1:hover, .txt-on-bc1.on { color: var(--main-color1, #444) !important; }
.bg-bc1, a.bg-bc1, .bg-hover-bc1:hover, .bg-on-bc1.on, .bg-before-bc1:before, .bg-after-bc1:after, .bg-hover-div-bc1:hover > div { background-color: var(--main-color1, #444) !important; color: white !important; }
.border-bc1, a.border-bc1, .border-hover-bc1:hover, .border-on-bc1.on, .border-before-bc1:before, .border-after-bc1:after { border-color: var(--main-color1, #444) !important; }
.txt-bc2, i.txt-bc2, a.txt-bc2, a.txt-bc2:link, a.txt-bc2:visited, .txt-hover-bc2:hover, .txt-on-bc2.on { color: var(--main-color2, #888) !important; }
.bg-bc2, a.bg-bc2, .bg-hover-bc2:hover, .bg-on-bc2.on, .bg-before-bc2:before, .bg-after-bc2:after, .bg-hover-div-bc2:hover > div { background-color: var(--main-color2, #888) !important; color: white !important; }
.border-bc2, a.border-bc2, .border-hover-bc2:hover, .border-on-bc2.on, .border-before-bc2:before, .border-after-bc2:after { border-color: var(--main-color2, #888) !important; }
.txt-bc3, i.txt-bc3, a.txt-bc3, a.txt-bc3:link, a.txt-bc3:visited, .txt-hover-bc3:hover, .txt-on-bc3.on { color: var(--main-color3, #111) !important; }
.bg-bc3, a.bg-bc3, .bg-hover-bc3:hover, .bg-on-bc3.on, .bg-before-bc3:before, .bg-after-bc3:after, .bg-hover-div-bc3:hover > div { background-color: var(--main-color3, #111) !important; color: white !important; }
.border-bc3, a.border-bc3, .border-hover-bc3:hover, .border-on-bc3.on, .border-before-bc3:before, .border-after-bc3:after { border-color: var(--main-color3, #111) !important; }

/* 버튼 색상 정의 */
.bt.bt-lrline { border-color: var(--main-color1, #444); color: var(--main-color1, #444); }
.bt.bt-lrline::before, .bt.bt-lrline::after { background: var(--main-color1, #444); }
.bt.bt-rightarrow { border-color: #aaa; }
.bt.bt-rightarrow:hover { border-color: var(--main-color1, #444); color: var(--main-color1, #444); }
.bt.bt-default.bt-default2 { background-color: var(--main-color1, #444); border: 0; color: white; }
.bt.bt-default.bt-default2:hover { background-color: var(--main-color1, #111); }

/* 전역(Global) 설정 */
.hover-a-border7 .a:hover::after { border-color: var(--main-color1, #444); /* 게시판이나 기타 타일 요소에서 재정의할 수 있음. */ }

/* 내용 드래그했을때 선택 블록 */
::selection { background: var(--main-color1, #444) !important; color: white; }
::-moz-selection { background: var(--main-color1, #444) !important; color: white; }

/********************************************************
■ HTML 요소 초기화
********************************************************/
/* 기반 글자크기 재정의 -- 상대단위(rem) 사용에 중요함. */
html, body { font-family: "framd",  "나눔 고딕", "Pretendard-Regular",  sans-serif; font-weight:400; font-size:16px; line-height: 1.5; }
body { color: #111; transition: all 200ms; overflow-x:hidden; width:100%; height:100%; }

.h0, .h1, .h2, .h3, .h4, .h5, .h6, .h0n, .h1n, .h2n, .h3n, .h4n, .h5n, .h6n, h1, h2, h3, h4, h5, h6 { margin-top: 0; }

.c, .c-full { max-width: var(--main-width); margin:0 auto; }
.c { padding-left: var(--c-padding); padding-right: var(--c-padding); }

@media (max-width: 767px) {
	html, body { font-size:14px; }
}


/* 스크롤바 */
html, body { -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; -webkit-appearance: none; }

* { scrollbar-color:rgba(0,0,0,.3); scrollbar-face-color: rgba(0,0,0,.3); }
*::-webkit-scrollbar { width: 6px; height: 6px; background:none; }
*::-webkit-scrollbar-thumb { outline: none; background: rgba(0,0,0,.3); border-radius:10px; }

#khome-scrollbar { position:fixed; top:0; right:5px; height:100vh; width:5px; z-index:999; opacity:0; transition-duration:1000ms; }
#khome-scrollbar.on { opacity:1; }

#khome-scrollbar .bar { position:absolute; width:5px; top:0; right:0; background:rgba(0,0,0,.3); border-radius:5px; opacity:1; transition:top 600ms linear; }
#khome-scrollbar .body { position:relative; opacity:0; visibility:hidden; }



/* 폼태그 */
.form-tag { border:1px solid #ddd; border-radius:2px; padding:10px; font-size:.875rem; width:100%; }
.form-tag:focus { outline: none; border: 1px solid #666; }

/* 셀렉박스 */
select::-ms-expand { display: none; }
select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { background:#fff url('../img/select-arrow.png') no-repeat calc(100% - 10px) center/10px auto !important; font-size:.875rem; padding-right:30px !important; border:1px solid #ddd; }

/* 체크&라디오 박스 & 파일첨부 */
input[type="radio"],
input[type="checkbox"] { vertical-align:middle; margin-top:-3px; width:13px; height:13px; margin-right:3px; }
input[type="file"] { display:inline-block; font-size:.875rem; }

label { margin-bottom:0; }

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus { outline:none !important; box-shadow:none !important; }


/* 구글 아이콘 */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' -25, 'opsz' 24; }


/********************************************************
■ Layout : 레이아웃
********************************************************/
.submenu-fix .pg-sub > #sub-top { margin-bottom:var(--sub-menu-h); }
.pg-sub > .content-body { padding: 100px 0; overflow:hidden; }
.pg-sub > .content-body.no-padding-top { padding-top: 0; }
.pg-sub > .content-body.no-padding { padding-bottom: 0; padding-top: 0; }


@media (max-width: 767px) {
	.pg-sub > .content-body { padding:45px 0; }
}

/* 우측 점박이 스크롤 (fullPage 플러그인 제공 기능) */
#fp-nav { --nav-color:#fff; --nav-position:50px; }
#fp-nav.left { left:calc(-1 * var(--nav-position)); transition:left 1s 400ms; }
#fp-nav.right { right:calc(-1 * var(--nav-position)); transition:right 1s 400ms; }

.load-on #fp-nav.left { left:var(--nav-position); }
.load-on #fp-nav.right { right:var(--nav-position); }

#fp-nav ul li { margin: 30px 0; }

#fp-nav ul li a span { width:6px !important; height:6px !important; background:var(--nav-color); opacity:1; margin:0 !important; transform:translate(-50%, -50%); transition:all 600ms; }
#fp-nav ul li a span:before { content:""; position:absolute; left:50%; top:50%; width:0; height:0; transform:translate(-50%, -50%); transition-duration:400ms; transition-delay:200ms; background:var(--nav-color); opacity:0.2; border-radius:100%; }


#fp-nav ul li a.active span:before { width:500%; height:500%; }


#fp-nav ul li .fp-tooltip { background-color: var(--main-color1, #444); border-radius: 7px; color: #fff; font-size: 14px; height: 30px; line-height: 30px; overflow: visible; padding: 0 15px; right: 20px !important; top: -3px; }
#fp-nav ul li .fp-tooltip::before { border-left: 5px solid var(--main-color1, #444); border-top: 5px solid transparent; content: ""; position: absolute; right: -5px; top: 10px; }
#fp-nav ul li .fp-tooltip::after { border-bottom: 5px solid transparent; border-left: 5px solid var(--main-color1, #444); bottom: 10px; content: ""; position: absolute; right: -5px; }
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip { opacity: 1; transition: opacity 0.2s ease-in; width: auto; }


.no-bg #fp-nav { --nav-color:#ccc; }

@media (max-width: 1400px) {
    #fp-nav { --nav-position:30px; }
}


/********************************************************
■ Popup : 기본제공 팝업 - 바둑판배열 & 세로사이즈 자동
********************************************************/
#hd_pop { position:fixed !important; left:0; top:0; right:0; bottom:0; height:auto !important; padding:10px; z-index:9999; display:none; }
#hd_pop .hd_pops { border:none; margin-bottom:10px; opacity:0; }
#hd_pop .hd_pops_con { height:auto !important; font-size:0; /*이미지로만 팝업사용시 폰트사이즈 0*/ }
#hd_pop .hd_pops_con img { width:100%; }
#hd_pop .hd_pops_con p { margin:0; }
#hd_pop .hd_pops_con br { display:none; }

#hd_pop .pop_fadein { animation:pop_fadein 400ms 1 forwards; }

@keyframes pop_fadein {
	0%	 { opacity:0; }
	100%	 { opacity:1; }
}

@media (max-width: 767px) {
	#hd_pop .hd_pops { left:50% !important; transform:translateX(-50%); top:0 !important; max-width:90%; }
	#hd_pop .hd_pops_con { max-width:100%; }
}


/********************************************************
■ ktheme Popup : 레이어 팝업
********************************************************/
/* 엑스버튼 */
.modal[id*="-popup"] { --pop-width:400px; --pop-height:calc(var(--pop-width)*4/3.5); }
.modal[id*="-popup"] .x-closed { border-radius:5px; }
.modal[id*="-popup"] .x-closed:before,
.modal[id*="-popup"] .x-closed:after { width:1px; background:#ddd; height:60% !important; }
.modal[id*="-popup"] .x-closed:before { transform:translate(-50%, -50%) rotate(45deg); }
.modal[id*="-popup"] .x-closed:after { transform:translate(-50%, -50%) rotate(-45deg); }

.modal[id*="-popup"] .modal-dialog { transition:all 600ms 300ms; width:var(--pop-width); }
.modal[id*="-popup"] .modal-content { overflow:hidden; box-shadow:none; border:none; background:#000; }
.modal[id*="-popup"] .swiper-slide a { position:absolute; left:0; top:0; right:0; bottom:0; z-index:2; }
.modal[id*="-popup"] .image { position:relative; display:flex; justify-content:center; align-items:center; }
.modal[id*="-popup"] .image .img { background:none no-repeat center/cover; }
.modal[id*="-popup"] .image img { width:100%; }
.modal[id*="-popup"] .image iframe { height:calc(var(--pop-width)*9/16); }

.modal[id*="-popup"] .txt { background:#fff; border-bottom:1px solid #ddd; --txt-padding:15px; --txt-head-h:50px; }
.modal[id*="-popup"] .txt .head { border-bottom:1px solid #ddd; padding:var(--txt-padding); height:var(--txt-head-h); }
.modal[id*="-popup"] .txt .desc { padding:var(--txt-padding); max-height:calc(100% - var(--txt-head-h)); overflow-y:auto; }


.modal[id*="-popup"] .ctrl .pg { display:flex; }
.modal[id*="-popup"] .ctrl .pg span { background:none; border:1px solid #fff; opacity:1; margin:0 2px; box-shadow:0 0 1px rgba(0,0,0,.1); border-radius:99px; transition-duration:300ms; }
.modal[id*="-popup"] .ctrl .pg span[class*="active"] { background:#fff; width:16px; }

.modal[id*="-popup"] .closed { display:flex; justify-content:space-between; align-items:center; padding:10px 15px; }
.modal[id*="-popup"] .closed > *:hover { color:#fff; }
.modal[id*="-popup"] .closed input[type="checkbox"] { display:none; }
.modal[id*="-popup"] .closed label { position:relative; }
.modal[id*="-popup"] .closed i:not(.fa-solid) { opacity:0.3; }
.modal[id*="-popup"] .closed .fa-solid { position:absolute; left:0; top:calc(50% - 8px); opacity:0; }
.modal[id*="-popup"] .closed input[type="checkbox"]:checked + label .fa-solid { opacity:1; }


#center-popup { z-index:1060; }
#center-popup .modal-dialog { transform:translateY(-20%); }
#center-popup.in .modal-dialog { transform:translateY(0%); }
#center-popup .modal-content { border-radius:10px; }
#center-popup .x-closed { right:0; top:0;  }


#center-popup .swiper-wrapper { align-items:center; }
#center-popup .ctrl span { border:1px solid #666; }
#center-popup .ctrl span[class*="active"] { background:#666; }

#center-popup .closed { background:#fff; }



#right-popup { left:auto; top:auto; z-index:1030; }
#right-popup .modal-dialog { right:calc(-1 * var(--pop-width)); bottom:0; transform:translate(0, 0); }
#right-popup.in .modal-dialog { right:0; }
#right-popup .x-closed:before,
#right-popup .x-closed:after { width:2px; border-radius:2px; }

#right-popup .swiper { height:calc(100% - 35px); }
#right-popup .image,
#right-popup .txt { height:var(--pop-height); }
#right-popup .image .img { position:absolute; left:0; top:0; right:0; bottom:0; }


#right-popup .ctrl { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:99; }

#right-popup .closed { background:#222; color:#fff; }



@media (max-width: 767px) {
	#right-popup { left:0; top:0; }
	.modal[id*="-popup"] .modal-dialog { width:90%; }
}

@media (max-width: 480px) {
	.modal[id*="-popup"] { --pop-width:100% !important; --pop-height:100% !important; }
	#right-popup .image .img { position:relative; width:100%; padding-bottom:115%; }
}



/********************************************************
■ Main Page : 메인 인덱스 페이지
********************************************************/
.pg-main .sec { position:relative; z-index:1; }
.is-shop .pg-main .sec:not(.no-padding) { padding-top:100px; padding-bottom:100px; }
#theme_wrapper:not(.is-shop) .pg-main .sec .c { position:relative; margin-top:var(--top-height); }

@media (max-width: 1024px), (max-height:800px) {
    .pg-main .sec:not(.no-padding) { padding-top:80px !important; padding-bottom:80px !important; }
    #theme_wrapper:not(.is-shop) .pg-main .sec .c { margin-top:0; }
}

.pg-main .sec .header { margin-bottom:30px; }
.pg-main .sec .header.center { text-align:center; }
.pg-main .sec .header .subhead { font-weight:600; margin-bottom:20px; font-size:1.5rem; }
.pg-main .sec .header .head { font-size:3.5rem; line-height:140%; }
.pg-main .sec .header .desc { font-size:1.125rem; line-height:160%; }

.pg-main .sec .more { padding:13px 30px; border:1px solid #666; transition:background 500ms !important; }
.pg-main .sec .more .arrow { margin-left:7px; }

.pg-main .sec .arrow { position:relative; display:inline-block; vertical-align:middle; margin-top:-2px; width:17px; height:1px; background:#666; }
.pg-main .sec .arrow:before, .pg-main .sec .arrow:after { content:""; position:absolute; background:#666; width:7px; height:1px; right:0; }
.pg-main .sec .arrow:before { top:300%; transform:rotate(-45deg); }
.pg-main .sec .arrow:after { bottom:300%; transform:rotate(45deg); }

.pg-main .sec .more:hover { background:#333; color:#fff; }
.pg-main .sec .more:hover .arrow { background:#eee; }
.pg-main .sec .more:hover .arrow:before, .pg-main .sec .more:hover .arrow:after { background:#eee; }



@media (max-width: 1024px) {
	.pg-main .sec { overflow:hidden; }
    .pg-main .sec .header .head { font-size:2.5rem; }
}


@media (max-width: 767px) {
	.pg-main .sec .header { margin-bottom:15px; }
	.pg-main .sec .header .subhead { font-size:1.125rem; margin-bottom:10px; }
	.pg-main .sec .header .head { font-size:1.625rem; }
	.pg-main .sec .header .desc { font-size:1rem; }
}



/* fullPage 플러그인 */
.fullpage-wrapper .section:not(#bottom):not(.notflex) { min-height:100vh; display:flex; align-items:center; }
.fullpage-wrapper .section .c { width:100%; }


/* fullPage 플러그인 스크롤 효과 */
.fullpage-effect .section { position:fixed !important; left:0; top:100%; right:0; height:100%; transition:top 1s ease-in-out; }
.fullpage-effect .section:not(:first-child):after { content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:100vw; height:100%; background:#fff; z-index:-1; }
.fullpage-effect .section:first-child,
.fullpage-effect .section.active { top:0; }

.fullpage-effect .section#bottom { z-index:3; }


@media (max-width: 1024px) {
	.fullpage-wrapper .section:not(#bottom):not(.notflex) { min-height:auto; }
}


/********************************************************
■ Sub : 서브
********************************************************/
/* 서브비주얼 미사용시 */
body.no_sub_visual #sub-top { display:none; }
body.no_sub_visual .pg-sub > .content-body { padding-top:var(--top-height); }

/* 풀페이지 사용시 */
body.fullpage .pg-sub > .content-body { padding-top:0; padding-bottom:0; }

/* 와이드 사용시 */
body.wide_layout .content-body > .c { max-width:none; padding:0; }
body.wide_layout #page[class*="board-"] .content-body > .c { padding-left: var(--top-padding); padding-right: var(--top-padding); }

/* 서브 타이틀 */
.content-body header.header { margin-bottom:100px; text-align:center; }
.content-body header.header .head { margin-bottom: 10px; font-size:3rem; }
#page[class*="board-"] .content-body header.header { text-align:center; }

@media (max-width:768px) {
	.content-body header.header { margin-bottom:30px; }
	.content-body header.header .head { margin-bottom:5px; font-size:2rem; }
}



/********************************************************
■ Footer : 하단 푸터
********************************************************/
.is-shop #bottom { margin-top:50px; }

.footer {   color:#666; z-index:1;  background:#fff url('../img/bottom_bg.png') no-repeat center bottom/cover; padding: 0; height: 780px; margin-top: 70px}
/*.footer:before,
.footer:after { content:""; position:absolute; left:50%; top:0; bottom:0; width:100vw; transform:translateX(-50%); }
.footer:before { background:rgba(var(--main-color3-rgb),.01); z-index:-1; }
.footer:after { background:rgba(0,0,0,.05); z-index:-2; }*/

.footer .logo { width:50%; height:50px; background:url('../img/logo.png') no-repeat left center/contain; filter:grayscale(1) opacity(.3); margin-bottom:40px; }

.footer .family-box { position:relative; height:100%; }
.footer .family-box .family-btn { cursor:pointer; padding:10px 20px; border:1px solid #666; }
.footer .family-box .family-btn i { margin-left:30px; font-size:.75rem; transition-duration:400ms; }
.footer .family-box.on .family-btn i { transform:rotate(180deg); }
.footer .family-box .sub { position:absolute; left:0; right:0; top:calc(100% - 1px); border:1px solid #666; padding:0 20px; opacity:0; overflow:hidden; visibility:hidden; max-height:0; z-index:-1; transition-duration:300ms; background:#f8f8f8; }
.footer .family-box .sub a { display:block; margin:5px 0; }
.footer .family-box .sub a:hover { text-decoration:underline; }
.footer .family-box.on .sub { opacity:1; visibility:visible; max-height:160px; z-index:9; padding:10px 20px; overflow-y:auto; }

.ft_wrap {width:100%; padding-top: 100px; }
.ft_wrap ul{width:100%; }
.ft_wrap ul li{float:left; color:#999;}
.ft_wrap ul li:nth-child(1){width:20%;}
.ft_wrap ul li:nth-child(2){width:15%;}
.ft_wrap ul li:nth-child(3){width:30%;}
.ft_wrap ul li:nth-child(4){width:25%;}
.ft_wrap ul li b{color:#111; font-size: 1.215rem;  line-height: 2; font-weight: 600;}
.ft_wrap ul li .lh2{line-height: 2.5; }
.footer .info { width:50%; min-width:800px; display:flex; flex-wrap:wrap; margin-bottom:30px; }
.footer .info li { margin-bottom:15px; text-align:left; }
.footer .info li > * { display:inline-block; }
.footer .info b { margin-right:15px; font-weight:normal; color:#111; }
.footer .info span { margin-right:40px; }

.footer .sns { display:flex; margin-bottom:10px; }
.footer .sns a { position:relative; display:inline-block; width:30px; height:30px; margin-right:15px; border-radius:99px; overflow:hidden; }
.footer .sns a:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:none no-repeat center/22px; opacity:.5; }

.footer .sns a:hover:before { opacity:1; }
.footer .sns a:not(.kakao):hover:before { filter:brightness(0) invert(1); }

.footer .sns .kakao:before { background-image:url('../img/sns_icon_kakao_gray.png'); }
.footer .sns .instagram:before { background-image:url('../img/sns_icon_instagram_gray.png'); }
.footer .sns .naver:before { background-image:url('../img/sns_icon_naver_gray.png'); }
.footer .sns .facebook:before { background-image:url('../img/sns_icon_facebook_gray.png'); }
.footer .sns .youtube:before { background-image:url('../img/sns_icon_youtube_gray.png'); }
.footer .sns .twiter:before { background-image:url('../img/sns_icon_twiter_gray.png'); }

.footer .sns .kakao:hover { background:var(--kakao-color); }
.footer .sns .instagram:hover { background:var(--instagram-color); }
.footer .sns .naver:hover { background:var(--naver-color); }
.footer .sns .facebook:hover { background:var(--facebook-color); }
.footer .sns .youtube:hover { background:var(--youtube-color); }
.footer .sns .twiter:hover { background:var(--twiter-color); }


.footer .copyright { display: inline-block; width:100%;  margin-top: 30px}
.footer .copyright p { margin-bottom:0; }
.footer .copyright .member-btns { }
.footer .copyright a { color:#ddd; }
.footer .copyright a:not(:first-of-type) { margin-right:5px; }
.footer .copyright a:hover { color:#bbb; }

.footer .copyright .sitelink{   margin-bottom: 10px;}
.footer .copyright .sitelink a { color:#111; font-weight: 600; }

.footer .site-link { display:flex; flex-wrap:wrap; justify-content:center; }
.footer .site-link button { position:relative; color: #777; margin:0 10px; cursor:pointer; }
.footer .site-link button:after { content:""; position:absolute; right:-10px; top:50%; width:1px; height:10px; background:#ccc; margin-top:-5px; }
.footer .site-link button:last-child:after { display:none; }
.footer .site-link button:hover { text-decoration:underline; }


@media (max-width: 1024px) {
    .footer .logo { height:40px; margin-bottom:30px; }

    .footer .info,
    .footer .sns,
    .footer .copyright { width:100%; min-width:auto; }

    .footer .info { margin-bottom:40px; }
    .footer .info li { margin-bottom:10px; }

	.footer .copyright .member-btns {  }

    .footer .site-link { margin:10px -10px 0; }
}

@media (max-width: 768px) {
	.footer { padding-top:0px; height:570px; background:#fff url('../img/bottom_bg.png') no-repeat center bottom/contain; margin-top: 20px }
	.footer .logo { height:40px; }
    .ft_wrap { padding-top:40px; }
	.ft_wrap ul li:nth-child(1){width:100%;}
.ft_wrap ul li:nth-child(2){width:100%;}
.ft_wrap ul li:nth-child(3){width:100%;}
.ft_wrap ul li:nth-child(4){width:100%;}
	.ft_wrap ul li b{padding-right: 20px; font-size: 1rem;}
}

@media (max-width: 500px) {
    .footer .logo { width:100%; margin-bottom:20px; }

    .footer .family-box { width:100%; margin-bottom:15px; }
    .footer .family-box .family-btn { display:flex; justify-content:space-between; align-items:center; }
    .footer .info { display:block; }
    .footer .info li { display:flex; }
    .footer .info span { margin-right:0; }
	.footer .site-link { margin-bottom:35px; }
}



#modal-siteinfo { display:flex; justify-content:center; align-items:center; }
#modal-siteinfo:not(.in) { opacity:0; z-index:-999; visibility:hidden; }
#modal-siteinfo .modal-dialog { margin:0; }
#modal-siteinfo .head { text-align:center; font-size:1.5rem; color:#fff; font-weight:600; }
#modal-siteinfo button[aria-label="Close"] { position:absolute; right:0; top:0; width:30px; height:30px; }
#modal-siteinfo button[aria-label="Close"]:before,
#modal-siteinfo button[aria-label="Close"]:after { content:""; position:absolute; left:50%; top:calc(50% - 15px); width:2px; height:30px; background:#fff; }
#modal-siteinfo button[aria-label="Close"]:before { transform:rotate(45deg); }
#modal-siteinfo button[aria-label="Close"]:after { transform:rotate(-45deg); }
#modal-siteinfo .modal-content { padding:30px; margin-top:10px; }

#modal-siteinfo .modal-content .desc { overflow-y:auto; height:400px; max-height:90vh; font-size:.875rem; }

#modal-siteinfo .btns { display:flex; justify-content:center; margin-top:20px; }
#modal-siteinfo .btns button { position:relative; width:120px; height:auto; padding:10px 0; margin:0 2px; border-radius:99px; text-align:center; cursor:pointer; color:#fff; }
#modal-siteinfo .btns button:before,
#modal-siteinfo .btns button:after { display:none; }
#modal-siteinfo .btns button.btn-cancel { background:#333; border:2px solid #333; }
#modal-siteinfo .btns button.btn-ok { background:var(--main-color1); border:2px solid var(--main-color1); }
#modal-siteinfo .btns button:hover { background:none; }
#modal-siteinfo .btns button.btn-cancel:hover { color:#333; }
#modal-siteinfo .btns button.btn-ok:hover { color:var(--main-color1); }




/********************************************************
■ Bootstrap3 : 부트스트랩 기본속성
********************************************************/
/* Button */
.btn { font-family: inherit; line-height:1.5; padding:0; }

/* Panel : Accordions */
.panel { border-radius: 0px; box-shadow: none; webkit-box-shadow: none; }
.panel-group .panel { border-radius: 0px; }
.panel .panel-heading { border-radius: 0px; }

/* List Group */
.list-group-item { word-break: break-all; border-radius: 0 !important; }

/* Progress */
.progress { background-color: whitesmoke; border-radius: 0px; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1); height: 28px; margin-bottom: 15px; overflow: hidden; position: relative; webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.progress .sr-only { clip: auto; font-family: inherit; font-size: 12px; height: 28px; left: 0px; line-height: 28px; margin: 0px 15px; width: auto; }
.sr-score { font-family: inherit; font-size: 12px; height: 28px; line-height: 28px; padding-right: 8px; }

/* modal */
[data-toggle="modal"] { cursor:pointer; }

.modal { display:flex; justify-content:center; align-items:center; }
.modal:not(.in) { opacity:0; z-index:-999; visibility:hidden; }
.modal-dialog { margin:0 auto; }

.modal button[data-dismiss="modal"]:first-child { position:absolute; width:50px; height:50px; z-index:9; }
.modal button[data-dismiss="modal"]:first-child:before,
.modal button[data-dismiss="modal"]:first-child:after { content:""; position:absolute; top:50%; left:50%; width:2px; height:80%; background:#999; }
.modal button[data-dismiss="modal"]:first-child:before { transform:translate(-50%, -50%) rotate(45deg); }
.modal button[data-dismiss="modal"]:first-child:after { transform:translate(-50%, -50%) rotate(-45deg); }


/********************************************************
■ 그누보드 기타
********************************************************/
/************** 개인정보 처리방침 **************/
.privacy-page { line-height:22px; word-break: keep-all; word-wrap: break-word; }
.privacy-page .article-title { color:#0083B9; font-weight:bold; padding-top:30px; padding-bottom:10px; }
.privacy-page ul { list-style:none; padding:0px; margin:0px; font-weight:normal; }
.privacy-page ol { margin-top:0px; margin-bottom:0px; padding-left:20px; }
.privacy-page ol > li > ol li {  list-style:disc; }
.privacy-page p { margin:0 0 15px; padding:0; }

/************** 이용약관 **************/
.provision-page { line-height:22px; word-break: keep-all; word-wrap: break-word; }
.provision-page .article-title { color:#0083B9; font-weight:bold; padding-top:30px; padding-bottom:10px; }
.provision-page ul { list-style:none; padding:0px; margin:0px; font-weight:normal; }
.provision-page ol { margin-top:0px; margin-bottom:0px; padding-left:20px; }
.provision-page ol > li > ol > li {  list-style:disc; }
.provision-page p { margin:0 0 15px; padding:0; }

/************** 이메일무단수집거부 **************/
.noemail-page { line-height:22px; word-break: keep-all; word-wrap: break-word; }
.noemail-page .article-title { color:#0083B9; font-weight:bold; padding-top:30px; padding-bottom:10px; }
.noemail-page p { margin:0 0 15px; padding:0; }


/************** 마이페이지 **************/
#smb_my { display:flex; flex-wrap:wrap; }
#smb_my:after { display:none; }
#smb_my_ov,
#smb_my_list { float:none; }

#smb_my_list { width:calc(100% - 285px); }
#smb_my_list .tab-btn { display:flex; }
#smb_my_list .tab-btn a { border:1px solid #ddd; border-right:none; flex:1; cursor:pointer; padding:15px; text-align:center;  }
#smb_my_list .tab-btn a:last-child { border-right:1px solid #ddd; }
#smb_my_list .tab-btn a.on { border-top-color:#333; border-bottom-color:#fff; }

#smb_my_list .tab-con { margin-top:50px; }
#smb_my_list .tab-con section { display:none; }
#smb_my_list .tab-con section.on { display:block; }
#smb_my_list .tab-con section .tit { font-size:1.25rem; margin-bottom:30px; font-weight:600; }

#smb_my_list .tab-con section #sod_ws { border-top:1px solid #333; }
#smb_my_list .tab-con section #sod_ws .empty_table { width:100%; }
#smb_my_list .tab-con section .btn { --effect-size:500px; }
#smb_my_list .tab-con section .btn-cart { background:#333; color:#fff; }
#smb_my_list .tab-con section .btn-order { border:1px solid #333; }


@media (max-width: 1200px) {
    #smb_my_ov,
    #smb_my_list { width:100%; }
    #smb_my_ov { margin-right:0; margin-bottom:20px; }
}

@media (max-width: 1200px) and (min-width:767px) {
    #smb_my_ov { display:flex; flex-wrap:wrap; justify-content:center; }

    #smb_my_ov .smb_me { border-bottom:0; }

    #smb_my_ov .sec2,
    #smb_my_ov .sec3 { width:100%; padding:10px 20px; }

    #smb_my_ov .sec2 ul { display:flex; border:1px solid #ddd; }
    #smb_my_ov .sec2 li { width:25%; }
    #smb_my_ov .sec2 li:not(:last-child) { border-right:1px solid #ddd; }


    #smb_my_ov .sec3 h3 { display:none; }
    #smb_my_ov .sec3 dl { display:grid; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(5, 20%); margin-bottom:10px; padding:0; }
    #smb_my_ov .sec3 dl > * { padding:5px 20px; margin:0; }
    #smb_my_ov .sec3 dl dt:nth-of-type(1) { grid-column:1/2; grid-row:1/2; }
    #smb_my_ov .sec3 dl dt:nth-of-type(2) { grid-column:2/3; grid-row:1/2; }
    #smb_my_ov .sec3 dl dt:nth-of-type(3) { grid-column:3/4; grid-row:1/2; }
    #smb_my_ov .sec3 dl dt:nth-of-type(4) { grid-column:4/5; grid-row:1/2; }
    #smb_my_ov .sec3 dl dt:nth-of-type(5) { grid-column:5/6; grid-row:1/2; }
    #smb_my_ov .sec3 dl > *:not(:last-of-type) { border-right:1px dashed #ddd; border-bottom:0; }
}

@media (max-width: 767px) {
    #smb_my_ov { margin-top:20px; }

    #smb_my_list .tab-con { margin-top:25px; }
    #smb_my_list .tab-con section .tit { margin-bottom:15px; }
}


/************** 게시판 리스트 **************/
/* 검색상자 */
#bo_list .search-box { position:relative; width:350px; margin:70px auto; }
#bo_list .search-box:before { content:""; position:absolute; left:calc(50% - 1px); bottom:calc(100% + 20px); width:2px; height:30px; background:#666; }
#bo_list .search-box input { padding-left:20px; padding-right:40px; border-color:#ccc; border-radius:99px; }
#bo_list .search-box button { position:absolute; top:calc(50% - 1px); transform:translateY(-50%); right:15px; }

@media (max-width: 767px) {
    #bo_list .search-box { width:100%; max-width:250px; margin:45px auto 40px; }
	#bo_list .search-box:before { bottom:calc(100% + 15px); height:20px; }
    #bo_list .search-box input { padding-left:10px; }
}


/* 분류탭 & 게시글수 */
#bo_list .list-head { margin-bottom:10px; }
#bo_list .category-box { display:flex; flex-wrap:wrap; }
#bo_list .category-box a { display:block; }

#bo_list .category-box.left { margin:0 -15px 30px; }
#bo_list .category-box.left li { position:relative; padding:0 15px; font-size:1.125rem; }
#bo_list .category-box.left li:not(:last-child):after { content:""; position:absolute; left:100%; top:10%; width:1px; height:80%; background:#ccc; }
#bo_list .category-box.left li a { position:relative; }
#bo_list .category-box.left li.active a { color:#111; font-weight:800; }
#bo_list .category-box.left li.active a:before { content:""; position:absolute; left:0; top:calc(100% + 3px); right:0; height:3px; background:var(--main-color2); }

#bo_list .category-box:not(.left) { justify-content:center; align-items:center; }
#bo_list .category-box:not(.left) li a { color:#555; }

#bo_list .category-box.list li { position:relative; padding:0 20px; font-size:1.125rem; }
#bo_list .category-box.list li:not(:last-child):after { content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); width:1px; height:80%; background:#ccc; }
#bo_list .category-box.list li a:hover,
#bo_list .category-box.list li.active a { color:var(--main-color2); }

#bo_list .category-box.photo { margin-top:-2.5px; }
#bo_list .category-box.photo li { padding:2.5px; }
#bo_list .category-box.photo li a { padding:5px 20px; border:1px solid #ddd; border-radius:99px; }
#bo_list .category-box.photo li a:hover,
#bo_list .category-box.photo li.active a { background:var(--main-color2); border-color:var(--main-color2); color:#fff; }


#bo_list .list-total { display:flex; justify-content:space-between; align-items:center; font-size:.875rem; color:#888; margin-bottom:10px; }
#bo_list .list-total span { position:relative; padding-right:10px; margin-right:10px; }
#bo_list .list-total b { color:#333; }


@media (max-width: 767px) {
	#bo_list .category-box.list li { font-size:.875rem; }

    #bo_list .category-box.photo li { padding:2px; }
    #bo_list .category-box.photo li a { font-size:.875rem; padding:5px 15px; }
}



/* 리스트 아이콘 */
#bo_list .li-icon { position:relative; --icon-size:20px; min-width:var(--icon-size); height:var(--icon-size); overflow:hidden; }
#bo_list .li-icon:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; -webkit-mask:none no-repeat center/contain; z-index:2; }
#bo_list .li-icon ~ .li-icon { margin-left:2px; }

#bo_list .li-icon.secret:nth-child(1) { margin-right:5px; }
#bo_list .li-icon.secret:before { background:var(--board-secret-color); -webkit-mask-image:url('../img/board_icon_secret.png'); }

#bo_list .li-icon.comment { display:flex; justify-content:center; align-items:center; border:1px solid var(--main-color2); color:var(--main-color2); font-size:.75rem; border-radius:99px; }
#bo_list .li-icon.new:before { background:var(--board-new-color); -webkit-mask-image:url('../img/board_icon_new.png'); }
#bo_list .li-icon.hot:before { background:var(--board-hot-color); -webkit-mask-image:url('../img/board_icon_hot.png'); }
#bo_list .li-icon.file:before { background:var(--board-file-color); -webkit-mask-image:url('../img/board_icon_file.png'); }
#bo_list .li-icon.link:before { background:var(--board-link-color); -webkit-mask-image:url('../img/board_icon_link.png'); }


@media (max-width: 767px) {
	#bo_list .li-icon { --icon-size:18px; }
}



/* 페이징 */
.list-page { margin-top:70px; }
.list-page * { display:flex; justify-content:center; align-items:center; }
.list-page ul li { position:relative; margin:0 1px; border:1px solid #bbb; border-radius:3px; width:35px; height:35px; }
.list-page ul li.on { background:var(--main-color1); border-color:var(--main-color1); color:#fff; }
.list-page ul li i { font-size:.75rem; }
.list-page ul li span i { color:#bbb; }
.list-page ul li a { position:absolute; left:-1px; top:-1px; right:-1px; bottom:-1px; border:1px solid transparent; border-radius:3px; z-index:2; color:#555; }
.list-page ul li a:hover { border-color:var(--main-color1); color:var(--main-color1); }


@media (max-width: 767px) {
	.list-page { margin-top:30px; }
	.list-page ul li { width:25px; height:25px; }
	.list-page ul li i { font-size:.625rem; }
}


/* 더보기 버튼 */
.infinite-scroll { margin-top:80px; text-align:center; display:none; }
.infinite-scroll .arrow { position:relative; display:inline-block; width:50px; height:50px; cursor:pointer; animation:top_bottom_bounce 1s infinite; }
.infinite-scroll .arrow:before,
.infinite-scroll .arrow:after { content:""; position:absolute; top:calc(50% + 2px); width:1px; height:12px; background:#666; }
.infinite-scroll .arrow:before { transform:rotate(-43deg); right:calc(50% + 3.5px); }
.infinite-scroll .arrow:after { transform:rotate(43deg); left:calc(50% + 3.5px); }
.infinite-scroll .arrow .more { display:inline-block; font-size:.75rem; margin-top:11px; }
.infinite-scroll .loding { position:absolute; left:0; top:0; width:100%; height:100%; border:1px dashed #666; border-radius:99px; animation:round_round 7s linear infinite; }

@keyframes top_bottom_bounce {
    0% { transform:translateY(-20px); }
    50% { transform:translateY(0); }
    100% { transform:translateY(-20px);}
}
@keyframes round_round {
    0% { transform:rotate(0deg);}
    100% { transform:rotate(360deg); }
}


/************** 게시판 글쓰기 **************/
/* 임시저장 */
#char_count_desc { display:block; margin:0 0 5px; padding:0; }
#char_count_wrap { margin:5px 0 0; text-align:right; }
#char_count { font-weight:bold; }

#autosave_wrapper { position:relative; }
#autosave_pop { display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2) }
#autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent}
#autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:center;margin:0 !important}
#autosave_pop button {margin:0;padding:0;border:0}
#autosave_pop ul {padding:15px;border-top:1px solid #e9e9e9;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #e8e8e8}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #fff;background:#eee;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a { display:block; float:left; }
#autosave_pop span { display:block; float:right; font-size:0.875rem; color:#999; }
.autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
.autosave_close:hover {background:#f3f3f3;color:#3597d9}
.autosave_content {display:none}
.autosave_del { position:relative; text-indent:-999px; overflow:hidden; height:20px; width:20px; }
.autosave_del:before, .autosave_del:after { content:""; position:absolute; left:calc(50% - 1px); top:calc(50% - 5px); width:2px; height:10px; border-radius:2px; background:#aaa; }
.autosave_del:before { transform:rotate(-45deg); }
.autosave_del:after { transform:rotate(45deg); }

/* 자동등록방지 */
.captcha-box { text-align:center; margin:20px 0 50px; }


/* 관리자 설명글 */
.admin-opation { padding:10px 0; }
.admin-opation:first-child { margin-top:-15px; }
.admin-opation:last-child { margin-bottom:-15px; }
.admin-opation:not(:last-child) { border-bottom:1px dashed #ddd; }
.admin-opation label { width:100px; }
.admin-opation input { margin-right:5px; }
.admin-opation .admin-desc { font-size:.875rem; color:#aaa; }

@media (max-width: 1200px) {
    .admin-opation .admin-desc { display:block; margin-left:auto; width:calc(100% - 110px); margin-top:5px; }
}

@media (max-width: 767px) {
    .admin-opation:first-child { margin-top:-10px; }
    .admin-opation:last-child { margin-bottom:-10px; }
    .admin-opation .admin-desc { margin-left:0; width:100%; }
}

/************** 게시판 뷰페이지 **************/
#bo_v .view-box img { max-width:100%; height:auto; }

#bo_v .view-scrap { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; margin-top:50px; }
#bo_v .view-scrap .btn_scrap { border-radius:3px; padding:5px 10px; border:1px solid #333; font-size:.875rem; }

#bo_v .bo_v_good { display:inline-block; margin-right:10px; }
#bo_v .bo_v_nogood i { transform:rotate(180deg); }


#bo_v .view_image { display:block; }

/* sns 공유 */
#bo_v_sns { display:flex; justify-content:flex-end; align-items:center; }
#bo_v_sns li { margin-left:3px; }
#bo_v_sns li a { padding:5px 10px; text-align:center; border-radius:3px; color:#fff; font-size:0.95em; display:flex; justify-content:center; align-items:center; }
#bo_v_sns li span { position:absolute; opacity:0; visibility:hidden; width:0; height:0; }
#bo_v_sns li .sns_f { background:#3b5997; }
#bo_v_sns li .sns_t { background:#09aeee; }
#bo_v_sns li .sns_g { background:#ea4026; }
#bo_v_sns li .sns_k { background:#fbe300; }

@media (max-width: 767px) {
	#bo_v_sns { margin-top:10px; }
}

/* 댓글 디자인 */
#bo_comment { margin-top:50px; padding:var(--view-row-padding, 30px) var(--view-row-padding, 0); border-top:1px solid #666; }

#bo_comment h2 { position:absolute; font-size:0; line-height:0; overflow:hidden; }

#bo_comment .tit { border-bottom:1px solid #ddd; font-weight:bold; padding-bottom:15px; display:flex; align-items:center; justify-content:space-between; }
#bo_comment .tit span.total { display:inline-block; margin-right:5px; }
#bo_comment .tit b { font-size:1.2rem; }
#bo_comment .tit button { font-size:.875rem; border:1px solid #ddd; padding:5px 10px; }

#bo_comment .text-box { display:flex; }
#bo_comment .text-box button { width:100px; padding:15px; background:#666; color:#fff; border-radius:3px; margin-left:5px; }


@media (max-width: 767px) {
	#bo_comment .tit { padding-bottom:10px; }
}

#bo_vc article { display:flex; margin:20px 0; position:relative; border-bottom:1px solid #f0f0f0; }
#bo_vc article .pf_img { position:relative; margin-right:10px; }
#bo_vc article .pf_img[class*="reply-"]:before { content:""; position:absolute; right:calc(100% + 10px); top:calc(50% - 27px); width:20px; height:20px; border-left:1px dashed #ccc; border-bottom:1px dashed #ccc; }
#bo_vc article .pf_img img { border-radius:50%; width:50px; height:50px; }
#bo_vc article .cm_wrap { flex:1; }
#bo_vc .bo_vl_opt { }

#bo_vc header { position:relative; }
#bo_vc header .profile_img { display:none; }
#bo_vc header .icon_reply { position:absolute; top:15px; left:-20px; }

#bo_vc .member,
#bo_vc .guest,
#bo_vc .sv_member,
#bo_vc .sv_guest { font-weight:bold; }

#bo_vc .bo_vc_hdinfo { color:#777; }
#bo_vc .bo_vc_hdinfo i { font-size:.75rem; }
#bo_vc h1 { position:absolute; font-size:0; line-height:0; overflow:hidden; }
#bo_vc .cmt_contents { line-height:1.8em; padding:0 0 20px; }
#bo_vc p a { text-decoration:underline; }
#bo_vc p a.s_cmt { text-decoration:underline; color:#ed6479; }
#bo_vc_empty { margin:0; padding:80px 0 !important; color:#777; text-align:center; }
#bo_vc #bo_vc_winfo { float:left; }

@media (max-width: 767px) {
	#bo_vc article { margin:15px 0; }
}
.bo_vc_act { display:none; position:absolute; right:0; top:40px; width:58px; text-align:right; border:1px solid #b8bfc4; margin:0; list-style:none; background:#fff; zoom:1;z-index:9999; }
.bo_vc_act:before { content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent; }
.bo_vc_act:after { content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent; }
.bo_vc_act li { border-bottom:1px solid #f0f0f0; }
.bo_vc_act li:last-child { border-bottom:0; }
.bo_vc_act li a { display:inline-block;padding:10px 15px; }
.bo_vc_act li a:hover { color:#3a8afd; }

.bo_vc_w { position:relative; margin:10px 0; max-height:0; transition-duration:600ms; overflow:hidden; }
.bo_vc_w.on { max-height:100vh; }
.bo_vc_w #char_cnt { display:block; margin:0 0 5px; }
.bo_vc_w textarea { height:120px; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1); resize:none; }


.bo_vc_w_info { margin:10px 0; display:flex; align-items:center; flex-wrap:wrap; }
.bo_vc_w_info input { margin-right:5px; }


.bo_vc_w .btn_confirm { margin-top:5px; }

.secret_cm { display:inline-block; float:left; }

#bo_vc .sv_wrap { position:relative; }
#bo_vc .sv_wrap .sv { display:none; position:absolute; left:0; top:100%; background:#fff; box-shadow:0 0 5px rgba(0,0,0,.1); padding:10px 15px; border-radius:5px; }
#bo_vc .sv_wrap:hover .sv { display:block; }
#bo_vc .sv_wrap .sv a { display:block; font-size:.875rem; color:#aaa; padding:2px 0; white-space: nowrap; }
#bo_vc .sv_wrap .sv a:hover { text-decoration:underline; }


#bo_vc_send_sns { display:inline-block; float:left; }
#bo_vc_sns { display:inline-block; margin:0; padding:0; list-style:none; zoom:1; }
#bo_vc_sns:after {display:block; visibility:hidden; clear:both; content:""; }
#bo_vc_sns li { float:left; margin:0 5px 0 0; }
#bo_vc_sns .sns_li_f { border-radius:3px; background:#3a589b; height:40px; line-height:40px; padding:0 0 0 10px; }
#bo_vc_sns .sns_li_t { border-radius:3px; background:#00aced; height:40px; line-height:40px; padding:0 0 0 10px; }
#bo_vc_sns .sns_li_off { background:#bbb; }
#bo_vc_sns a { display:inline-block; padding:0 15px 0 5px; }
#bo_vc_sns input { margin:0 5px 0 0; }



/* 이전글&다음글 */
#bo_v .view-another { margin-top:50px; }
#bo_v #bo_comment ~ .view-another { margin-top:0; }
#bo_v .view-another li { border-top:1px solid #ddd; padding:calc(var(--view-row-padding, 30px) - 5px) var(--view-row-padding, 10px); font-size:1.125rem; display:flex; align-items:center; }
#bo_v .view-another li:last-child { border-bottom:1px solid #ddd; }
#bo_v .view-another li span[class*="-tit"] { position:relative; padding-right:70px; margin-right:20px; white-space:nowrap; }
#bo_v .view-another li span[class*="-tit"]:before { content:""; position:absolute; right:20px; width:10px; height:10px; }
#bo_v .view-another li span.prev-tit:before { top:calc(50% - 3px); border-top:1px solid #666; border-left:1px solid #666; transform:rotate(45deg); }
#bo_v .view-another li span.next-tit:before { top:3px; border-bottom:1px solid #666; border-left:1px solid #666; transform:rotate(-45deg); }

#bo_v .view-another li a:hover { text-decoration:underline; }
#bo_v .view-another li span:last-child { color:#aaa; }

@media (max-width: 767px) {
	#bo_v .view-another li { font-size:1rem; }
	#bo_v .view-another li span[class*="-tit"] { padding-right:40px; margin-right:0; }
	#bo_v .view-another li span[class*="-tit"]:before { right:15px; width:8px; height:8px; }

	#bo_v .view-another li span.prev-tit:before { top:calc(50% - 2px); }
	#bo_v .view-another li span.next-tit:before { top:2px; }
}



/* 게시글 전체보기 */
#bo_v ~ #bo_list { margin-top:100px; }
#bo_v ~ header.header,
#bo_v ~ #bo_list .search-box,
#bo_v ~ #bo_list .list-head,
#bo_v ~ #bo_list .list-btn-box { display:none; }






/************** 공통 버튼 **************/
/* 버튼 디자인 */
[class*="-btn-box"] { display:flex; justify-content:center; margin-top:50px; text-align:center; flex-wrap:wrap; width:100%; }
[class*="-btn-box"] ul { display:flex; justify-content:center; margin:0 -2px; list-style:none !important; }
[class*="-btn-box"] ul li { margin:0 2px; }
[class*="-btn-box"] .btn { border-radius:99px; border:1px solid #666; outline:none; opacity:1; padding:10px 30px; }
[class*="-btn-box"] .btn.btn_write { background:#333; color:#fff; }

[class*="-btn-box"] .adm-btn { margin-right:auto; }
[class*="-btn-box"] .adm-btn .btn { padding:10px 20px; }
[class*="-btn-box"] i { font-size:.75rem; }

[class*="-btn-box"]:not(.write-btn-box) .user-btn { margin-left:auto; }

@media (max-width: 767px) {
    [class*="-btn-box"] { margin-top:30px; }
	[class*="-btn-box"] ul { margin:5px 0; }
	[class*="-btn-box"] .btn { padding:5px 20px; }
	[class*="-btn-box"] .adm-btn .btn { padding:5px 10px; }
	[class*="-btn-box"] i { display:none; }
}


/* 버튼 효과 */
.btn[class*="btn-effect"] { position:relative; overflow:hidden; z-index:1; transition-duration:var(--effect-speed, 200ms); }

.btn-effect1 { --effect-size:250px; --effect-color:var(--main-color2, #888); --effect-speed:200ms; }
.btn-effect1:before { content:""; position:absolute; left:0; top:0; width:0; height:0; transform:translate(-50%, -50%); border-radius:100%; background:var(--effect-color); transition-duration:500ms; z-index:-1; }
.btn-effect1:hover { color:#fff !important; border-color:var(--effect-color) !important; }
.btn-effect1:hover:before { width:var(--effect-size); height:var(--effect-size); }


.btn-effect2 { --effect-size:-5px; --effect-speed:300ms; }
.btn-effect2:hover { transform:translateY(var(--effect-size)); }


.btn-effect3 { --effect-size1:150px; --effect-size2:200px; --effect-position1:10%; --effect-position2:20%; --effect-color1:var(--main-color2-rgb); --effect-color2:var(--main-color2-rgb); --effect-speed:200ms; --effect-speed1:3s; --effect-speed2:5s; }
.btn-effect3:hover { color:#fff !important; border-color:rgba(var(--effect-color1), 1) !important; }
.btn-effect3:hover:before,
.btn-effect3:hover:after { content:""; position:absolute; }
.btn-effect3:hover:before { width: var(--effect-size1); height: var(--effect-size1); bottom:var(--effect-position1); left: calc(50% - calc(var(--effect-size1)/2)); border-radius: 45%; background: rgba(var(--effect-color1), 0.5); animation: btn_wave var(--effect-speed1) infinite linear; z-index:-1;  }
.btn-effect3:hover:after { width: var(--effect-size2); height: var(--effect-size2); bottom: var(--effect-position2); left: calc(50% - calc(var(--effect-size2)/2)); border-radius: 40%; background: rgba(var(--effect-color2), 0.7); border: 6px solid rgba(255,255,255,0.5); animation: btn_wave var(--effect-speed2) infinite linear reverse; z-index:-2; }

@keyframes btn_wave {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.btn-effect4 { --effect-speed:400ms; --effect-color:var(--main-color1, #333); }
.btn-effect4:before { content:""; position:absolute; left:0; top:0; bottom:0; width:100%; transform:scaleX(0); transform-origin:right center; transition:transform var(--effect-speed); background:var(--effect-color); z-index:-1; }
.btn-effect4:hover:before { transform:scaleX(1); transform-origin:left center; }


/************** datepicker 달력 커스텀 디자인 **************/
/* p.s 펄스나인님 */
.ui-widget { font-family:inherit; border: 1px solid #eee; }
.ui-datepicker { display: none; background: #fff; border-radius: 5px; margin:10px 0; padding:10px 15px; width:280px; box-shadow:5px 5px 15px rgba(0,0,0,0.1); font-size: .875rem; z-index:99 !important; }
#datepicker:focus > .ui-datepicker { display: block; }

.ui-widget-header { border: none; background: #fff; }
.ui-datepicker .ui-datepicker-header { position: relative; padding: 10px 0; }
.ui-datepicker .ui-datepicker-title { margin: 0; ltext-align: center; font-size: 1rem; padding: 0px; font-weight: bold; }

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
.ui-button.ui-state-disabled:hover,
.ui-button.ui-state-disabled:active,
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus { border:none; background:none; font-weight: normal; color: #454545; text-align: center; }


.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { cursor: pointer; top:calc(50% - 12.5px); width:25px; height:25px; display:flex; justify-content:center; align-items:center; }

.ui-state-disabled { font-size:0; }

.ui-datepicker-calendar { width: 100%; }
.ui-datepicker-calendar > thead > tr > th { padding: 5px; font-weight: 400; }
.ui-datepicker-calendar > tbody > tr > td { position:relative; border-radius: 100%; cursor: pointer; padding: 5px; font-weight: 100; text-align: center; }
.ui-datepicker-calendar > tbody > tr > td:before { content:""; display:block; padding-bottom:100%; }
.ui-datepicker-calendar > tbody > tr > td > a { color: #000; font-weight: bold !important; text-decoration: none; }
.ui-datepicker-calendar > tbody > tr > td > a,
.ui-datepicker-calendar > tbody > tr > td > span { position:absolute; left:0; top:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; font-size: .75rem !important; }
.ui-datepicker-calendar > tbody > tr > .ui-state-disabled:hover { cursor: auto; background-color: transparent; }
.ui-datepicker-calendar > tbody > tr > td:hover { background-color: transparent; opacity: 0.6; }


.ui-widget-header .ui-icon { background-image: url('../img/datepicker-btns.png'); width:16px; height:16px; }
.ui-icon-circle-triangle-e { background-position: -19px -2px; background-size: 36px; }
.ui-icon-circle-triangle-w { background-position: -2px -2px; background-size: 36px; }
.ui-datepicker-calendar > tbody > tr > td:first-child a { color: red !important; }
.ui-datepicker-calendar > tbody > tr > td:last-child a { color: #0099ff !important; }
.ui-datepicker-calendar > thead > tr > th:first-child { color: red !important; }
.ui-datepicker-calendar > thead > tr > th:last-child { color: #0099ff !important; }
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { border: 0px; background: #f1f1f1; border-radius: 50%; }





/************** 마우스커서 **************/
#mouse_cursor { position:fixed; left:50%; top:50%; z-index:10000; pointer-events: none; --cursor-size:100px; animation-timing-function: ease-in-out; }
#mouse_cursor .circle { position:relative; width:var(--cursor-size); height:var(--cursor-size); line-height:var(--cursor-size); color:#fff; font-style:italic; text-align:center; transition:opacity 200ms ease-in-out; font-size:.875rem; opacity:0; z-index:1; }
#mouse_cursor .circle:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; border-radius:99px; background:var(--main-color1); opacity:0.8; z-index:-1; }

#mouse_cursor .circle:before,
#mouse_cursor .circle:after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:99px; background:var(--main-color1); }
#mouse_cursor .circle:before { opacity:.8; animation: opacity_sizeup 1.8s ease-out infinite; z-index:-2; }
#mouse_cursor .circle:after { width:70%; height:70%; z-index:-1; }

#mouse_cursor.on .circle { opacity:1; transition-duration:500ms; }


@keyframes opacity_sizeup {
	0%  { opacity:.8; width:80%; height:80%; }
	100%  { opacity:.2; width:100%; height:100%; }
}