@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}
/* -----------------------------------------------
	* 사이트 전체 기본 스타일 정의
--------------------------------------------------
	- 최초 작성일 :2021.08.15
	- 최초 작성자 :아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/


/*********************************
	기본 스타일
**********************************/

html,
body {height:100%;}

body  {line-height:1.5em; font-size:12px;}
caption {display:none;}
html.single:before {content:""; display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1;}
html.single .bgm-btn {display:none !important;}

button,
input[type="submit"],
input[type="button"] {appearance: none; border:none; background:transparent;}

.material-icons {font-size:1em;}

ul, ol {list-style:none;}
a{color:black; !important}

/*********************************
	폼 요소 스타일
**********************************/

button {font-size:12px;}
.form-input {display:block; line-height:30px !important;}

.form-input,
input[type="number"],
input[type="text"],
input[type="password"],
input[type="file"],
select,
textarea {box-sizing:border-box; border-width:1px; border-style:solid; padding:0 1em; max-width:100%; line-height:1.2; outline:none;}
input[type="number"] {}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.form-input,
input[type="number"].full,
input[type="text"].full,
input[type="password"].full,
input[type="file"].full,
select.full {width:100%;}

textarea {box-sizing:border-box; border-width:1px; border-style:solid; padding:1em; width:100%; min-height:50px; resize:none;}



/*********************************
	레이아웃 스타일
**********************************/

#header {display:none; position:fixed; z-index:99;}
.single #header {display:block;}

#topCont {position:fixed; bottom:1em; right:1em; z-index:99;}

.icons-link-box a,
#topCont a {display:block; position:relative;}
#topCont a {font-size:1.8em; opacity:.5;}
#topCont a:hover {opacity:1;}
.icons-link-box .icons,
#topCont .icons,
.gnbWrap .icons {display:block; position:relative; width:3em; height:3em; z-index:1;}
.icons-link-box .icons:before,
#topCont .icons:before,
.gnbWrap .icons:before {content:""; display:block; position:absolute; z-index:0; top:.1em; left:.1em; right:.1em; bottom:.1em; box-sizing:border-box;}
.icons-link-box .icons > span,
#topCont .icons > span,
.gnbWrap .icons > span {display:table; width:100%; height:100%; position:relative; z-index:1;}
.icons-link-box .icons > span > *,
#topCont .icons > span > *,
.gnbWrap .icons > span > * {display:table-cell; vertical-align:middle; text-align:center;}

@media all and (min-width:1025px) {
	#header {}
	#mo_header {display:none !important;}
	.gnbWrap {position:absolute;}
	.gnbWrap li a {display:block; position:relative;}
	.gnbWrap .tooltips {display:block; position:absolute; padding:2px 15px; white-space:nowrap; z-index:-1; opacity:0; visibility:hidden; transition:.3s all; -webkit-transition:.3s all;}
	.gnbWrap a:hover .tooltips {visibility:visible; opacity:1;}
}
@media all and (max-width:1024px) {
	.control-mobile-menu {display:none; position:fixed; top:0; right:0; width:50px; height:50px; font-size:30px; z-index:991;}
	.single .control-mobile-menu {display:block;}
	body:not(.open-gnb) .control-mobile-menu .close {display:none;}
	body.open-gnb .control-mobile-menu .open {display:none;}

	#header {display:none !important;}

	#mo_header {position:fixed; top:0; left:0; right:0; bottom:0; z-index:990; overflow:auto; opacity:0; visibility:hidden; backdrop-filter: blur(2px); transform:translateY(10%); -webkit-transform:translateY(10%);}
	#mo_header > div {display:table; width:100%; height:100%;}
	#mo_header > div > div {display:table-cell; vertical-align:middle; text-align:center; padding:30px;}
	body.open-gnb #mo_header {opacity:1; visibility:visible; transform:translateY(0); -webkit-transform:translateY(0);}

	#topCont a {display:block; position:relative; font-size:1.2em;}
	
	.gnbWrap {display:inline-block; text-align:left; }
	.gnbWrap li {font-size:1.2em;}
	.gnbWrap li + li {margin:.5em 0;}
	.gnbWrap li.line {display:block; margin:1em 0; height:2px;}
	.gnbWrap .icons {display:inline-block; width:2em; height:2em; z-index:1; vertical-align:middle;}
}


/*********************************
	기본 라인 스타일
**********************************/

