AvocadoAmber/AvocadoEdition_Light/css/style.css

@charset "utf-8";
/* -----------------------------------------------
	* 사이트 전체 기본 스타일 정의
--------------------------------------------------
	- 최초 작성일 :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;}

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

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