@charset "utf-8";

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR|Righteous');

/* CSS리셋 */
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
figure {
    margin: 0;
    padding: 0;
}

header,
footer,
section,
article,
aside,
nav,
hgroup,
details,
menu,
figure,
figcaption {
    display: block;
}

button,
input[type=submit],
input[type=reset],
input[type=button] {
    overflow: visible;
    cursor: pointer;
}

input[type=text],
input[type=email],
input[type=password],
input[type=submit],
textarea {
    -webkit-appearance: none;
}

input,
select,
textarea,
button {
    font-size: 100%;
    border-radius: 0;
    background: transparent;
    border: 0;
    outline: none;
}

button {
    overflow: visible;
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

img,
fieldset {
    border: none;
    vertical-align: top;
}

iframe,
embed {
    width: 100%;
}

table .imageblock {
    width: 100% !important;
}

table {
    border-spacing: 1px 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* 전체 폰트 */
html,
th,
td,
input,
select,
textarea,
button,
blockquote,
blockquote p {
    font-family: 'Calibri', 'Noto Sans KR', sans-serif;
    line-height: 1.7;
    font-size: 11px;
}

/* 기본 설정 */
body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a {
    text-decoration: none;
    transition: color .5s;
}

a:hover {
	
}

/* 스크롤바 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-left: 1px solid;
}

/* 전체 박스 */
#container {
    margin: 100px auto;
    position: relative;
}

/* 본문 영역 */
#content {
    position: relative;
    width: calc(100% - 190px);
    display: inline-block;
}

#content:after {
    content: '';
    width: 1px;
    height: 100%;
    min-height: 500px;
    display: block;
    position: absolute;
    right: -20px;
    top: 0;
}

.myoskin:after,
.morebox:after {
    content: '';
    display: block;
    overflow: hidden;
    clear: both;
}

#header {
    display: none;
}

/* 노이미지 */
.noimg {
    display: none !important;
}

:not(.thum) + .noimg {
    display: inline-block !important;
}

/* 갤러리형, 카테고리 글 더보기 갤러리형 */
#myo_gal .item,
#more_gal .more-item {
    float: left;
    position: relative;
    width: 32.6%;
    margin: 0 1% 1% 0;
}

#myo_gal .item:nth-child(3n) {
    margin-right: 0;
}

#myo_gal .item a {
    display: block;
}

#myo_gal .item img,
#more_gal .more-item img {
    width: 100%;
    transition: opacity .5s;
}

#myo_gal .item .info,
#more_gal .more-item .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    -ms-display: flexbox;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity .5s;
}

#myo_gal .item .info .title,
#more_gal .more-item .info .title {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 117px;
    text-overflow: ellipsis;
    font-weight: bold;
    padding: 0 15px;
}

#myo_gal .item:hover img,
#more_gal .more-item:hover img {
    opacity: 0.2;
}

#myo_gal .item:hover .info,
#more_gal .more-item:hover .info {
    opacity: 1;
}

#myo_gal .item .cate,
#myo_gal .item .date,
#myo_gal .item .text,
#more_gal .more-item .date {
    display: none;
}

/* 목록형, 카테고리 글 더보기 목록형 */
#myo_bbs .item {
    padding: 10px 0;
    margin: 5px 0;
}

#myo_bbs .item a,
#more_bbs .more-item a {
    display: block;
}

#myo_bbs .item .title,
#myo_bbs .item .date,
#more_bbs .more-item .title,
#more_bbs .more-item .date {
    display: inline-block;
    vertical-align: middle;
}

#myo_bbs .item .title,
#more_bbs .more-item .title {
    max-width: calc(100% - 90px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#myo_bbs .item .date,
#more_bbs .more-item .date {
    float: right;
}

#myo_bbs .item img,
#myo_bbs .item .cate,
#myo_bbs .item .text,
#more_bbs .more-item img {
    display: none !important;
}

/* 웹진형 */
#myo_web .item {
    width: 49%;
    float: left;
    margin: 0 2% 2% 0;
    position: relative;
}

#myo_web .item:nth-child(2n) {
    margin-right: 0;
}

#myo_web .item a {
    border: 1px solid;
    display: block;
    padding: 0.5vh;
}

#myo_web .item img {
    width: 100%;
    vertical-align: top;
    transition: opacity .5s;
}

#myo_web .item .info {
    padding-top: 0.5vh;
}

