.board_filter {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
    padding-top: 10px;
}

.board_filter .count {
    color: #444;
    font-size: .9rem;
}

.board_filter .count span {
    color: #224d35;
    font-weight: 700;
}

.sort_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
    background: #f7f7f7;
    border-radius: 5px;
}

.sort_wrap .count {
    color: #444;
    font-size: .9rem;
}

.sort_wrap .count span {
    color: #224d35;
    font-weight: 700;
}

.filter {
    display: flex;
}

.filter .select {
    margin-left: 5px;
}

.select {
    position: relative;
    background: #fff;
}

.select select {
    height: 100%;
    width: 100%;
    font-size: .875rem;
    color: #444;
    border-radius: 5px;
    padding: 5px 35px 5px 20px;
    border: 1px solid #dfe8ee;
    cursor: pointer;
    transition: all 0.3s;
}

.select select:focus-within {
    outline: 1px solid #224d35;
}

.select:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: url("/resources/images/layout/board/ico_select.png") center no-repeat;
    background-size: 70%
}

.board_search {
    display: flex;
    border: 1px solid #dfe8ee;
    border-radius: 5px;
    margin-left: 5px;
    background: #fff;
}

.board_search .input_addition {
    position: relative;

}

.board_search .input_addition input {
    background: #fff;
    font-size: .875rem;
    border: 0;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    font-weight: 300;
    padding: 10px 60px 10px 20px;
    transition: all 0.3s;
}

.board_search .input_addition input:focus {
    outline: 1px solid #224d35;
}

.board_search .input_addition .btn_search {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: url("/resources/images/layout/board/ico_input_search.png") center no-repeat;
}

.board_search .select select {
    border-radius: 0.3125rem;
    border: 0;
    min-width: 5.9375rem;
}

.board_search .select {
    border-radius: 5px 0 0 5px;
    border: 0;
}

.sort_group {
    display: flex;
}

.board_btn {
    text-align: right;
}

.board_btn a {
    display: inline-block;
    background: #fff;
    border: 1px solid #d7d4ff;
    color: #224d35 !important;
    border-radius: 50px;
    padding: 10px 30px;
}

.board_btn a.btn_fix {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    position: fixed;
    right: 30px;
    bottom: 100px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #224d35;
    transition: all .3s;
}

.board_btn a.btn_fix:hover {
    transform: translateY(-5px)
}

/*.board_list{border-top: 1px solid #333; }*/
.board_list li {
    border: 1px solid #dfe8ee;
    margin-bottom: 8px;
    border-radius: 10px;
    position: relative;
    transition: all .3s;
}

.board_list li:hover {
    border: 1px solid #224d35;
}

/*.board_list li:hover {border: 2px solid #2bd2c1;}*/
/*.board_list li:hover a{padding: 19px 2px;}*/
.board_list a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 3px;
}

.board_list a:hover:not(p) {
    text-decoration: none !important;
}

/*.board_list li:hover .top p.tit{text-decoration: underline; }*/
.board_list li .mark {
    width: 100px;
    text-align: center;
}

.board_list li .mark .fix {
    color: #2d2d2d;
    font-weight: 700;
}

.board_list li .mark .num {
    color: #747474;
}

.board_list .top {
    width: calc(100% - 100px);
}

.board_list .top em {
    display: inline-block;
    font-style: normal;
    color: #757575;
    font-size: .9rem;
}

.board_list .top p.tit {
    font-size: 1rem;
    font-weight: 600;
    padding: 3px 0;
    width: calc(100% - 100px);
}

.board_list .top p.tit span.mobile {
    display: none;
}

.board_list .top p.tit .comment_num {
    font-size: .95rem;
    color: #8b8b8b;
    padding-left: 1%;
    font-weight: 400;
}

.board_list .top .etc {
    display: flex;
    align-items: center;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.board_list .top .etc span+span {
    margin-left: 10px;
}

/*.board_list .top .lock{display: inline-block; width: 25px; height: 30px;  background: url("/resources/images/site/common/ico_lock.png") center no-repeat;}*/
.board_list .top .file {
    display: inline-block;
    width: 25px;
    height: 30px;
    background: url("/resources/images/layout/board/has_file.svg") center no-repeat;
}

/*.board_list .top .ico_period {display: inline-block; width: 22px; height: 22px; background: url("/resources/images/site/common/ico_period.svg") center no-repeat; vertical-align: sub; margin-right: 0.3rem;}*/
.board_list .top .info span {
    font-size: .875rem;
    position: relative;
    display: inline-block;
    color: #777;
}

.board_list .top .info span+span {
    margin-left: 30px;
}

.board_list .top .info span+span:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #d1d1d1;
    position: absolute;
    left: -17px;
    top: 50%;
    transform: translateY(-50%);
}

.board_list .ans_complete {
    color: #F29300;
    border: 1px solid #F29300;
    display: inline-block;
    padding: 10px;
    font-size: .9rem;
}

.board_list.qna .top p.tit {
    width: calc(100% - 180px);
}

.board_list .top .info .info_item {
    display: block;
    margin-left: 0;
}

.board_list .top .info .info_item:before {
    display: none;
}

.board_list li.empty a {
    justify-content: center;
    font-size: .9rem;
    color: #555;
}

/*게시판 상세*/
.board_view {
    max-width: 1000px;
    margin: 0 auto;
}

.board_view .tit {
    padding: 25px 15px;
    border-bottom: 1px solid #dedede;
}

.board_view .tit em {
    font-style: normal;
    color: #A09690;
    font-size: 1rem;
}

.board_view .tit p {
    font-size: 1.25rem;
    font-weight: 500;
    padding: 0 0 15px;
    color: #333;
}

.board_view .tit .info span {
    font-size: .95rem;
    position: relative;
    display: inline-block;
    color: #777;
    font-weight: 300;
}

.board_view .tit .info span+span:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #ADADAD;
    margin: 0 15px;
    vertical-align: middle;
}

.board_view .view_files {
    background: #fcfcfc;
    padding: 6px 20px;
    border-bottom: 1px solid #dedede;
}

.board_view .view_files a:hover {
    text-decoration: underline;
}

.board_view .view_files li {
    padding: 3px 0 3px 25px;
    font-size: .9rem;
    position: relative;
}

.board_view .view_files li:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 15px;
    height: 15px;
    background: url("/resources/images/layout/board/has_file.svg") center no-repeat;
}

.board_view .view_files li {
    color: #555;
}

.board_view .view_cont {
    padding: 60px 15px;
    line-height: 1.5;
}

.board_view .view_cont img {
    max-width: 100%;
    height: auto !important;
}

.board_view .view_more ul {
    overflow: hidden;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    position: relative;
}

.board_view .view_more ul:after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #dedede;
}

.board_view .view_more li {
    float: left;
    width: 50%;
    position: relative;
}

.board_view .view_more li a {
    display: block;
}

.board_view .view_more li a span {
    font-size: 1.1rem;
    font-weight: 500;
}

.board_view .view_more li a p {
    padding-top: 10px;
    color: #4B4B4B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board_view .view_more li:hover a p {
    text-decoration: underline;
}

.board_view .view_more li.prev {
    padding: 25px 10px 25px 120px;
}

.board_view .view_more li.next {
    padding: 25px 120px 25px 10px;
    text-align: right;
}

.board_view .view_more li .icon {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 100px;
    height: 100%;
}

.board_view .view_more li.prev .icon {
    left: 0;
    background: #F9F9F9 url("/resources/images/layout/board/ico_board_prev.png") center center no-repeat;
}

.board_view .view_more li.next .icon {
    right: 0;
    background: #F9F9F9 url("/resources/images/layout/board/ico_board_next.png") center center no-repeat;
}

.view_btn {
    text-align: right;
    margin-top: 30px;
}

.view_btn .btn {
    padding: 7px 30px;
    border: 1px solid #8c8c8c;
    background: #fff;
    font-size: .95rem;
    color: #3b3d3f;
    display: inline-block;
    border-radius: 50px;
}

.view_btn .btn.fix {
    background: #1ba6f3;
    color: #fff;
    border: 1px solid #1ba6f3;
}

.view_btn .btn.del {
    background: #f14173;
    color: #fff;
    border: 1px solid #f14173;
}

.view_comment {
    text-align: left;
}

.view_comment .count {
    color: #565656;
}

.view_comment .count span {
    color: #224d35;
    padding-right: 3px;
    font-weight: 600;
}

.view_comment .comment {
    padding: 20px 0;
}

.view_comment .comment .info {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.view_comment .comment .info span {
    font-size: .9rem;
    font-weight: 500;
    color: #333;
}

.view_comment .comment .info em {
    display: inline-block;
    margin-left: 10px;
    font-style: normal;
    color: #b1b1b1;
    font-weight: 300;
    font-size: .825rem;
}

.view_comment .comment .info .etc a {
    position: relative;
    font-size: .9rem;
    color: #777;
    display: inline-block;
    font-weight: 300;
}

.view_comment .comment .info .etc a+a {
    margin-left: 15px;
}

.view_comment .comment .info .etc a:first-child {
    margin-left: 0;
}

.view_comment .comment .info .etc a:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 8px;
    background: #d1d1d1;
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
}

.view_comment .comment .info .etc a:first-child:before {
    width: 0;
}

.view_comment .comment .info .etc a:hover {
    text-decoration: underline;
}

