@charset "utf-8";

/* sub visual */
.sub-visual {background-image:url("../image/sub_06/sub_visual.jpg");}

.bo-wrap {width:100%; font-weight:600; font-size:.917em;}
.bo-wrap:after {content:''; display:block; clear:both;}
/* board list */
.bo_sch {width:100%; height:auto; display:flex; justify-content:flex-end;}
.bo_sch .box {width:17.727em; height:2.727em; border:1px solid #c2c2c2; position:relative;}
.bo_sch input {width:100%; height:2.727em; padding:0 1.091em; border:0; background:none; color:#000; -webkit-appearance:none; -webkit-border-radius:0; outline:none;}
.bo_sch button {position:absolute; top:0; right:0; width:2.727em; height:2.727em; background:url("../image/sub_06/bt_sch.jpg") center no-repeat;}

.bo_lst {width:100%; height:auto; margin-top:2.182em; border-bottom:1px solid #000;}
.bo_lst table {width:100%; height:auto;}
.bo_lst thead th {border-top:2px solid #000; border-bottom:1px solid #000; padding:.909em 0; text-align:center; font-weight:800; background-color: #f9f9f9;}
.bo_lst tbody th, .bo_lst tbody td {border-top:1px solid #cecece; padding:.909em 0; text-align:center; position:relative; color:#696969;}
.bo_lst tbody .tt {text-align:left;}
.bo_lst tbody a:hover {text-decoration:underline; color:#000;}

@media screen and (max-width: 667px) {
	.bo_lst .hit, .bo_lst .name {display:none;}
}

/* pagination */
.pagination {display:inline-block; width:100%; height:auto; text-align:center; margin-top:3.273em;}
.pagination a {display:inline-block; vertical-align:middle; color:#000; width:1.455em; height:1.455em; line-height:1.636em;}
.pagination a:after {content:''; display:none; width:.591em; height:3px; margin:-3px auto 0; background-color: #000;}
.pagination a.current {}
.pagination a.current:after {display:block;}
.pagination a.page {}
.pagination a.page:hover {opacity:.3;}
.pagination a.page.first {background:url("../image/sub_06/page_first.png") 0 0 / cover no-repeat;}
.pagination a.page.last {background:url("../image/sub_06/page_last.png") 0 0 / cover no-repeat;}
.pagination a.page.prev {background:url("../image/sub_06/page_prev.png") 0 0 / cover no-repeat;}
.pagination a.page.next {background:url("../image/sub_06/page_next.png") 0 0 / cover no-repeat;}

/* button */
.bo_btns {width:100%; height:auto; margin-top:1.091em; text-align:right;}
.bo_btns button {padding:.727em 1.818em; background:#3b3838; color:#fff; border:1px solid #3b3838;}
.bo_btns button:hover {background:#fff; color:#3b3838;}
.bo_btns .bt_modify {background:#f0f0f0; color:#3b3838; border:1px solid #000;}
.bo_btns .bt_close {background:#fff; color:#3b3838; border:1px solid #000;}

/* view */
.view-wrap {text-align:left;}
.view-wrap .bo-view-top {width:100%; height:auto; padding:1.5em; margin-top:1em; border-top:2px solid #000; border-bottom:1px solid #000; position:relative; display:flex; justify-content:space-between;}
/* .view-wrap .bo-view-top h3 {font-weight:600; font-size:1.727em;} */
.view-wrap .bo-view-top .user_it_info {font-size:.855em; color:#696969; /* position:absolute; top:50%; right:2.857em; transform:translateY(-50%); */}
.view-wrap .bo-view-top .user_it_info li {display:inline-block; /* padding:0 1.143em; */}
.view-wrap .bo-view-top .user_it_info li:not(:nth-child(1)):before {content:''; display:inline-block; vertical-align:middle; width:1px; height:16px; margin:-4px 1.143em 0; background-color:#ccc;}
.view-wrap .bo-view-top p {padding:0 1.143em; font-size:.855em; color:#696969;}
.view-wrap .bo-view-top p img {vertical-align:middle;}
.view-wrap .bo_view_cont {width:100%; height:auto; min-height:27em; padding:1.727em; color:#696969;}

.view_lst {width:100%; height:auto; border-top:1px solid #bababa; color:#696969;}
.view_lst li {width:100%; padding:1.182em; border-bottom:1px solid #bababa; position:relative;}
.view_lst li:after {content:''; display:block; clear:both;}
.view_lst li span {display:block; float:left;}
.view_lst li a {display:block; float:left; padding-left:1.182em; /* width:50%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; */}
.view_lst li a:hover {text-decoration:underline;}
.view_lst li span[class^="lst"] {width:7.273em; padding-left:3em; color:#000; position:relative;}
.view_lst li span[class^="lst"]:after {content:''; display:block; width:1px; height:13px; background-color:#000; position:absolute; top:3px; right:0;}
.view_lst li span.lst_pre {background:url("../image/sub_06/prev_post.png") 0 50% no-repeat;}
.view_lst li span.lst_nxt {background:url("../image/sub_06/next_post.png") 0 50% no-repeat;}
.view_lst li span.date {float:right; width:240px;}

.view-wrap .bo_btns {margin-top:2.909em; text-align:center;}
.view-wrap .bo_btns button {width:7em; font-size:1.227em;}

/* write */
.write-wrap {}
.write-wrap .bo_wirte {width:100%; height:auto; min-height:27em; border-top:2px solid #000; border-bottom:1px solid #000;}
.write-wrap .bo_btns {margin-top:2.909em; text-align:center;}

@media screen and (max-width: 1366px) {
	.view-wrap .bo-view-top {display:block; text-align:center;}
	.view-wrap .bo-view-top p {margin-top:1em;}
}
@media screen and (max-width: 926px) {
	.view-wrap .bo-view-top {padding:2em 0;}
	/* .view-wrap .bo-view-top .user_it_info {position:static; transform:unset; padding-top:1em; text-align:right;} */
	.view-wrap .bo_view_cont {padding:2em 0;}
}
@media screen and (max-width: 667px) {
	.view-wrap .bo-view-top {text-align:left;}
	.view-wrap .bo-view-top .user_it_info li {display:block;}
	.view-wrap .bo-view-top .user_it_info li:not(:nth-child(1)) {margin-top:1em;}
	.view-wrap .bo-view-top .user_it_info li:not(:nth-child(1)):before {display:none;}
	.view-wrap .bo-view-top p {padding:0;}
	.view_lst li span.date {display:none;}
}

/* 06_02 */
.online-wrap {text-align:left;}
.online-wrap > h4 {font-weight:800; font-size:2.292em; letter-spacing:-0.04em; line-height:1.4;}
.online-wrap > h4 mark {font-weight:600; position:relative;}
.online-wrap > h4 mark:after {content:''; display:inline-block; width:100%; height:.545em; background-color:#f5c05f; position:absolute; bottom:4px; left:0; z-index:-1;}

.online-wrap .write-wrap {width:100%; height:auto; margin-top:24px;}
.online-wrap .write-wrap fieldset {display:flex; flex-wrap:wrap; justify-content:space-between;}
.online-wrap .write-wrap div[class^="inp"] {width:32.33%; margin-top:1.455em; font-weight:600; font-size:.917em; border-bottom:1px solid;}
.online-wrap .write-wrap div[class^="inp"].w100 {width:100%;}
.online-wrap .write-wrap div[class^="inp"] label {display:block; min-height:1.273em; font-weight:800; text-align:left;}
.online-wrap .write-wrap div[class^="inp"] input {display:block; width:100%; padding:.5em 0; height:2.4em; font-size:.909em; outline:none;}

.online-wrap .write-wrap .inp-textarea {width:100% !important; position:relative; border-bottom:0 !important;}
.online-wrap .write-wrap .inp-textarea label {width:100%;}
.online-wrap .write-wrap .inp-textarea textarea {width:100%; height:15em; padding:1.2em; font-size:.909em; border:1px solid; outline:none; resize:none; border-radius:0;}

.online-wrap .write-wrap .agree_ok {width:100%; height:auto; margin-top:1.455em; font-weight:600; font-size:.917em;}
.online-wrap .write-wrap .agree_ok input[type="checkbox"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.online-wrap .write-wrap .agree_ok input[type="checkbox"] + label {display:inline-block; vertical-align:middle; line-height:1.455em; position:relative; padding-left:2.182em; cursor:pointer;}
.online-wrap .write-wrap .agree_ok input[type="checkbox"] + label:before {content:''; position:absolute; top:0; left:0; width:1.455em; height:1.455em; text-align:center; background-color:#fff; border:1px solid #000;}
.online-wrap .write-wrap .agree_ok input[type="checkbox"]:checked + label:after {content:'✔'; position:absolute; top:.136em; left:.364em;}
.online-wrap .write-wrap .agree_ok a {display:inline-block; vertical-align:middle; padding:.444em .889em; background-color: #000; color:#fff; font-size:.818em;}

.online-wrap .write-wrap .write-but {width:100%; height:auto; margin-top:3em; text-align:center;}
.online-wrap .write-wrap .write-but button {width:8.5em; height:2.571em; font-weight:600; font-size:1.167em; color:#3b3838; border:1px solid #3b3838;}
.online-wrap .write-wrap .write-but button[type="submit"] {background-color:#3b3838; color:#fff;}
.online-wrap .write-wrap .write-but button[type="button"] {background-color:#3b3838; color:#fff;}

@media screen and (max-width: 926px) {
	.online-wrap > h4 {display:inline; font-size:2em; line-height:1.4;}
	.online-wrap .write-wrap div[class^="inp"] {width:49%;}
	.online-wrap .write-wrap .write-but button {width:7em; font-size:1.125em;}
}
@media screen and (max-width: 414px) {
	.online-wrap > h4 {font-size:1.8em;}
	.online-wrap > h4 mark {background-color:#f5c05f;}
	.online-wrap > h4 mark:after {display:none;}
	.online-wrap .write-wrap div[class^="inp"] {width:100%;}
	.online-wrap .write-wrap .agree_ok a {display:block; margin-top:1em; text-align:center;}
}

/* 06_03 */
.family-site {}
.family-site ul {width:100%; height:auto; display:flex; flex-wrap:wrap; font-weight:600;}
.family-site ul li {width:33.33%; margin-bottom:2em;}
.family-site ul li a {display:block; width:100%; height:100%;}
.family-site ul li img {border:1px solid;}
.family-site ul li span {display:block; margin-top:.75em;}
.family-site ul li a:hover {font-weight:800; color:#003f67;}

@media screen and (max-width: 1280px) {
	.family-site ul li {padding:0 1em;}
}
@media screen and (max-width: 926px) {
	.family-site ul li {width:50%;}
}
@media screen and (max-width: 667px) {
	.family-site ul li {width:100%; padding:0;}
}

/* admin login */
.adm-login {width:100%; height:auto; border-bottom:1px solid #000; font-weight:600;}
.adm-login .login-wrap {width:100%; max-width:24.083em; height:auto; padding:5.333em 0; margin:0 auto;}
.adm-login .login-wrap .login-tt {width:inherit; height:inherit; display:flex; align-items:center;}
.adm-login .login-wrap .login-tt h4 {font-weight:800; font-size:2.083em; text-transform:uppercase; letter-spacing:.25em;}
.adm-login .login-wrap .login-tt p {padding:0 1.067em 1.067em; margin-left:2.133em; font-size:.625em; border-bottom:1px solid #000;}
.adm-login .login-wrap .login-inp {width:inherit; height:inherit; margin-top:1.333em; display:flex; align-items:center;}
.adm-login .login-wrap .login-inp ul {width:calc(100% - 177px); font-size:.833em;}
.adm-login .login-wrap .login-inp ul li {margin-top:.8em; border:1px solid #bebebe; background-color:#fff; display:flex; align-items:center;}
.adm-login .login-wrap .login-inp ul li label {display:block; width:5.6em; padding:.8em 1.75em; padding-right:0; text-align:left;}
.adm-login .login-wrap .login-inp ul li input {width:calc(100% - 5.6em); padding:.6em .8em; outline:none;}
.adm-login .login-wrap .login-inp button[type="submit"] {width:6.321em; height:4.393em; margin:.571em 0 0 .571em; font-size:1.167em; background-color:#000; color:#fff;}
@media screen and (max-width: 667px) {
	.adm-login .login-wrap {padding:4em 0;}
	.adm-login .login-wrap .login-tt {display:block;}
	.adm-login .login-wrap .login-tt p {margin-left:0; margin-top:8px;}
	.adm-login .login-wrap .login-inp {display:block;}
	.adm-login .login-wrap .login-inp ul {width:100%;}
	.adm-login .login-wrap .login-inp button[type="submit"] {width:100%; height:3em; margin-left:0;}
}