@font-face {font-family:MalgunGothic; src:url('../fonts/MalgunGothic.eot');}

body {
    font-weight: 500;
    line-height: 1.6;
    overflow-x: hidden;
}

* {
    line-height: 1.6;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    vertical-align: top;
}

button {
    line-height: 1.6;
    font-weight: 500;
}

select {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
label {
    font-size: 18px;
    line-height: 2rem;
    padding: 0.2em 0.4em;
}

[type="radio"], span {
    vertical-align: middle;
}

[type="radio"] {
    appearance: none;
    border: 2px solid #999;
    border-radius: 50%;
    width: 1em;
    height: 1em;
}

[type="radio"]:checked {
    border: 4px solid var(--color-sub-red);
}

[type="radio"] + span {
    margin-left: 0.25rem;
}

[type="checkbox"],
.chk {
    display: block;
    width: 16px;
    height: 16px;
    background: url("../../img/withsam/common/icon-check.png") no-repeat center;
    cursor: pointer;
}

[type="checkbox"]:checked,
.chk:checked {
    background: url("../../img/withsam/common/icon-check-on.png") no-repeat center;
    width: 16px;
    height: 16px;
}

input[type=text],
input[type=password] {
    padding: 0 20px;
    color: #222;
    border-radius: 7px;
    font-size: 14px;
    border: 1px solid #ddd;
    background: #fff;
    height: 42px;
}
input[type=date] {
    padding: 0 20px;
    color: #222;
    border-radius: 7px;
    font-size: 14px;
    border: 1px solid #ddd;
    background: #fff;
    height: 42px;
}
input[type=text]::placeholder,
input[type=password]::placeholder {
    color: #afafaf;
}

textarea::placeholder {
    font-family: 'Pre';
    color: #afafaf;
}

pre {
    white-space: pre-wrap;
}

@font-face {
    font-family: '샌드박스 어그로';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: '티몬소리';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '배민주아';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '코트라볼드';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '나눔고딕';
    font-style: normal;
    font-weight: 700;
    src: local('NanumGothic'), url('https://fonts.cdnfonts.com/s/14181/NanumGothic-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: '나눔고딕';
    font-weight: 500;
    font-style: normal;
    src: local('NanumGothic'), url('https://fonts.cdnfonts.com/s/14181/NanumGothic-Bold.woff') format('woff');
}

@font-face {
    font-family: '아네모네';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '잘풀리는오늘';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KOHI배움';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KOHIBaeumOTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-main-red : #F0543A;
    --color-sub-red : #E42C01;
    --color-main-bg : #FFE4C9;
    --color-sub-bg : #FEDEAD;
    --width : 1360px;

    --color-kor : #ff8e42;
    --color-math : #b293ff;
    --color-eng : #2ed72e;
    --color-soc : #22beff;
    --color-sci : #ff6abe;
    --color-etc : #00d3db;
}

.txt-red {
    color: var(--color-main-red);
}
.btn {padding: 0.3rem 1.2rem; border-radius: 8px}
.btn-sub-red{background: var(--color-sub-red); color: #fff !important; transition: 0.2s linear; border: 1px solid var(--color-sub-red) !important;}
.btn-sub-red:hover {background: #fff; color: var(--color-sub-red) !important; transition: 0.2s linear; border: 1px solid var(--color-sub-red) !important;}
.btn-main-red{background: var(--color-main-red); color: #fff !important; transition: 0.2s linear; border: 1px solid var(--color-main-red) !important;}
.btn-main-red:hover {background: #fff; color: var(--color-main-red) !important; transition: 0.2s linear; border: 1px solid var(--color-main-red) !important;}
.btn-gray {background: #666; color: #fff; transition: 0.2s linear; border: 1px solid #666 !important;}
.btn-gray:hover {background: #fff; color: #666; transition: 0.2s linear; border: 1px solid #666 !important;}
.btn-border-red {background: #fff; color: var(--color-sub-red); transition: 0.2s linear; border: 1px solid var(--color-sub-red) !important;}
.btn-border-red:hover {background: var(--color-sub-red); color: #fff; transition: 0.2s linear; border: 1px solid var(--color-sub-red) !important;}
.btn-border-gray {background: #fff; color: #333; transition: 0.2s linear; border: 1px solid #ddd !important;}
.btn-border-gray:hover {background: #666; color: #fff; transition: 0.2s linear; border: 1px solid #666 !important;}


.label.kor {background-color: var(--color-kor); color: #fff;}
.label.eng {background-color: var(--color-eng); color: #fff;}
.label.math {background-color: var(--color-math); color: #fff;}
.label.etc {background-color: var(--color-etc); color: #fff;}
.label.sci {background-color: var(--color-sci); color: #fff;}
.label.soc {background-color: var(--color-soc); color: #fff;}
.label.red {background-color: var(--color-main-red); color: #fff;}
.label.gray {background-color: #666; color: #fff;}

.wrap_inner {
    width: var(--width);
    margin: auto;
}

.hidden {
    position:absolute !important;
    left:-9999px;
    font-size:1px;
    width:1px;
    height:1px;
    line-height:0;
}

.image {
    text-align: center;
}

.image.image-style-block-align-left,
.image-style-align-left {
    text-align: left;
}

.image.image-style-block-align-right,
.image-style-align-right {
    text-align: right;
}

/* header */
#header {
    position: relative;
    z-index: 100;
}

.hdTop {
    width: var(--width);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.375rem 0;
}

.hdTop img {
    vertical-align: middle;
}

.hdTop h1 {}

.hdTop .logoWrap {
    position: relative;
    width: calc(130px + 170px);
}

.hdTop .logoWrap .banner {
    position: absolute;
    left: 151px;
    top: 0;
}

.hdTop .logoWrap .banner a {
    width: 137px;
}

.hdTop .topMenu div {
    /* display: none; */
}

.hdTop .topMenu .loginAfter {
    display: block;
}

.hdTop .topMenu a {
    display: inline-block;
    vertical-align: middle;
    padding: 0.25rem 1.25rem;
    border: 1px solid #999;
    border-radius: 2rem;
    transition:0.2s all linear;
}

.hdTop .topMenu a + a {
    margin-left: 0.25rem;
}

.hdTop .topMenu a img {
    margin-top: -3px;
    margin-right: 3px;
    transition:0.2s all linear;
}

.hdTop .topMenu a:hover {
    transition:0.2s all linear;
    color: #fff;
    background: #999;
}

.hdTop .topMenu a:hover img {
    filter:brightness(5);
    transition:0.2s all linear;
}

.hdTop .topMenu p {
    display: inline-block;
    margin-right: 3rem;
}

.hdTop .topMenu p.loginInfo img {
    width: 38px;
    height: 38px;
}

.hdTop .topMenu .dearsam {
    color: #ff6abe;
    border-color:#ff6abe;
}

.hdTop .topMenu .dearsam:hover {
    background: #ff6abe;
}

.hdTop .topMenu .mypage {
    color: var(--color-main-red);
    border-color:var(--color-main-red);
}

.hdTop .topMenu .mypage:hover {
    background: var(--color-main-red);
}

.mbGNB, .mbMenu {
    display: none;
}

.gnbWrap {
    background: var(--color-main-red);
    color: #fff;
}

.gnbWrap .gnb {
    width: var(--width);
    margin:auto;
    display: flex;
}

.gnbWrap .gnb li {
    flex:1;
    text-align: center;
    position: relative;
}

.gnbWrap .gnb li > a {
    padding: 1rem 0;
    font-size: 22px;font-weight:600;
}

.gnbWrap .gnb li ul {
    position: absolute;
    left: 0;
    top:67px;width: 100%;
    height: 0;
    overflow: hidden;
    box-sizing:border-box;
    z-index: 100;
}

.gnbWrap .gnb li ul > li > a {
    font-size: 17px;
    color: #333;
    padding: 0;
    display: inline-block;
    border-bottom:1px solid #fff;
}

.gnbWrap .gnb li ul > li + li {
    padding-top: 1.5rem;
}

.gnbWrap .gnb li ul > li > a:hover {
    color: var(--color-main-red);
    border-bottom:1px solid var(--color-main-red);
}

.gnbWrap .gnb li ul:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 14px solid var(--color-main-red);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    opacity:0;
    transition:0.2s all linear;
}

.gnbWrap .gnb li:hover ul:before {
    opacity:1;
    transition:0.2s all linear;
}

.web_gnb_bg {
    width: 100%;
    height: 0px;
    background-color: #fff;
    position: absolute;
    top: 168px;
    left: 0;
    z-index: -1;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    z-index: 99;
}


/* footer */
.footer {
    background: var(--color-main-red);
    color: #fff;
    padding: 2.75rem 0;position: relative;
}

.footer .wrap_inner {
    display: flex;
    align-items: center;
}

.footer .logo {
    width: 190px;
}

.footer .ftInfo {
    width: 100%;
}

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

.ftTop .ftMenu {}

.ftTop .ftMenu li {
    display: inline-block;
}

.ftTop .ftMenu li + li {
    margin-left: 2.5rem;
}

.ftTop .siteWrap {
    display: flex;
    align-item:center;
}

.ftTop .snsList li {
    display: inline-block;
}

.ftTop .snsList li + li {
    margin-left: 0.25rem;
}

.ftTop .familySite {
    width: 135px;
    background: #fff;
    color:#333;
    font-weight: 600;
    box-sizing:border-box;
    border-radius:5px;
    /*margin-left: 2rem;*/
    position: relative;
}

.ftTop .familySite .blank {
    line-height: 34px;
    padding: 0 0.75rem;
    background: url('../../img/withsam/common/icon-select.png') 90% center no-repeat;
    font-size: 15px;
    cursor: pointer;
}

.ftTop .familySiteList {
    position: absolute;
    left: 0;
    bottom:34px;
    box-sizing:border-box;
    background: #fff;
    width: 100%;
    border:1px solid var(--color-main-red);
    z-index: 100;
    display: none;
}

.ftTop .familySiteList  li a {
    line-height: 34px;
    padding: 0 0.75rem;
    font-size: 15px;
}

.ftTop .familySiteList  li + li {
    border-top:1px dashed var(--color-main-red);
}

.ftTop .familySiteList  li a:hover {
    color: var(--color-main-red);
    transition:0.2s all linear;
}

.ftBot {
    margin-top: 2.625rem;
    position: relative;
    display: flex;
}

.ftBot .logo {
    width: 85px;
}

.ftBot .siteInfo {
    width: calc(100% - 85px);
    padding-left: 2rem;
}

.ftBot .siteInfo p + p {
    margin-top: 0.375rem;
}


.btn-zone {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap:8px;
}

/* sidebar */
.sub_page .wrap_inner {margin-top: 54px; display: flex; gap: 80px; padding-bottom: 3.75rem;}
.sub_page .wrap_inner .left-wrap {width: 16.2rem}
.sub_page .wrap_inner .left-wrap .snb .snb_wrap > li {border-radius: 12px; overflow: hidden;}
.sub_page .wrap_inner .left-wrap .snb .snb_wrap > li+li {margin-top: 26px;}
.sub_page .wrap_inner .left-wrap .snb .snb_wrap > li > a{background-color: var(--color-main-red); color: #fff; font-size: 1.375rem; text-align: center; padding:20px 0;}
.sub_page .wrap_inner .left-wrap .snb .snb_wrap > li.active > a{background-color: var(--color-sub-red); color: #fff; font-size: 1.875rem;}
.sub_page .wrap_inner .left-wrap .snb li .depth2 {border-radius: 0 0 12px 12px; text-align: center;  background-color: #fff4ea ; color: #333; padding: 10px; transition: 0.2s linear;}
.sub_page .wrap_inner .left-wrap .snb .snb_wrap > li.sidebanner > a {
    background: none;
    padding: 0;}
.sub_page .wrap_inner .left-wrap .snb .snb_wrap > li.active .depth2 {}
.sub_page .wrap_inner .left-wrap .snb li .depth2 a {font-size: 1.25rem; ; padding: 10px 0;}
.sub_page .wrap_inner .left-wrap .snb li .depth2 a:hover {color: var(--color-sub-red); transition: 0.2s linear;}
.sub_page .wrap_inner .right-wrap {width:calc((100% - 80px) - 16.2rem)}

/* 공유하기 */
.share {position: relative; transition: 0.2s linear; width: 30px; height: 30px; }
.share > span {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; cursor: pointer}
.share img {z-index: 2; transition: 0.2s linear;}
.share:hover::after {background-color: #fedead; width: 30px; height: 30px; border-radius: 100%; content: ''; position: absolute; transition: 0.2s linear; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%)}
.share-list{ position: absolute; background-color: #fff; border: 1px solid #fedead; border-radius:10px; left: 50%; bottom: -3rem; padding: 6px; display: none; width: 160px; transform: translateX(-50%); z-index: 9}
.share-list a{ display: inline-block}
.share-list a+a {margin-left: 2px}
.share-list img + img {margin-left: 2px}

/* 셀렉트 박스 */
.select-box {margin: 2rem 0; border: 1px solid #ddd; border-radius: 12px; padding: 2rem 4rem; box-sizing: border-box; background-color: #f8f8f8;}
.select-box.flex-wrap {display: flex; flex-wrap: wrap;}
.select-box > div {display: flex; padding: .5rem 0; align-items: flex-start}
.select-box > div p{width: 100px; padding: 6px 0}
.select-box ul {display: flex; flex-wrap: wrap; gap: 10px; width:calc(100% -  100px)}
.select-box ul li:hover {background-color: var(--color-sub-red); color: #fff; transition: 0.2s linear;}
.select-box ul li.on {background-color: var(--color-sub-red); color: #fff; transition: 0.2s linear;}
.select-box ul li {background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: .3rem 1.2rem; cursor: pointer;transition: 0.2s linear;}
.select-box.tab2 > div {width: 50%;}
.select-box.tab3 > div {width: calc(100% / 3);}
.select-box select {position: relative; display: block; width: auto; min-width:150px; height: 38px; padding: 0 30px 0 15px; font-size: 16px; border: 1px solid #DDDDDD;border-radius: 6px; background: #fff url(../../img/withsam/common/icon-select.png) no-repeat 90% center;}

/* 셀렉트 */
#select {border: 1px solid #ddd; padding: 10px 20px; border-radius: 30px; padding-right: 50px; box-sizing: border-box; width: 200px}
#select {background: #fff; color:#333; font-weight: 600; box-sizing:border-box; border-radius:30px; position: relative; padding: 8px 20px; padding-right: 50px;position: relative;}
#select::after {position: absolute; content: ''; background: url(../../img/withsam/sub/slide-down.png) no-repeat; right: 20px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; transition: 0.2s linear;}
#select.on::after {background: url(../../img/withsam/sub/slide-up.png) no-repeat; transition: 0.2s linear;}
#select:hover {border-color: var(--color-sub-red); transition: 0.2s linear;}
#select .blank { position: relative; font-size: 15px; cursor: pointer;}
#select .select-list {z-index: 9; box-sizing:border-box; background: #fff; width: 100%; border:1px solid var(--color-main-red); position: absolute; left: 0; top: 50px; border-radius: 26px; z-index: 9999}
#select  li a { padding:10px; font-size: 15px; padding-left: 20px;}
#select  li + li {border-top:1px dashed var(--color-main-red);}
#select  li a:hover {color: var(--color-main-red); transition:0.2s all linear;}

/* 서브 타이틀 */
.sub_page .section-title-wrap{flex-direction: column; border-bottom: 1px solid #ddd; margin-bottom: 0; padding-bottom: 1.25rem; position: relative;}
.sub_page .section-title-wrap > div {display: flex; align-items: center}
.section-title {
    font-size: 28px;font-weight: 600;
}
.section-title-wrap .section-title-img {
    margin-right: 1rem;
}
.sub_page .section-title-wrap > small {margin-top: 4px; font-size:1.125rem;display: block;}

/* 페이저 */
#pager, .pager {margin: 3rem 0 2rem 0;}
#pager ul, .pager ul {display: flex; align-items: center; justify-content: center; gap: 10px}
#pager ul li a, .pager ul li a {width:30px; height:30px; display: flex; align-items: center; justify-content: center; border-radius: 100%}
#pager ul li a.on, .pager ul li a.on {background-color: var(--color-sub-red); color: #fff}
#pager ul li a:hover, .pager ul li a:hover{background-color: var(--color-sub-red); color: #fff; transition: 0.2s linear}
#pager ul li a:hover img, .pager ul li a:hover img {filter: invert()}
.table_wrap .pager .num, .table_wrap #pager .num {width: 30px;}
#top {position: fixed; bottom: 2rem; right: 2.5rem; z-index: 100; }
#top .top-btn {background: linear-gradient(to right top, #e42c01, #f0543a); border-radius: 100%; width: 70px; height: 70px; text-align: center; line-height: 68px; font-size: 1.25rem; border: 2px solid #fff; display: none;}


/* 통합게시물 - 글쓰기 */
.sub_page.write-board .section-title-wrap > div {
    margin-bottom: 0;
}

.write-board-bg {
    margin-top: 2rem;
    box-sizing: border-box;
    background: #f8f8f8;
    padding: 2rem;
    border-radius: 12px;
}

.write-board .regist_box {
    margin-top: 2.5rem;
}

.write-board .regist_box:first-child {
    margin-top: 0;
}

.write-board .flex-wrap {
    display: flex;
    justify-content: space-between;
}
.write-board .regist_box .flex-box {

}
.write-board .regist_box p {
    margin-bottom: 0.5rem;

}
.write-board .regist_box p:after {
    content:'*';
    color: var(--color-sub-red);
    display: inline-block;
    margin-left: 5px;
}
.write-board .regist_box.noessential p:after,
.write-board .regist_box .noessential p:after,
.ck.ck-editor__main p:after{
    display: none;
}

.write-board .regist_box select {
    position: relative;
    display: block;
    width: 120px;
    /* max-width: 200px; */
    height: 38px;
    padding: 0 30px 0 15px;
    font-size: 16px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background: #fff url('../../img/withsam/common/icon-select.png') no-repeat 90% center;
}

.write-board .regist_box .title_input {
    width: 100%;
}
.write-board .regist_box .small_input {
    width: calc(100% - 140px);
}
.write-board .regist_box textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    color: #222;
    border-radius: 7px;
    font-size: 14px;
    border: 1px solid #ddd;
    background: #fff;
}
.write-board .regist_box textarea.small {
    width: calc(100% - 140px);
}
.write-board .regist_box.post_flex {}
.write-board .regist_box.post_flex p {
    width: 140px;
}
.write-board .regist_box.post_flex p + div {
    width: calc(100% - 140px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.write-board .regist_box.post_flex p + div.hashtagList input {
    width: calc((100% - 10px) / 3);
}

.write-board .regist_box.post_flex p + div.dateList {
    width: calc(100% - 140px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.write-board .regist_box.post_flex .noti {
    width: 100%;
    color: var(--color-sub-red);
    font-size: 14px;
    margin-bottom: 0;
}
.write-board .regist_box p.noti:after {
    display: none;
}

.write-board .regist_box .thumbnailPhoto {
    width: 100%;
    margin-top: 1rem;
    display: none;
}

.write-board .regist_box .thumbnailPhoto.on {
    display: flex;
}

.write-board .regist_box .thumbnailPhoto .default-img {
    border-radius: 10px;
    overflow: hidden;
}

.write-board .regist_box .addThumbnailBtn {
    width: 187px;
    height: 187px;
    box-sizing: border-box;
    background: #fff url('../../img/withsam/sub/icon-blank-photo.png') center 2rem no-repeat;
    display: block;
    text-align: center;
    padding-top: 8rem;
    font-size: 20px;
    position: relative;
    border-radius: 10px;
    border:1px solid #ddd;
    cursor: pointer;
    font-family: '배민주아';
    transition:0.2s all linear;
}

.write-board .regist_box .addThumbnailBtn:hover {
    border-color: #aaa;
    transition:0.2s all linear;
}

.write-board .regist_box .thumbnail-img {
    height: 187px;
    box-sizing: border-box;
    border:1px solid #ddd;
    overflow: hidden;
    border-radius:10px;
    position: relative;
    max-width: calc(100% - 187px - 1rem);
}

.write-board .regist_box .addThumbnail .thumbnail-img {
    margin-left: 1rem;
}

.write-board .regist_box .thumbnail-img img {
    width: auto;
    height: 100%;
}

.write-board .regist_box .thumbnail-img .delete_btn {
    width: 24px;
    height: 24px;
    background: url('../../img/withsam/sub/icon-add.png') no-repeat center center / contain;
    transform: rotate(45deg);
    position: absolute;
    right: 1rem;
    top:1rem;
}

.write-board .regist_box .baseThumbnail .thumbnail-img img {
    border-radius: 1rem;
}

.write-board .regist_box.post_flex .noti.upload-guide-text {
    width: auto;
}

.write-board .regist_box #thumbFile,
.write-board .regist_box #chooseFile {
    display: none;
}

.write-board .regist_box .upload {
    width: 100%;
    display: flex;
    flex-wrap:wrap;
}

.write-board .regist_box .upload_btn {
    width: 110px;
    height: 35px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    margin-right: 17px;
    box-shadow: none;
    background: var(--color-main-red);
    border:none;
    color: #fff;
    line-height: 25px;
    transition:0.2s all linear;
    cursor: pointer;
}

.write-board .regist_box .upload_btn:hover {
    background: var(--color-sub-red);
    transition:0.2s all linear;
}

.write-board .regist_box .loaded_files,
.write-board .regist_box .loaded_files li {
    display: flex;
    align-items: center;
}

.write-board .regist_box .loaded_files {
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0.75rem;
}

.write-board .regist_box .loaded_files li:not(:last-child) {
    margin-right: 20px;
}

.write-board .regist_box .loaded_files span {
    font-size: 13px;
    text-decoration: underline;
}

.write-board .regist_box .loaded_files .delete_btn {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    background: url('../../img/withsam/sub/icon-add.png') no-repeat center center / contain;
    transform: rotate(45deg);
}

.write-board .regist_box.post_flex p.flex-title {
    margin-bottom: 0;
    line-height: 42px;
}

.write-board .regist_box.post_url .urlList {
    display: block;
}

.write-board .regist_box.post_url .input_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.write-board .regist_box.post_url .input_box:not(:last-child) {
    margin-bottom: 10px;
}

.write-board .regist_box.post_url input {
    width: calc(100% - 40px);
}

.write-board .regist_box.post_url button {
    width: 24px;
    height: 24px;
    background: url('../../img/withsam/sub/icon-add.png') no-repeat center center / contain;
}

.write-board .regist_box.post_url .remove_btn {
    transform: rotate(45deg);
}

/* 통합게시물 - 상세 페이지 */
.view-board {}
.view-board .board-title-wrap {
    box-sizing:border-box;
    background: #f8f8f8;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;

}
.view-board .board-title-wrap .board-title-info {
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.view-board .board-title-wrap .board-title-info p {
    display: inline-block;
    vertical-align: middle;
}
.view-board .board-title-wrap .board-title-info .sub-title {
    color: #666;
    font-size: 18px;
}
.view-board .board-title-wrap .board-title-info .board-title {
    display: block;
    line-height: 1.3;
    margin-top: 0.75rem;
    font-size: 20px;
}
.view-board .board-member-wrap {
    display:flex;
    justify-content: flex-end;
    align-items: center;
    color: #888;
    font-size: 15px;
}

.view-board .board-member-wrap .writer {
    display: flex;
    align-items: center;
}

.view-board .board-member-wrap .writer:hover span {
    cursor: pointer;
    text-decoration: underline;
}

.view-board .board-member-wrap .writer img {
    width: 28px;
    margin-right: 0.5rem;
}
.view-board .board-member-wrap .date {
    padding-left: 1rem;
    margin-left: 1rem;
    position: relative;
    display: block;
}
.view-board .board-member-wrap .date:before {
    content:'';
    width: 1px;
    height: 1rem;
    background: #aaa;
    position: absolute;
    left: 0;
    top:50%;
    transform:translateY(-50%);
}
.view-board .board-title-wrap .board-title-info .cate-title {
    padding: 1px 0.75rem 0;
    border-radius:1rem;
    margin-right:0.5rem;
    font-size: 16px;
}
.view-board .board-category {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.view-board .board-category p {
    box-sizing: border-box;
    border: 1px solid var(--color-sub-red);
    padding: 5px 1.5rem 3px;
    border-radius: 2rem;
    color: var(--color-sub-red);
    font-size: 15px;
}

.view-board .view-board-con {
    border-bottom: 1px solid #ddd;
}

.view-board .view-board-con .post {
    box-sizing: border-box;
    padding: 3rem 0;
    font-family: "Pre" !important;
    text-align: center;
}

.view-board .view-board-con .post div {
    text-align: left;
}

/*.view-board .view-board-con .post span {font-family: "Pre" !important;}*/
/*.view-board .view-board-con .post div {font-family: "Pre" !important;}*/
/*.view-board .view-board-con .post p {font-family: "Pre" !important;}*/

.view-board .view-board-con .post img + div {
    margin-top: 1rem;
}
.view-board .extra_option {

}
.view-board .extra_option li {
    width: 100%;
    box-sizing: border-box;
    background: #f8f8f8;
}

.view-board .extra_option li {
    justify-content: space-between;
    background: #f8f8f8;
    border-radius: 8px;
    height: 48px;
    padding: 0 1.5rem;
}

.view-board .extra_option li, .view-board .extra_option .left, .view-board .extra_option .right {
    display: flex;
    align-items: center;
}

.view-board .extra_option li + li {
    margin-top: 10px;
}

.view-board .extra_option p {
    width: 80px;
    height: 32px;
    border-radius: 4px;
    font-size: 15px;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sub-red);
    background: #fff;
    border: 1px solid var(--color-sub-red);
}
.view-board .extra_option li.url a {
    text-decoration: underline;
}
.view-board .extra_option .right button, .view-board .extra_option .right a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-sizing: border-box;
}
.view-board .extra_option .preview_btn {
    background: #fff url('../../img/withsam/sub/icon-preview.png') center no-repeat;
}
.view-board .extra_option .download_btn {
    background: #fff url('../../img/withsam/sub/icon-download.png') center no-repeat;
    margin-left: 12px;
}
.view-board .post_num {
    display: flex;
    align-items: center;
    margin-top: 3.75rem;
    margin-bottom: 1rem;
    position: relative;
}
.view-board .post_num li {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.view-board .post_num li::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.view-board .post_num li.share::before {
    display: none;
}

.view-board .post_num .view::before {
    width: 18px;
    background: url('../../img/withsam/common/icon-view.png') no-repeat center center / contain;
}

.view-board .post_num .like {
    cursor: pointer;
    background: none;
}

.view-board .post_num .like::before {
    background-image: url('../../img/withsam/common/icon-heart-off.png');
    background-position: center;
    background-repeat: no-repeat;
}

.view-board .post_num .like.active::before{
    background-image: url('../../img/withsam/common/icon-heart-on.png');
    background-position: center;
    background-repeat: no-repeat;
}

.view-board .post_num .reply::before {
    background: url('../../img/withsam/sub/sub0101_img03.png') no-repeat center center / contain;
}

.view-board .post_num li.share {
    position: absolute;
    right: 0;
    top:0;
}

/* 댓글 */
.view-board .comment_write,
.view-board .comment_wrap .comment_list li {
    display: flex;
    flex-wrap: wrap;
    padding: 2rem 0;
    border-bottom: 1px solid #ddd;
}

.view-board .comment_wrap .comment_list li {
    padding: 1.25rem 0;
}

.view-board .comment_wrap .comment_list li.child-reply {
    padding: 1.25rem 0 1.25rem 2rem;
    justify-content: space-between;
}

.comment_wrap .comment_list textarea,
.comment_wrap .comment_list pre {
    width: 100%;
    margin-top:0.75rem;
    line-height: 1.6;
}

.view-board .comment_write textarea {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0 15px;
    background: #f8f8f8;
    border: 1px solid #eee;
}

.view-board .comment_write {
    justify-content: flex-end;
}

/*.view-board .comment_write .comment_num,
.view-board .comment_wrap .name {
    font-size: 16px;
}*/

.view-board .comment_wrap .name {
    display: flex;
    align-items: center;
    color: var(--color-sub-red);
}

.view-board .comment_wrap .name img {
    width: 30px;
    margin-right: 0.375rem;
}

.view-board .comment_write span {
    width: 100%;
}

.view-board .comment_write .regist_btn {
    font-weight: 500;
    height: 35px;
}

.view-board .comment_write button + button {
    margin-left: 5px;
}

.view-board .comment_write.reply .name::before,
.view-board .comment_list .reply .name::before {
    content: '';
    display: block;
    margin-right: 12px;
    width: 20px;
    height: 20px;
    background: url('../../img/withsam/common/icon-reply.png') no-repeat center center / contain;
}

.view-board .comment_list .normal,
.view-board .comment_list .normal.reply {
    justify-content: space-between;
}

.view-board .comment_list .normal p {
    width: 100%;
    padding: 20px 5px 0;
}

.view-board .comment_list .normal.reply p {
    padding: 20px 45px 0;
}

.view-board .comment_control {
    display: flex;
    align-items: center;
}

.view-board .comment_control button,
.view-board .comment_control .date {
    display: inline-block;
    color: #555;
    transition:0.2s all linear;
}

.view-board .comment_control button:hover {
    color: var(--color-sub-red);
    transition:0.2s all linear;
}

.view-board .comment_control button:not(:first-child) {
    margin-left: 28px;
    position: relative;
}

.view-board .comment_control button:not(:first-child)::before {
    content: '';
    display: block;
    width: 1px;
    height: 14px;
    background: #ddd;
    top: 50%;
    transform: translate(0, -50%);
    left: -14px;
    position: absolute;
}

.view-board .comment_control .date {
    margin-left: 23px;
}

.comment_write .flex-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.view-board .post_nav {
    margin-top: 3.75rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.view-board .post_nav>div {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    background: #f6f6f6;
    cursor: pointer;
}

.view-board .post_nav>div:first-child {
    margin-bottom: 10px;
}


.view-board .post_nav p {
    font-size: 18px;
    font-weight: 500;
    color: #444;
    width: 90px;
    box-sizing: border-box;
    padding-left: 1rem;
}

.view-board .post_nav p.nav_title {
    width: calc(100% - 90px - 20px);
    box-sizing: border-box;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 0;
}

.view-board .post_nav p.nav_title span {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}

.view-board .post_nav span {
    font-size: 18px;
    color: #444;
}

.view-board .post_nav .icon_box {
    width: 20px;
    height: 20px;
    background: url('../../img/withsam/main/icon-arr-next2.png') no-repeat center center / contain;

}

.view-board .post_nav .before .icon_box {
    transform: rotate(-90deg);
}

.view-board .post_nav .after .icon_box {
    transform: rotate(90deg);
}

.view-board #pager, .view-board .pager {
    margin-top: 3.75rem;
}

/* 닉네임 모달 팝업 */
.nickname_popup {display: none; position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0, 0, 0, 0.5);z-index: 9999;}
.nickname_popup .class-tip {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;border-radius: 20px;text-align: center;overflow: hidden;width: 80%;height: 90%;max-width: 1200px;padding: 5rem 2rem 2rem;overflow-y: scroll;}
.nickname_popup .popup-close {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); border: 1px solid #ddd; border-radius: 100%; transition: 0.2s linear;}
.nickname_popup .popup-close:hover {transition: 0.2s linear; border-color: var(--color-main-red)}
.nickname_popup .select-wrap {display: flex ; justify-content:flex-end; margin: 1.5rem 0 ;}
.nickname_popup .table_wrap .table_body li.menu .cate{font-size: 14px;border: 1px solid var(--color-main-red);color: var(--color-main-red);border-radius: 1rem;letter-spacing: -0.5px;box-sizing: border-box;text-align: center; padding: .2rem 1rem;}
.nickname_popup .table_wrap .table_list li.m_none {display: flex}
.nickname_popup .table_wrap .table_list li.pc_none {display: none}
.nickname_popup .table_wrap .table_head li.menu, .nickname_popup .table_wrap .table_body li.menu {width: 15%;}
.nickname_popup .table_wrap .table_head li.title, .nickname_popup .table_wrap .table_body li.title {width: 65%;}
.nickname_popup .table_wrap .table_head li.date, .nickname_popup .table_wrap .table_body li.date {width: 20%;}
.nickname_popup .table_wrap .table_body li.date {border-right: none;}
.nickname_popup .table_wrap .table_list .title .txt {width: 100%}
.nickname_popup .table_wrap .table_list .title .txt a {display: inline;overflow: inherit;text-overflow: inherit;white-space: inherit;}

.nickname_popup .inquiry {border-radius: 20px; display: flex; gap: 20px; padding: 1.5rem; align-items: center; border: 2px dashed var(--color-main-red)}
.nickname_popup .inquiry .img-box {width: 70px; height: 70px; overflow: hidden; border-radius: 100%; position: relative; border: 1px solid #ddd}
.nickname_popup .inquiry .img-box img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; width: 100%; height: 100%}
.nickname_popup .inquiry .writer .id {font-weight: 700; font-size: 1.25rem; padding: 0.25rem 0;
    text-align: left;}
.nickname_popup .inquiry .writer span {color: #666; position: relative}
.nickname_popup .inquiry .writer span:after {position: absolute; content: ''; width: 2px; height: 14px; background: #ddd; right: -12px; top: 3px}
.nickname_popup .inquiry .writer span:last-child:after {content: none}
.nickname_popup .inquiry .writer span + span {padding-left: 18px}


/* 팝업 */
.popup {display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0, 0.5); z-index: 9999; }
.popup .popup_inner {position: absolute; top: 50%;left: 50%;transform: translate(-50%,-50%); background: #fff; border-radius: 20px; text-align: center; overflow: hidden; min-width: 350px;}
.popup .popup_inner .img-box {background: var(--color-main-bg); padding: 2rem}
.popup .popup_inner .popup_body{padding: 2rem}
.popup .popup_inner .btn {display: inline-block; margin-top: 1.5rem; min-width: 80px; }
.popup .popup_inner .btn + .btn {margin-left: 3px;}

.modal_wrap {display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0, 0.5); z-index: 9999; }
.modal_wrap .modal_box {position: absolute; top: 50%;left: 50%;transform: translate(-50%,-50%); background: #fff; border-radius: 20px; text-align: center; overflow: hidden; min-width: 350px;}
.modal_wrap .modal_box .img-box {background: var(--color-main-bg); padding: 2rem}
.modal_wrap .modal_box .comment{padding: 2rem 2rem 0;display: block;}
.modal_wrap .modal_box .button_wrap {margin-bottom: 1.25rem;}
.modal_wrap .modal_box button {display: inline-block; margin-top: 1.5rem; min-width: 80px; }
.modal_wrap .modal_box button + button {margin-left: 3px;}


/* 임시저장 팝업 */
.section1 {position: relative}
#popup_storage.popup {position: absolute; min-width: 350px; right: 0; bottom: 3rem; background: none; transform: none; width: auto; height: auto; left: auto; top: auto}
#popup_storage.popup .popup_inner {min-width: auto; position: relative; top: auto; left: auto; transform: none;border: 1px solid #ddd}
#popup_storage.popup .pop_txt {border-bottom: 1px solid #dfdfdf; padding-bottom: 1rem; font-size: 1.1rem}
#popup_storage.popup .pop_txt span {color: #767676; margin-left: 10px}
#popup_storage.popup .strage_box {padding: .5rem; margin-top: 1rem;}
#popup_storage.popup .strage_box ul {display: flex; flex-direction: column; gap: 10px}
#popup_storage.popup .strage_box ul li {width: 100%; background: #efefef; border-radius: 4px; border: 1px solid #ddd; transition: 0.2s linear; position: relative}
#popup_storage.popup .strage_box ul li a:first-child {padding: 10px;}
#popup_storage.popup .strage_box ul li p {text-align: left}
#popup_storage.popup .strage_box ul li a:nth-child(2) {position: absolute; right: 10px; top: 50%; transform: translateY(-50%)}
#popup_storage.popup .strage_box ul li img {max-width:20px; transition: 0.2s linear}
#popup_storage.popup .strage_box ul li:hover {background: transparent; border: 1px solid #ddd; box-sizing: border-box; transition: 0.2s linear}
#popup_storage.popup .strage_box ul li:active {border: 1px solid var(--color-sub-red)}
#popup_storage.popup .strage_box ul li a:hover img {filter: invert(42%) sepia(94%) saturate(7270%) hue-rotate(8deg) brightness(95%) contrast(99%); transition: 0.2s linear}


    /* 테이블 리스트 */
.table_wrap {

}

.table_wrap .align {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.table_wrap .table_head,
.table_wrap .table_list {
    display: flex;
}

.table_wrap .table_head {
    margin-top: 15px;
    background: #FFF6EE;
    border-top: 2px solid var(--color-main-red);
    border-bottom: 1px solid var(--color-main-red);
}

.table_wrap .table_head li {
    height: 46px;
    font-size: 16px;
    font-weight: 600;
}

.table_wrap .table_head li,
.table_wrap .table_list li {
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.5px;
}

.table_wrap .table_head li:first-child,
.table_wrap .table_list li:first-child {
    width: 5%;
}

.table_wrap .num {
    width: 6%;
}

.table_wrap .title {
    width: 40%;
}

.table_wrap .writer {
    width: 12%;
}

.table_wrap .date {
    width: 12%;
}

.table_wrap .preview,
.table_wrap .download{
    width: 8%;
}

.table_wrap .download_num{
    width: 9%;
}

.table_body.mb {
    display: none;
}

.table_wrap .table_list {
    border-bottom: 1px solid #ddd;
}

.table_wrap .table_list li {
    padding: 0.5rem 0;
}

.table_wrap .table_list .title {
    justify-content: left;
    padding: 0 0.875rem;
    letter-spacing: -0.5px;
}

.table_wrap .table_list .title .cate {
    font-size: 14px;
    border:1px solid var(--color-main-red);
    color: var(--color-main-red);
    border-radius: 1rem;
    margin-right: 7px;
    letter-spacing: -0.5px;
    box-sizing: border-box;
    width: 70px;
    text-align: center;
}

.table_wrap .table_list .title .cate.red {
    border-color: var(--color-main-red);
    color: var(--color-main-red);
}

.table_wrap .table_list .title .cate.green {
    border-color: var(--color-eng);
    color: var(--color-eng);
}

.table_wrap .table_list .title .cate.blue {
    border-color: var(--color-soc);
    color: var(--color-soc);
}

.table_wrap .table_list .title .cate.purple {
    border-color: var(--color-math);
    color: var(--color-math);
}

.table_wrap .table_list .title .txt {
    width: calc(100% - 70px);
    line-height: 1.2;
}

.table_wrap .table_list .writer{
    flex-wrap: wrap;
    padding: 0.375rem 0.5rem;
}

.table_wrap .table_list .writer,
.table_wrap .table_list .writer span {
    line-height: 1.3;
    font-size: 15px;
    letter-spacing: -0.5px;
}

.table_wrap .table_list .writer .nickname,
.table_wrap .table_list .writer .nickname-id {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table_wrap .table_list .writer .nickname-id {
    width: auto;
    max-width: 85%;
}

.table_wrap .table_list li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
}

.table_wrap .table_list li:not(:last-child) {
    border-right: 1px solid #ddd;
}

.table_wrap .table_list button,
.table_wrap .table_list .download_btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    position: relative;
    transition:0.2s all linear;
}

.table_wrap .table_list .preview_btn:hover,
.table_wrap .table_list .download_btn:hover {
    background-color:var(--color-main-red);
    transition:0.2s all linear;
}

.table_wrap .table_list .preview_btn:after,
.table_wrap .table_list .download_btn:after {
    content:'';
    width: 20px;
    height: 20px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:0.2s all linear;
}

.table_wrap .table_list .preview_btn:after {
    background: url('../../img/withsam/sub/icon-preview.png') no-repeat center;
}

.table_wrap .table_list .download_btn:after {
    background: url('../../img/withsam/sub/icon-download.png') no-repeat center;
}

.table_wrap .table_list .preview_btn:hover:after,
.table_wrap .table_list .download_btn:hover:after {
    filter:brightness(5);
    transition:0.2s all linear;
}

.table_wrap .table_list .scrap_btn {
    background: url(../../img/icon/icon_star_empty.svg) no-repeat center center / contain;
}

.table_wrap.table_list .scrap_btn.active {
    background: url(../../img/icon/icon_star.svg) no-repeat center center / contain;
}

.table_wrap .table_wrap .allDownload_btn {
    width: 117px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* 게시글 없을 때 */
.empty_box {
    box-sizing: border-box;
    padding: 3rem;
    background: #f8f8f8;
    text-align: center;
    color: #666;
    border-radius: 12px;
}

.empty_box img {
    display: block;
    margin: 0 auto 1rem;
}
.sub_page .section-title-wrap > small {word-break: keep-all}
.sub_page .section-title-wrap > small span {vertical-align: baseline;}

/* 반응형 */
@media(max-width:1360px){

    /* header */
    .hdTop {width: 96%; margin: 0 auto;}
    .gnbWrap .gnb {width: 96%;}

    /* subpage */
    .sub_page .wrap_inner {padding: 0 2% 3.75rem; width: 100%; gap: 60px; margin-top: 54px}
    .sub_page .wrap_inner .left-wrap {width: 14rem}
    .sub_page .wrap_inner .right-wrap {width: calc((100% - 50px) - 14rem)}
    .sub_page .wrap_inner .left-wrap .snb .snb_wrap > li.active > a {font-size: 1.375rem}
    .sub_page .wrap_inner .left-wrap .snb li .depth2 a {font-size: 1.05rem}
    .sub_page .wrap_inner .left-wrap .snb .snb_wrap > li > a {padding: 16px 0; font-size:1.25rem;}
    .section-title {font-size: 22px}
    .sub_page .section-title-wrap > small {font-size: 1rem; margin-top: 6px; display: block;  margin-left: 48px; line-height: 90%}
    .section-title-wrap .section-title-img img {max-width:32px}

    /* footer */
    .wrap_inner {width:96%; margin:0 auto;}


}

@media(max-width:1200px){

    /* header */
    .hdTop .topMenu p {margin-right: 1.5rem;}
    .hdTop .topMenu a img {display: none;}

    /* footer */
    .ftTop {align-items: center;}
    .ftTop .ftMenu li + li {margin-left: 1rem;}
    /*.ftTop .familySite {margin-left: 1rem;}*/

    /* subpage - 글상세 */
    .view-board .board-category p {padding: 3px 1.375rem 2px; font-size: 14px;}
    .view-board .board-title-wrap .board-title-info .cate-title {font-size: 15px;}
    .view-board .board-title-wrap .board-title-info .board-title {font-size: 18px;}
    .view-board .board-title-wrap .board-title-info .sub-title {font-size: 16px;}
    .view-board .board-member-wrap {font-size: 14px;}
    .view-board .extra_option p {width: 75px; height: 30px; font-size: 14px;}

    /* subpage */
    .table_wrap .table_head li {font-size: 14px;}
    .table_wrap .table_list {font-size: 14px;}
    .table_wrap .table_list li.title {padding:0 0.5rem;}
    .table_wrap .table_list li.writer, .table_wrap .table_list li.writer span {font-size: 14px;}
    .select-box {padding: 2rem 3rem;}

    /* 닉네임 팝업 */
    .nickname_popup .table_wrap .table_head li.menu, .class-tip .table_wrap .table_body li.menu {width: 20%;}
    .nickname_popup .table_wrap .table_head li.title, .class-tip .table_wrap .table_body li.title {width: 60%}

}

@media(max-width:1024px){

    /* header */
    #header {border-bottom:1px solid #ccc;}
    .hdTop {padding:1.25rem 0; }
    .hdTop .logoWrap {width: auto;}
    .hdTop .logoWrap .banner {display: none;}
    .hdTop .topMenu {position: fixed;left: 0; top: 98px; z-index: 210; background: var(--color-main-red); width: 100%; height:56px; box-sizing: border-box;padding: 0.875rem 0 0.75rem;text-align: center; display: none;}
    .hdTop .topMenu > div {text-align: center;  align-items: center;}
    .hdTop .topMenu .loginBefore {display: flex;}
    .hdTop .topMenu .loginAfter {display: flex;}
    .hdTop .topMenu .mypage, .hdTop .topMenu .dearsam {display: none;}
    .hdTop .topMenu a {width:50%; border:none; color:#fff; border-radius: 0; padding: 0.25rem 0;}
    .hdTop .topMenu a.logout {width: 48%;position: fixed;left: 0;bottom: 0;z-index: 1000;background: var(--color-main-red); padding:0.75rem 0;}
    .hdTop .topMenu a + a { margin-left: 0rem; border-left: 1px solid #fff;}
    .hdTop .topMenu a img { display: inline-block;filter:brightness(5); margin-right:5px;}
    .hdTop .topMenu a:hover {background: inherit;}
    .hdTop .topMenu p {width:100%; color:#fff; margin-right: 0;}
    .hdTop .topMenu p img { display: inline-block; margin-right: 5px;height: 28px;}
    .hdTop .topMenu p.loginInfo img {width: 28px;height: 28px;}

    .mbGNB {display: block; position: relative; width: 40px; height: 34px; z-index: 200; cursor: pointer;}
    .mbGNB > div { display: block; margin-top: -2px; top: 2px; }
    .mbGNB > div, .mbGNB > div:after, .mbGNB > div:before { position: absolute; width: 40px; height: 4px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background: var(--color-main-red); }
    .mbGNB > div:before { top: 15px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform,opacity; }
    .mbGNB > div:after { top:30px; }
    .mbGNB > div:after, .mbGNB > div:before { display: block; content:''; }
    .is-active .mbGNB > div{ transform: translate3d(0,15px,0) rotate(45deg); }
    .is-active .mbGNB > div:before { transform: rotate(-45deg) translate3d(-5.71429px,-11px,0); opacity: 0; }
    .is-active .mbGNB > div:after { transform: translate3d(0,-30px,0) rotate(-90deg); }
    .is-active .hdTop .topMenu, .is-active .gnbWrap {opacity:1; transition: 0.2s all linear; display: block;}
    .hdTop .topMenu, .gnbWrap {opacity:0; transition: 0.2s all linear; display: none;}

    .gnbWrap {position: fixed; left: 0; top:154px; z-index: 200; width:100%; height:calc(100% - 154px); background:#fff; color:inherit; display: none;}
    .gnbWrap .gnb { width: 100%; display: block;box-sizing: border-box;height: 100%; padding: 1.5rem 0;}
    .gnbWrap .gnb:before {content: ''; width: 48%; height: 100%; background: var(--color-main-bg); position: absolute; left: 0; top: 0; z-index: -1;}
    .gnbWrap .gnb li {text-align: left;}
    .gnbWrap .gnb li.mbMenu {display: block;}
    .gnbWrap .gnb > li {display: flex;align-items: center; padding: 0.75rem 2rem;width: 48%;}
    .gnbWrap .gnb li > a {padding:0; font-size: 18px;}
    .gnbWrap .gnb li ul {position: fixed; left: 50%; top: 154px; width: 50%; padding: 1rem 1rem 0 2rem !important; height: auto !important; display: none;}
    .gnbWrap .gnb li ul:before {display: none;}
    .gnbWrap .gnb li ul > li + li {padding-top:1rem;}
    .gnbWrap .gnb > li.active {color: #fff;}
    .gnbWrap .gnb > li.active:before {content: ''; width: 104%; height: 100%; background: var(--color-main-red);  border-radius: 0 0 1rem 0; position: absolute; left: 0; top: 0; z-index: -1;}
    .gnbWrap .gnb > li.active .depth2 {display: block; height: auto;}
    .gnbWrap .gnb li ul > li > a {font-size: 16px; }
    .gnbWrap .gnb li:hover ul:before {display: none;}

    /* subpage */
    .left-wrap {display: none}
    .sub_page .wrap_inner {position: relative; ; margin-top: 30px;}
    .sub_page .wrap_inner .left-wrap {position: absolute; top: 20px; width: calc(100% - 40px); box-sizing: border-box; left: 50%;transform: translateX(-50%)}
    .sub_page .wrap_inner .left-wrap .snb .snb_wrap > li {display: none}
    .sub_page .wrap_inner .left-wrap .snb .snb_wrap > li:first-child {display: block}
    .sub_page .wrap_inner .left-wrap .snb .snb_wrap > li.active > a {font-size: 1.25rem}
    .sub_page .wrap_inner .left-wrap .snb li .depth2 {display: none; position: absolute; width: 100%; z-index: 99999}
    .sub_page .wrap_inner .right-wrap {width: 100%}

    .share-list {right: 0; left: auto; transform: translateX(0)}

    /* subpage - 글쓰기 */
    .write-board .regist_box {margin-top:2rem;}

    /* footer */
    .footer .wrap_inner {align-items: baseline;}
    .ftBot {margin-top: 2rem;}
    .ftBot .logo {width: 65px;}
    .ftBot .siteInfo {width: calc(100% - 65px); padding-left: 1.5rem;}
    .ftBot .siteInfo p + p {margin-top: 0;}
    .footer {padding:2rem 0;}
    .ftBot {margin-top:1rem;}
    #top {right: 1rem; bottom: 1rem}
    #top .top-btn {width: 50px; height: 50px; line-height: 50px; font-size: 1rem}

}

@media(max-width:970px){

    body {font-size: 15px;}

    /* header */
    .hdTop {padding: 1rem 0;}
    .hdTop h1 {/*width:120px;*/ width: 268px;}
    .hdTop .topMenu {top:85px;}
    .gnbWrap {top:141px; height:calc(100% - 141px);}

    /* footer */
    .ftBot .logo {left:88%;}

    /* subpage - 글쓰기 */
    .write-board .flex-wrap { align-items: baseline;}
    .write-board .regist_box.post_flex p {width: 120px;}
    .write-board .regist_box.post_flex p + div,
    .write-board .regist_box.post_flex p + div.dateList,
    .write-board .regist_box .small_input,
    .write-board .regist_box textarea.small {width: calc(100% - 120px);}
    .hashtagList input { width: calc((100% - 10px) / 3);}
    label {font-size: 16px; }
    .write-board .regist_box .thumbnailPhoto {margin-top: 0.5rem; }
    .write-board .regist_box .addThumbnailBtn {width: 180px;height: 180px;}
    .write-board .regist_box .thumbnail-img {height: 180px;}

    /* subpage - 글상세 */
    .view-board .extra_option li {padding: 0 1rem;}
    .view-board .comment_write textarea {padding:1rem;}
    .view-board .post_nav>div {padding: 0 1rem;}
    .view-board .post_nav p, .view-board .post_nav span {font-size: inherit;}
    .view-board .post_nav .icon_box {width: 16px; height: 16px;}
    .view-board .post_nav p {width: 80px; padding-left: 0.75rem;}
    .view-board .post_nav p.nav_title {width: calc(100% - 80px - 16px);}

}

@media(max-width:768px){

    body {font-size: 14px;}

    /* header */
    .hdTop {padding: 1rem 0; width:94%;}
    .hdTop .topMenu {top:76px;}
    .hdTop h1 {/*width:100px;*/ width: 226px;}
    .gnbWrap {top:132px; height:calc(100% - 132px);}
    .mbGNB {width:36px; height:30px;}
    .mbGNB > div, .mbGNB > div:after, .mbGNB > div:before {width:36px;}
    .mbGNB > div:before {top:13px;}
    .mbGNB > div:after {top:26px;}
    .is-active .mbGNB > div {transform:translate3d(0,13px,0) rotate(45deg);}
    .is-active .mbGNB > div:after {transform:translate3d(0,-26px,0) rotate(-90deg);}

    /* footer */
    .wrap_inner {width:94%;}
    .footer {padding:2rem 0;}
    .footer .wrap_inner {display: block}
    .footer .logo {width: 70px;}
    .ftBot {display: block;}
    .footer .ftInfo {width: 100%; margin-top: 4.5rem;}
    .ftBot {margin-top: 1rem;}
    .ftBot .logo {left: 0;top: -7.5rem;width: 50px;position: absolute;}
    .ftBot .siteInfo { width:100%; padding-left: 0;}
    .ftBot .siteInfo p + p {margin-top:0.125rem;}
    .ftTop .familySite {width: 124px;}
    .ftTop .familySite .blank {font-size:14px;}
    .ftTop .familySiteList li a {font-size:14px;}


    /* subpage */
    .sub_page .wrap_inner {padding: 0 4% 3.75rem;}
    .sub_page .section-title-wrap {padding-bottom:0.5rem}
    .sub_page .section-title-wrap > small {font-size: 14px; line-height: 1.2; margin-top:0; }
    .sub_page .section-title-wrap > small span {line-height: 1.2;}
    .section-title {font-size: 20px}
    .sub0101 .btn-zone a {padding: .3rem 1rem;}
    #select .blank {font-size: 14px}
    #select li a {font-size: 14px}
    .select-box {padding: 2rem;}
    .select-box ul {width: 100%; border-radius: 20px}
    .select-box > div {flex-direction: column; padding: 0;}
    .select-box > div + div {margin-top: 1.25rem;}
    .select-box > div p {padding-top: 0;}
    #pager ul, .pager ul {gap: 4px}
    #select .select-list {border-radius: 20px}
    .table_wrap {border-top: 2px solid var(--color-main-red);}
    .table_body.pc {display: none;}
    .table_body.mb {display: block;}
    .table_wrap .table_head {display: none;}
    .table_wrap .table_list li:not(:last-child) {border-right: none;}
    .table_wrap .table_head li:first-child, .table_wrap .table_list li:first-child {width: 30px;}
    .table_wrap .table_list {font-size: inherit;}
    .table_wrap li.num {width: 50px;}
    .table_wrap .table_list .title .txt {font-size: 16px; margin-top: -3px; display: inline-block;}
    .table_wrap li.dataInfo {width: calc(100% - 50px - 30px); justify-content: flex-start; flex-wrap: wrap; padding: 1rem 0 1rem 0.5rem; position: relative;}
    .table_wrap .table_body.mb .title {width: 100%; font-weight: 600; padding: 0; margin-bottom:0.5rem; }
    .table_wrap .table_body.mb .title .cate {padding: 4px 0.75rem; font-size: 13px;}
    .table_wrap .table_body.mb .writer {width: auto; font-size: inherit; padding:0;}
    .table_wrap .table_body.mb .writer span {display: inline-block; font-size: inherit;}
    .table_wrap .table_body.mb .writer .nickname, .table_wrap .table_body.mb .writer .nickname-id {width: auto; max-width:100%; color:#666;}
    .table_wrap .table_body.mb .bot {display: flex; align-items: center; justify-content: space-between;}
    .table_wrap .table_body.mb .date, .table_wrap .table_body.mb .download_num, .table_wrap .table_body.mb .preview, .table_wrap .table_body.mb .download {width: auto;}
    .table_wrap .table_body.mb .date {padding-left: 0.75rem; margin-left:0.75rem; position: relative; color:#666;}
    .table_wrap .table_body.mb .date:before {content:''; width: 1px; height:1rem; background:#999; position: absolute; left: 0; top:50%; transform:translateY(-50%);}
    .table_wrap .table_body.mb .btn-wrap {display: flex; gap:0.5rem;  position: absolute; right: 0; bottom:0.625rem;}
    .table_wrap .table_body.mb .download_num {line-height: 34px; color:#666;}
    .table_wrap .table_body.mb .preview button, .table_wrap .table_body.mb .download button {background:#fff6ee;}
    .table_wrap .table_list .preview_btn:after, .table_wrap .table_list .download_btn:after {width:18px; height: 18px; background-size: contain; }
    .table_wrap .table_body.mb .preview_btn:hover, .table_wrap .table_body.mb .download_btn:hover {background: var(--color-main-red);}
    .write-board .regist_box .small_input {width: 100%;}
    .write-board .regist_box.post_flex p + div, .write-board .regist_box.post_flex p + div.dateList, .write-board .regist_box .small_input, .write-board .regist_box textarea.small {width: 100%;}
    #pager, .pager {width: 100%;}
    #pager ul, .pager ul {flex-wrap: wrap;}
    #pager ul li a, .pager ul li a {width: 24px;
        height: 24px;}


    /* subpage - 글쓰기 */
    .write-board .flex-wrap {flex-wrap: wrap;}
    .write-board .regist_box .flex-box {width: 46%; display: flex; align-items: baseline;}
    .write-board .regist_box .flex-box:nth-child(3), .write-board .regist_box .flex-box:nth-child(4) {margin-top: 1.5rem;}
    .write-board .regist_box .flex-box p {width: 80px;}
    .write-board .regist_box select {width: calc(100% - 80px); font-size: inherit;}
    .write-board .regist_box.post_flex p.flex-title {width: 100%; margin-bottom: 0.5rem; line-height: inherit;}
    .write-board .regist_box.post_flex p + div {width:100%;}
    .write-board .regist_box {margin-top: 1.5rem;}
    .write-board .regist_box .addThumbnailBtn {width: 160px; height: 160px; background-size: 60px; padding-top: 6.25rem; font-size: 18px;}
    .write-board .regist_box .addThumbnail .thumbnail-img {height: 160px;}
    .view-board .comment_wrap .comment_list li.child-reply { padding: 1.25rem 0 1.25rem 1.25rem;}

    /* 닉네임 팝업 */
    .nickname_popup .table_wrap .table_body .table_list {flex-direction: column; padding: .3rem;text-align: left;}
    .nickname_popup .table_wrap .table_body li.menu {width: 100%; justify-content: flex-start; padding: .5rem}
    .nickname_popup .table_wrap .table_body li.date {width: 100%; justify-content: flex-start; padding: .5rem}
    .nickname_popup .table_wrap .table_body li.title {width: 100%; padding-top: .5rem;display: block;}
    .nickname_popup .table_wrap .table_body li.title span {vertical-align: middle;width: auto;display: inline;line-height: 1.6;}
    .nickname_popup .table_wrap .table_list li.title .cate {width:auto; padding: 4px 0.75rem; font-size: 13px;}
    .nickname_popup .table_wrap .table_list .m_none {display: none !important}
    .nickname_popup .table_wrap .table_list .pc_none {display: block !important;}

    .nickname_popup .class-tip {width: 90%}
    .sub0101 .section2 .class-zone .class-list .box .bot_data {right: auto;left: 1rem;bottom:1rem; display: block;width: calc(100% - 2rem);}
    .sub0101 .section2 .class-zone .class-list .box .right {justify-content: flex-end;margin-top: 0.25rem;}
    .sub0101 .section2 .class-zone .class-list .box > a .tag-box {margin-bottom: 1.625rem;}

}

@media(max-width:640px){

    /* header */
    .gnbWrap .gnb > li {padding:0.75rem 1.25rem;}
    .gnbWrap .gnb li > a { font-size:17px;}
    .gnbWrap .gnb li ul { padding: 1rem 1rem 0 1.75rem;}
    .hdTop .loginInfo span.mb_none {display: none;}

    /* footer */
    .footer {padding:2rem 0 5rem;}
    .ftBot .logo {top:-7rem;}
    .ftTop .familySite {position: absolute;left: 2%;bottom: 2rem;}


    /*subpage*/
    .select-box ul li {padding: .3rem 1rem;}
    .table_wrap li.num {width:40px;}
    .table_wrap li.dataInfo {width:calc(100% - 40px - 30px);}
    .table_wrap .table_list button, .table_wrap .table_list .download_btn {width:30px; height:30px;}
    .table_wrap .table_body.mb .download_num {line-height: 30px;}

    /* subpage - 글쓰기 */
    input[type=text], input[type=password] { padding: 0 10px; height: 38px;}
    .write-board .regist_box .flex-box p {width: 70px;}
    .write-board .regist_box select {width: calc(100% - 70px);}
    .write-board-bg {padding:1.5rem; margin-top: 1.5rem;}
    .write-board .regist_box textarea {padding:10px;}
    .write-board .regist_box .upload_btn {width: 100px; height: 34px }
    label {font-size: inherit;line-height: inherit;}
    .view-board .post_num li.share {margin-right:0;}


    /* subpage - 글상세 */
    .view-board .board-category p {padding: 3px 1.125rem 2px; font-size: 13px;}
    .view-board .board-title-wrap {padding: 1.25rem 1.25rem 1rem;}
    .view-board .board-title-wrap .board-title-info .cate-title {font-size: inherit;}
    .view-board .board-title-wrap .board-title-info .sub-title {font-size: inherit;}
    .view-board .board-title-wrap .board-title-info .board-title {font-size: 1rem; margin-top: 0.5rem;}
    .view-board .board-title-wrap .board-title-info {margin-bottom: 0.75rem; padding-bottom: 0.75rem;}
    .view-board .view-board-con .post {padding: 2rem 0;}
    .view-board .extra_option p {width: 65px;  height: 28px; font-size: 13px;margin-right: 0.5rem;}
    .view-board .extra_option .right button, .view-board .extra_option .right a {width: 32px; height: 32px; background-size: 16px;}
    .view-board .extra_option .download_btn {margin-left: 0.5rem;}
    .view-board .extra_option li {padding:0 0.625rem;}
    .view-board .post_num {margin-top: 2.5rem;}
    .view-board .post_num li {margin-right:0.75rem;}
    .view-board .comment_write textarea {margin: 0.75rem 0;}
    .view-board #pager, .view-board .post_nav, .view-board .pager {margin-top:2.5rem;}
    .view-board .post_nav p {width:70px;}
    .view-board .post_nav p.nav_title {width: calc(100% - 70px - 16px);}


}

@media(max-width:580px){
    /* 닉네임 팝업 */
    .nickname_popup .inquiry .writer .id {font-size: 1.125rem;}
    .nickname_popup .inquiry .img-box {display: none}
}

@media(max-width:480px){

    /* header */
    .gnbWrap .gnb > li {padding:0.75rem 1.125rem;}
    .gnbWrap .gnb li > a { font-size:16px;}
    .gnbWrap .gnb li ul { padding: 1rem 1rem 0 1.375rem;}
    .hdTop .topMenu .loginAfter p {width: 100%;}
    /*.hdTop .topMenu .loginAfter a.logout {width: 110px;}*/
    .hdTop .topMenu .loginAfter a.logout:hover {
        background: var(--color-main-red);}

    /* footer */
    .footer {padding:2rem 0 4.5rem;}
    .footer .logo {width: 60px;}
    .footer .ftInfo {margin-top: 5rem;}
    .ftTop .snsList li a { width: 26px;}
    .ftTop .siteWrap {bottom: 1.5rem;}
    .ftTop .familySite {left:3%;}
    .ftTop .familySite .blank {padding:0 0.625rem; line-height: 30px; background-position-x:92%; }
    .ftTop .familySiteList {bottom:30px;}
    .ftTop .familySiteList li a {line-height:30px; padding:0 0.625rem;}
    .ftTop .ftMenu {letter-spacing: -0.5px;}
    .ftTop .ftMenu li + li {margin-left:0.5rem;}
    .siteInfo {letter-spacing: -0.5px;}
    .ftBot{margin-top: 0.5rem;}
    .ftBot .siteInfo p {word-break: keep-all;}
    .ftBot .siteInfo p + p {margin-top:0;}
    #top {display:none;left: 50%; bottom: 20px; transform: translateX(-50%); right: auto}
    #top .top-btn {width: 40px; height:40px; line-height: 40px; font-size: .7rem}

    /* subpage */
    input[type=date] {height: 40px; padding:0 10px;}
    .sub_page .section-title-wrap {border-bottom: none; padding-bottom: 0;}
    .sub_page .wrap_inner {margin-top: 1rem;}
    .select-box {padding: 1.5rem;}
    .table_wrap .table_body.mb .writer {width:100%;margin-bottom: 0.25rem;}
    .table_wrap .table_body.mb .date {padding-left: 0; margin-left: 0;}
    .table_wrap .table_body.mb .date:before {display: none;}
    .table_wrap .table_body.mb .btn-wrap {bottom:0.875rem;}
    .table_wrap .table_body.mb .bot {width:100%;}
    .table_wrap .table_body.mb .title .cate {padding: 3px 0.5rem;}
    .popup .popup_inner {min-width: 90%;}
    .popup .popup_inner .popup_body {padding:2rem 1.5rem;}


    /* subpage - 글쓰기 */
    .write-board .regist_box .flex-box {width: 100%;}
    .write-board .regist_box .flex-box:nth-child(2) {margin-top: 1.5rem;}
    .write-board .regist_box .flex-box p {width: 85px;}
    .write-board .regist_box select {width: calc(100% - 85px);}
    .write-board .regist_box .addThumbnailBtn {width: 120px;height: 120px;background-size: 38px;padding-top: 4.5rem;font-size: 16px;background-position-y: 1.75rem;}
    .write-board .regist_box .addThumbnail .thumbnail-img {height: 120px;margin-left: 0.5rem;}
    .write-board .regist_box .thumbnail-img .delete_btn {width:20px; height: 20px; right: 0.75rem; top: 0.75rem;}
    .write-board .regist_box .upload_btn {width: 90px; height: 30px;font-size: inherit;}
    .write-board .regist_box .loaded_files {margin-top:0;}
    .write-board .regist_box.post_url input {width: calc(100% - 30px);}
    .write-board .regist_box.post_url button {width: 20px; height: 20px;}
    .write-board .regist_box.post_flex .noti.upload-guide-text {display: block;line-height: 1.4;margin: 0.5rem 0;}

    /* subpage - 글상세 */
    .view-board .board-member-wrap {font-size: 13px;}
    .view-board .board-title-wrap {padding:1.125rem 1.125rem 0.75rem;}
    .view-board .post_nav .icon_box {width: 12px;height: 12px;}
    .view-board .post_nav p {width: 60px;}
    .view-board .post_nav p.nav_title {width: calc(100% - 60px - 12px);}
    .view-board .post_nav .icon_box + p {color:#000;}
    .view-board .comment_control .date {margin-left: 0.5rem; letter-spacing: -0.5px;}
    .view-board .comment_control button:not(:first-child) {margin-left: 12px;}
    .view-board .comment_control button:not(:first-child)::before {left: -6px;}
    .view-board .comment_wrap .comment_list li.child-reply {padding: 1.25rem 0 1.25rem 1rem;}
    .view-board .comment_write.reply .name::before, .view-board .comment_list .reply .name::before {width: 16px;height: 16px;}

    /* 임시저장 팝업 */
    #popup_storage.popup .pop_txt {display: flex; flex-direction: column;  font-size: 1rem}
    #popup_storage.popup {min-width: auto; max-width:330px}

    /* 닉네임 팝업 */
    .nickname_popup .inquiry {padding: 1rem;}
    .nickname_popup .inquiry .writer .id {font-size: 1rem;}
    .nickname_popup .class-tip {padding: 5rem 1.5rem 2rem;}
    .nickname_popup .inquiry .writer {width: 100%;}
    .nickname_popup .inquiry .writer span {letter-spacing: -1px;}
    .nickname_popup .inquiry .writer span + span {padding-left: 16px;}
    .nickname_popup .inquiry .writer span:after {right: -10px;top: 1px;}
}

@media(max-width:400px){
    /* footer */
    /*.footer {padding:1.625rem 0 4rem;}*/
    .ftBot .logo {top:-8.5rem;}
    .ftTop .ftMenu li {width: calc(100% / 3);}
    .ftTop .ftMenu li + li {margin-left: -4px;}
    .ftTop .ftMenu li:nth-child(4n) {margin-left: 0;}
    .ftBot {margin-top: 0.75rem;}
}

@media(max-width:380px){
    .nickname_popup .inquiry .writer span + span {padding-left: 12px;}
    .nickname_popup .inquiry .writer span:after {right: -8px;}
}