.view_comment .comment .info .profile {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.view_comment .comment .info .profile .img {
    width: 30px;
    height: 30px;
    overflow: hidden;
    margin-right: 10px;
    border-radius: 50px;
    border: 1px solid #e5e5e5;
}

.view_comment .comment .info .profile .img img {
    width: 100%;
}

.view_comment .comment p {
    line-height: 1.6;
    color: #444;
    font-size: .9rem;
    white-space: pre-wrap;
}

.view_comment .comment.reply {
    border: 0;
    padding: 10px 10px 10px 60px;
    background: transparent;
    border-radius: 10px;
    position: relative;
}

.view_comment .comment.reply .info {
    position: relative;
    margin-bottom: 3px;
}

.view_comment .comment.reply .info:before {
    content: '';
    position: absolute;
    left: -25px;
    top: 0;
    display: inline-block;
    margin: 5px 10px 0 0;
    width: 8px;
    height: 8px;
    border-left: 1px solid #333;
    border-bottom: 1px solid #999;
    vertical-align: top;
}

.view_comment .comment.reply+.reply {
    border-top: 1px solid #f1f1f1;
}

.view_comment .comment_wrap .comment_list {
    color: #777;
}

.view_comment .comment_wrap .comment_modify {
    display: flex;
    position: relative;
    gap: 5px;
}

.view_comment .comment_wrap .comment_modify span {
    color: #333;
    font-weight: 500;
    margin-bottom: 5px;
}

.comment_write {
    padding: 20px 30px;
    background: #f7f7f7;
}

.comment_write span {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.comment_write textarea,
.comment textarea {
    border: 1px solid #e0e0e0;
    padding: 15px 60px 15px 15px;
    width: 100%;
    resize: none;
    border-radius: 5px;
    font-size: .95rem;
}

.comment_write textarea:focus,
.comment textarea:focus {
    outline: 1px solid #224d35;
}

.comment_write .btn_area {
    text-align: right;
    margin-top: 10px;
}

.comment_modify .btn_area {
    text-align: right;
    margin-top: 10px;
}

.comment_modify .btn_comment {
    font-weight: 700;
    padding: 10px 15px;
    height: 100%;
    font-size: .95rem;
    color: #224d35;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.view_comment .comment.enter {
    display: flex;
    align-items: center;
}

.view_comment .comment.enter .comment_modify {
    width: 100%;
}

.view_comment .comment.enter .info {
    margin-bottom: 0;
}

.view_comment .empty {
    text-align: center;
    padding: 1rem 0;
    color: #888;
    font-size: .9rem;
}

.media_comment {
    border-bottom: 1px solid #333;
    padding-bottom: 2rem;
}

.media_comment .btn_area a {
    padding: 8px 4px;
    border-radius: 4px;
    font-size: .95rem;
    text-align: center;
}

.media_comment .btn_area a {
    border: 1px solid #224d35;
    color: #224d35;
    width: 50%;
    margin-right: 5px;
}

.comment_area .comment {
    background: #f7f7fc;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1%;
}

.media_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media_top a {
    border: 1px solid #224d35;
    color: #224d35;
    padding: 15px 25px;
    border-radius: 4px;
    font-size: .95rem;
}

.media_comment .comment_wrap .comment {
    border-top: 1px solid #eaeaea;
}

.media_comment .comment_wrap:first-child .comment {
    border-top: 0;
}

/*.media_comment .comment .info .profile {flex-wrap: wrap;}*/
.media_comment .comment .info .profile strong {
    font-size: 1rem;
    padding-right: 20px;
    max-width: 70%;
}

.media_comment .comment .info span {
    color: #555;
}

.view_comment .comment .cont {
    max-height: 190px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.view_comment .comment .cont.expanded {
    max-height: max-content;
}

.view_comment .comment .btn_area {
    text-align: center;
    position: relative;
    display: flex;
    margin-top: 12px;
    gap: 0.3125rem;
}

.view_comment .comment .more {
    border: 0.0625rem solid #ddd;
    border-radius: 0.1875rem;
    padding: 0.1875rem 0.375rem;
    color: #333;
}

.view_comment .comment .interact {
    position: absolute;
    right: 0;
    top: -0.3125rem;
}

.bg_dark .view_comment .count {
    color: #98a4b7;
}

.bg_dark .view_comment .count span {
    color: #fff;
}

.bg_dark .view_comment .comment .info .profile .img {
    border: 0;
}

.bg_dark .comment_write textarea,
.bg_dark .comment textarea {
    background: #25304a;
    border: 1px solid #596472;
    color: #fff;
}

.bg_dark .comment_write textarea::placeholder,
.bg_dark .comment textarea::placeholder {
    color: #98a4b7;
}

.bg_dark .comment_modify .btn_comment {
    color: #e6e6e6;
    font-weight: 500;
    border: 1px solid #ddd;
}

.bg_dark .view_comment .comment .info span {
    color: #fff;
}

.bg_dark .view_comment .comment p {
    color: #fff;
}

.view_comment .comment .info .etc {
    display: flex
}

.view_comment .comment .info .etc a {
    color: #98a4b7;
}

.close_win {
    font-size: 2rem;
    z-index: 100;
    position: fixed;
    background: #e5e6ed;
    color: #333;
    right: 45px;
    top: 20px;
    width: 54px;
    height: 54px;
    border-radius: 50px;
}

.bg_dark .close_win {
    background: #3b4869;
    color: #fff;
}

.review_comment_list>.comment:first-child {
    border-top: 0;
}

/*글쓰기*/
.page_noti {
    background: #f7f8f9;
    padding: 30px;
    margin-bottom: 20px;
}

.page_noti strong {
    font-size: 1.3rem;
    margin-bottom: 10px;
    display: block;
}

.page_noti p {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #444;
}

.board_write {
    border-top: 1px solid #333;
}

.board_write li {
    display: flex;
    align-items: center;
}

.board_write .w_category .select {
    width: 250px;
    height: 50px;
}

.board_write .w_category .select select {
    border: 1px solid #cdcdcd;
}

.board_write .w_tit input {
    width: 100%;
}

.board_write .tit {
    width: 160px;
    font-size: 1rem;
    font-weight: 500;
    padding: 0 0 0 20px;
    border-bottom: 0;
    text-align: left;
}

.board_write .txt {
    width: calc(100% - 160px);
    padding: 20px;
    border-left: 1px solid #e8e8e8;
}

.board_write .txt.radio {
    display: flex;
    border-left: none !important;
    padding: 0px !important;
}

.board_write .txt.radio .checkbox:not(:last-child) {
    margin-right: 20px;
}

.board_write .w_edit {
    padding: 20px 0;
}

.input_group input {
    border: 1px solid #cdcdcd;
    height: 50px;
    border-radius: 4px;
    padding: 5px 20px;
    line-height: 50px;
    font-size: 1rem;
    width: 100%;
}

.input_group input:focus {
    border: 1px solid #333;
}

.input_group textarea {
    border: 1px solid #cdcdcd;
    resize: none;
    min-height: 50px;
    padding: 0px 20px;
    line-height: 50px;
    font-size: 1rem;
    width: 100%;
}

.input_group textarea:focus {
    border: 1px solid #333;
}

.input_desc {
    color: #777;
    font-weight: 300;
    font-size: .95rem;
}

.input_desc span {
    color: #E94E1B;
}

.up_file_list li {
    border: 0;
    display: block;
    position: relative;
    color: #666;
    font-size: .9rem;
}

.up_file_list .del {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    font-size: 0;
    width: 15px;
    height: 15px;
    background: url("/resources/images/layout/board/ico_delete.png") no-repeat;
}

.up_file_list {
    padding-top: 10px;
}

.btn_file {
    background: #333;
    color: #fff;
    font-size: 1rem;
    padding: 8px 15px;
    font-size: .9rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 10px;
}

.board_write_btn {
    text-align: center;
    margin-top: 30px;
}

.board_write_btn .btn {
    padding: 10px 20px;
    border: 1px solid #555;
    display: inline-block;
}

.board_write_btn .btn.check {
    background: #fff;
    color: #333;
    border: 1px solid #555;
    border-radius: 4px;
}

.board_write_btn .btn.del {
    background: #f14173;
    color: #fff;
    border: 1px solid #f14173;
    border-radius: 4px;
}

.files li {
    padding: 15px;
    background: #f7f7f7;
    display: block;
    margin-bottom: 10px;
}

.lifile li {
    padding: 15px;
    background: #f7f7f7;
    display: block;
    margin-bottom: 10px;
}

.btn_sm_greenblue {
    color: blue;
    margin-left: 10px;
    font-size: 13px;
}

.btn_sm_red {
    color: red;
    margin-left: 5px;
    font-size: 13px;
}

.review-cmnt-reg-btn-area {
    margin-top: 0 !important;
    display: flex;
    gap: 5px;
}

.review-cmnt-reg-btn-area .btn_comment {
    position: relative;
}

/*갤러리형*/
.board_gallery ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 0 -10px;
}

.board_gallery ul li {
    width: 25%;
    padding: 0 10px;
    margin-bottom: 20px;
}

.board_gallery ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    transition: all 0.3s;
}

/*.board_gallery ul li:hover a{    box-shadow: 0 0 25px rgba(0,0,0,.1);z-index: 2;}*/
.board_gallery .thumb {
    overflow: hidden;
    height: 200px;
    align-items: center;
    vertical-align: middle;
    position: relative;
}

.board_gallery .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transition: all .3s;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.board_gallery li:hover .thumb img {
    transform: translate(-50%, -50%) scale(1.1);
}

.board_gallery .top {
    padding: 15px;
}

.board_gallery .top p.tit {
    width: 100%;
    font-size: 1.18rem;
    color: #333;
    font-weight: 600;
    padding: 0 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board_gallery .top .info span {
    font-size: .9rem;
    position: relative;
    display: inline-block;
    color: #777;
}

.board_gallery .top .info span+span:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #ADADAD;
    margin: 0 15px;
    vertical-align: middle;
}


/*페이지네이션*/
.pagenation-area {
    text-align: center;
}

.pagenation {
    padding: 0.625rem;
    text-align: center;
    line-height: normal;
    margin-top: 4.375rem;
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 3.125rem;
}

.pagenation a {
    display: inline-block;
    font-weight: 400;
    position: relative;
    margin: 0 3px;
    padding: 2px 8px;
    font-size: 1.2rem;
    color: #ccc;
    line-height: normal;
    text-decoration: none;
    vertical-align: middle;
}

.pagenation a.active {
    color: #224d35;
    font-weight: 600;
}

.pagenation .direction {
    font-weight: normal;
    color: #767676;
    white-space: nowrap;
    width: 21px;
    height: 21px;
}

.pagenation .prev_all {
    background: url("/resources/images/layout/board/ico_page_prev_all.png") center no-repeat;
}

.pagenation .prev {
    background: url("/resources/images/layout/board/ico_page_prev.png") center no-repeat;
}

.pagenation .next_all {
    background: url("/resources/images/layout/board/ico_page_next_all.png") center no-repeat;
}

.pagenation .next {
    background: url("/resources/images/layout/board/ico_page_next.png") center no-repeat;
}

.pagenation .direction span {
    font-weight: bold;
    font-size: 16px;
}

.pagenation .direction:hover,
.pagenation .direction:active,
.pagenation .direction:focus {
    background-color: #fff;
    color: #333;
}

/*라디오버튼*/
.input-item .radio-wrap {
    position: relative;
    display: flex;
    width: 200px;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    overflow: hidden;
}

.input-item .radio-wrap:after {
    content: '';
    width: 1px;
    height: 50px;
    position: absolute;
    left: 50%;
    background: #dee2e6;
}

.input-item .radio-group {
    width: 50%;
    height: 50px;
    text-align: center;
}

.input-item .radio-label {
    color: #212529;
    background: #fff;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: block;
    padding: 14px;
}

.input-item input[type="radio"]:checked~.radio-label {
    background: #ecebeb;
    color: #000000;
}

.hidden {
    display: none;
}

/*체크박스*/
.checkbox {
    display: inline-block;
    position: relative;
    font-size: 15px;
    line-height: 30px;
}

.checkbox_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    opacity: 0;
    z-index: 0;
}