hr.line {display:block; position:relative; clear:both; margin:10px 0; border:none; padding:0; height:1px;}
hr.padding {display:block; clear:both; margin:0; padding:0; border:none; height:30px;}
hr.padding.small {height:5px;}

#bo_v_img img {height:auto !important;}


/**************************************************************
	버튼
***************************************************************/

.ui-btn {display:inline-block; position:relative; text-align:center; border-width:1px; border-style:solid; vertical-align:middle; padding:0 1em; box-sizing:border-box; cursor:pointer;}
a.ui-btn {}
.ui-btn.small {font-size:.8em;}
.ui-btn.big {font-size:1.3em;}
.ui-btn.full {width:100%;}

.ui-btn.admin {background:#8c1e1e; color:#fff; border-color:#691010;}
.ui-btn.disable {opacity:.3;}


/**************************************************************
	기본박스
***************************************************************/

.theme-box {display:block; position:relative; padding:1em; box-sizing:border-box;}
.board-notice-box {display:block; position:relative; padding:1em; box-sizing:border-box; text-align:center; max-width:500px; margin:0 auto 2em;}

/**************************************************************
	테이블
***************************************************************/

table {width:100%; padding:0; border-spacing:0px; border:0; border-collapse:collapse; table-layout:fixed;}
th, td {border:none;}

.theme-form { }
.theme-form td {padding:5px; height:30px;}
.theme-form th {padding:5px 10px;}
.theme-form .frm_info {display:block; font-size:12px; padding:0 0 8px 0;}

.theme-list {table-layout:fixed;}
.theme-list thead th {height:30px;}
.theme-list td {padding:5px; height:30px;}
.theme-list td.no-data {padding:5px; text-align:center; line-height:200px;}

.responsive-table-box {display:block; position:relative;}
.responsive-table-box > .resp-table {display:block; position:relative;}
.responsive-table-box > .guide {display:none; text-align:right; font-size:12px;}

@media all and (max-width:770px) {
	.responsive-table-box > .guide {display:block;}
	.responsive-table-box > .resp-table {overflow:auto;}
	.responsive-table-box > .resp-table > table {width:770px !important;}
}


/**************************************************************
	게시판 처리
**************************************************************/

#bo_list,
#bo_v,
#bo_w {}

/* 검색 부분 */
#bo_sch { text-align:center;}
#bo_sch button { position:relative; width:30px; height:30px; padding:0 !important; font-size:18px;}
#bo_sch button i {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}

.board-category {display:block; position:relative; text-align:center; margin-bottom:1em;}
.board-category li {display:inline-block; position:relative; vertical-align:middle;}

/* 게시글 타이틀 */
.board-title {display:block; position:relative; text-align:center; font-size:2.2em; font-weight:800; padding-bottom:1em; border-bottom:1px solid #ddd;}
.board-title > * {display:block; line-height:1.2;}
.board-title em {font-size:.7em; margin-bottom:.5em; opacity:.5;}

.board-info {display:block; position:relative; text-align:right; padding:1em; border-bottom:1px solid #ddd;}
.board-info > * {display:inline-block; vertical-align:middle;}
.board-info > * + * {margin-left:1em;}
.board-content  {padding:2em 1em; line-height:1.8; font-size:1.1em;}

/* 게시물 덧글 */
#bo_vc {border-top:1px solid #ddd;}
#bo_vc_w {padding-top:2em; padding-bottom:2em;}
#bo_v_bot {padding-top:2em; border-top:1px solid #ddd;}
#bo_v_bot a {margin:1px 0;}

#bo_vc article {margin:1em 0;}
#bo_vc .is-reply {border-left:1px solid #ddd; padding-left:1em; margin:1px 0;}

#bo_vc header {position:relative;padding:15px 0 5px}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .sv_wrap {margin-right:15px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {display:inline-block;margin:0 15px 0 5px}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc a {color:#fff;text-decoration:none}
#bo_vc p {padding:0 0 5px;line-height:1.8em}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:none}
#bo_vc_empty {display:none; margin:0;padding:20px !important;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc footer {zoom:1}
#bo_vc footer:after {display:block;visibility:hidden;clear:both;content:""}

.bo_vc_act {float:right;margin:0;list-style:none;zoom:1}
.bo_vc_act a		{ color:#fff; }
.bo_vc_act:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_act li {float:left;margin-left:5px}

#bo_vc_w {position:relative;}
#bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc_w #char_cnt {display:block;margin:0 0 5px}

#bo_v		{ padding-top:20px; }
#bo_v_title	{ font-size:16px; text-align:center; margin-bottom:20px; padding:20px 0; border-bottom:1px solid rgba(255, 255, 255, .5); }
#bo_v_info	{ text-align:right; }
#bo_v_info strong	{ display:inline-block; }
#bo_v_info strong + strong	{ margin-left:15px; } 

#bo_v_img	{ text-align:center; }
#bo_v_img img	{ display:block; margin:0 auto; }
#bo_v_con	{ margin-top:30px; }
#bo_v_atc	{ display:block; margin:20px 0; padding:10px; line-height:1.8em; }

.empty_table	{ text-align:center; line-height:150px; }

.bo_fx	{ text-align:right; padding:20px 0; }
.btn_confirm { text-align:center; padding:30px 0;}

#bo_vc_w {margin:1em 0;}
#bo_vc_w .btn_confirm {padding-bottom:0;}


/**************************************************************
	도움말 정보
**************************************************************/

.frm_info {display:block; font-size:12px; padding:0 0 8px 0; opacity:.7;}
.status-bar .frm_info {padding:0;}



/**************************************************************
	페이지 설정
***************************************************************/

.pg_wrap {display:block; position:relative; text-align:center; padding:1.5em 0;}
.pg_wrap .pg-number-group {display:inline-block; position:relative; padding:0 .5em; vertical-align:middle;}
.pg_wrap .pg-number-group .pg_page {display:inline-block; position:relative; padding:0 .5em; vertical-align:middle;}
.pg_wrap .pg_control {display:inline-block; position:relative; width:1.3em; height:1.3em; vertical-align:middle; overflow:hidden; font-size:1.5em;}
.pg_wrap .pg_control .material-icons {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.pg_wrap .pg_control + .pg_control {padding:0;}
.pg_wrap .pg_current {font-weight:800; font-size:1.2em;}


/****************************************************
	Search Box
****************************************************/

.searc-sub-box {position:relative; clear:both; padding:30px 0px;}
.ui-search-box {position:relative; padding-left:100px; padding-right:80px; margin-top:5px;}
.ui-search-box .sch_category {position:absolute; top:0; left:0; width:95px; line-height:30px;}
.ui-search-box .sch_button {position:absolute; top:0; right:0; width:75px;}
.ui-search-box span {display:block; padding:0 15px;}
.ui-search-box select,
.ui-search-box input[type="text"],
.ui-search-box button {display:block; width:100%;}


/****************************************************
	헤더
****************************************************/	
.container { 
	width:100%;
	font-family: 'Pretendard'; font-weight:900; font-size:1.2em;
	display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
  grid-template-rows: 2fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "area01 area02 area02 area02 area02 area03"
    "area01 area04 area05 area06 area07 area03";
}
.area01 { grid-area: area01; position:fixed;}
.area02 { grid-area: area02; }
.area03 { grid-area: area03; padding:10%; }
.area04 { grid-area: area04; padding:10%; }
.area05 { grid-area: area05; padding:10%; }
.area06 { grid-area: area06; padding:10%; }
.area07 { grid-area: area07; padding:10%; }

.SMN_effect-15 a:before, .SMN_effect-15 a:after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}
.SMN_effect-15 a:before {
  margin-right: 10px;
  content: '[';
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}
.SMN_effect-15 a:after {
  margin-left: 10px;
  content: ']';
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}
.SMN_effect-15 a:hover:before, .SMN_effect-15 a:hover:after, .SMN_effect-15 a:focus:before, .SMN_effect-15 a:focus:after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

.bl{
	width:500px;
}

#bubbles {
  	position: fixed;
 	bottom: 0;
  	width:100%;
	pointer-events: none;
	z-index:2;
}

#x{position:fixed; top:5%; right:20%;}
#sparcle1{position:fixed;bottom:15%;left:65%;}
#sparcle2{position:fixed;bottom: 15%; left:10%;}
.logo{position:fixed; text-align:center; width:100%; bottom:5%;}
#jellyfish {position:fixed;bottom:0;right:10%;}

@media all and (max-width:1024px) {
	.area03 { display:none; }
	.area04 { display:none; }
	.area05 { display:none; }
	.area06 { display:none; }
	.area07 { display:none; }
  #x{display:none;}
  #sparcle1{display:none;} 
  #sparcle2{display:none;}
  .logo{display:none; }
  #jellyfish{display:none;}
}