@charset "UTF-8";

/********************************************************

// * 본 스킨은 Ninny Design에서 제작되었습니다.
// * 이 파일은 저작권법의 보호를 받습니다.
// * 무단 복제, 배포, 수정, 재판매를 금지합니다.
// * 위반 시 민·형사상 법적 책임을 질 수 있습니다.

// * Developed by Ninny Design.
// * This file is protected by copyright law.
// * Unauthorized copying, distribution, modification, or resale is strictly prohibited.
// * Violators may be subject to civil and criminal penalties.

// * © 2026 Ninny Design. All rights reserved.

********************************************************/

/********************************************************

// 아래 코드는 테마 동작에 필요한 핵심 코드입니다.
// 내용을 수정하거나 삭제할 경우 사이트가 정상적으로 동작하지 않을 수 있습니다.
// 해당 부분 수정으로 발생한 오류 복구는 별도 비용이 발생할 수 있습니다.

********************************************************/

/********************************************************
■ 기본 셋팅
********************************************************/
:root {
	/* 컬러칩 */
    --nn-red:#d81f29;
    --nn-orange:#fa631d;
    --nn-yellow:#ffb71b;
    --nn-mint:#75dfb6;
    --nn-green:#61bd0c;
    --nn-skyblue:#6ac5fa;
    --nn-blue:#094baf;
    --nn-navy:#0b183b;
    --nn-purple:#492b8f;
    --nn-pink:#f03c63;
    --nn-beige:#e4c5ae;
    --nn-brown:#4e3125;
    --nn-gray:#b6b8bd;
    --nn-black:#1b1b1b;
    --nn-white:#f8f8f8;

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

    /* index */
    --header-index:9999;
    --sidebar-index:999999;
    --popup-index:99999;
    --popup-dim-index:99998;
    --quick-index:999;
}

* { margin:0; padding:0; border:none; background:none; box-sizing: border-box; }

#nn-theme, #nn-theme body { background:var(--bg-color, #fff); }
#nn-theme { overflow-x:hidden; }
#nn-theme body { color: var(--txt-color, #050505); transition: all 200ms; width:100%; min-height:100%; font-size:1rem; }