.checkbox_label {
    display: block;
    padding: 0 0 0 30px;
    cursor: pointer;
    font-weight: 400;
    font-size: .85rem;
}

.checkbox_label:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 18px;
    height: 18px;
    background-color: transparent;
    border: 1px solid #767676;
    border-radius: 2px;
    z-index: 1;
    -webkit-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-property: background-color, border-color;
    transition-property: background-color, border-color;
}

.checkbox_label:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 7px;
    width: 5px;
    height: 9px;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
    -webkit-transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox_input:checked+.checkbox_label:before {
    background-color: #224d35;
    border-color: #224d35;
}

.checkbox_input:checked+.checkbox_label:after {
    border-color: #fff;
}


/*.gallery{padding-top: 1rem;}*/
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: baseline;
}

.grid_item .thumb_img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    transition: all .3s;
    border: 1px solid #eaeaea;
}

/*.grid_item:hover .thumb_img img {transform:  scale(1.1);  }*/
.grid_item {
    width: calc(100% / 4 - 12px);
}

.grid_item .thumb_img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
    overflow: hidden;
    transition: all .2s
}

.grid_item .thumb_img:hover {
    box-shadow: 0 0 10px #b2bebf80;
    transform: scale(1.01);
}

.landscape {
    width: 100%;
}

.landscape img {
    width: 100%;
}

.portrait {
    height: 100%;
    width: fit-content;
}

.portrait img {
    height: 100%;
}