#myo_web .item .info .title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#myo_web .item .info .text {
    height: 85px;
    overflow: hidden;
}

#myo_web .item:hover img {
    opacity: 0.5;
}

/* 보호글 */
.pass {
    width: 250px;
    min-width: 160px;
    height: 500px;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    letter-spacing: 5px;
}

.pass input,
.pass button {
    margin: 5px 0;
    padding: 5px 0;
}

.pass input {
    width: 100%;
}

.pass button {
    width: 100%;
    border: 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
    padding: 10px;
}

.pass input[required] + label {
    display: block;
    height: 48px;
    margin-top: -48px;
    margin-bottom: 0;
    pointer-events: none;
    line-height: 1;
    text-transform: uppercase;
}

.pass input[required] + label:before {
    content: attr(placeholder);
    display: inline-block;
    height: 48px;
    line-height: 48px;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
}

.pass input[required]:focus + label:before,
.pass input[required]:valid + label:before {
    -webkit-transform: translate(0, -24px) scale(1, 1);
    transform: translate(0, -24px) scale(1, 1);
    font-style: italic;
}

/* 본문 타이틀 */
.titlebox {
    margin-bottom: 10px;
}

.titlebox .title {
    font-size: 1.3rem;
    font-weight: bold;
}

.titlebox .admin a {
    margin-right: 5px;
}

/* 인용구 */
.tx-quote-tistory:before {
    content: "\e67f";
    font-family: 'themify';
}

.tx-quote-tistory {
    position: relative;
    height: auto;
    padding: 1vh;
}

.tx-quote-tistory p {
    padding: 0 !important;
}

/* 더보기 */
.btn_less:first-child {
	margin-bottom: 10px;
}

.btn_less:last-child {
	margin-top: 10px;
}

.btn_more {
    display: block;
}

.btn_more:before,
.btn_less span:before,
.moreless_fold:before,
.moreless_top:before,
.moreless_bottom:before {
    content: "\f107";
    font-family: 'fontAwesome';
    margin-right: 5px;
}

.moreless_bottom:before {
    content: "\f106 ";
}

.moreless_content {
    position: relative;
    height: auto;
    padding: 1vh;
    margin: 5px 0;
}

/* 링크 */
.text-item .tx-link:before {
    content: "\f0c1";
    font-family: 'fontAwesome';
    margin-right: 5px;
}

.article .tx-link.imgblock:before {
    display: none;
}

/* 파일 첨부 */
.text-item .imageblock a img {
    display: none;
}

.text-item .imageblock a:before {
    content: "\f019";
    font-family: 'fontAwesome';
    margin-right: 5px;
}

/* 신고 버튼 */
.container_postbtn {
    padding: 10px 0 !important;
}

.container_postbtn .postbtn_like {
    border: 0 !important;
}

.container_postbtn .postbtn_like label:first-child {
    padding-left: 0 !important;
}

/* 분문 하단 태그 */
.tags {
    color: transparent;
    margin: 1vh 0;
}

.tags a {
    position: relative;
    display: inline-block;
    margin-right: 5px;
}

.tags a:before {
    content: '#';
}

/* 카테고리 글 더보기 */
.morebox {
    margin: 1vh 0;
}

.morebox .cate {
    margin-bottom: 1vh;
    padding: 10px 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-weight: bold;
}

.morebox .cate a {
    float: right;
}

#more_off {
    display: none;
}

/* 카테고리 글 더보기 갤러리형 */
#more_gal .more-item {
    width: 24.2%;
    margin: 0 1% 0 0;
}

#more_gal .more-item:last-child {
    margin-right: 0;
}

#more_gal .more-item .info .title {
    -webkit-line-clamp: 6;
    max-height: 100px;
}

/* 카테고리 글 더보기 목록형 */
#more_bbs .cate {
    margin: 0;
}

#more_bbs .more-item {
    border-bottom: 1px solid;
    padding: 10px 0;
}

/* 댓글 열기 */
.opencmt {
    margin-top: 1vh;
    text-align: right;
}

.opencmt .num {
    font-weight: bold;
    margin-left: 5px;
}

/* 댓글, 방명록 작성 */
#tt-body-page .cmt .write {
    margin-top: 3vh;
}

.cmt .write {
    position: relative;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 5px 0;
}

.cmt .write textarea {
    width: 100%;
    height: 90px;
    transition-property: height;
    transition-duration: .5s;
}

.cmt .write textarea:focus {
    height: 130px;
}