::selection { background: var(--main-color1, #050505); color: #fff; }
::-moz-selection { background: var(--main-color1, #050505); color: #fff; }

* { scrollbar-color:var(--scrollbar-color, #00000099); scrollbar-face-color: var(--scrollbar-color, #00000099); }
*::-webkit-scrollbar { width: var(--scollbar-size, 6px); height: var(--scollbar-size, 6px); background:none; }
*::-webkit-scrollbar-thumb { outline: none; background: var(--scrollbar-color, #00000099); border-radius:99px; }

h1, h2, h3, h4, h5, h6 { font-weight:600; line-height: inherit; font-family: inherit; }

button { font: inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }

a, button { transition: all .3s ease; line-height: inherit; }
a, a:visited, a:active, a:hover { color:inherit; text-decoration: none; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display:block; }
address { font-style: normal; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
table caption { overflow:hidden; width:0; height:0; opacity:0; }
th { text-align: center; }

ul, li { list-style:none; vertical-align: middle; }

img { max-width:100%; }

blockquote, q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; }

video { order:0; outline:0; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; }




/********************************************************
■ Layout
********************************************************/
.wrap { padding-left:var(--default-padding, 15px); padding-right:var(--default-padding, 15px); }
.max-wrap { width:min(100%, var(--default-width, 1400)); margin:0 auto; }

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* 퀵버튼 */
aside[id^="nn-quick-"] { position:fixed; z-index:var(--quick-index, 999); }


/* 이미지 사이즈 */
.image { position:relative; }
.image img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; }
.image .no-image { position: absolute;  left:0; top:0; width:100%; height:100%; background:var(--nn-bg-gray); display: flex; align-items: center; justify-content: center; }


/* 설명문구 */
.nn-txt-help { font-size:.875em; color:#999; }


/* 글씨 줄임 */
.txt-ellipsis { white-space: nowrap; word-wrap: normal; text-overflow: ellipsis; overflow: hidden; word-break: normal; }
/* 여러줄 */
[class^="ellipsis"],
[class*=" ellipsis"] { white-space: normal; text-overflow: ellipsis; overflow: hidden; word-break: normal; line-height:var(--ellipsis-height); display: -webkit-box; -webkit-line-clamp: var(--ellipsis-line); -webkit-box-orient: vertical; height:calc(var(--ellipsis-height) * var(--ellipsis-line)); max-height:calc(var(--ellipsis-height) * var(--ellipsis-line)); --ellipsis-line:2; --ellipsis-height:1.4em; }


/* 탭 */
.nn-tab-conts [data-tab]:not(.on) { position:absolute; width:0; height:0; opacity:0; visibility: hidden; overflow:hidden; z-index:-9; }


/* 게시물이 없습니다. */
.nn-list-empty { padding:clamp(30px, 3.5vw, 60px) 0; color:#777; text-align:center; }



/********************************************************
■ Form
********************************************************/
select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; --arrow-size:10px; --arrow-gap:30px; }
select::-ms-expand { display: none; }
select { background:#fff url('../img/icon-arrow-down.svg') no-repeat calc(100% - var(--arrow-size)) center/var(--arrow-size) auto !important; font-size:.875rem; padding-right:var(--arrow-gap) !important; border:1px solid var(--form-border-color); }

input[type="file"] { font-size:.875rem; }
textarea { resize:none; }

input, textarea, select { font-family: inherit !important; }
input[type=text]:focus,
input[type=tel]:focus,
input[type=password]:focus,
textarea:focus,
select:focus { outline:none !important; box-shadow:none !important; border:1px solid #333 !important; }

input::placeholder,
textarea::placeholder,
select { color:var(--placeholder-color); }
select.on { color:inherit; }
select option { color:#111; }


.nn-form-el { border:1px solid var(--form-border-color, #ddd); border-radius:5px; padding:15px 10px; font-size:.875rem; width:100%; box-shadow: none !important; }
.nn-form-el:focus { border:1px solid var(--main-color1, #050505); }

.nn-form-custom { position:absolute; width:0; height:0; opacity:0; outline:0; overflow:hidden; visibility: hidden; z-index:-1; }
.nn-form-custom + label { position: relative; display:inline-block; cursor: pointer; }

input[type="checkbox"].nn-form-custom + label { padding-left:22px; min-width:var(--box-size); min-height:var(--box-size); line-height:var(--box-size); --box-size:16px; }
input[type="checkbox"].nn-form-custom + label:before,
input[type="checkbox"].nn-form-custom + label:after { content:""; position: absolute; left:0; top:50%; transform: translateY(-50%); width:var(--box-size); height:var(--box-size); }
input[type="checkbox"].nn-form-custom + label:before { border-radius: 2px; border:1px solid #ddd; background:#fff; }


@media (max-width: 1024px) {
    .nn-form-el { font-size:.875rem; }
    input[type="checkbox"].nn-form-custom + label { padding-left:18px; --box-size:14px; }
}





/********************************************************
■ View port
********************************************************/
.no-view { position:absolute; opacity:0; overflow:hidden; width:0; height:0; }
.m-view { display: none !important; }
@media (max-width: 768px) {
	.pc-view { display: none !important; }
	.m-view { display: block !important; }
}




/********************************************************
■ Popup
********************************************************/
html.nn-popup-fix { overflow:hidden !important; margin-right:var(--scollbar-size); }
body.nn-popup-dim:before { content: ""; position: fixed; left:0; top:0; right:0; bottom:0; background:#000000b3; transition-duration:.2s; z-index: var(--popup-dim-index, 999998); pointer-events: auto; }

.nn-layer-popup { position: fixed; left:50%; top:50%; opacity:0; visibility:hidden; transform: translate(-50%, -50%); transition-duration: .6s; width:min(var(--popup-size, 700px), calc(100vw - var(--default-padding)*2)); padding:clamp(20px, 2.2vw, 30px); z-index:-999999; }
.nn-layer-popup.on { opacity:1; visibility:visible; z-index:var(--popup-index, 99999); }