.grid_item .profile {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grid_item .profile .img {
    width: 24px;
    height: 24px;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 10px;
}

.grid_item .profile .user {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: .813rem;
}

.grid_item .profile .user .name {
    font-size: .813rem;
    color: #333;
}

.grid_item .cate span {
    display: inline-block;
    padding-top: 14px;
    font-size: .813rem;
    color: #8d94a3;
}

.hash_tag ul {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    margin: 0 -3px;
}

.hash_tag li a {
    padding: 0 10px;
    display: inline-block;
    font-weight: 300;
    font-size: 0.75rem;
    color: #555;
    border: 1px solid #e0ddfd;
    border-radius: 20px;
    transition: all .2s;
}

.hash_tag li {
    margin: 0 0 5px 3px;
}

.hash_tag li:hover a {
    border: 1px solid #224d35;
    color: #224d35;
}

/*.grid_item .tit{position: absolute; bottom: 0; color: #fff; width: 100%;  padding: 50px 20px 15px 20px; font-weight: 600;*/
/*background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 7.14%, rgba(0, 0, 0, 0.5) 29.4%, rgba(0, 0, 0, 0) 96.19%); display: none; }*/
/*.grid_item:hover .tit{display: block;}*/
.grid_item .tit {
    padding: 10px 0 0 0;
    font-size: .813rem;
}

.grid_item .tit span {
    float: right
}

.grid_item .tit img {
    width: 20px;
    filter: opacity(0.5) drop-shadow(0 0 0 #64646b);
}

.grid_item .tit a {
    color: #64646b;
}

.grid_item .tit a {
    color: #64646b;
}

/*.grid_item .tit:hover a {text-decoration: underline;}*/
.grid_item .count {
    display: flex;
    align-items: center;
}

.grid_item .count i {
    color: #ababab;
    font-size: .813rem;
}

.grid_item .count span {
    color: #888;
    font-size: .813rem;
    margin-left: 2px;
    font-weight: 300;
}

.grid_item .count>div {
    display: flex;
    align-items: center;
}

.grid_item .count>div:last-child {
    margin-left: 8px;
}

.gallery>.count {
    color: #64646b;
    font-size: .813rem;
    padding-bottom: 10px;
}

.gallery>.count span {
    color: #224d35;
    font-weight: 700;
}

/*.gallery .board_filter form{display: none}*/
.grid_item .info {}

.grid_item .info strong {
    padding-bottom: 10px;
    display: block;
}

.grid_item .info li {
    display: flex;
    font-size: .85rem;
}

.grid_item .info li em {
    font-style: normal;
    width: 70px;
    color: #777;
}

.grid_item .info li span {
    color: #64646b;
    width: calc(100% - 70px)
}

.grid_item .info li a {
    color: #333;
    font-weight: 500;
}

.grid_item .info li a:hover {
    text-decoration: underline;
}

.grid_item .new {
    position: absolute;
    left: 3px;
    top: 3px;
    color: #249b59;
    background: #dce8d4;
    border-radius: 50px;
    z-index: 10;
    font-weight: 700;
    font-size: .7rem;
    padding: 2px 10px;
    border: 1px solid #249b59;
}

.grid_item .date_group {
    display: flex;
    justify-content: space-between;
}

.grid_item .date {
    color: #909090;
    font-size: .813rem;
    display: flex;
    justify-content: space-between;
    padding: .6rem 0;
}

.grid_item .date .icon {
    display: flex;
}

.grid_item .date .icon>li {
    padding-left: 5px;
}

.grid_item .date .icon i {
    color: #ababab;
    font-size: .813rem;
}

.grid_item .date .icon span {
    color: #888;
    font-size: .813rem;
    margin-left: 2px;
    font-weight: 300;
}

.grid_item .date_group .view_num {
    color: #555;
    font-size: .813rem;
}

.grid_item .date_group .view_num i {
    padding-right: 3px;
    color: #666;
}

.grid_item .info .award {
    padding-top: 5px;
}

.grid_item .info .award a {
    font-size: .8rem;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
}

.grid_item .info .award .label_aw {
    background: #78a55a;
}

.grid_item .info .award .label_re {
    background: #5a9fa5;
}

.grid_item .info .award .label_me {
    background: #c79090;
}

.fix_btn01 {
    padding: 0px 4px;
    border: 1px solid #224d35;
    background: #224d35;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
}

.fix_btn02 {
    padding: 0px 4px;
    border: 1px solid #c12121;
    background: #c12121;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
}

.bg_dark {
    background: #1a2330;
    padding-bottom: 2rem;
    min-height: 100vh;
}

.gallery_detail {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.gallery_detail .profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .3rem;
}

.gallery_detail .profile .user a {
    display: flex;
    align-items: center;
}

.gallery_detail .profile .user span {
    font-weight: 400;
    color: #fff;
    font-size: .9rem;
}

.gallery_detail .profile .img {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 10px;
}

.gallery_detail .profile img {
    width: 100%;
}

.gallery_detail .profile .bookmark {
    display: inline-block;
    letter-spacing: .05rem;
    padding: 10px 20px;
    background: #224d35;
    color: #eae8ff;
    border-radius: 4px;
    font-size: .85rem;
}

.gallery_detail .profile .bookmark i {
    padding-right: .3rem;
}

.gallery_detail .gallery_head {
    padding: 2rem 0 1rem;
}

.gallery_detail .gallery_head .tit {}


.gallery_detail .gallery_head h3 {
    font-size: 1.25rem;
    font-weight: 600;
    padding-bottom: .3rem;
    color: #fff;
}

.gallery_cont_wrap {
    display: flex;
    position: relative;
}

.gallery_detail .gallery_cont {
    text-align: center;
    width: 100%;
    height: inherit;
    position: relative;
}

.gallery_detail .gallery_cont img {
    max-width: 900px
}

.gallery_detail .gallery_cont p {
    padding: 1rem 0;
    color: #b4b7bc;
    white-space: pre
}

.gallery_cont .indicator {
    position: fixed;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 100;
}

/*.gallery_cont .indicator.fixed {padding-top: inherit; top: 50%; height: auto;}*/
/*.gallery_cont .indicator_wrap {position: sticky; top: 135px; width: 100%; height: auto;}*/
.gallery_cont .indicator a {
    position: absolute;
    color: #c2c2c2;
    background: #293649;
    border: 3px solid #596472;
    font-size: 1.5rem;
    line-height: 46px;
    display: block;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0;
}

.gallery_cont .indicator a.prev {
    left: 9%;
}

.gallery_cont .indicator a.next {
    right: 9%;
}

.side_bar {
    height: inherit;
    padding-left: 90px;
    transform: translateY(0);
}

.side_bar li {
    padding-bottom: .7rem;
}

.side_bar li span {
    display: block;
    text-align: center;
    font-size: .8rem;
    color: #555;
    transform: translateY(-5px);
}

.side_bar button {
    width: 54px;
    height: 54px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(20, 20, 20, 0.06);
    border-radius: 50px;
}

.side_bar button i {
    font-size: 1.5rem;
    color: #b9b9b9;
}

.side_bar .like.on i {
    color: #224d35;
}

.side_bar .dislike.on i {
    color: #224d35;
}

.side_bar ul {
    position: sticky;
    top: 85px;
}

.bg_dark .side_bar button {
    background: #3b4869;
}

.bg_dark .side_bar button i {
    color: #fff;
}

/*.stats{background: #f7f8fa; padding: 1rem;}*/
.stats ul {
    display: flex;
}

.gallery_detail .hash_tag {
    padding: 1rem 0;
}

.gallery_detail .hash_tag li a {
    font-size: 0.825rem;
    padding: 2px 10px;
    background: #25304a;
    color: #98a4b7;
    border: 0;
}

.gallery_detail .hash_tag li:hover a {
    color: #fff;
}

.stats ul {
    display: flex;
    font-size: .9rem;
    color: #777;
    padding: 1rem;
    margin: 1rem 0;
    border: 1px solid #efeff5;
    border-radius: 5px;
}

.stats ul em {
    font-style: normal;
    padding-right: 5px;
}

.stats ul span {
    color: #6e6e6e;
    font-weight: 300;
}

.stats ul li+li {
    padding-left: 20px;
}

.bg_dark .stats ul {
    border: 1px solid rgba(255, 255, 255, .2);
    background: #25304a;
    color: #c5c5c5;
}

.bg_dark .stats ul span {
    color: #d1d1d1;
}

.share {
    position: relative;
}

.social {
    position: absolute;
    top: 0;
    right: 10px;
    visibility: hidden;
    transform: translateY(0px);
    transition: transform 0.35s ease;
}

.social_active {
    visibility: visible;
    /*z-index: 3;*/
    transform: translateY(65px);
    transition: transform 0.35s ease;
}

.share_toggle {
    z-index: 2;
}

.share_icon {
    display: block;
    width: 37px;
    height: 37px;
    line-height: 37px;
    margin-bottom: 5px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.3s ease;
    outline: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.share_icon:hover,
.share_icon:focus {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.share_icon.facebook {
    background: #3b5998 url("/resources/images/layout/common/ico_share_facebook.png") center no-repeat;
}

.share_icon.twitter {
    background: #00abe3 url("/resources/images/layout/common/ico_share_twitter.png") center no-repeat;
}

.share_icon.kakao {
    background: #FAE300 url("/resources/images/layout/common/ico_share_kakao.png") center no-repeat;
}

.facebook:focus,
.twitter:focus {
    border: 2px solid #000;
}

.gallery.book .grid_item {
    width: calc(100% / 2 - 30px);
    display: flex;
    align-items: start;
}

.gallery.book .grid_item .thumb_img {
    width: 40%;
    border-radius: 0;
    border: 1px solid #e5e5e5;
}

.gallery.book .grid_item .thumb_img img {}

.gallery.book .grid_item .txt {
    width: 60%;
    padding-left: 20px;
}

.gallery.book .grid_item .txt .cont {
    font-size: .88rem;
    color: #666;
}

.gallery.book .btn_area {
    margin-top: 10px;
}

.gallery.book .btn_area .btn {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid #b3b3b3;
    width: 100%;
    text-align: center;
    color: #737373;
    font-size: .9rem;
    transition: all .3s;
}

.gallery.book .btn_area .btn:hover {
    background: #224d35;
    color: #fff;
    border: 1px solid #224d35;
}

.book_detail_wrap {
    margin: 50px auto;
    padding:0 100px;
}

.book_info {
    display: flex;
    padding-bottom: 2rem;
    align-items: baseline
}

.book_info .info_txt {
    width: calc(100% - 400px);
    padding-left: 2rem;
}

.book_info .info_txt .book_tit {
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.book_info .info_txt .book_tit strong {
    font-size: 2rem
}

.book_info .info_txt .flag label {
    color: #666;
    font-size: .875rem;
}

.book_info .info_txt h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

.book_info .info_txt h3 strong {
    padding-right: 15px;
    font-weight: 500;
}

.book_info .info_txt ul {
    font-size: 1.2rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 1rem;
}

.book_info .info_txt ul li {
    display: flex;
}

.book_info .info_txt ul li.theme {
    gap: 0.3125rem;
    padding-top: 0.3125rem;
}

.book_info .info_txt .theme-group {
    display:flex;
    padding-top: 1rem;
    gap:.2rem;
}

.book_info .info_txt .theme {
    gap: 0.3125rem;
}

.book_info .info_txt ul li em {
    font-style: normal;
    width: 15%;
}

.book_info .info_txt ul li>div {
    color: #666;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 85%;
    gap: 0.125rem;
}

.book_info .info_txt ul li>div span {
    display: inline-block;
}

.book_info .info_txt ul li a:hover {
    text-decoration: underline;
}

.book_info .info_txt .theme>div {
    display: flex;
    flex-wrap: wrap;
    gap:.2rem;
}

.book_info .info_txt .theme a,
.info .theme a {
    padding: 3px 10px;
    border: 1px solid #bfd6c9;
    border-radius: 3.125rem;
    font-size: .95rem;
    color: #5b5b5b !important;
    transition: all .2s;
    margin-top: .05rem;
    display: inline-block;
}

.book_info .info_txt .theme span,
.info .theme span {
    display: inline-block;
}

.book_info .info_txt .theme a:hover,
.info .theme a:hover {
    text-decoration: none !important;
    border: 1px solid #78a55a;
    color: #78a55a !important;
}

.book_info .btn_area {
    display: flex;
    padding-top: 1rem;
    justify-content: space-between;
    gap: 5px;
}

.book_info .btn_area a {
    padding: 15px 25px;
    border-radius: 4px;
    font-size: .95rem;
    text-align: center;
}

.book_info .btn_area a:first-child {
    border: 1px solid #224d35;
    color: #224d35;
    width: 50%;
}

.book_info .btn_area a.green {
    border: 1px solid #224d35;
    background: #224d35;
    color: #fff;
    width: 50%;
}

.book_info .btn_area .like {
    padding: 0 15px;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    color: #444;
}

.book_info .btn_area .like .on {
    color: #0a2b1d
}

.book_info .bookmark_btn .bookmark {
    background: #78a55a;
    margin-top: 5px;
    padding: 15px 25px;
    border-radius: 5px;
    color: #fff;
    border: 1px solid #78a55a;
    font-size: .95rem;
    width: 100%
}

.book_info .bookmark_btn .bookmark.cancel {
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 5px;
    color: #78a55a;
}

.book_info .bookmark_btn .bookmark i {
    padding-right: 5px;
}

.book_info .info_txt .award {
    padding-top: 5px;
}

.book_info .info_txt .award a {
    font-size: .8rem;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
    margin-right: 3px;
}

.book_info .info_txt .award .label_aw a {
    background: #78a55a;
}

.book_info .info_txt .award .label_re a {
    background: #5a9fa5;
}

.book_info .info_txt .media {
    padding-top: 5px;
}

.book_info .info_txt .media a {
    font-size: .8rem;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
    margin-right: 3px;
}

.book_info .info_txt .media .label_me a {
    background: #c79090;
}

.info_thumb {
    max-width: 400px;
    position: relative;
}

.info_thumb img {
    width: 100%;
    border: 1px solid #e5e5e5;
}

.book_cont img {
    max-width: 100%;
    margin: .5rem 0;
    border: 1px solid #eaeaea;
}

.book_detail {
    display: flex;
    position: relative;
}

.book_detail .side_bar {
    transform: translateY(0);
    display: none;
}

.book_detail_cont {
    width: 100%;
}

.labels {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    border-radius: 5px 0 0 0;
    background: #cf4040;
    font-size: .7rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    padding: 5px 0;
    display: block;
}

.tabs {
    display: flex;
}

.tabs li {
    padding-right: 20px;
}

.tabs li a {
    padding: 15px 0;
    display: block;
    color: #81858f;
    position: relative;
    font-weight: 600;
}

.tabs li.on a {
    color: #333;
    font-weight: 600;
}

.tabs li.on a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #224d35;
    bottom: 0;
    left: 0;
    z-index: 10;
}

/*.tabs li a span{color: #224d35;}*/

.field_group {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
}

.field_group .board_search .select {
    height: 45px;
    width: auto;
}

.field_group .board_search .select select {
    font-size: .9rem;
}

.field_group .board_search .select+.select {
    margin-left: 10px;
}

.book_cont {
    font-size: .938rem;
    color: #555;
}

.cont_tit {
    font-size: 2rem;
    padding: 2rem 0 1rem;
    color: #333;
}

.pub {
    padding: 0 0 2rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-top: 3rem;
    font-size: .9rem;
    color: #444;
}

.writer_box {
    padding: 2.5rem 0;
    border-bottom: 1px solid #ddd;
}

.writer_box h5 {
    font-size: 1rem;
    margin-bottom: .5rem;
    color: #333;
}

.writer_info {
    background: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
}

.writer_info .user {
    display: flex;
    gap: 1rem;
}

.writer_info .user > a {
    display: flex;
    align-items: center;
    gap: 15px;
}

.writer_info .user span {
    font-weight: 600;
    color: #333;
    font-size: 1.5rem;
}

.writer_info .img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #f5f5f5;
    margin-right: 10px;
}

.writer_info img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.writer_info .txt {
    font-size: .9rem;
    color: #555;
    padding-top: .5rem;
}

.pub .cont_tit small {
    font-size: .85rem;
    color: #666;
    font-weight: 400;
    line-height: 1.5;
    display: block;
}

.writer_gallery>.count {
    color: #64646b;
    font-size: .813rem;
    padding-bottom: 10px;
    position: relative;
}

.writer_gallery>.count span {
    color: #224d35;
    font-weight: 700;
}

.writer_gallery>.count .board_search {
    position: absolute;
    right: 0;
    top: -5px;
    width: auto;
}

.writer_gallery>.count .board_search .select {
    height: 30px;
    width: 110px;
}

.writer_gallery>.count .board_search .select select {
    font-size: 13px;
    padding: 5px 50px 5px 20px;
}

/*.writer_list{ border-top: 1px solid #eaeaea; }*/
.writer_item {
    display: flex;
    justify-content: space-between;
    border: 1px solid #eaeaea;
    margin-bottom: .5rem;
    border-radius: 5px;
}

.writer_item .profile {
    background: #fafafa;
    padding: 1.5rem;
    border-radius: 5px 0 0 5px;
}

.writer_item .profile .img {
    width: 180px;
    height: 180px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid #eaeaea;
    border-radius: 50%;
}

.writer_item .profile .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

.writer_item .profile {
    width: 20%;
    text-align: center;
}

.writer_item .profile .name {
    padding-top: 1rem;
    display: block;
    color: #333;
    font-size: .93rem;
    font-weight: 600;
}

.writer_item .profile .flag label {
    font-size: .875rem;
    color: #555;
}

.writer_item .profile .btn_group {
    text-align: center;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.writer_item .profile .btn_group a {
    display: inline-block;
    max-width: 130px;
    margin: 0 5px;
    padding: 7px 15px;
    font-size: .813rem;
    background: #1a2330;
    color: #fff;
    border-radius: 50px;
    transition: all ease .2s;
}

.writer_item .profile .btn_group a.green {
    background: #78a55a
}

.writer_item .profile .btn_group a:hover {
    background: #224d35;
}

.writer_item .grid {
    width: 80%;
    padding: 1rem;
}

.writer_item .sns {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: .5rem;
}

.writer_item .sns li {
    padding: 0 3px;
}

.writer_item .sns li img {
    height: 20px;
}

.writer_item .user_info {
    font-size: .83rem;
    color: #555;
    border-radius: 10px;
    padding: 1rem .5rem 0;
}

/*.writer_item .user_info a {background: #fff; display: inline-block; border-radius: 50px; font-size: .8rem; border: 1px solid #ddd; padding: 0 8px;}*/
.writer_item .user_info .bookmark {
    background: #326edc;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 50px;
    color: #fff;
    border: 1px solid #326edc;
}

.writer_item .user_info .bookmark.cancel {
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 50px;
    color: #326edc;
}

.writer_item .user_info .bookmark i {
    padding-right: 5px;
}


.writer_item .bookmark_folder_list {
    padding: 1rem 0;
}

.writer_item .bookmark_folder_list li {
    display: flex;
    justify-content: space-between;
    transition: all .3s;
    padding: .8rem;
    border: 1px solid #dde2e6;
    align-items: center;
    border-radius: 8px;
}

.writer_item .bookmark_folder_list li+li {
    margin-top: .5rem;
}

.writer_item .bookmark_folder_list li>a {
    display: block;
    width: 90%;
    font-size: .9rem;
    font-weight: 600;
    color: #333;
}

.writer_item .bookmark_folder_list li:hover {
    background: #f9fafb;
}

.writer_item .bookmark_folder_list li.no_folder a {
    width: 100%;
}

.writer_item .bookmark_folder_list li.no_folder a i {
    padding-right: 5px;
}

.gallery .writer_item .grid_item {
    width: calc(100% / 4 - 12px);
}

.portfolio-cont {
    padding: 2rem 1rem;
}

/*.portfolio-cont{display: flex; }*/
.portfolio-cont .profile {
    text-align: center;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

/*.profile .user {width: 20%}*/
.portfolio-cont .profile .user .thumb {
    width: 15.625rem;
    height: 15.625rem;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    padding-bottom: 0;
    border: 1px solid #eaeaea;
}

.portfolio-cont .profile .user .thumb .img {
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 3.125rem;
    overflow: hidden;
    margin: 0 auto;
    padding-bottom: 0;
}

.portfolio-cont .profile .user .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*.profile .info {width: 30%;}*/
.portfolio-cont .profile .user .name span {
    display: block;
    font-size: 1.3rem;
    padding: .5rem 0;
    font-weight: 600;
}

.portfolio-cont .profile .user .name a {
    display: inline-block;
    max-width: 130px;
    margin: 0 5px;
    padding: 7px 15px;
    font-size: .813rem;
    background: #78a55a;
    color: #fff;
    border-radius: 50px;
    transition: all ease .2s;
}

.portfolio-cont .profile .user .name .bookmark {
    background: #326edc;
    margin-top: 10px;
    padding: 8px 15px;
    border-radius: 50px;
    color: #fff;
}

.portfolio-cont .profile .user .name .bookmark.cancel {
    background: #ffffff;
    padding: 8px 15px;
    border-radius: 50px;
    color: #224d35;
}

.portfolio-cont .profile .user .name .bookmark i {
    padding-right: 5px;
}

.portfolio-cont .profile .count em {
    color: #333;
    background: #f1f1f1;
    padding: 5px 10px;
    border-radius: 5px;
    font-style: normal;
}

.portfolio-cont .profile .count i {
    padding-right: 5px;
    color: #777;
}

.portfolio-cont .profile .info .personal {
    color: #8e94a0;
    padding: .6rem 0;
}

.portfolio-cont .profile .info .sns {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: .5rem;
}

.portfolio-cont .profile .info .sns li {
    padding: 0 3px;
}

.portfolio-cont .profile .info .sns li img {
    width: 20px;
}

.portfolio-cont .profile .info .btn_comment {
    display: inline-block;
    font-size: .85rem;
    padding: 5px 15px;
    border: 1px solid #929292;
    color: #646464;
    border-radius: 50px;
    margin: .6rem 0;
}

.portfolio-cont .profile .label_sponsor {
    border: 1px solid #224d35;
    color: #224d35;
    display: inline-block;
    padding: 0 10px;
    font-size: .875rem;
    border-radius: 5px;
}

.portfolio-cont .profile .country {
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-cont .profile .country .country-img {
    width: 1.8rem;
    margin-right: 5px;
    border: 1px solid #eaeaea;
}

.portfolio-cont .profile .country .country-name {
    color: #555;
}

/*.portfolio_list {width: 70%; order:1;}*/
.portfolio_list .grid {
    margin: 1rem 0;
}

/*.portfolio_list .grid_item{width:calc(100% / 4 - 10px);}*/
.portfolio_list .no_list {
    width: 100%;
    text-align: center;
    padding: 50px 0;
    color: #555;
}

.portfolio_list .no_list span {
    display: block;
    padding-top: 1rem;
}

.portfolio_list .grid_item .edit {
    font-size: .9rem;
    text-align: right;
}

.portfolio_list .grid_item .edit a {
    color: #666;
    position: relative;
}

.portfolio_list .grid_item .edit a+a {
    padding-left: 10px;
    margin-left: 7px;
}

.portfolio_list .grid_item .edit a+a:before {
    content: '';
    width: 1px;
    height: 10px;
    background: #aeaeae;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.portfolio_list .grid_item .edit .mod {
    color: #6994e3;
}

.commentary {
    color: #444;
    padding-top: 2rem;
}

.commentary pre {
    overflow: auto;
    font-size: .9rem;
    color: #444;
    font-family: Pretendard, 나눔고딕, NanumGothic, serif;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap
}

.portfolio_write {
    max-width: 800px;
    margin: 0 auto;
}

.fw_lg .portfolio_write {
    max-width: 100%;
    margin: 0 auto;
}

.portfolio_write .tit_input input {
    border: 0;
    border-bottom: 1px solid #eaebef;
    width: 100%;
    font-size: 1.3rem;
    font-weight: 600;
    padding: .7rem 0;
}

.portfolio_write .tit_input input::placeholder {
    color: #cfcfcc;
}

.portfolio_write .tit_input input:focus {
    outline: none;
}

.portfolio_write .tit_input+.tit_input {
    margin-top: 1rem;
}

.radio {
    margin: 0.5rem;
}

.radio input[type=radio] {
    position: absolute;
    opacity: 0;
}

.radio input[type=radio]+.radio-label:before {
    content: "";
    background: #fff;
    border-radius: 100%;
    border: 1px solid #dbdbdb;
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all .3s ease;
}

.radio input[type=radio]:checked+.radio-label:before {
    background-color: #224d35;
    box-shadow: inset 0 0 0 4px #fff;
    border: 1px solid #224d35;
}

.radio input[type=radio]:focus+.radio-label:before {
    outline: 2px solid #d0ccfd;
}

.radio input[type=radio]:disabled+.radio-label:before {
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

.radio input[type=radio]+.radio-label:empty:before {
    margin-right: 0;
}

.portfolio_write .noti {
    border: 1px solid #dadce0;
    border-radius: 4px;
    margin-bottom: 2rem;
    color: #444;
    font-weight: 400;
}

.portfolio_write .noti .tit {
    padding: 25px;
    display: block;
    background: #f7f8fa;
    font-size: .9rem;
}

.portfolio_write .noti .tit i {
    background: #224d35;
    color: #fff;
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
}

.portfolio_write .noti .cont {
    padding: 25px;
    font-size: .85rem;
}

.portfolio_write .noti .write_form {
    padding: 25px;
    font-size: .85rem;
}

.portfolio_write .write_form {
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 25px;
}


.write_select {
    padding: 1rem 0;
}

.write_select.rd_area {
    padding: 0;
}

.write_select.rd_area ul {
    padding: 0 0 2rem 0;
}

.write_select ul {
    display: flex;
    flex-wrap: wrap;
    font-size: .9rem;
}

.write_select li {
    width: calc(100% / 5 - 16px)
}

.write_select span {
    font-weight: 600;
    font-size: .9rem;
    padding-bottom: .5rem;
    display: block;
}

.rd_btn_wrap {
    margin: 0 -2px;
}

.rd_btn_wrap.type2 {
    flex-wrap: nowrap;
}

.write_select li.rd_btn {
    width: calc(100% / 9);
    padding: 3px;
}

.rd_btn input[type=radio] {
    display: none;
}

.rd_btn input[type=radio]+label {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    line-height: 24px;
    text-align: center;
    font-weight: 400;
    font-size: .85rem;
    padding: 3px 2px;
    border-radius: 50px;
}

.rd_btn input[type=radio]+label {
    background-color: #f5f5f6;
    color: #667591;
}

.rd_btn input[type=radio]:checked+label {
    background-color: #224d35;
    font-weight: 600;
    color: #fff;
}


.portfolio_write .add_cont {
    padding: 1rem 0;
    border-top: 1px solid #eaebef;
    border-bottom: 1px solid #eaebef;
}

.portfolio_write .add_cont .add_img {
    margin-bottom: 1rem;
}

/*.portfolio_write .add_cont .add_btn{margin-bottom: 1rem; }*/
.portfolio_write .add_cont button {
    background: #fff;
    border: 1px solid #ddd;
    transition: all .3s;
    display: inline-block;
    padding: 10px 15px;
    color: #333;
    font-size: .9rem;
    border-radius: 3px;
}

.portfolio_write .add_cont button i {
    padding-right: 5px;
}

.portfolio_write .add_cont button:hover {
    border: 1px solid #555;
}

.portfolio_write .add_cont .add_img .thumb {
    width: 100px;
    border-radius: 5px;
    overflow: hidden;
}

.portfolio_write .add_cont .add_img .thumb img {
    width: 100%;
}

.portfolio_write .add_cont .add_img .shortcut {
    display: flex;
    align-items: center;
}

.portfolio_write .add_cont .add_img .shortcut .tit {
    display: flex;
    align-items: center;
    color: #666;
    font-size: .85rem;
    padding-left: 1rem;
}


.portfolio_write .add_cont .del {
    margin-left: 1rem;
    padding: 5px 10px;
    font-size: .8rem;
}

.portfolio_write .add_cont .add_txt {
    display: flex;
}

.portfolio_write .add_cont .add_txt textarea {
    border: 1px solid #e0e0e0;
    padding: 15px 60px 15px 15px;
    width: 100%;
    resize: none;
    border-radius: 5px;
    font-size: .95rem;
}

.portfolio_write .add_cont .add_txt textarea::placeholder {
    color: #969696;
    font-weight: 300;
}

.portfolio_write .add_cont .add_txt button i {
    padding: 0;
}

.dot_list li {
    position: relative;
    padding-left: 10px;
}

.dot_list li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 3px;
    height: 3px;
    border-radius: 10px;
    background: #224d35;
}

.portfolio_write .add_tag {
    padding: 1rem 0;
    border-bottom: 1px solid #eaebef;
}

.portfolio_write .add_tag input {
    position: relative;
    padding: 10px 10px 10px 30px;
    width: 110px;
    background: #f5f5f5;
    border-radius: 3px;
    border: 1px solid #f5f5f5;
}

.portfolio_write .add_tag input:focus {
    outline: none;
}

.portfolio_write .add_tag .input-item {
    position: relative;
    margin-bottom: 0;
}

.portfolio_write .add_tag .input-item:before {
    content: '#';
    color: #79889d;
    font-size: .9rem;
    position: absolute;
    left: 15px;
    top: 8px;
    z-index: 10;
}

.portfolio_write .add_tag button {
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 3px;
}

.portfolio_write .tag-container {
    display: flex;
    flex-flow: row wrap;
}

.portfolio_write .tag {
    pointer-events: none;
    background-color: #f5f5f5;
    color: #666;
    border-radius: 3px;
    padding: 6px;
    margin: 5px 0;
    font-size: .83rem;
}

.portfolio_write .tag+.tag {
    margin-left: 5px;
}

.portfolio_write .tag:after {
    pointer-events: all;
    display: inline-block;
    content: 'x';
    height: 20px;
    width: 20px;
    margin-left: 6px;
    text-align: center;
    color: #7f7f7f;
    cursor: pointer;
}

.portfolio_write .btn_area {
    text-align: center;
    padding: 1rem 0;
}

.portfolio_write .btn_area .btn {
    background: #224d35;
    border: 1px solid #224d35;
    margin: 3px 0;
    padding: 10px 20px;
    color: #fff;
    border-radius: 5px;
    font-size: 1rem;
}

.portfolio_write .btn_area .btn+.btn {
    color: #555;
    border: 1px solid #ddd;
    background: #fff;
    display: none;
}

/*캘린더*/
.board_sub_tit {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.board_sub_tit .btn {
    border: 1px solid #7a7a7a;
    display: block;
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 5px;
}

.board_sub_tit .btn i {
    margin-right: 5px;
}

.fc .fc-button-primary {
    color: #333 !important;
    background: #fff !important;
    border-color: #d4d4d4 !important;
}

.fc-h-event .fc-event-title {
    font-weight: 200;
}

.fc .fc-daygrid-day-number {
    color: #66646e !important;
    font-size: .83rem;
}

.fc-day {
    padding: 10px !important;
}

.fc .fc-col-header-cell-cushion {
    font-weight: 300 !important;
}

.write_tabs {
    margin-bottom: 20px;
    position: relative;
    overflow: auto hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.write_tabs::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
}

.write_tabs:after {
    content: '';
    width: 100vw;
    height: 1px;
    position: absolute;
    bottom: 0;
    background: #eaeaea;
    left: 50%;
    margin-left: -50vw;
}

.write_tabs li a {
    font-size: 1.2rem;
}

/*나의리뷰*/
.my_review {
    display: flex;
    padding: 0.9375rem;
    gap: 0.625rem;
}

.my_review a {
    padding: 0;
}

.my_review .image {
    width: 10%;
}

.my_review .thumb {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.my_review .thumb_img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.my_review .thumb_img img {
    position: absolute;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.board_list li .my_review .mark {
    width: 5%;
    padding: 0.1875rem 0;
}

.my_review .subject {
    width: 90%
}

.my_review .top {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.my_review .top .left {
    display: flex;
    align-items: center;
}

.my_review .top .tit a {
    display: -webkit-box;
}

.my_review .subject p.tit {
    font-size: 1rem;
    font-weight: 600;
    padding-right: 0.9375rem;
}

.my_review .subject p.tit span {
    font-weight: bold;
    color: #2d4c37
}

.my_review .subject .info {
    display: flex;
    align-items: center;
}

.my_review .subject .info .btn_group {
    padding-left: 1.25rem;
    display: flex;
    align-items: center;
}

.my_review .subject .info .btn_group a {
    display: inline-block;
    padding: 0 10px;
    font-size: 0.875rem;
    color: #777;
    position: relative;
}

.my_review .subject .info .btn_group a+a:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #d1d1d1;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.my_review .cont {
    padding-top: 0.625rem;
    max-height: 80px;
    overflow: hidden;
}

.my_review .cont a {
    color: #333;
}

.my_review .cont a {
    width: 100%;
    flex-direction: inherit;
}

.interact {
    display: flex;
}

.interact>div,
.interact>button {
    margin-left: 0.3125rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.1875rem;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    color: #555;
}

.interact>div span,
.interact>button span {
    font-weight: 600;
}

.interact>div i,
.interact>button i {
    color: #c59d9d;
}

.my_comment .mark+div {
    width: calc(100% - 100px);
    padding-right: 20px;
}

.my_comment .top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.my_comment .top .left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.my_comment .top .tit span {
    font-weight: bold;
    color: #2d4c37
}

.my_comment .top p.tit {
    width: 100%;
}

.my_comment .cont {
    font-size: 0.9375rem;
    color: #333;
    padding-top: 0.625rem;
}

.review-list .subject {
    width: calc(100% - 7%)
}

.review-list .top .left {
    max-width: 70%
}

.review-list .cont {
    max-height: 2.25rem;
}

.my_review .cont span,
.my_review .cont p,
.review-list .cont span,
.review-list .cont p {
    font-family: 'Pretendard' !important;
    font-size: 1rem !important;
    color: #333 !important;
    line-height: 1.5 !important;
}

.author-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.author-item {
    border: 1px solid #ddd;
    width: calc(100% / 4 - 10px);
    border-radius: 0.625rem;
}

.author-item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 20px;
    height: 100%;
}

.author-item .img {
    width: 7.5rem;
    height: 7.5rem;
}

.author-item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px;
    border: 1px solid #eaeaea;
}

.author-item .info{
    width:calc(100% - 7.5rem)
}

.author-item .info strong {
    font-size: 1.25rem;
}

.author-item .info .country {
    display: flex;
    padding-top: 8px;
}

.author-item .info .country-img {
    width: 1.5rem;
}

.author-item .info .country-name {
    font-size: .95rem;
    color: #555;
}


.filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4rem;
    position: relative;
}

.filter .count {
    font-size: 1.5rem;
    color: #555;
    font-weight: 500;
}

.filter .count span {
    color: #224d35;
    font-weight: 700;
}

.filter .result{
    text-align: center;
    width: 100%;
    font-size: 1.5rem;
    color: #555;
    font-weight: 500;
}

.filter .result b{
    color: #224d35;
    border: 2px solid #224d35;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    margin-right: 5px;
}

.filter .result span{
    color: #224d35;
    padding: 0 5px;
    font-weight: bold;
}

.filter .search-area {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-25px);
    width: 25rem;
    height: 3.125rem;
}

.filter .search-area input {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: none;
    background-color: #f1f1f1;
    padding: 0 3.5rem 0 1.875rem;
    font-size: 1rem;
    color: #222;
    outline: none;
    transition: background-color 0.25s ease;
}

.filter .search-area input::placeholder {
    color: #224d35;
    font-weight: 500;
}

.filter .search-area input:focus {
    background-color: #e8e8e8;
}

.filter .search-area i {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    pointer-events: none;
}

.lp-item {
    display: flex;
    border-bottom: 1px solid #eaeaea;
    padding: 2.5rem 0;
}

.lp-item:last-child {
    border-bottom: 0;
}

.lp-item .author {
    width: 30%;
}

.lp-item .book {
    width: 70%;
}

.lp-item .author .img {
    width: 16.25rem;
    height: 16.25rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #eaeaea;
    margin: 0 auto;
}

.lp-item .author .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-item .author .info {
    text-align: center;
}

.lp-item .author .info .name {
    font-size: 1.375rem;
    display: block;
    padding: 1rem 0;
}

.lp-item .author .info .country {
    display: block;
    color: #777;
;
}

.lp-item .author .info .country-img {
    display: block;
    width: 7.5rem;
    margin: 0 auto;
}

.lp-item .author .info .country-name {
    color: #555;
    font-size: .95rem;
}

.lp-item .author-sns{
    padding-top: 1rem;
}

.author-sns{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:.5rem;
}

.author-sns a{
    font-size: 2.5rem;
    color:#385645;
}

.author-sns a.homepage{
    border: 3px solid #224d35;
    border-radius: 50px;
    font-size: 1.3rem;
    display: inline-block;
    width: 38px;
    height: 38px;
    text-align: center;
}

/*개인정보처리방침*/
.policy{color: #444; font-size: .9rem;}
.policy strong{display: block; padding: 1rem 0 .3rem; font-size: .95rem;}


@media all and (max-width:1200px) {

    /*갤러리형*/
    .board_gallery ul li {
        width: 33.33%;
    }

    .board_list .top p.tit span.mobile {
        display: inline-block;
        color: #E94E1B;
        font-weight: 700;
        margin-right: 5px;
    }

    .board_list li .mark .fix {
        display: none;
    }

    /*.board_list a {flex-direction:row-reverse;}*/

    .board_list .top .etc {
        right: 10px;
    }

    /*.board_list li .mark {text-align: left;}*/

    .gallery_cont_wrap {
        flex-wrap: wrap;
    }

    .gallery_detail .gallery_cont {
        width: 100%;
    }

    .side_bar {
        height: auto;
        padding: 1rem 0;
        transform: none;
        width: 100%;
    }

    .side_bar ul {
        position: static;
        display: flex;
        justify-content: center;
    }

    .side_bar ul li {
        padding: 0 .3rem;
    }

    .stats ul {
        flex-wrap: wrap;
    }

    .stats ul li {
        width: calc(100% / 2);
        font-size: .85rem;
    }

    .stats ul li+li {
        padding-left: 0;
    }

    .book_detail {
        flex-wrap: wrap;
    }

    .write_select li.rd_btn {
        width: calc(100% / 6);
    }

    .sort_wrap {
        flex-wrap: wrap;
        padding: 10px 15px;
    }

    .sort_group .filter .select:first-child {
        margin-left: 0;
    }

    .sort_wrap .count {
        padding-bottom: 5px;
    }

    .write_tabs {
        border-bottom: 1px solid #eaeaea;
    }

    .write_tabs .tabs {
        border-bottom: 0;
    }

    .write_tabs:after {
        display: none;
    }

    .write_tabs li a {
        white-space: nowrap;
    }

    /*나의리뷰*/
    .board_list li .my_review .mark {
        display: none;
    }

    .book_detail_wrap{
        padding:0;
    }
}

@media all and (max-width:992px) {

    /*갤러리형*/
    .board_gallery ul li {
        width: 50%;
    }

    .board_list a {
        padding: 25px 10px;
    }

    .board_list li .mark {
        display: none;
    }

    .board_list .top {
        width: 100%
    }

    .board_list .top p.tit {
        width: calc(100% - 25px);
        font-size: 1rem;
    }

    .board_list .top p .lock {
        position: absolute;
    }

    .board_list .top .etc {
        right: 10px;
    }

    .board_list .top .lock {
        width: 15px;
        height: 18px;
        margin-right: 5px;
        background-size: contain;
    }

    .board_list .top .file {
        width: 15px;
        height: 18px;
        background-size: contain;
    }

    .board_list .top .ico_period {
        width: 16px;
        height: 16px;
        background-size: contain;
        vertical-align: middle;
    }

    .board_list .top .info span {
        font-size: .85rem;
        margin-right: 0;
    }

    .board_list .top .info span.due {
        display: none;
    }

    .board_list.qna .top p.tit {
        width: 100%;
    }

    .board_list.qna .top .etc {
        position: static;
        transform: inherit;
        padding-bottom: 7px;
    }

    .board_list.qna .top .etc span+span {
        padding: 5px;
        font-size: .85rem;
    }

    /*게시판상세*/
    .view_comment {
        padding: 15px 0px;
    }

    /*.view_comment .comment.reply{margin: 20px 0 0;}*/
    .view_comment .comment p {
        line-height: 1.3rem;
        font-size: .9rem;
    }

    .grid_item {
        width: calc(100% / 3 - 10px);
    }

    .gallery .grid_item {
        width: calc(100% / 4 - 12px);
    }

    .gallery_detail {
        padding: 0 15px;
    }

    .gallery_detail .gallery_cont img {
        max-width: 100%;
        min-width: inherit;
    }

    .gallery.book .grid_item {
        width: 100%;
    }

    .grid_item .cate span {
        padding-top: 0;
    }

    /*.grid_item .info{padding: .5rem 0;}*/
    .gallery.book .grid_item .txt .cont {
        display: none;
    }

    .portfolio_list .grid_item {
        width: calc(100% / 3 - 10px);
    }

    .writer_item {
        flex-wrap: wrap;
    }

    .writer_item .profile {
        width: 100%;
        padding: 1rem;
    }

    .writer_item .grid {
        width: 100vw;
        padding: 1rem;
    }

    .writer_item .user_info {
        text-align: right;
        padding: 0;
    }

    .writer_item .user_info li {
        display: none;
    }

    .writer_item .user_info .bookmark {
        margin: 0;
    }

    .writer_item .profile .btn_group {
        display: none;
    }

    .writer_item .profile .img {
        margin: 0;
        width: 80px;
        height: 80px;
    }

    .writer_item .profile .user {
        padding-bottom: 0;
        font-size: .85rem;
    }

    .writer_item .profile .user a {
        display: flex;
        align-items: center;
    }

    .writer_item .profile .name {
        padding: 0 0 0 10px;
    }

    .writer_item .profile .flag {
        padding-left: 10px;
    }

    .writer_item .sns {
        display: none;
    }

    .writer_item .grid_item {
        margin: 0 10px;
        width: calc(100% / 2 - 20px)
    }

    .gallery .writer_item .grid_item {
        margin: 0;
    }

    .gallery_cont .indicator a {
        width: 35px;
        height: 35px;
        line-height: 30px;
        font-size: .95rem;
    }

    .gallery_cont .indicator a.prev {
        left: 10px;
    }

    .gallery_cont .indicator a.next {
        right: 10px;
    }

    .field_group {
        flex-wrap: wrap;
        border-bottom: 0;
    }

    .tabs {
        border-bottom: 1px solid #e5e5e5;
        width: 100%;
    }

    .tabs li a {
        white-space: nowrap;
    }

    .field_group .board_search {
        flex-wrap: nowrap;
        padding-top: 10px;
        justify-content: end;
    }

    .field_group .board_search .select {
        height: 40px;
    }

    .field_group .board_search .select select {
        font-size: .85rem;
        padding: 8px 50px 8px 20px;
    }

    .field_group .board_search .select:first-child {
        display: none;
    }

    /*나의리뷰*/
    .my_review {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        align-items: center;
    }

    .my_review .image {
        width: 50%;
    }

    .my_review .subject {
        width: 100%;
    }

    .my_review .subject .top {
        flex-wrap: wrap;
    }

    .my_review .subject p.tit {
        width: 100%;
    }

    .my_review .subject p.tit a {
        flex-direction: inherit;
        padding: 0.625rem 0 0;
    }

    .my_review .cont a {
        padding: 0;
    }

    .my_comment .mark+div {
        width: 100%;
    }

}

@media all and (max-width:768px) {

    /*게시판 리스트*/
    .board_filter {
        flex-wrap: wrap;
    }

    .board thead {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .board tbody tr {
        position: relative;
        overflow: hidden;
        display: block;
        padding: 20px 0;
        width: 100%;
        border-bottom: 1px solid #dedede;
        float: left;
    }

    .board td {
        border-bottom: 0;
        padding: 0 7px;
        position: relative;
    }

    .board td:before {
        content: '';
        display: inline-block;
        width: 1px;
        height: 10px;
        background: #ddd;
        margin-right: 15px;
    }

    .board td.td_num:before,
    .board td.td_tit:before,
    .board td.td_write:before,
    td.td_file:before,
    td.no_data:before {
        display: none;
    }

    td.td_file .has_file:before {
        content: '';
        display: inline-block;
        width: 1px;
        height: 11px;
        background: #ddd;
        position: absolute;
        left: 5px;
        top: 6px;
    }

    .board .td_num {
        float: left;
        width: 45px;
    }

    .board .td_num .mark {
        padding: 1px 5px;
    }

    .board .td_tit {
        width: calc(100% - 45px);
        float: left;
    }

    .board .td_tit a {
        max-width: 100%;
    }

    .board .td_write {
        padding-left: 55px;
    }

    .board .td_file {
        padding: 2px 6px 2px 15px;
    }

    .board td.no_data {
        min-width: 100vw;
    }

    .board_btn {
        text-align: center;
    }


    /*게시판상세*/
    .board_view .tit {
        padding: 25px 10px;
    }

    .board_view .tit em {
        font-size: .9rem;
    }

    .board_view .tit p {
        font-size: 1.25rem;
    }

    .board_view .tit .info span {
        font-size: .85rem;
    }

    .board_view .tit .info span+span:before {
        margin: 0 8px;
    }

    .board_view .view_files {
        padding: 20px 10px;
    }

    .board_view .view_files li {
        font-size: .95rem;
    }

    .board_view .view_cont {
        padding: 50px 0;
        overflow-x: scroll;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .board_view .view_cont::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera*/
    }

    .board_view .view_more li .icon {
        width: 50px;
    }

    .board_view .view_answer_tit {
        padding: 30px 20px;
    }

    .board_view .view_answer .txt {
        padding: 30px 20px
    }

    .board_view .view_more li.prev {
        padding: 20px 10px 20px 60px;
    }

    .board_view .view_more li.next {
        padding: 20px 60px 20px 10px;
    }

    .board_view .view_more li a span {
        font-size: .9rem;
    }

    .board_view .view_more li a p {
        font-size: .85rem;
    }

    .board_view .view_more li.prev .icon,
    .board_view .view_more li.next .icon {
        background-size: 10px auto;
    }

    .btn_area a {
        padding: 10px 30px;
        font-size: .95rem;
    }

    .view_btn {
        text-align: center;
    }

    /*페이지네이션*/


    .pagenation a {
        margin: 0;
        padding: 2px 4px;
    }

    /*게시판쓰기*/
    .page_noti {
        padding: 15px;
    }

    .page_noti strong {
        font-size: 1.1rem;
    }

    .board_write li {
        flex-wrap: wrap;
        padding: 15px;
    }

    .up_file_list li {
        padding: 0 15px 15px;
    }

    .board_write .tit {
        width: 100%;
        font-size: 1rem;
        padding: 0;
        border-bottom: 0;
        text-align: left;
    }

    .board_write .txt {
        border-left: 0;
        padding: 10px 0 0;
        width: 100%;
    }

    .board_write .w_category .select {
        height: 40px;
        width: 100%;
    }

    .input_group input {
        height: 40px;
    }

    .grid_item {
        width: calc(100% / 2 - 8px);
    }

    .gallery .grid_item {
        width: calc(100% / 2 - 8px);
    }

    .gallery_detail .profile .bookmark {
        padding: 5px 15px;
    }

    .book_info {
        flex-wrap: wrap;
    }

    .book_info .info_txt {
        width: 100%;
        padding-left: 0;
        padding-top: 1rem;
    }

    .info_thumb {
        margin: 0 auto;
    }

    .book_info .btn_area a {
        padding: 15px 5px;
    }

    .tabs li {
        padding-right: 10px;
    }

    .tabs li:last-child {
        padding-right: 0;
    }

    .tabs li a {
        font-size: .9rem;
    }

    .media_comment {
        padding-bottom: 0;
    }

    .media_top a {
        display: none;
    }

    .write_select li {
        width: calc(100% / 3 - 16px);
    }

    .portfolio_list .grid_item {
        width: calc(100% / 2 - 10px);
    }

    .portfolio_list .tabs {
        overflow: auto hidden;
        -ms-overflow-style: none;
    }

    .portfolio_list .tabs::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera*/
    }

    .write_select li.rd_btn {
        width: calc(100% / 4);
    }

    .rd_btn input[type=radio]+label {
        font-size: .8rem;
    }

    .rd_btn_wrap.type2 {
        flex-wrap: wrap;
    }

    .write_select .rd_btn_wrap.type2 li.rd_btn {
        width: calc(100% / 8);
    }

    .gallery .writer_item .grid_item {
        width: calc(100% / 2 - 8px);
    }

    .close_win {
        width: 30px;
        height: 30px;
        right: 15px;
        font-size: 1.25rem;
        top: 2rem;
    }

    /*검색옵션*/
    .sort_group {
        flex-wrap: wrap;
    }

    .sort_group .board_search {
        margin-left: 0;
        width: 100%;
        margin-top: 5px;
    }

    .sort_group .board_search .input_addition {
        width: 100%;
    }

    .sort_group .filter .select {}

    /*나의리뷰*/
    .my_review .subject .info {
        flex-wrap: wrap;
        width: 100%;
    }

    .my_review .subject .info .btn_group {
        padding-left: 0;
        padding-top: 15px;
        width: 100%;
        justify-content: right;
    }

    .writer_item .grid_item {
        width: calc(100% / 2 - 8px);
        margin: 0;
    }

    .my_comment .top {
        flex-wrap: wrap;
    }

    .review-list.my_review .top .left {
        max-width: 100%
    }

    .view_comment .comment .info {
        flex-wrap: wrap;
    }

    .view_comment .comment .info .profile {
        flex-wrap: wrap
    }

    .media_comment .comment .info .profile strong {
        max-width: 100%;
        width: 100%;
    }
}

@media all and (max-width:1200px) {
    .filter .search-area{
        position: relative;
        transform:none;
        left: 0;
        width:100%;
    }

    .lp-item{
        flex-wrap: wrap;
        padding: 2rem 0;
        gap: 0.625rem;
    }
    .lp-item .author{width: 100%;  display: flex; gap: 0.625rem;        align-items: center;}
    .lp-item .book{width: 100%;}
    .lp-item .author .img{width: 7rem; height: 7rem; margin: 0;}
    .lp-item .author .info{display: flex; align-items: center;gap: 0.3125rem; flex-direction: column;        width: calc(100% - 7rem);}
    .lp-item .author .info .country-img{display: inline-block;    width: 3rem; }
    .lp-item .author .info .country{display: flex; align-items: center; gap:.3rem}
}
@media all and (max-width:991px){
    .author-item{width: calc(100% / 2 - 10px);}
}

/* 연령별 소개 */
.age_ex {padding: 2rem; background: #f9f7f8; margin-bottom: 1rem;}
.age_ex strong {font-size: 1.2rem; display: block; color: #333;}
.age_ex p {color: #555; font-size: .9rem; padding-top: 1rem;}

/* 주제어 소개 */
.theme_ex {padding: 2rem; background: #f9f7f8; margin-bottom: 1rem;}
.theme_ex strong {font-size: 1.2rem; display: block; color: #333;}
.theme_ex p {color: #555; font-size: .9rem; padding-top: 1rem;}

/* 시리즈별 소개 */
.seris_ex {color: #555; font-size: .9rem; padding-top: 1rem; margin-bottom: 5px;}
.seris_ex a {font-size: .875rem; background: #78a55a; color: #fff; border-radius: 5px; padding: 5px 10px; margin-right: 5px; display: inline-block;}
.seris_ex strong {font-size: 1.1rem; color: #333;}

@media all and (max-width:767px) {
    .filter{
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        padding-bottom: 2rem;
    }
    .author-item{width: 100%;}
    .writer_info .user{flex-wrap: wrap; flex-direction: column; gap:0;}
    .writer_info .user a{flex-direction: column;}
    .book_info .info_txt ul li em{width:30%}
    /* .book_info .info_txt ul li a, */
    .book_info .info_txt ul li div{
        width:70%}
    .age_ex, .theme_ex {padding: 1rem;}
    .lp-item .author{
        flex-wrap: wrap;
        justify-content: center;
    }
    .lp-item .author .info{width: 100%;}
    .lp-item .author .info .name{padding: 0;}
    .lp-item .author .author-sns{padding-top: 0}
}