.cmt .write button {
    font-weight: bold;
}

.cmt .write .input,
.cmt .write button {
    display: inline-block;
    vertical-align: top;
}

.cmt .write .input {
    width: calc(100% - 40px);
    text-align: left;
}

.cmt .write .input input {
    vertical-align: middle;
    width: 30%;
    min-width: 70px;
    display: inline-block;
    vertical-align: top;
}

.cmt .write .secret {
    margin-right: 10px;
    white-space: nowrap;
}

.cmt .write .secret input {
    display: none;
}

.cmt .write input + label:after {
    content: "\f13e";
    font-family: 'fontAwesome';
}

.cmt .write input:checked + label:after {
    content: "\f023";
    font-family: 'fontAwesome';
}

/* 댓글, 방명록 목록 */
.cmt .lst > li:before {
    top: 25px;
}

.cmt .lst > li {
    border-bottom: 1px solid;
    position: relative;
    padding: 3vh 0
}

.cmt .lst ul li {
    padding-top: 3vh;
}

.cmt li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cmt .nopro {
    display: none;
}

.cmt .guest,
.cmt .reply {
    position: relative;
}

.cmt .text {
    margin-top: 10px;
}

.cmt .name,
.cmt .name a {
    font-weight: bold;
}

.cmt .date {
    font-size: .9rem;
    margin: 0 5px;
}

.cmt .date a,
.cmt .admin a {
    margin-left: 5px;
}

.cmt .admin {
    float: right;
    font-size: .9rem;
}

.rp_admin .name:before,
.guest_admin .name:before {
    content: "\e642";
    font-family: 'themify';
    margin-right: 3px;
}

.hiddenComment .name:after {
    content: "\f023";
    font-family: 'fontAwesome';
}

.rp_admin,
.guest_admin {
    padding: 1vh;
    position: relative;
}

.cmt .reply {
    margin-left: 3vh;
}

/* 프로필 사진 */
.guest-pro .cmt img {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
}

.guest-pro .cmt .guest {
    padding-left: 60px;
}

.guest-pro .cmt .reply img {
    right: 0;
    left: auto;
}

.guest-pro .cmt .reply {
    padding-right: 60px;
    margin-left: 0;
}

.guest-pro .rp_admin.guest,
.guest-pro .guest_admin.guest {
    padding-left: calc(50px + 2vh);
}

.guest-pro .rp_admin.reply,
.guest-pro .guest_admin.reply {
    padding-right: calc(50px + 2vh);
}

.guest-pro .rp_admin img,
.guest-pro .guest_admin img {
    left: 1vh;
    top: 1vh;
}

.guest-pro .rp_admin.reply img,
.guest-pro .guest_admin.reply img {
    left: auto;
    right: 1vh;
}

.guest-pro .cmt .nopro {
    display: inline-block;
}

/* 공지 */
.noti {
    padding: 3vh 0;
    border-bottom: 1px solid;
}

.noti:first-child {
    padding-top: 0;
}

.noti:last-child {
    border: 0;
    padding-bottom: 0;
}

.noti .title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1vh;
}

/* 사이드바 = 카테고리 영역 */
#aside {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
}

#aside .scroll {
    position: fixed;
    width: 150px;
    min-height: 500px;
}

#aside .scroll:before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    left: -21px;
}

#aside .side {
    margin-bottom: 10px;
    position: relative;
}

#aside .side h3 {
    display: inline-block;
    padding-right: 5px;
    font-size: 1.05rem;
}

#aside .side h3:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 9px;
}

/* 사이드바2 */
#aside .logo img {
    max-width: 100%;
}

#aside .title {
    line-height: 1.2;
}

#aside .title span {
    font-weight: bold;
    font-size: 1.3rem;
}

/* 검색 */
.search input {
    width: calc(100% - 15px);
}

/* 카테고리 */
.link_tit {
    display: none;
}

.link_item:after {
    content: '\f204';
    font-family: fontAwesome;
    float: right;
}

.link_item:only-child:after,
.category_list > li:hover .link_item:only-child:after {
    content: '';
}

.sub_category_list {
    max-height: 0;
    overflow: hidden;
}

.link_sub_item:before {
    content: '-';
}

.category_list > li:hover .sub_category_list {
    max-height: 500px;
    transition: max-height 1.5s;
}

.category_list > li:hover .link_item:after {
    content: '\f205';
}

/* sns */
.sns a {
    margin-right: 5px;
}

