@charset "utf-8";
/* -----------------------------------------------
	* 사이트 전체 기본 스타일 정의
--------------------------------------------------
	- 최초 작성일 :2021.08.15
	- 최초 작성자 :아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/


/* 왜...? 디자인설정에서 안 먹혀서 넣음.. 복붙할땐 지울것... */
@font-face {
    font-family: 'YUniverse-B';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_yuniverse@1.0/YUniverse-B.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

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

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda&display=swap');


/*********************************
	개인디자인
**********************************/

.acce img {position: fixed;}

.acce .left {left:0;}
.acce .right {right:0;}
.acce .top {top:0;}
.acce .bottom {bottom:0;}
.acce .center {left:0; right:0; margin:0 auto;}

.txt-center .tailsubtitle {position:relative;z-index: 99;}

.mainbox {
    border-style: solid;
	border-image-source: url(https://haze-in-gaze.com/img/frame.png);
	border-image-slice: 58 58 58 58;
      border-top-width: 58px;
      border-right-width: 58px;
      border-left-width: 58px;
      border-bottom-width: 58px;
  background-repeat: repeat-y;
  position: relative;
  backdrop-filter: blur(8px);
}

.universe {
    font-family: 'YUniverse-B';
    font-size: 0.8em;
    padding-bottom:0.5%}


/*********************************
	메뉴디자인
**********************************/

.txt-center .titlemenu {position: relative;}

.pcmymenu {width:100%; position:relative;  padding: 10px 0 20px;}

.pcmymenu a {color: #31337f;
    font-family: 'Bodoni Moda', serif;
    font-size: 1.2em;
    vertical-align: middle;}
.pcmymenu a:hover {color:#7a7a96;}
.pcmymenu .line {<?=$link_color?>}

.pcmymenu .menulist {
	position: relative;
	display:table; width:100%; text-align:center;}
.pcmymenu .menulist > * {display:table-cell; vertical-align:middle;}
.pcmymenu .menulist li {display:inline-block; padding:0px 4px; vertical-align:super;}
.pcmymenu .menulist li + li {min-height:1.2em;}
.pcmymenu .menulist li.line {width:1px; opacity:.2;}
.pcmymenu .menulist li:hover {color:#7a7a96;}

.pcmymenu .menulist ul { border:1px solid #31337f; display: inline-flex; padding:2px 55px;
backdrop-filter: blur(8px);}

.bgmplayer {position: fixed;
	right: 1%;
    bottom: 3%;}

/*********************************
	모바일
**********************************/

@media screen and (max-width: 1024px) {

.acce .topornament {top:-35%;}

.mobi0 {display:none;}
.mobi1 {width:100px;}
.mobi2 {width:200px;}
.mobi3 {width:300px;}
.pcmymenu {display:none;}

}


/*********************************
	design.config 덮어씌우기
**********************************/


#bo_sch button { width:55px !important; height:30px; font-size:15px; }

.form-input,
input[type="file"],
input[type="number"],
/*textarea,*/
select { 
margin-left: 20px;
width: 25%; 
padding-top: 2px !important;}

.form-input,
input[type="text"],
input[type="password"] {
width: 150px;}



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

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;}

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

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:#27334c; color:#fff; border-color:#27334c;}
.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%;}