/* 사이드바3 = 중앙 */
#aside .side3 {
    margin: 2vh 0;
}

/* 사이드바 썸네일 on */
#aside .side-thum:after {
    content: '';
    clear: both;
    display: block;
}

#aside .side-thum .item {
    float: left;
    width: 32%;
    margin: 0 2% 2% 0;
}

#aside .side-thum .item:nth-child(3n) {
    margin-right: 0;
}

#aside .side-thum .item img {
    width: 100%;
}

#aside .side-thum .info {
    display: none;
}

/* 사이드바 태그 */
#aside .tagbox li {
    display: inline-block;
}

#aside .tagbox li:after {
    content: '|';
    margin: 0 1px;
}

#aside .tagbox li:last-child:after {
    display: none;
}

/* 사이드바 하단 */
#aside .side4 {
    margin-top: 2vh;
}

#aside .side4 .side {
    margin-bottom: 2vh;
}

/* 페이지네이션 */
#aside .pagination {
    position: absolute;
    bottom: 0;
}

.pagination {
    margin-top: 1vh;
}

.pagination .selected {
    border-bottom: 1px solid;
    font-weight: bold;
    margin: 0 2px;
}

.pagination .current {
    display: none;
}

/* 탑버튼 */
.top {
    position: fixed;
    right: 10px;
    bottom: 30px;
    font-size: 3rem;
    line-height: 1;
		display: none;
}

/* 카피라이트 삭제 금지 */
.copy {
    position: fixed;
    bottom: 10px;
    right: 10px;
    white-space: nowrap;
    font-size: 8px;
    font-family: 'Righteous', cursive;
}

/* 모바일 영역 */
@media screen and (max-width: 768px) {
    #container {
        margin: 15px;
        max-width: 100%;
        padding-top: 45px;
    }

    #content {
        width: 100%;
    }

    #content:after,
    #aside:before {
        display: none;
    }

    #myo_gal .item {
        width:100%;
        margin-bottom: 4%;
    }

    #myo_gal .item .info,
    #more_gal .more-item .info {
        display: none;
    }

    #more_gal .more-item {
        width: 49.5%;
        margin: 0 1% 1% 0 !important;
    }

    #more_gal .more-item:nth-child(2n) {
        margin-right: 0 !important;
    }

    #header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 999;
        padding: 10px 15px;
        text-align: center;
        display: block;
        border-bottom: 1px solid;
    }

    #header .title {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .hambox {
        position: absolute;
        right: 15px;
        top: 13px;
        width: 20px;
        height: 15px;
    }

    .ham {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
    }

    .ham .line {
        display: block;
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        border-radius: 4px;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
    }

    .ham .line.line-1 {
        top: 0;
    }

    .ham .line.line-2 {
        top: 50%;
    }

    .ham .line.line-3 {
        top: 100%;
    }

    .ham.open .line-1 {
        transform: translateY(5px) translateX(0) rotate(45deg);
        -webkit-transform: translateY(5px) translateX(0) rotate(45deg);
        -moz-transform: translateY(5px) translateX(0) rotate(45deg);
    }

    .ham.open .line-2 {
        opacity: 0;
    }

    .ham.open .line-3 {
        transform: translateY(-10px) translateX(0) rotate(-45deg);
        -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
        -moz-transform: translateY(-10px) translateX(0) rotate(-45deg);
    }

    html.open {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .page_cover.open {
        display: block;
    }

    .page_cover {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 999;
        opacity: 0.2;
        display: none;
    }

    #aside {
        width: 70%;
        overflow: hidden;
        height: 100%;
        position: fixed;
        top: 0px;
        left: -71%;
        z-index: 9999999999;
        transition: All 0.2s ease;
        -webkit-transition: All 0.5s ease;
        -moz-transition: All 0.5s ease;
        -o-transition: All 0.5s ease;
        right: auto;
        max-width: none;
        min-height: auto;
        line-height: 2;
    }

    #aside.open {
        left: 0;
    }

    #aside .scroll {
        width: 102%;
        height: 100%;
        overflow-y: auto;
        padding: 10%;
        position: static;
        min-height: unset;
    }

    #aside .pagination {
        position: static;
        margin-top: 5vh;
    }

    .top {
        bottom: 10px;
    }

    .copy {
        position: static;
        text-align: center;
        margin: 3vh 0;
    }
}
/* Start http://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;} /* End http://www.cursors-4u.com */