@charset "utf-8";
/* leftBoard */
.leftBoard {width: 116rem; max-width: 116rem;}
.leftBoard.type2 {width: 100%; max-width: 100%;}

/* rightBoard */
.rightBoard {width: calc(100% - 123rem);}

/* htoListCnt */
li.htoListCnt {width: 100% !important; border-radius: 0 !important; border: none !important; background: transparent !important; font-size: 2.2rem !important; text-align: center !important;}

/* searchArea */
.searchArea {display: flex; align-items: flex-end; justify-content: flex-end; margin-bottom: 3.5rem; gap: 2rem;}
.searchArea .selectWrap form {display: flex; gap: 2rem;}
.searchArea select {display: block; border: none; border-bottom: 3px solid #303030; width: 12rem; font-size: 1.6rem; padding-bottom: 1.1rem; color: #1a1a1a; font-family: var(--CoreDream); -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('/kids/images/board/board_select_arr.png') right 3px top 11px no-repeat; font-weight: 500;}
.searchArea .search {display: flex; width: 20.5rem; box-sizing: border-box; border-bottom: 3px solid #303030;}
.searchArea .search input {display: block; width: 100%; border: none; font-size: 1.6rem; color: #989898;  padding: 0 0 14px 4px; box-sizing: border-box; background: transparent;}
.searchArea .search input[type="image"] {width: auto;}
.searchArea .search label {display: none;}
.searchArea .btn_pack input {display: block; border: none; background: #000; color: var(--white); font-family: var(--CoreDream); font-size: 1.6rem; width: 7.3rem; height: 100%; border-radius: 7px; cursor: pointer;}

/* hoverArea */
.boardArea .hoverArea {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(43,133,196,0.6); opacity: 0; transition: all 0.3s;}
.boardArea .noCont {font-size: 2rem; padding-top: 5rem; text-align: center;}
.boardArea .hoverArea .info {display: flex; align-items: center; gap: 3.2rem; margin-top: 4rem; color: var(--white);}
.boardArea .hoverArea .info li {display: flex; align-items: center; gap: 1.5rem; font-size: 1.8rem;}
.photoBoard>li:hover a .tunmbnailArea .hoverArea,
.monthBoard>li:hover a .tunmbnailArea .hoverArea {opacity: 1;}

/* boardArea */
.boardArea {display: flex; gap: 7rem;}
.boardArea.type2 {display: block;}

/* boardList */
.boardList {display: flex; gap: 3rem; row-gap: 4rem; flex-wrap: wrap;}
.boardList>li {width: calc(50% - 1.5rem); transition: all 0.3s;}
.boardList>li:hover {transform: translateY(-1rem);}
.boardList>li a {display: block; padding: 3.5rem 2.5rem 4rem 4rem; box-sizing: border-box; border-radius: 30px; border: 1px solid #e8e8e8; background: rgba(255,255,255,0.85);}
.boardList>li a span.category {display: inline-block; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 500; color: var(--white); border-radius: 5px; padding: 0.9rem 1.5rem; box-sizing: border-box; margin-bottom: 1.5rem;}
.boardList>li a span.category.type1 {background: #e42d73;}
.boardList>li a span.category.type2 {background: var(--green);}
.boardList>li a span.category.type3 {background: var(--blue);}
.boardList>li a span.category.type4 {background: #e0782d;}
.boardList>li a span.category.type5 {background: #9040da;}
.boardList>li a span.category.type6 {background: #000d4e;}
.boardList>li a .tit {font-size: 2.4rem; margin-bottom: 2.5rem;}
.boardList>li a .cont {display: flex; gap: 4rem; justify-content: space-between; align-items: center;}
.boardList>li a .cont .txt {font-size: 1.7rem; line-height: 2.6rem; color: #555555; margin-bottom: 3.5rem;}
.boardList>li a .cont .user {display: flex; gap: 1.2rem; align-items: center;}
.boardList>li a .cont .user .img {width: 4.1rem; height: 4.1rem; border-radius: 50%; overflow: hidden; flex-shrink: 0;}
.boardList>li a .cont .user .img img {width: 100%; height: 100%; object-fit: cover;}
.boardList>li a .cont .user .name {font-size: 1.8rem; word-break: break-all;}
.boardList>li a .cont .tunmbnailArea {width: 19.5rem; height: 14.6rem; flex-shrink: 0; position: relative; border-radius: 10px; overflow: hidden;}
.boardList>li a .cont .tunmbnailArea>img {width: 100%; height: 100%; object-fit: cover;}
.boardList>li a .cont .tunmbnailArea.video::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('/kids/images/board/board_video_icon.png') no-repeat; background-size: 100%; width: 4.3rem; height: 4.3rem; z-index: 1;}
.boardList>li a .cont .tunmbnailArea .infoBox {position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem 1.3rem; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 1rem; background: rgba(0,0,0,0.38);}
.boardList>li a .cont .tunmbnailArea .infoBox li {font-size:1.4rem; display: flex; align-items: center; gap: 0.5rem; color: var(--white);}
.boardList.type2 {gap: 4rem;}
.boardList.type2>li {width: calc(50% - 2rem);}

/* 탑텐 기사 */
.topTen .basicText {font-size: 2rem; text-align: center; margin-bottom: 5rem;}
.topTenBox {position: relative; display: flex; gap: 3rem; margin-bottom: 12rem;}
.topTenBox::before {content: ''; position: absolute; bottom: -7rem; left: 50%; transform: translateX(-50%); background: url('/kids/images/layout/cont_bg_type2.png') no-repeat; width: 258.5rem; height: 31rem; background-size: 100%; z-index: -1;}
.topTenBox::after {content: ''; position: absolute; bottom: 12rem; right: -11.5rem; background: url('/kids/images/board/board_text_boogi.png') no-repeat; background-size: 100%; width: 14.3rem; height: 15.7rem; z-index: -1;}
.topTenBox .topTen {width: calc(50% - 1.5rem);}
.topTenBox .topTen>li {width: 100%;}
.topTenBox .topTen:nth-child(2) {flex-direction: column;}
.boardList.topTen:nth-child(3) {margin-bottom: 9rem;}
.boardList.topTen>li a>.title {display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem;}
.boardList.topTen>li a .tit {margin-bottom: 0;}
.boardList.topTen>li a .cont .user {flex-wrap: wrap;}
.boardList.topTen>li a .cont .user .badge {display: flex;}
.boardList.topTen>li a .cont .user .badge img {width: 4rem;}
.boardList.topTen:first-child>li.top1 a {height: 100%;}
.boardList.topTen:first-child>li.top1 a .tunmbnailArea {height: 37rem; border-radius: 10px; overflow: hidden; position: relative; margin-bottom: 3rem;}
.boardList.topTen:first-child>li.top1 a .tunmbnailArea .rank {position: absolute; top: 1.4rem; left: 3rem;}
.boardList.topTen:first-child>li.top1 a .tunmbnailArea>img {width: 100%; height: 100%; object-fit: cover;}
.boardList.topTen:first-child>li.top1 a .tunmbnailArea .title {width: 100%; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.6); padding: 1.5rem 2rem; box-sizing: border-box; display: flex; justify-content: space-between;}
.boardList.topTen:first-child>li.top1 a .tunmbnailArea .title p {width: 60%; font-size: 2.2rem; color: var(--white);}
.boardList.topTen:first-child>li.top1 a .tunmbnailArea .title .infoBox {display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 2rem; row-gap: 1rem;}
.boardList.topTen:first-child>li.top1 a .tunmbnailArea .title .infoBox li {font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; color: var(--white);}

/* newsList */
.rightBoard .newsList {padding-top: 10rem;}
.rightBoard .newsList .title {font-size: 2.5rem; margin-bottom: 3.5rem;}
.rightBoard .newsList .list li:not(:last-of-type) {margin-bottom: 2.5rem;}
.rightBoard .newsList .list li a {display: flex; align-items: center; gap: 1.5rem;}
.rightBoard .newsList .list li a:hover {text-decoration: underline;}
.rightBoard .newsList .list li .tit {font-size: 1.8rem; color: #212020;}
.rightBoard .newsList .topNews {margin-bottom: 8.5rem;}
.rightBoard .newsList .topNews .title {color: var(--blue2);}
.rightBoard .newsList .moreNews .title {color: var(--green2);}

/* boardViewArea */
.boardViewArea {position: relative; padding-top: 6.8rem; margin-bottom: 5.5rem; overflow: hidden;}
.boardViewArea::before {content: ''; position: absolute; top: 0; left: 0; background: url('/kids/images/board/board_view_title_bg.png') center no-repeat; background-size: cover; width: 100%; height: 6.8rem;}
.boardViewArea .viewContWrap {position: relative; display: flex; border-radius: 0 0 5rem 5rem; overflow: hidden; background: rgba(244,242,247,0.7); padding-bottom: 6rem;}
.boardViewArea .viewCont {width: 77%; padding: 0 5.5rem 0 7rem; box-sizing: border-box; border-right: 1px solid var(--black);}
.boardViewArea .viewCont .title {font-size: 3rem; margin-bottom: 3.8rem; line-height: 1.2; word-break: keep-all; text-align: center;}
.boardViewArea .viewCont .viewInfo {display: flex; flex-wrap: wrap; row-gap: 1.5rem; justify-content: space-between; padding: 1.5rem 1.2rem; margin-bottom: 2.5rem; box-sizing: border-box; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black);}
.boardViewArea .viewCont .viewInfo .list {display: flex; flex-wrap: wrap; align-items: center; gap: 4.8rem; row-gap: 1.5rem;}
.boardViewArea .viewCont .viewInfo .date,
.boardViewArea .viewCont .viewInfo .list li {display: flex; align-items: center; gap: 3.2rem;}
.boardViewArea .viewCont .viewInfo .tit {position: relative; display: flex; flex-shrink: 0; align-items: center; gap: 1.5rem; font-size: 2rem; font-weight: 600;}
.boardViewArea .viewCont .viewInfo .tit::before {content: ''; position: absolute; top: 3px; right: -1.6rem; width: 1px; height: 1.6rem; background: #c8c7c9;}
.boardViewArea .viewCont .viewInfo .date .tit::before,
.boardViewArea .viewCont .viewInfo li:last-child .tit::before {top: 7px;}
.boardViewArea .viewCont .viewInfo .txt {font-size: 1.8rem;}
.boardViewArea .viewCont .viewText {position: relative;}
.boardViewArea .viewCont .viewText .se-image img {max-width: 100% !important; height: auto !important;}
.se-drawing-object-wrapper.se-image{max-width:100%;}
.se-caption{max-width:100%;}
.boardViewArea .viewCont .viewText .img {width: 100%;}
.boardViewArea .viewCont .viewText .img2 {display: flex; gap: 0.5rem;}
.boardViewArea .viewCont .viewText .img img {width: 100%; object-fit: cover;}
.boardViewArea .viewCont .viewText .img2 img {width: calc(50% - 0.25rem);}
.boardViewArea .viewCont .viewText p {font-size: 1.8rem; line-height: 3rem;}
.boardViewArea .profileCont {width: 36rem; padding: 3rem 4.5rem 0 4rem; box-sizing: border-box; flex-shrink: 0;}
/* 공유하기 */

.boardViewArea .viewCont .viewText .shareList {width: 31rem; padding: 1.3rem 0; border: 1px solid #dbdbdb; box-sizing: border-box; border-radius: 32px; background: var(--white); display: none; align-items: center; gap: 1.7rem;  position: absolute; right: 0; top: -1rem; justify-content: center;}
.boardViewArea .viewCont .viewText .shareList.on {display: flex; z-index: 99;}
.boardViewArea .viewCont .viewText .shareList a {display: block; font-size: 0;}
.boardViewArea .viewCont .viewText .shareList .shareClose {display: block; width: 1.9rem; height: 1.9rem; background: url('/kids/images/board/share_close.png') no-repeat; background-size: 100%; font-size: 0; cursor: pointer;}
.boardViewArea .profileCont .userProflie {margin-bottom: 7.5rem;}
.boardViewArea .profileCont .proflie {display: flex; flex-direction: column; align-items: center; position: relative; margin-bottom: 3rem;}
.boardViewArea .profileCont .proflie::before {content: ''; position: absolute; top: -0.2rem; right: 4.5rem; background: url('/kids/images/board/profile_assets2.png') no-repeat; background-size: 100%; width: 13.7rem; height: 13.9rem;}
.boardViewArea .profileCont .proflie::after {content: ''; position: absolute; top: 0; left: 0.2rem; background: url('/kids/images/board/profile_assets.png') no-repeat; background-size: 100%; width: 2.9rem; height: 2.6rem;}
.boardViewArea .profileCont .proflie .img {position: relative; width: 15.7rem; height: 15.7rem; border-radius: 50%; overflow: hidden; box-shadow: 6px 0 7px rgba(0,0,0,0.17);}
.boardViewArea .profileCont .proflie .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.boardViewArea .profileCont .proflie p {position: absolute; bottom: -0.5rem; left: 50%; transform: translateX(-50%); color: var(--white); font-size: 1.5rem; width: 100%; text-align: center;}
.boardViewArea .profileCont .proflie p span {font-size: 1.8rem;}
.boardViewArea .profileCont .proflie p::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-46%, -46%); width: 15.4rem; height: 4.6rem;background: url('/kids/images/board/profile_type1_bg.png'); background-size: 100%; z-index: -1;}
.boardViewArea .profileCont .name {display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.8rem;}
.boardViewArea .profileCont .name p {font-size: 3rem;}
.boardViewArea .profileCont .name p span {font-size: 1.8rem;}
.boardViewArea .profileCont .badgeList {display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem;}
.boardViewArea .profileCont .badgeList img {width: 6rem;}
.boardViewArea .profileCont .txt {padding: 2.5rem 3rem; box-sizing: border-box; background: var(--white); border-radius: 15px; font-size: 1.6rem; line-height: 1.2; margin-bottom: 2.3rem;}
.boardViewArea .profileCont .blogLink {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.6rem 3.5rem; box-sizing: border-box; border-radius: 1.5rem; background: var(--blue3); color: var(--white); font-size: 1.6rem;}
.boardViewArea .profileCont .blogLink img {transform: translateY(-1px); transition: all 0.3s;}
.boardViewArea .profileCont .blogLink:hover img {transform: translate(1rem, -1px);}
.boardViewArea .profileCont .userNewsList .tit {position: relative; font-size: 2rem; margin-bottom: 1rem; padding-left: 4rem; box-sizing: border-box; line-height: 1.3;}
.boardViewArea .profileCont .userNewsList .tit::before {content: ''; position: absolute; top: 0.3rem; left: 0.8rem; background: url('/kids/images/board/news_list_icon.png') no-repeat; background-size: 100%; width: 2.1rem; height: 1.9rem;}
.boardViewArea .profileCont .userNewsList .tit span {color: var(--green3);}
.boardViewArea .profileCont .userNewsList .list li a {display: block; position: relative; padding: 2rem 0 1rem 3rem; box-sizing: border-box; border-bottom: 1px solid #e9e9e9; color: #222222; font-size: 1.6rem;}
.boardViewArea .profileCont .userNewsList .list li a:hover {text-decoration: underline;}
.boardViewArea .profileCont .userNewsList .list li a::before {content: ''; position: absolute; top: 2.6rem; left: 1.4rem; width: 0.4rem; height: 0.4rem; background: var(--black);}
.boardViewArea.type2 {padding-top: 0;}
.boardViewArea.type2::before {display: none;}
.boardViewArea.type2 .textArea {border-top: 1px solid #000; border-bottom: 1px solid #000; margin-bottom: 2.5rem;}
.boardViewArea.type2 .textArea .title {padding: 3.5rem 4.5rem 2.5rem 4.5rem; box-sizing: border-box; background: #f7f6f9; border-bottom: 1px dashed #b1b1b1; font-size: 1.8rem;}
.boardViewArea.type2 .textArea .title .tit {font-size: 3rem; margin-bottom: 4rem; line-height: 1.2;}
.boardViewArea.type2 .textArea .title .info {display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; row-gap: 1.5rem;}
.boardViewArea.type2 .textArea .title .info li {display: flex; align-items: center; gap: 3rem;}
.boardViewArea.type2 .textArea .title .info li div {display: flex; align-items: center; gap: 1.3rem;}
.boardViewArea.type2 .textArea .title .info li p {position: relative; font-weight: 600;}
.boardViewArea.type2 .textArea .title .info li p::before {content: ''; position: absolute; top: 2px; right: -1.3rem; width: 1px; height: 1.6rem; background: #878787;}
.boardViewArea.type2 .textArea .list li {display: flex; padding: 1.8rem 4.5rem; box-sizing: border-box; font-size: 1.8rem;}
.boardViewArea.type2 .textArea .list li:not(:last-of-type) {border-bottom: 1px dashed #878787;}
.boardViewArea.type2 .textArea .list li div {width: 50%; display: flex; flex-wrap: wrap; gap: 4.5rem; row-gap: 2rem;}
.boardViewArea.type2 .textArea .list li div .tit {flex-shrink: 0; font-weight: 600; position: relative;}
.boardViewArea.type2 .textArea .list li div .tit::before {content: ''; position: absolute; top: 1px; right: -2.4rem; width: 1px; height: 1.6rem; background: #878787;}
.boardViewArea.type2 .textArea .list li .txt.img {width: 13.4rem;}
.boardViewArea.type2 .textArea .list li .txt.img img {width: 100%; object-fit: cover;}
.boardViewArea.type2 .textArea .list li.file div {align-items: center;}
.boardViewArea.type2 .textArea .list li.file .txt {display: flex; align-items: center; gap: 1.8rem;}
.boardViewArea.type2 .textArea .list li.file .txt .pdf {width: 9.2rem; padding: 1rem 0; background: #212121; color: var(--white); text-align: center; font-size: 1.6rem; flex-shrink: 0;}
.boardViewArea.type2 .viewCont {width: 100%; max-width: 108.3rem; padding: 0 4.5rem; border-right: 0; margin-bottom: 6rem;}
.boardViewArea.type2 .viewCont.qna {padding: 6rem 4.5rem; max-width: 100%;}
.boardViewArea.type2 .boardPrevNext {border-top: 1px solid #000000;}
.boardViewArea.type2 .boardPrevNext li a {display: flex; align-items: center; justify-content: space-between; font-size: 2rem; border-bottom: 1px solid #000000; box-sizing: border-box; padding: 2rem 4.5rem; box-sizing: border-box;}
.boardViewArea.type2 .boardPrevNext li a div {display: flex; align-items: center; gap: 4rem; width: 80%;}
.boardViewArea.type2 .boardPrevNext li a div span {flex-shrink: 0; font-weight: 600; position: relative;}
.boardViewArea.type2 .boardPrevNext li a div span::before {content: ''; position: absolute; top: 1px; right: -1.2rem; width: 1px; height: 1.6rem; background: #cdcdcd;}
.boardViewArea.type2 .boardPrevNext li a .date {color: #5a5a5a;}
.boardViewArea.type2.qna .btnFlex {padding: 4.5rem 0; border-top: 1px solid var(--black);}

/* boardWriteArea */
.boardWriteArea {width: 100%; max-width: 140rem; margin: 0 auto 5rem auto;}
.boardWriteArea .boardWrite {border-top: 1px solid #000; border-bottom: 1px solid #000; margin-top: 2rem;}
.boardWriteArea .boardWrite li {display: flex;}
.boardWriteArea .boardWrite li:not(:last-of-type) {border-bottom: 1px dashed #b1b1b1;}
.boardWriteArea .boardWrite li .title {display: flex; align-items: center; justify-content: center; width: 26.4rem; padding: 3rem 0; background: #f7f6f9; text-align: center; font-size: 2rem; font-weight: 600;}
.boardWriteArea .boardWrite li .inputWrap {width: calc(100% - 26.4rem); padding: 2rem 2.5rem; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap;}
.boardWriteArea .boardWrite li .inputWrap .inputArea {display: flex; flex-wrap: wrap; align-items: center;}
.boardWriteArea .boardWrite li .inputWrap input {height: 4rem; border: 1px solid #dbdbdb; box-sizing: border-box; font-family: var(--CoreDream); font-size: 1.6rem; padding-left: 2rem;}
.boardWriteArea .boardWrite li .inputWrap input[type="file"] {border: none; padding-left: 0;}
.boardWriteArea .boardWrite li .inputWrap input[type="file"]:not(:last-of-type) {margin-bottom: 1rem;}
.boardWriteArea .boardWrite li .inputWrap input[type="file"]::file-selector-button {cursor: pointer;}
.boardWriteArea .boardWrite li .inputWrap p {font-size: 1.6rem;}
.boardWriteArea .boardWrite li button.btn,
.boardWriteArea .boardWrite li .inputWrap input[type="file"]::file-selector-button {display: inline-block; border: none; font-size: 1.6rem; color: var(--white); background: #212121; padding: 0 2.2rem; box-sizing: border-box; height: 4rem; font-family: var(--CoreDream);}
.boardWriteArea .boardWrite li .inputWrap select {display: inline-block; height: 4rem; border: 1px solid #dbdbdb; padding: 0 4rem 0 2rem; box-sizing: border-box; font-family: var(--CoreDream); font-size: 1.6rem; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: url('/kids/images/board/board_select_arr.png') right 1.5rem center no-repeat;}
.boardWriteArea .boardWrite li .inputWrap.flex {flex-wrap: wrap; align-items: center; gap: 6rem; row-gap: 1.5rem;}
.boardWriteArea .boardWrite li .inputWrap.flex.type2 {gap: 3rem;}
.boardWriteArea .boardWrite li .inputWrap .address {gap: 2.4rem;}
.boardWriteArea .boardWrite li .inputWrap .address .inputArea {width: calc(50% - 1.2rem);}
.boardWriteArea .boardWrite li.cont .inputArea textarea {display: inline-block; width: 100%; border: 1px solid #dbdbdb; font-family: var(--CoreDream); font-size: 1.6rem;}
.boardWriteArea.type2 {max-width: 100%; margin: 0;}
.boardWriteArea.type2 .boardWrite {display: flex; flex-wrap: wrap; border-bottom-color: #dbdbdb;}
.boardWriteArea.type2 .boardWrite li {width: 100%;}
.boardWriteArea.type2 .boardWrite li:not(:last-of-type) {border-bottom: 1px solid #dbdbdb;}
.boardWriteArea.type2 .boardWrite li .title {background: rgba(237,237,237,0.5);}
.boardWriteArea.type2 .boardWrite li button.btn {background: #848484;}
.boardWriteArea.type2 .boardWrite li.cont .inputArea {margin-bottom: 2rem;}
.boardWriteArea.type2 .boardWrite li.cont .inputArea,
.boardWriteArea.type2 .boardWrite li.cont .inputArea textarea {height: 22rem;}

/* photoBoard */
.photoBoard {display: flex; flex-wrap: wrap; gap: 4rem; margin-bottom: 4.5rem;}
.photoBoard>li {width: calc(25% - 3rem); border-radius: 30px; border: 1px solid #e8e8e8; background: var(--white); overflow: hidden; box-sizing: border-box; transition: all 0.3s;}
.photoBoard>li:not(.htoListCnt):hover {box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.1);}
.photoBoard>li a {display: block;}
.photoBoard>li a .tunmbnailArea {position: relative; height: 28rem; border-radius: 30px; overflow: hidden;}
.photoBoard>li a .tunmbnailArea .img {width: 100%; height: 100%;}
.photoBoard>li a .tunmbnailArea .img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
.photoBoard>li:hover a .tunmbnailArea .img img {transform: scale(1.08);}
.photoBoard>li a .textArea {text-align: center; padding: 3rem 4rem; box-sizing: border-box;}
.photoBoard>li a .textArea p.tit {font-size: 2.4rem;}
.photoBoard>li a .textArea p.date,
.photoBoard>li a .textArea p.txt {font-size: 1.7rem; color: #555555; margin-top: 2rem;}
.photoBoard>li a .textArea p.txt {line-height: 2.6rem; text-align: left;}
.photoBoard.type2>li a .textArea{padding: 3rem;}

/* yearBoard */
.yearBoard {display: flex; flex-wrap: wrap; gap: 4rem; row-gap: 11.5rem;}
.yearBoard li {width: calc(25% - 3rem); position: relative;}
.yearBoard li>a {display: block;}
.yearBoard li>a .tunmbnailArea {height: 50rem; margin-bottom: 3.5rem;  border-radius: 30px; overflow: hidden;}
.yearBoard li>a .tunmbnailArea .img, .yearBoard li a .tunmbnailArea .img img {width: 100%; height: 100%; object-fit: cover;}
.yearBoard li a .tunmbnailArea .img img {transition: all 0.3s;}
.yearBoard li:hover a .tunmbnailArea .img img {transform: scale(1.08);}
.yearBoard li .btnArea {position: absolute; bottom: 5.9rem; left: 0; width: 100%; display: flex; border-radius: 0 0 30px 30px; overflow: hidden; z-index: 1;}
.yearBoard li .btnArea a {display: flex; justify-content: center; align-items: center; gap: 2rem; color: var(--white); font-size: 1.8rem; width: 50%; padding: 2rem 0; background: #15a9de;}
.yearBoard li .btnArea a:hover {background:#46bce7;}
.yearBoard li .btnArea a:first-of-type {border-right: 1px solid rgba(237,237,237,0.33);}
.yearBoard li .tit {font-size: 2.4rem; text-align: center;}

/* noticeBoard */
.noticeBoard {margin-bottom: 3.5rem;}
.noticeBoard>li {position: relative; border: 1px solid #e8e8e8; background-color: rgba(255,255,255,0.8); background-repeat: no-repeat; background-position: top 4.5rem right 7.5rem; background-image: url('/kids/images/board/basci_list_arr.png'); transition: all 0.3s; border-radius: 30px; overflow: hidden;}
.noticeBoard>li:not(.htoListCnt):hover {box-shadow: 6px 4px 7px rgba(0, 0, 0, 0.13); border-color: #1899c3; background-image: url('/kids/images/board/basci_list_arr_on.png');}
.noticeBoard>li:not(:last-of-type) {margin-bottom: 2.3rem;}
.noticeBoard>li a {display: flex; align-items: center; gap: 3.7rem; padding: 4.5rem 7.5rem; box-sizing: border-box;}
.noticeBoard>li a>div {width: 100%;}
.noticeBoard>li.topNotice a>div {width: calc(100% - 9rem);}
.noticeBoard>li a .tit {font-size: 2.4rem; margin-bottom: 2.5rem; padding-right: 12rem;}
.noticeBoard>li a .tit.file {display: flex; align-items: center;}
.noticeBoard>li a .info {display: flex; align-items: center; gap: 3.2rem;}
.noticeBoard>li a .info li {display: flex; align-items: center; gap: 2.2rem; font-size: 1.7rem;}
.noticeBoard>li a .info li p {position: relative; color: #222222; font-weight: 600; flex-shrink: 0;}
.noticeBoard>li a .info li p::before {content: ''; position: absolute; top: 0.2rem; right: -1rem; width: 0.1rem; height: 1.3rem; background: #b4b4b4;}
.noticeBoard>li a .info li span {color: #555555;}
.noticeBoard.type2 li {background-image: none !important;}
.noticeBoard.type2 li .state {width: 9.5rem; height: 9.5rem; color: var(--white); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0;}
.noticeBoard.type2 li a>div {width: calc(100% - 13.7rem);}
.noticeBoard.type2 li .tit {padding-right: 0;}
.noticeBoard.type2 li .state.type1 {background: #50bc49;}
.noticeBoard.type2 li .state.type2 {background: #df2c70;}
.noticeBoard.type2 li .state.type3 {background: #757575;}
.noticeBoard.type2 li .state.type4 {background: #757575;}

/* boardText */
.boardText {position: relative; padding: 4rem 5rem 4rem 24.5rem; box-sizing: border-box; border-radius: 30px; background: rgba(205,241,255,0.66); margin-bottom: 3.5rem;}
.boardText img {position: absolute; bottom: -2.2rem; left: 5rem;}
.boardText p {position: relative; font-size: 1.8rem; color: #1a1a1a; padding-left: 1.8rem; box-sizing: border-box; line-height: 1.2;}
.boardText p::before {content: ''; position: absolute; top: 7px; left: 0; width: 7px; height: 2px; background: #1a1a1a;}
.boardText p:not(:last-of-type) {margin-bottom: 1.8rem;}

/* programBoard */
.programBoard {display: flex; align-items: center; gap: 7rem; padding: 0 6rem 6.5rem 6rem; box-sizing: border-box; position: relative; margin-bottom: 6.5rem;}
.programBoard::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 61%; background: #f4f2f7; border-radius: 30px; z-index: -1;}
.programBoard::after {content: ''; position: absolute; bottom: 56%; right: 2.5rem; background: url('/kids/images/board/view2_boogi.png') no-repeat; width: 45.2rem; height: 25.9rem; background-size: 100%; z-index: -1;}
.programBoard .img {width: 49rem; border-radius: 30px; box-shadow: 6px 0 7px rgba(0,0,0,0.17); overflow: hidden; flex-shrink: 0;}
.programBoard .img img {width: 100%; object-fit: cover;}
.programBoard .textArea {width: calc(100% - 53rem);}
.programBoard .textArea>.tit {font-size: 3.3rem; margin-bottom: 5rem;}
.programBoard .textArea .info {margin-bottom: 12rem;}
.programBoard .textArea .info li {display: flex; gap: 3.3rem; align-items: center; font-size: 2rem;}
.programBoard .textArea .info li:not(:last-of-type) {margin-bottom: 2rem;}
.programBoard .textArea .info li>div {display: flex; align-items: center; gap: 1.8rem;}
.programBoard .textArea .info li>div span {width: 5.8rem; flex-shrink: 0; position: relative; font-weight: 600; text-align: justify;}
.programBoard .textArea .info li>div span::after {content: ''; position: absolute; display: inline-block; width: 100%;}
.programBoard .textArea .info li>div span::before {content: ''; position: absolute; top: 1px; right: -1.3rem; width: 1px; height: 1.6rem; background: #878787;}
.programBoard .textArea .cont .tit {font-size: 2rem; color: var(--white); padding-left: 2.3rem; position: relative; margin-bottom: 5rem;}
.programBoard .textArea .cont .tit::before {content: ''; position: absolute; top: -1.3rem; left: 0; background: url('/kids/images/board/program_bg.png') no-repeat; width: 19.4rem; height: 4.9rem; background-size: 100%; z-index: -1;}
.programBoard .textArea .cont .txt {font-size: 1.8rem; line-height: 3rem;}

/* monthSel */
.monthSel {display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 5rem; padding-top: 3rem;}
.monthSel .date {font-size: 3rem; font-weight: 600; flex-shrink: 0;}
.monthSel .date span {font-size: 4rem;}
.monthSel .monthList.mob {display: none;}
.monthSel .monthList {position: relative; padding-right: 5.5rem;}
.monthSel .monthList::before {content: ''; position: absolute; top: -6rem; right: -4.5rem; background: url('/kids/images/board/monthBoard_boogi.png') no-repeat; width: 11.3rem; height: 17.4rem; background-size: 100%;}
.monthSel .monthList>li {display: flex; gap: 1.5rem;}
.monthSel .monthList li a {display: flex; align-items: center; justify-content: center; width: 7.2rem; height: 7.2rem; border-radius: 50%; background: #ededed; font-size: 1.8rem; color: #222222;}
.monthSel .monthList li a.on {background: #1ea914; color: var(--white); font-weight: 600;}
.monthSel .monthList li .selBox ul {display: flex; gap: 1.5rem;}

/* monthBoard */
.monthBoard {display: flex; flex-wrap: wrap; gap: 4rem; row-gap: 6.5rem;}
.monthBoard>li {width: calc(25% - 3rem); border-radius: 30px; border: 1px solid #e8e8e8; box-sizing: border-box; overflow: hidden; background: var(--white);}
.monthBoard>li .tunmbnailArea {position: relative; height: 50rem; border-radius: 30px; overflow: hidden;}
.monthBoard>li .tunmbnailArea .img {height: 100%;}
.monthBoard>li .tunmbnailArea .img img {width: 100%; height: 100%; object-fit: cover;}
.monthBoard>li .textArea {padding: 2rem 1rem; text-align: center;}
.monthBoard>li .textArea .tit {font-size: 2.4rem; margin-bottom: 2rem;}
.monthBoard>li .textArea .date {font-size: 1.7rem; color: #555555;}

/* signGuide */
.signGuide {display: flex; flex-wrap: wrap; gap: 4rem; margin-bottom: 10.5rem;}
.signGuide li {width: calc(50% - 2rem); padding: 3.5rem 5rem; box-sizing: border-box; border-radius: 30px; background: rgba(247,246,251,0.8); display: flex; gap: 2.3rem; align-items: center; font-size: 1.8rem; line-height: 2.8rem;}
.signGuide.type2 {margin-bottom: 4rem;}
.signGuide.type2 li {gap: 4.3rem;}
.signGuide.type2 li .tit {flex-shrink: 0; position: relative; display: flex; align-items: center; gap: 2.8rem;}
.signGuide.type2 li .tit::before {content: ''; position: absolute; top: 0.9rem; right: -2.2rem; width: 0.1rem; height: 1.4rem; background: #a3a3a3;}
.signGuide.type2 li h5.cont-title {color: #000000; margin-bottom: 0;}
.signGuide.nth4 li {width: calc(25% - 3rem); padding: 3rem 2rem 3rem 3.5rem;}
.signGuide.nth4 li p:first-child {margin-bottom: 1.5rem;}
.signGuide.nth4 li span {font-size: 3rem; font-weight: 600;}

/* signStep */
.signStep {position: relative; display: flex; gap: 4rem; margin-bottom: 20.5rem; margin-top: 12rem;}
.signStep::before {content: ''; position: absolute; bottom: -7.5rem; left: -5.5rem; background: url('/kids/images/board/sign_board_boogi.png') no-repeat; width: 10.4rem; height: 20.9rem; background-size: 100%; z-index: 1;}
.signStep li {position: relative; width: calc(25% - 3rem); min-height: 31rem; padding: 5.5rem 2rem 2rem 2rem; box-sizing: border-box; border-radius: 30px; box-shadow: 3px 3px 7px rgba(0,0,0,0.1); text-align: center; background: rgba(255,255,255,0.8);}
.signStep li .step {position: absolute; top: -2.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 16.2rem; height: 5rem; color: var(--white); font-weight: 600; font-size: 1.8rem; border-radius: 25px;}
.signStep li .step span {font-weight: 800;}
.signStep li:first-of-type .step {background: #2682c9;}
.signStep li:nth-of-type(2) .step {background: #e37832;}
.signStep li:nth-of-type(3) .step {background: #893fdc;}
.signStep li:nth-of-type(4) .step {background: #1f9712;}
.signStep li>img {margin-bottom: 2rem;}
.signStep li .txt {font-size: 1.8rem; line-height: 2.6rem;}
.signStep li a {display: flex; align-items: center; justify-content: space-between; max-width: 13.8rem; padding: 1.2rem 2.5rem 1.2rem 3rem; margin: 2.3rem auto 0 auto; box-sizing: border-box; border-radius: 20px; background: #000000; color: var(--white); font-size: 1.6rem;}

/* blogText */
.blogText {position: relative; background: rgba(205,241,255,0.66); padding: 3.5rem 3.5rem 3.5rem 19.5rem; box-sizing: border-box; font-size: 1.8rem; color: #212020; border-radius: 30px; margin-bottom: 6rem; line-height: 3.3rem;}
.blogText.type2 {margin-top: 9rem;}
.blogText .tit {font-size: 2rem; font-weight: 600; color: #212020; margin-bottom: 1rem;}
.blogText img {position: absolute; left: 6.6rem; bottom: 0;}

/* blogList */
.blogList {display: flex; flex-wrap: wrap; gap: 4rem ;}
.blogList>li {width: calc(50% - 2rem); padding: 4rem 3rem; box-sizing: border-box; border: 1px solid #e8e8e8; border-radius: 30px; background: rgba(255,255,255,0.8);}
.blogList>li .topArea {display: flex; justify-content: space-between; gap: 1.5rem; margin-bottom: 4.2rem;}
.blogList>li .topArea .userArea {display: flex; align-items: center; gap: 1.5rem;}
.blogList>li .topArea .userArea.badge {flex-wrap: wrap;}
.blogList>li .topArea .userArea .img {width: 9.6rem; height: 9.6rem; border-radius: 50%; overflow: hidden; flex-shrink: 0;}
.blogList>li .topArea .userArea .img img {width: 100%; height: 100%; object-fit: cover;}
.blogList>li .topArea .userArea .name {font-size: 1.6rem; line-height: 1.2;}
.blogList>li .topArea .userArea .name span {font-size: 2.4rem;}
.blogList>li .topArea .userArea .badge {display: flex; flex-wrap: wrap;}
.blogList>li .topArea .userArea .badge img {width: 4rem;}
.blogList>li .topArea .btnArea {display: flex; gap: 2.6rem;}
.blogList>li .topArea .btnArea a {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; width: 9.3rem; height: 9.3rem; border-radius: 50%; font-size: 1.8rem;}
.blogList>li .topArea .btnArea a .num {font-size: 2.4rem; font-weight: 700; color: #e64033; line-height: 3.7rem;}
.blogList>li .topArea .btnArea li:first-of-type a {background: #fdf8c7;}
.blogList>li .topArea .btnArea li:first-of-type a:hover {background: #fdee60; box-shadow: 3px 0 7px rgba(0,0,0,0.17);}
.blogList>li .topArea .btnArea li:nth-child(2) a {background: #c1e0f9; gap: 1rem;}
.blogList>li .bottomArea .tit {font-size: 2.4rem; margin-bottom: 3rem;}
.blogList>li .bottomArea .newsList li a {display: flex; align-items: center; gap: 1.3rem; font-size: 1.8rem; color: #212020;}
.blogList>li .bottomArea .newsList li a:hover {text-decoration: underline;}
.blogList>li .bottomArea .newsList li:not(:last-of-type) {margin-bottom: 2.3rem;}

/* blogMainWrap */
.blogMainWrap {position: relative; padding: 5rem 0 8rem 0; overflow: hidden;}
.blogImg {position: absolute;}
.blogImg.num1 {top: 0; left: 0;}
.blogImg.num2 {top: 57.5rem; left: -6.5rem;}
.blogImg.num3 {top: -15.5rem; right: -36rem;}
.blogImg.num4 {top: 63.2rem; right: 4.5rem;}
.blogImg.num5 {top: 9.5rem; left: 50%;}
.blogImg.num6 {top: 18rem; right: 11rem;}
.blogImg.num7 {display: none;}
.blogImg.boogi {top: 63rem; right: 53rem;}
.blogMainWrap .blogTitleArea {display: flex; justify-content: space-between; margin-bottom: 7.5rem;}
.blogMainWrap .blogTitleArea .title {padding-top: 4rem;}
.blogMainWrap .blogTitleArea .title .txt {position: relative; display: inline-block; font-size: 3.2rem; color: #191919; margin-bottom: 5.5rem; padding: 0 0.8rem 0 1.2rem; box-sizing: border-box;}
.blogMainWrap .blogTitleArea .title .txt::before {content: ''; position: absolute; left: 0; bottom: -1.3rem; width: 100%; height: 2.7rem; background: #f9ed78; opacity: 0.74; z-index: -1;}
.blogMainWrap .blogTitleArea .title h2 {font-size: 7rem; color: #702bb0; word-break: keep-all;}
.blogMainWrap .blogTitleArea .homeLink a {display: flex; flex-direction: column; align-items: center; gap: 1.3rem; font-size: 1.8rem; color: var(--black);}
.blogMainWrap .blogTitleArea .homeLink a img {border-radius: 50%; box-shadow: 3px 2px 7px rgba(0,0,0,0.17);}
.blogMainWrap .blogSecWrap {display: flex; margin-bottom: 23rem;}
.blogMainWrap .blogSlideArea {position: relative; width: 42%; padding-right: 4rem; box-sizing: border-box;}
.blogMainWrap .blogSlideArea::before {content: ''; position: absolute; top: 4.2rem; left: -1.6rem; background: url('/kids/images/board/blog_slide_assets.png') no-repeat; background-size: 100%; width: 5.3rem; height: 37.7rem; z-index: 99;}
.blogMainWrap .blogSlideArea::after {content: ''; position: absolute; bottom: -3rem; right: 1rem; width: 92%; min-height: 46.5rem; background: #ececec; border-radius: 0 150px 0 0;}
.blogMainWrap .blogSlideArea .swiper-slide a {display: block; height: 46.5rem; border-radius: 30px 150px 0 30px; overflow: hidden;}
.blogMainWrap .blogSlideArea .swiper-slide a img {display: block; width: 100%; height: 100%; object-fit: cover;}
.blogMainWrap .blogSlideArea .swiperNavi {position: absolute; bottom: 0; right: 0; z-index: 10; background: rgba(0,0,0,0.8); border-radius: 15px 0 0 0; padding: 2rem 2.5rem; box-sizing: border-box; display: flex; align-items: center; gap: 2rem; color: var(--white);}
.blogMainWrap .blogSlideArea .swiperNavi .pagination {display: flex; gap: 2.2rem;}
.blogMainWrap .blogSlideArea .swiperNavi .pagination span {font-size: 1.4rem; font-weight: 400;}
.blogMainWrap .blogSlideArea .swiperNavi .pagination span.current {font-weight: 600; position: relative;}
.blogMainWrap .blogSlideArea .swiperNavi .pagination span.current::before {content: ''; position: absolute; top: 0.3rem; right: -1.1rem; width: 0.1rem; height: 0.9rem; background: rgba(255,255,255,0.45);}
.blogMainWrap .blogSlideArea .swiperNavi .btnWrap {display: flex; gap: 1.3rem; align-items: center;}
.blogMainWrap .blogSlideArea .swiperNavi .btn {display: block; border: none; font-size: 0; width: 0.9rem; height: 1.7rem; background-repeat: no-repeat; background-size: 100%; background-color: transparent; padding: 0; cursor: pointer;}
.blogMainWrap .blogSlideArea .swiperNavi .prevBtn {background-image: url('/kids/images/main/slide_prev.png');}
.blogMainWrap .blogSlideArea .swiperNavi .nextBtn {background-image: url('/kids/images/main/slide_next.png');}
.blogMainWrap .blogSlideArea .swiperNavi .stop {width: 0.5rem; height: 1rem; background-image: url('/kids/images/main/slide_stop.png');}
.blogMainWrap .blogSlideArea .swiperNavi .stop.on {width: 0.6rem; height: 1rem; background-image: url('/kids/images/main/slide_play.png');}
.blogMainWrap .blogTextArea {width: 35%; padding-top: 6rem;}
.blogMainWrap .blogTextArea .tit {font-size: 3rem; line-height: 4rem; margin-bottom: 4.5rem; word-break: keep-all;}
.blogMainWrap .blogTextArea .txt {font-size: 1.8rem; line-height: 3rem; color: #484848; margin-bottom: 6rem; word-break: keep-all;}
.blogMainWrap .blogTextArea .link {display: flex; align-items: center; justify-content: center; gap: 2.4rem; padding: 1.8rem 0; box-sizing: border-box; background: #000000; border-radius: 28px; color: var(--white); max-width: 20rem;}
.blogMainWrap .blogTextArea .link img {transition: all 0.3s;}
.blogMainWrap .blogTextArea .link:hover img {transform: translateX(1rem);}
.blogMainWrap .blogUserArea {width: 23%; display: flex; flex-direction: column; align-items: center;}
.blogMainWrap .blogUserArea .proflieImg {width: 18.2rem; height: 18.2rem; border-radius: 50%; overflow: hidden; border: 8px solid var(--white); margin-bottom: 1.8rem;}
.blogMainWrap .blogUserArea .proflieImg img {width: 100%; height: 100%; object-fit: cover;}
.blogMainWrap .blogUserArea .name {font-size: 2rem; font-weight: 400; text-align: center; color: var(--black); margin-bottom: 2.5rem;}
.blogMainWrap .blogUserArea .reportIcon {position: relative; min-width: 21rem; padding: 1.2rem 2.4rem 1.2rem 8.5rem; box-sizing: border-box; background: var(--white); border-radius: 23px; font-size: 1.7rem; color: #000;}
.blogMainWrap .blogUserArea .reportIcon img {position: absolute; top: 50%; left: 2.4rem; transform: translateY(-50%);}
.blogMainWrap .blogUserArea .reportIcon:not(:last-of-type) {margin-bottom: 1.5rem;}
.blogMainWrap .blogUserArea .name span {font-size: 2.6rem; font-weight: 700;}
.blogMainWrap .blogReportList {display: flex; flex-wrap: wrap; gap: 4rem; margin-bottom: 7.5rem;}
.blogMainWrap .blogReportList>li {width: calc(25% - 3rem);}
.blogMainWrap .blogReportList a {display: block; border-radius: 30px; overflow: hidden; background: #f5f2f6; transition: all 0.3s;}
.blogMainWrap .blogReportList a:hover {transform: rotate(-5deg);}
.blogMainWrap .blogReportList a .textArea {padding: 4.5rem 4.5rem 1.5rem 3rem; box-sizing: border-box;}
.blogMainWrap .blogReportList a .textArea .date {font-size: 1.5rem; color: #555555; margin-bottom: 2rem;}
.blogMainWrap .blogReportList a .textArea .title {font-size: 2.2rem; min-height: 6rem; line-height: 3rem; margin-bottom: 2.4rem;}
.blogMainWrap .blogReportList a .textArea .infoList {display: flex; gap: 2rem; align-items: center;}
.blogMainWrap .blogReportList a .textArea .infoList li {display: flex; gap: 1.1rem; align-items: center;}
.blogMainWrap .blogReportList a .textArea .infoList li:last-of-type {gap: 0.4rem;}
.blogMainWrap .blogReportList a .textArea .infoList li span {font-size: 1.4rem; color: #666666;}
.blogMainWrap .blogReportList a .imgArea {height: 23rem; overflow: hidden;}
.blogMainWrap .blogReportList a .imgArea img {width: 100%; height: 100%; object-fit: cover;}
/* 블로그 기사 없을 때 */
.blogMainWrap .blogSecWrap .blogNoCont {width: 77%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; text-align: center;}

/* loginArea */
.loginArea {position: relative; width: 100%; max-width: 140rem; padding-bottom: 9rem; margin: 0 auto; display: flex; justify-content: space-between; box-sizing: border-box;}
.loginArea::before {content: ''; position: absolute; bottom: 0; right: 50%; transform: translateX(-50%); width: 1px; height: 93%; background: #dbdbdb;}
.loginArea a {display: block;}
.loginArea h4.cont-title {margin-bottom: 6rem;}
.loginArea .loginWrap {padding-top: 12.5rem;}
.loginArea .btnList {display: flex; align-items: center; gap: 2rem;}
.loginArea .btnList li {width: calc(50% - 1.3rem);}
.loginArea .btnList a {color: var(--white); font-size: 1.6rem; font-weight: 600; border-radius: 5px; background: #323232; text-align: center; padding: 2rem 0; width: 100%;}
.loginArea .btnList a.type2 {background: #666666;}
.loginArea .btnList a span {position: relative;}
.loginArea .btnList a span::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: 100%;}
.loginArea .btnList a.join span{padding-left: 3rem;}
.loginArea .btnList a.join span::before {background-image: url('/kids/images/board/login_icon1.png'); width: 1.6rem; height: 2.3rem;}
.loginArea .btnList a.id span {padding-left: 2.8rem;} 
.loginArea .btnList a.id span::before {background-image: url('/kids/images/board/login_icon2.png'); width: 1.9rem; height: 2rem;} 
.loginArea .btnList a.password {width: 21rem;}
.loginArea .btnList a.password span {padding-left: 3.3rem;}
.loginArea .btnList a.password span::before {background-image: url('/kids/images/board/login_icon3.png'); width: 2.2rem; height: 2.1rem;}
.loginArea .busanLogin {display: flex; flex-direction: column; justify-content: flex-start; width: 58.1rem}
.loginArea .busanLogin .busan {display: flex; align-items: center; justify-content: center; gap: 3.6rem; width: 100%; height: 13.6rem; color: var(--white); font-size: 2.4rem; font-weight: 600; border-radius: 10px; background: var(--pink2); margin-bottom: 3.2rem;}
.loginArea .busanLogin .busan span {position: relative; padding-top: 0.8rem;}
.loginArea .busanLogin .busan span::before {content: ''; position: absolute; top: 0.4rem; left: -1.8rem; width: 1px; height: 3.6rem; background: #dbdbdb; opacity: 0.33;}
.loginArea .reportLogin {display: flex; flex-direction: column; justify-content: flex-end;}
.loginArea .reportLogin .loginBox {margin-bottom: 5rem;}
.loginArea .reportLogin .inputWrap {display: flex; gap: 3.6rem; margin-bottom: 3.2rem;}
.loginArea .reportLogin .inputWrap .inputArea input {display: block; border: 1px solid #dbdbdb; width: 40rem; height: 5.8rem; background: var(--white); padding: 1.8rem 1.5rem 1.8rem 2.8rem; box-sizing: border-box; font-family: var(--CoreDream); font-size: 1.6rem; color: #757575;}
.loginArea .reportLogin .inputWrap .inputArea:first-of-type {margin-bottom: 2rem;}
.loginArea .reportLogin .inputWrap .loginBtn {width: 14.5rem; height: 13.6rem; background: #1da413; color: var(--white); display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.8rem;}
.loginArea .reportLogin .btnList {gap: 2.6rem;}
.loginArea .reportLogin p {font-size: 1.8rem;}

/* puzzleWrap */
.puzzleWrap {display: flex; gap: 2.4rem; padding-top: 5rem;}
.puzzleWrap .puzzleArea {display: flex; gap: 3.5rem; justify-content: center; width: 97rem; border-radius: 30px; padding: 4rem 0; box-sizing: border-box; box-shadow: 1px 0 9px rgba(0, 0, 0, 0.1);}
/* .puzzleWrap .puzzleArea .puzzleBox {width: 100%; max-width: 72rem;} */
.puzzleWrap .puzzleArea .puzzleBtn button {display: block; width: 13rem; padding: 1.5rem 0; border-radius: 10px; text-align: center; font-size: 1.8rem; color: var(--white); cursor: pointer;}
.puzzleWrap .puzzleArea .puzzleBtn button.save {background: var(--blue); margin-bottom: 1.2rem;}
.puzzleWrap .puzzleArea .puzzleBtn button.reset {background: #666666;}
.puzzleWrap .textWrap {width: calc(100% - 92.2rem); padding: 4rem 3rem 5rem 5rem; box-sizing: border-box; border-radius: 30px; background: rgba(255,255,255,0.8); box-shadow: 1px 0 9px rgba(0, 0, 0, 0.1);}
.puzzleWrap .textWrap .textArea {max-height: 70.4rem; overflow-y: scroll; border: none;}
.puzzleWrap .textWrap .textArea::-webkit-scrollbar {width: 5px;}
.puzzleWrap .textWrap .textArea::-webkit-scrollbar-track {background: #e5e5e5;}
.puzzleWrap .textWrap .textArea::-webkit-scrollbar-thumb {background: #303030;}
.puzzleWrap .textWrap h3 {font-family: var(--Vitro); font-size: 2.5rem; margin-bottom: 3rem; color: #085087;}
.puzzleWrap .textWrap ul {padding-right: 7rem; box-sizing: border-box;}
.puzzleWrap .textWrap .textBox ul:first-of-type {margin-bottom: 6.5rem ;}
.puzzleWrap .textWrap ul li {display: flex; gap: 1.2rem; align-items: center; line-height: 2.6rem; font-size: 1.8rem}
.puzzleWrap .textWrap ul li:not(:last-of-type) {margin-bottom: 3rem;}
.puzzleWrap .textWrap ul li span {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #000000; color: var(--white); font-size: 1.4rem;}
.explainQuiz {line-height: 3rem;}

/* 명예의 전당 */
.hallList {position: relative; display: flex; flex-wrap: wrap; gap: 4rem;}
.hallList.year {padding-top: 5rem; margin-bottom: 17rem;}
.hallList.year::before {content: ''; position: absolute; bottom: 5rem; left: -9.5rem; background: url('/kids/images/board/hall_year_bg.png') no-repeat; background-size: 100%; width: 14.3rem; height: 22.4rem;}
.hallList.year::after {content: ''; position: absolute; bottom: 5rem; right: -9.5rem; background: url('/kids/images/board/hall_year_bg2.png') no-repeat; background-size: 100%; width: 14.3rem; height: 22.4rem; z-index: -1;}
.hallList>li {position: relative; width: calc(25% - 3rem); padding: 6.5rem 1.5rem 4.5rem 1.5rem; box-sizing: border-box; border-radius: 30px; background: rgba(255,255,255,0.85); text-align: center; box-shadow: 1px 0 9px rgba(0,0,0,0.1);}
.hallList>li>span {position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); width: 14.3rem; padding: 1.3rem 0; border-radius: 21px; background: #1f9712; color: var(--white); text-align: center; font-size: 1.8rem;}
.hallList.month>li>span {background: #0079c8;}
.hallList>li .imgBox {position: relative; margin-bottom: 5.5rem;}
.hallList>li .imgBox::before {content: ''; position: absolute; bottom: -4rem; left: 50%; transform: translateX(-50%); background: url('/kids/images/board/hall_profile_assets2.png') no-repeat; background-size: 100%; width: 10rem; height: 8.1rem;}
.hallList.month>li .imgBox::before {background: url('/kids/images/board/hall_profile_assets3.png') no-repeat; background-size: 100%;}
.hallList.year>li .imgBox::after {content: ''; position: absolute; top: -3.5rem; left: 50%; transform: translateX(-50%); background: url('/kids/images/board/hall_profile_assets1.png') no-repeat; background-size: 100%; width: 8.3rem; height: 6.5rem; z-index: 1;}
.hallList>li .imgBox .img {position: relative; width: 15.7rem; height: 15.7rem; border-radius: 50%; overflow: hidden; box-shadow: 1px 0 9px rgba(0,0,0,0.24); margin: 0 auto;}
.hallList>li .imgBox .img.type1{background:#c6a6ea}
.hallList>li .imgBox .img.type1{background:#d4cfda}
.hallList>li .img img {width: 100%; height: 100%; object-fit: cover;}
.hallList>li .img.type2 img{height:140%}
.hallList>li .name {font-size: 2.4rem; margin-bottom: 2.2rem;}
.hallList>li .point {display: flex; justify-content: center; gap: 2.5rem; align-items: center;}
.hallList>li .point p {font-size: 1.6rem; position: relative;}
.hallList>li .point p::before {content: ''; position: absolute; top: 0.2rem; right: -1.3rem; width: 0.1rem; height: 1.2rem; background: #d2d2d2;}
.hallList>li .point span {font-size: 2rem; font-weight: 600; color: #1f9712;}
.hallList.month>li .point span {color: #0079c8;}
.hallList .badge {display: flex; justify-content: center;}
.hallList .badge img {width: 4rem;}

/* 탑텐기사 */
.hallList.topTen::before {content: ''; position: absolute; top: 50px; left: 49%; transform: translateX(-50%); background: url('/kids/images/board/topTen_img2.png') no-repeat; background-size: 100%; width: 200rem; height: 38.6rem; z-index: -1;}
.hallList.topTen::after {content: ''; position: absolute; top: 436px; left: 50%; transform: translateX(-50%); background: #8bcbf7; width: 2000px; height: 100%; z-index: -1;}
.hallList.topTen>li {padding: 4rem 1.5rem 2.5rem 1.5rem; border: 1px solid #e8e8e8; box-shadow: none;}
.noCont .hallList.topTen::before, .noCont .hallList.topTen::after {display: none;}

/* calTableBox */
.calTableBox {padding-top: 5rem;}
.calTableBox .calTable .monthSelect {display: flex; gap: 4.5rem; align-items: center; justify-content: center; margin-bottom: 4.5rem;}
.calTableBox .calTable .monthSelect a {display: block; background-repeat: no-repeat; background-size: 100%; width: 1.4rem; height: 2.3rem; font-size: 0;}
.calTableBox .calTable .monthSelect a.calPrev {background-image: url('/kids/images/board/cal_prev.png');}
.calTableBox .calTable .monthSelect a.calNext {background-image: url('/kids/images/board/cal_next.png');}
.calTableBox .calTable .monthSelect .nowMonth {font-size: 3.5rem; color: #000000;}
.calTableBox .calTable table {width: 100%; border-collapse: separate; table-layout: fixed;}

/* 요일 */
.calTableBox .calTable table thead th {position: relative; font-size: 2rem; color: var(--white); text-align: center; padding: 2.3rem 0;}
.calTableBox .calTable table thead th::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 0.6rem); height: 100%; border-radius: 34px; background: var(--green2); z-index: -1;}
.calTableBox .calTable table thead th.sunday::before {background: #d35036;}
.calTableBox .calTable table thead th.satday::before {background: #265aaf;}

/* 달력 영역 */
.calTableBox .calTable table tbody {position: relative; top: 2rem;}
.calTableBox .calTable table tbody tr:first-child td {border-top: 1px solid #dbdbdb;}
.calTableBox .calTable table tbody td {background: rgba(255,255,255,0.85); border: 1px solid #dbdbdb; border-top: 0; box-sizing: border-box;}
.calTableBox .calTable table tbody td.today {background: rgba(235,235,235,0.79);}
.calTableBox .calTable table tbody td:not(:first-child) {border-left: 0;}
.calTableBox .calTable table tbody td .tdCon {min-height: 17rem; padding: 2.5rem; box-sizing: border-box;}
.calTableBox .calTable table tbody td .tdCon span {font-size: 1.6rem; font-weight: 600; color: #171717;}
.calTableBox .calTable table tbody td.satday .tdCon span {color: #265aaf;}
.calTableBox .calTable table tbody td.sunday .tdCon span {color: #d35036;}
.calTableBox .calTable table tbody td.today .tdCon span {text-decoration: underline;}
.calTableBox .calTable table tbody td.schedule .tdCon span {position: relative; color: var(--white); z-index: 1;}
.calTableBox .calTable table tbody td.schedule .tdCon span::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4.3rem; height: 4.3rem; border-radius: 50%; background: #000; z-index: -1;}
.calTableBox .calTable table tbody td .tdCon ul {margin-top: 2.5rem;}
.calTableBox .calTable table tbody td .tdCon ul li a {font-size: 1.7rem; font-weight: 600; color: #171717; padding-left: 4.8rem; box-sizing: border-box; position: relative; line-height: 1.3; display: block;}
.calTableBox .calTable table tbody td .tdCon ul li a:hover {text-decoration: underline;}
.calTableBox .calTable table tbody td .tdCon ul li:not(:last-of-type) {margin-bottom: 1.2rem;}
.calTableBox .calTable table tbody td .tdCon ul li a::before {position: absolute; top: 0; left: 0; width: 4rem; padding: 0.5rem 0 0.4rem 0; border-radius: 2px; color: var(--white); line-height: 1; font-size: 1.3rem; font-weight: 500; text-align: center;}
.calTableBox .calTable table tbody td .tdCon ul li a.festival::before {content: '축제'; background: #2783c9;}
.calTableBox .calTable table tbody td .tdCon ul li a.perform::before {content: '공연'; background: #e62e74;}
.calTableBox .calTable table tbody td .tdCon ul li a.exhibit::before {content: '전시'; background: #6610d1;}

/* 테이블 border-radius */
.calTableBox .calTable table tbody tr:first-child td:first-child{border-top-left-radius: 30px; overflow: hidden;}
.calTableBox .calTable table tbody tr:first-child td:nth-child(7){border-top-right-radius: 30px; overflow: hidden;}
.calTableBox .calTable table tbody tr:last-child td:first-child {border-bottom-left-radius: 30px; overflow: hidden;}
.calTableBox .calTable table tbody tr:last-child td:nth-child(7) {border-bottom-right-radius: 30px; overflow: hidden;}

/* 기사 좋아요 팝업 */
.likePopup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 53.8rem; max-width: 53.8rem; border-radius: 15px; z-index: 99; overflow: hidden;}
.likePopup.on {display: block;}
.likePopup button {display: inline-block; border: none; font-size: 0; background-repeat: no-repeat; background-size: 100%; cursor: pointer;}
.likePopup .header {display: flex; align-items: center; justify-content: space-between; padding: 2rem 3rem; box-sizing: border-box; background: #1d1d1d; font-size: 1.8rem; font-weight: 500; color: var(--white);}
.likePopup .header .closeBtn {width: 1.9rem; height: 1.9rem; background-image: url('/kids/images/board/like_pop_close.png');}
.likePopup .likeCont {padding: 2.3rem 3rem 2.3rem 5rem; box-sizing: border-box; background: var(--white);}
.likePopup .likeCont .likeBtn {width: 18.7rem; height: 5.2rem; background-image: url('/kids/images/board/pop_like_btn.png');}
.likePopup .likeCont .listBx {max-height: 19rem; height: 19rem; padding-right: 2rem; box-sizing: border-box; overflow-y: auto; margin-top: 3.2rem;}
.likePopup .likeCont .listBx::-webkit-scrollbar {width: 5px;}
.likePopup .likeCont .listBx::-webkit-scrollbar-track {background: #e5e5e5;}
.likePopup .likeCont .listBx::-webkit-scrollbar-thumb {background: #303030;}
.likePopup .likeCont .list {display: flex; flex-wrap: wrap; gap: 3.8rem; row-gap: 2rem;}
.likePopup .likeCont .list li {width: 5.7rem; text-align: center;}
.likePopup .likeCont .list li .img {width: 5.3rem; height: 5.2rem; border-radius: 50%; overflow: hidden; margin: 0 auto 1.3rem auto; background: #c6a5ea;}
.likePopup .likeCont .list li .imgBx {position: relative;}
.likePopup .likeCont .list li .imgBx::before {content: ''; position: absolute; bottom: 0; right: 0; background: url('/kids/images/board/like_assets.png') no-repeat; width: 2.5rem; height: 2rem; background-size: 100%;}
.likePopup .likeCont .list li .img img {width: 100%; object-fit: cover;}
.likePopup .likeCont .list li .name {font-size: 1.5rem; font-weight: 500; color: #000000;}

/* 스케줄 */
.calTableBox .scheduleBox {display: none;}

/* 맞춤법검사 텍스트 */
.boardTest {display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 3rem; box-sizing: border-box; border: 1px solid #cdcdcd; margin: 1.5rem 0;}
.boardTest p {width: 100%;}
.boardTest a {padding: 2rem 4rem; box-sizing: border-box; border-radius: 15px; background: #E62E74; color: var(--white);}

/* 반응형 */
@media screen and (max-width: 1701px) {
    /* leftBoard */
    .leftBoard {width: 105rem;}

    /* rightBoard */
    .rightBoard {width: calc(100% - 109rem);}

    /* boardArea */
    .boardArea {gap: 4rem;}
}

@media screen and (max-width: 1601px) {
    /* leftBoard */
    .leftBoard {width: 94rem;}

    /* rightBoard */
    .rightBoard {width: calc(100% - 98rem);}

    /* boardList */
    .boardList, .boardList.type2 {gap: 2rem; row-gap: 3rem;}
    .boardList>li, .boardList.type2>li {width: calc(50% - 1rem);}

    /* yearBoard */
    .yearBoard li>a .tunmbnailArea {height: 40rem;}

    /* monthBoard */
    .monthSel {flex-wrap: wrap;}

    /* blogMainWrap */
    .blogImg.boogi {right: 40rem;}

    /* puzzleWrap */
    .puzzleWrap .puzzleArea {width: 80rem;}
    .puzzleWrap .textWrap {width: calc(100% - 82.4rem);}
    /* .puzzleWrap .textWrap .textArea {max-height: 54.4rem;} */
    .puzzleWrap .textWrap ul {padding-right: 3rem;}
}

@media screen and (max-width: 1400px) {
    /* hoverArea */
    .boardArea .hoverArea>img {width: 6rem;}

    /* photoBoard */
    .photoBoard {gap: 3rem;}
    .photoBoard>li {width: calc(25% - 2.25rem);}
    .photoBoard>li a .tunmbnailArea {height: 22rem;}

    /* programBoard */
    .programBoard::after {width: 37rem; height: 21.9rem;}

    /* monthBoard */
    .monthBoard {gap: 3rem; row-gap: 5.5rem;}
    .monthBoard>li {width: calc(33.333% - 2rem);}

    /* blogMainWrap */
    .blogImg.num3 {right: -53rem;}
    .blogImg.num4 {right: 0.5rem;}
    .blogImg.boogi {right: 33rem;}
}

@media screen and (max-width: 1280px) {
    /* leftBoard */
    .leftBoard {width: 100%;}

    /* rightBoard */
    .rightBoard {width: 100%;}

    /* newsList */
    .rightBoard .newsList {padding-top: 0;}

    /* boardArea */
    .boardArea {flex-wrap: wrap; gap: 8rem;}

    /* boardList */
    .boardList>li a {padding: 3rem 2.5rem 3rem 3rem;}
    .boardList>li a .cont {gap: 2rem;}

    /* boardViewArea */
    .boardViewArea .viewCont {padding: 0 3rem;}
    .boardViewArea .profileCont {width: 32rem; padding: 3rem 3rem 0 3rem;}

    /* yearBoard */
    .yearBoard {gap: 3rem; row-gap: 7rem;}
    .yearBoard li {width: calc(33.333% - 2rem);}
    .yearBoard li>a .tunmbnailArea {margin-bottom: 2.5rem;}
    .yearBoard li .btnArea {bottom: 4.5rem;}
    .yearBoard li .btnArea a {font-size: 1.6rem; gap: 1rem;}
    .yearBoard li .tit {font-size: 2rem;}

    /* programBoard */
    .programBoard {gap: 5rem; align-items: flex-start;}
    .programBoard::after {width: 28rem; height: 17.6rem;}
    .programBoard .img {width: 35rem;}
    .programBoard .textArea {width: calc(100% - 40rem);}

    /* monthSel */
    .monthSel {flex-wrap: wrap;}
    .monthSel .date {width: 100%;}
    .monthSel .monthList {padding-right: 0;}
    .monthSel .monthList>li {gap: 1rem;}
    .monthSel .monthList::before {width: 9.5rem; top: -6.5rem; right: -8.5rem;}
    .monthSel .monthList li a {width: 6rem; height: 6rem;}
    .monthSel .monthList li .selBox ul {gap: 1rem;}

    /* signStep */
    .signStep {gap: 3rem; row-gap: 6rem; flex-wrap: wrap;}
    .signStep::before {left: -2.5rem;}
    .signStep li {width: calc(50% - 1.5rem);}

    /* blogList */
    .blogList {gap: 3rem;}
    .blogList>li {width: calc(50% - 1.5rem);}
    .blogList>li .topArea .userArea .img {width: 8rem; height: 8rem;}
    .blogList>li .topArea .btnArea {gap: 1.5rem;}
    .blogList>li .topArea .btnArea a {width: 8.5rem; height: 8.5rem; font-size: 1.6rem;}

    /* blogMainWrap */
    .blogMainWrap .blogTitleArea {margin-bottom: 6rem;}
    .blogMainWrap .blogTitleArea .title {padding-top: 3rem;}
    .blogMainWrap .blogTitleArea .title .txt {font-size: 3rem; margin-bottom: 5rem;}
    .blogMainWrap .blogTitleArea .title h2 {font-size: 6rem;}
    .blogImg.num1 {width: 21rem;}
    .blogImg.num2 {width: 28rem; top: 57.5rem; left: -6.5rem;}
    .blogImg.num3 {width: 120rem; right: -50rem;}
    .blogImg.num4 {width: 24rem; top: 62.8rem;}
    .blogImg.num5 {width: 20rem; top: 7.5rem;}
    .blogImg.num6 {width: 12rem; top: 13rem; right: 6rem;}
    .blogImg.boogi {width: 17rem; top: 59rem; right: 23rem;}
    .blogMainWrap .blogTitleArea .homeLink a {font-size: 1.6rem;}
    .blogMainWrap .blogTitleArea .homeLink a img {width: 6.8rem;}
    .blogMainWrap .blogReportList a .textArea {padding: 2.5rem 3.5rem 1.5rem 2.5rem;}
    .blogMainWrap .blogReportList a .textArea .title {font-size: 2rem;}
    .blogMainWrap .blogReportList a .imgArea {height: 18rem;}
    .blogMainWrap .blogSlideArea::before {width: 4.8rem; left: -1.5rem;}
    .blogMainWrap .blogSlideArea::after {min-height: 42rem;}
    .blogMainWrap .blogSlideArea .swiper-slide a {height: 42rem;}
    .blogMainWrap .blogUserArea .proflieImg {width: 16rem; height: 16rem;}
    .blogMainWrap .blogUserArea .name {font-size: 1.8rem;}
    .blogMainWrap .blogUserArea .name span {font-size: 2.4rem;}
    .blogMainWrap .blogUserArea .reportIcon {min-width: 19rem;}
    .blogMainWrap .blogReportList {gap: 3rem;}
    .blogMainWrap .blogReportList>li {width: calc(33.333% - 2rem);}

    /* loginArea */
    .loginArea {gap: 5rem;}
    .loginArea .loginWrap {width: 50%;}
    .loginArea .btnList {flex-wrap: wrap; row-gap: 1.5rem !important;}
    .loginArea .reportLogin .inputWrap {gap: 2rem;}
    .loginArea .reportLogin .inputWrap .inputArea input {width: 36rem;}
    .loginArea .reportLogin .inputWrap .loginBtn {width: calc(100% - 31.5rem);}

    /* puzzleWrap */
    .puzzleWrap .puzzleArea {width: 65rem;}
    .puzzleWrap .textWrap {width: calc(100% - 67.4rem); padding-left: 3rem;}
    .puzzleWrap .textWrap .textArea {max-height: 59.8rem;}
    .puzzleWrap .textWrap ul li {font-size: 1.6rem;}
    .puzzleWrap .textWrap ul li span {width: 2.8rem; height: 2.8rem;}

    /* signGuide */
    .signGuide.nth4 li {width: calc(33.333% - 2.666rem);}
}

@media screen and (max-width: 1025px) {
    /* hoverArea */
    .boardArea .hoverArea>img {width: 5rem;}
    .boardArea .hoverArea .info {gap: 2.5rem; margin-top: 3rem;}
    .boardArea .hoverArea .info li {gap: 1.5rem; font-size: 1.6rem;}
    
    /* boardList */
    .boardList {flex-wrap: wrap;}
    .boardList>li, .boardList.type2>li {width: 100%;}
    .boardList>li a .tit {font-size: 2.2rem;}
    .boardList>li a .cont .tunmbnailArea {width: 24rem; height: 17rem;}

    /* 탑텐기사 */
    .topTenBox {flex-wrap: wrap;}
    .topTenBox .topTen {width: 100%;}

    /* boardViewArea */
    .boardViewArea {padding-top: 6rem;}
    .boardViewArea .viewContWrap {flex-wrap: wrap; gap: 2.5rem; background: transparent; padding-bottom: 0;}
    .boardViewArea .viewCont {width: 100%; border-right: none; padding: 0 2rem 5rem 2rem; border-radius: 0 0 20px 20px; background: rgba(244, 242, 247, 0.7);}
    .boardViewArea .viewCont .title {font-size: 2.8rem; margin-bottom: 3rem;}
    .boardViewArea .viewCont .viewInfo {border-top: none; padding-top: 0;}
    .boardViewArea .viewCont .viewInfo .tit {font-size: 1.8rem;}
    .boardViewArea .viewCont .viewInfo .txt {font-size: 1.8rem;}
    .boardViewArea .viewCont .viewInfo .date {width: 100%; justify-content: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--black);}
    .boardViewArea .viewCont .viewInfo .list {width: 100%; justify-content: center;}
    .boardViewArea .profileCont {width: 100%; border-radius: 20px; background: rgba(244, 242, 247, 0.7); padding: 5.5rem 3.5rem 5rem 3.5rem;}
    .boardViewArea .profileCont .proflie {width: max-content; margin: 0 auto 3rem auto;}
    .boardViewArea .profileCont .proflie::before {right: -0.5rem;}
    .boardViewArea .profileCont .proflie::after {left: -2.8rem;}
    .boardViewArea .profileCont .txt {line-height: 2.4rem;}
    .boardViewArea .profileCont .userProflie {margin-bottom: 5rem;}
    .boardViewArea.type2 .textArea .title {font-size: 1.8rem; padding: 3.5rem 3.5rem 2.5rem 3.5rem;}
    .boardViewArea.type2 .textArea .title .tit {font-size: 3rem; margin-bottom: 3rem;}
    .boardViewArea.type2 .textArea .list li {font-size: 1.8rem; padding: 1.8rem 3.5rem;}
    .boardViewArea.type2 .viewCont {background: none; padding: 0 3.5rem;}
    .boardViewArea.type2 .boardPrevNext li a {font-size: 1.8rem; padding: 2rem 3.5rem;}

    /* photoBoard */
    .photoBoard>li {width: calc(33.333% - 2rem);}
    .photoBoard>li a .tunmbnailArea {height: 20rem;}
    .photoBoard>li a .textArea {padding: 2rem 3rem;}
    .photoBoard>li a .textArea p.tit {font-size: 2rem;}
    .photoBoard>li a .textArea p.date,
    .photoBoard>li a .textArea p.txt {font-size: 1.5rem; margin-top: 1.5rem;}

    /* noticeBoard */
    .noticeBoard>li {background-position: top 4.5rem right 4.5rem; background-size: 5rem;}
    .noticeBoard>li a {padding: 4rem 4.5rem;}
    .noticeBoard>li a .tit {font-size: 2.2rem; padding-right: 12rem;}
    .noticeBoard>li a .info li {font-size: 1.6rem;}
    .noticeBoard>li a .notice {width: 4.6rem;}
    .noticeBoard.type2>li a {justify-content: space-between;}
    .noticeBoard.type2 li .state {width: 7.5rem; height: 7.5rem; font-size: 1.6rem;}

    /* boardText */
    .boardText {padding-left: 5rem;}
    .boardText img {display: none;}

    /* boardWriteArea */
    .boardWriteArea .boardWrite li .title {width: 18rem; font-size: 1.8rem;}
    .boardWriteArea .boardWrite li .inputWrap {width: calc(100% - 18rem);}
    .boardWriteArea .boardWrite li .inputWrap.flex {width: calc(100% - 18rem); gap: 1rem; row-gap: 1rem;}
    .boardWriteArea .boardWrite li .inputWrap input {font-size: 1.5rem;}
    .boardWriteArea .boardWrite li .inputWrap input,
    .boardWriteArea .boardWrite li .inputWrap select {width: 15rem;}
    .boardWriteArea .boardWrite li button.btn {font-size: 1.5rem; padding: 0 1.5rem;}
    .boardWriteArea .boardWrite li .inputWrap.flex.type2 {gap: 1rem;}
    .boardWriteArea .boardWrite li .inputWrap .address {gap: 1rem;}

    /* programBoard */
    .programBoard {flex-wrap: wrap; padding: 3rem 0 0 0;}
    .programBoard::after {bottom: -3rem; z-index: 0;}
    .programBoard::before {display: none;}
    .programBoard .img {width: 70%; max-width: 54rem; margin: 0 auto;}
    .programBoard .textArea {width: 100%; margin-bottom: 7rem;}
    .programBoard .textArea .info {margin-bottom: 7rem;}
    .programBoard .textArea .cont {position: relative; z-index: 0; padding: 4.5rem 2.5rem 12.5rem 2.5rem; box-sizing: border-box; border-radius: 15px; background: #f4f2f7;}

    /* monthBoard */
    .monthBoard {row-gap: 3.5rem;}
    .monthBoard>li .tunmbnailArea {height: 35rem;}
    .monthBoard>li .textArea .tit {font-size: 2rem; margin-bottom: 1.3rem;}
    .monthBoard>li .textArea .date {font-size: 1.6rem;}

    /* monthSel */
    .monthSel {padding-top: 5rem; padding-right: 9rem; box-sizing: border-box;}
    .monthSel .date {width: auto; font-size: 2.3rem;}
    .monthSel .date span {font-size: 3rem;}
    .monthSel .monthList {position: relative;}
    .monthSel .monthList::before {right: -10rem;}
    .monthSel .monthList li a.on {background: transparent; height: auto; border-radius: 0;}
    .monthSel .monthList>li>a {position: relative; display: block; padding: 0 8px 17px 4px; box-sizing: border-box; width: 12rem; height: auto; border-radius: 0; background: transparent; border-bottom: 3px solid #303030; font-size: 1.6rem; color: #1a1a1a !important;}
    .monthSel .monthList>li>a::before {content: ''; position: absolute; top: 0.6rem; right: 0; background: url('/kids/images/board/board_select_arr.png') no-repeat; background-size: 100%; width: 1.4rem; height: 0.7rem; transition: all 0.3s;}
    .monthSel .monthList.on>li>a::before {transform: rotate(-180deg);}
    .monthSel .monthList .selBox {position: absolute; top: 5rem; width: 100%; height: 0; visibility: hidden; background: var(--white); border-radius: 5px; box-shadow: 2px 6px 7px rgba(0,0,0,0.13); box-sizing: border-box; transition: all 0.3s; z-index: 1; padding: 0 1.5rem; overflow: hidden; display: flex; flex-wrap: wrap; gap: 0; align-items: center;}
    .monthSel .monthList .selBox.on {height: 22rem; visibility: visible;}
    .monthSel .monthList li .selBox ul {width: 100%; display: block; height: calc(100% - 4rem); overflow-y: scroll;}
    .monthSel .monthList .selBox ul::-webkit-scrollbar {width: 5px;}
    .monthSel .monthList .selBox ul::-webkit-scrollbar-track {background: #e5e5e5;}
    .monthSel .monthList .selBox ul::-webkit-scrollbar-thumb {background: #303030;}
    .monthSel .monthList .selBox li {width: 100%;}
    .monthSel .monthList .selBox li a {display: block; width: 100%; height: auto; border-radius: 0; background: transparent; font-size: 1.5rem; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .monthSel .monthList .selBox li:not(:last-of-type) a {padding-bottom: 1.5rem;}
    .monthSel .monthList .selBox li a.on {color: #199ee4;}

    /* signGuide */
    .signGuide {gap: 2.4rem;}
    .signGuide li {width: calc(50% - 1.2rem) !important; gap: 1.8rem; padding: 3rem 3.5rem !important; font-size: 1.6rem;}
    .signGuide li img {width: 2.8rem;}
    .signGuide.type2 li {gap: 2rem; flex-direction: column; align-items: flex-start;}
    .signGuide.type2 li .tit {gap: 1.8rem;}
    .signGuide.type2 li .tit::before {display: none;}
    .signGuide.nth4 li p:first-child {margin-bottom: 1rem;}
    .signGuide.nth4 li span {font-size: 2.6rem;}

    /* signStep */
    .signStep {margin-top: 10rem; margin-bottom: 12rem;}
    .signStep::before {width: 8rem; left: -2rem; bottom: -10rem;}
    .signStep li .step {top: -2rem; width: 14rem; height: 4rem; font-size: 1.6rem;}
    .signStep li>img {margin-bottom: 1rem;}

    /* blogText */
    .blogText {padding-left: 15rem; font-size: 1.6rem;}
    .blogText .tit {font-size: 1.8rem;}
    .blogText img {left: 3.6rem;}

    /* blogList */
    .blogList>li {width: 100%;}

    /* blogMainWrap */
    .blogMainWrap {padding-top: 4rem;}
    .blogImg {display: none;}
    .blogMainWrap .blogTitleArea {margin-bottom: 0; padding-bottom: 4rem; position: relative;}
    .blogMainWrap .blogTitleArea::before {content: ''; position: absolute; top: -4rem; left: 50%; transform: translateX(-50%); width: 200rem; height: calc(100% + 4rem); background: #fdf8c7; z-index: -1;}
    .blogMainWrap .blogTitleArea::after {content: ''; position: absolute; top: -6rem; right: 0; background: url('/kids/images/board/blog_bg6.png') no-repeat; width: 13rem; height: 14.9rem; background-size: 100%; z-index: -1;}
    .blogMainWrap .blogTitleArea .title {padding-top: 0;}
    .blogMainWrap .blogTitleArea .title .txt {font-size: 2.4rem; margin-bottom: 3rem; padding: 0 1rem;}
    .blogMainWrap .blogTitleArea .title .txt::before {bottom: 0.3rem; height: 1.8rem;}
    .blogMainWrap .blogTitleArea .title h2 {font-size: 5rem;}
    .blogMainWrap .blogTitleArea .homeLink {display: none;}
    .blogMainWrap .blogSecWrap {flex-wrap: wrap; margin-bottom: 10rem;}
    .blogMainWrap .blogSlideArea {width: 100%; padding-right: 0; order: 2; margin-bottom: 4rem;}
    .blogMainWrap .blogSlideArea::before {width: 4.5rem; height: 54rem; left: -1.4rem; top: 12%;}
    .blogMainWrap .blogSlideArea::after {position: absolute; top: 45rem; right: -3rem; background: url('/kids/images/board/blog_bg7_mo.png') no-repeat; width: 36rem; height: 58.3rem; background-size: 100%; z-index: -1; border-radius: 0;}
    .blogMainWrap .blogSlideArea .swiper-slide a {border-radius: 15px 70px 0 15px;}
    .blogMainWrap .blogTextArea {position: relative; width: 70%; padding-top: 0; order: 3;}
    .blogMainWrap .blogTextArea::before {content: ''; position: absolute; bottom: -10rem; right: -26rem; background: url('/kids/images/board/blog_boogi.png') no-repeat; width: 20.7rem; height: 28.2rem; background-size: 100%; z-index: -1;}
    .blogMainWrap .blogTextArea .tit {margin-bottom: 2rem; line-height: 1;}
    .blogMainWrap .blogTextArea .tit.line2 {-webkit-line-clamp: 1 !important;}
    .blogMainWrap .blogTextArea .txt {font-size: 1.8rem;}
    .blogMainWrap .blogTextArea .txt.line4 {-webkit-line-clamp: 3 !important;}
    .blogMainWrap .blogUserArea {position: relative; width: 100%; flex-direction: row; gap: 1.5rem; order: 1; margin-bottom: 4rem; padding-bottom: 3rem;}
    .blogMainWrap .blogUserArea::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200rem; height: 100%; background: #fdf8c7; z-index: -1;}
    .blogMainWrap .blogUserArea::after {content: ''; position: absolute; top: -5.3rem; right: -7.7rem; background: url('/kids/images/board/blog_bg4.png') no-repeat; width: 22.4rem; height: 21.9rem; background-size: 100%; z-index: -1;}
    .blogMainWrap .blogUserArea .proflieImg {margin-bottom: 0; flex-shrink: 0;}
    .blogMainWrap .blogUserArea .name {text-align: left;}
    .blogMainWrap .blogUserArea .reportIconList {display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;}
    .blogMainWrap .blogUserArea .reportIconList .reportIcon {margin-bottom: 0 !important;}
    .blogMainWrap .blogReportList>li {width: calc(50% - 1.5rem);}
    .blogMainWrap .blogReportList a .imgArea {height: 23rem;}
    /* 블로그 기사 없을 때 */
    .blogMainWrap .blogSecWrap .blogNoCont {order: 3; width: 100%;}

    /* loginArea */
    .loginArea::before {display: none;}
    .subCont.login::before {top: 55%;}
    .subCont.login .bdBgImg.num1, .subCont.login .bdBgImg.num3 {display: none;}
    .subCont.login .bdBgImg.boogi {top: 41rem; right: 4rem;}
    .loginArea {flex-wrap: wrap; gap: 10rem; padding-top: 5rem;}
    .loginArea .loginWrap {width: 100%; padding-top: 0;}
    .loginArea h4.cont-title {margin-bottom: 3rem;}
    .loginArea .busanLogin .busan {height: 11.6rem;}
    .loginArea .reportLogin .inputWrap>div {width: 80%;}
    .loginArea .reportLogin .inputWrap .inputArea input {width: 100%;}
    .loginArea .reportLogin .inputWrap .loginBtn {width: calc(20% - 1.5rem);}

    /* puzzleWrap */
    .puzzleWrap {flex-wrap: wrap; padding-top: 3rem;}
    .puzzleWrap .puzzleArea {width: 100%;}
    .puzzleWrap .textWrap {width: 100%;}
    .explainQuiz p {font-size: 2rem !important;}

    /* 명예의 전당 */
    .hallList {gap: 3rem; row-gap: 5rem;}
    .hallList.year {margin-bottom: 8rem;}
    .hallList.year::before, .hallList.year::after {display: none;}
    .hallList>li {width: calc(33.333% - 2rem);}
    .hallList>li .imgBox .img {width: 14rem; height: 14rem;}
    .hallList>li .imgBox::before {width: 8rem; bottom: -5rem;}
    .hallList.year>li .imgBox::after {width: 7rem; top: -3rem;}
    .hallList>li .name {font-size: 2.2rem;}

    /* calTableBox */
    .calTableBox {display: flex; gap: 6rem;}
    .calTableBox .calTable .monthSelect {gap: 3rem;}
    .calTableBox .calTable .monthSelect .nowMonth {font-size: 3.2rem;}
    /* .calTableBox .calTable .scrollBoard {overflow-x: scroll; padding-bottom: 3rem;}
    .calTableBox .calTable .scrollBoard::-webkit-scrollbar {height: 5px;}
    .calTableBox .calTable .scrollBoard::-webkit-scrollbar-track {background: #e5e5e5;}
    .calTableBox .calTable .scrollBoard::-webkit-scrollbar-thumb {background: #303030;} */
    .calTableBox .calTable {width: calc(50% - 3rem);}
    .calTableBox .calTable table thead th {font-size: 1.8rem; padding: 0;}
    .calTableBox .calTable table thead th::before {width: 5rem; height: 5rem; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;}
    .calTableBox .calTable table tbody {top: 3rem;}
    .calTableBox .calTable table tbody td.btnMobiLink {cursor: pointer;}
    .calTableBox .calTable table tbody td .tdCon {min-height: auto; text-align: center; padding: 1.8rem 0;}
    .calTableBox .calTable table tbody td .tdCon span {font-size: 1.5rem;}
    .calTableBox .calTable table tbody td.schedule .tdCon span::before {width: 4rem; height: 4rem; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .calTableBox .calTable table tbody td .tdCon ul {display: none;}
    .calTableBox .calTable table tbody td .tdCon ul li:not(:last-of-type) {margin-bottom: 0.5rem;}
    .calTableBox .calTable table tbody td .tdCon ul li a {font-size: 1.5rem;}
    .calTableBox .scheduleBox {display: block; width: calc(50% - 3rem); padding-top: 7.7rem;}
    .calTableBox .scheduleBox .tit {width: 100%; padding: 2rem 0; border-radius: 30px; background: #e9e9e9; text-align: center; font-size: 1.8rem; font-weight: 600; color: #111111;}
    .calTableBox .scheduleBox .list li {border-bottom: 1px solid #dbdbdb; box-sizing: border-box;}
    .calTableBox .scheduleBox .list a {display: block; padding: 2rem 0 2rem 4.8rem; box-sizing: border-box; font-size: 1.7rem; font-weight: 600; color: #171717;  position: relative; line-height: 1.3;}
    .calTableBox .scheduleBox .list a:hover {text-decoration: underline;}
    .calTableBox .scheduleBox .list a:before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4rem; padding: 0.5rem 0 0.4rem 0; border-radius: 2px; color: var(--white); line-height: 1; font-size: 1.3rem; font-weight: 500; text-align: center;}
    .calTableBox .scheduleBox .list a.festival::before {content: '축제'; background: #2783c9;}
    .calTableBox .scheduleBox .list a.perform::before {content: '공연'; background: #e62e74;}
    .calTableBox .scheduleBox .list a.exhibit::before {content: '전시'; background: #6610d1;}
}

@media screen and (max-width: 768px) {
    .subCont.hall::before {display: none;}

    /* searchArea */
    .searchArea {flex-wrap: wrap;}
    .searchArea select {width: calc(50% - 1rem);}
    .searchArea .selectWrap {width: 100%; }
    .searchArea .selectWrap form {flex-wrap: wrap;}
    .searchArea .selectWrap form.hall {flex-wrap: nowrap;}
    .searchArea .search {width: 100%; padding-right: 1rem; box-sizing: border-box;}
    .searchArea .search input {width: 100%;}

    /* boardList */
    .boardList>li a .cont .txt {font-size: 1.6rem;}
    .boardList>li a .cont .user .name {font-size: 1.6rem;}
    .boardList>li a .cont .tunmbnailArea {width: 17rem; height: 13rem;}

    /* newsList */
    .rightBoard .newsList .title {font-size: 2.2rem; margin-bottom: 2rem;}
    .rightBoard .newsList .list li a {gap: 1rem;}
    .rightBoard .newsList .list li .tit {font-size: 1.6rem;}

    /* boardViewArea */
    .boardViewArea .viewCont .title {font-size: 2.2rem; margin-bottom: 2.5rem;}
    .boardViewArea .viewCont .viewInfo .tit {font-size: 1.6rem;}
    .boardViewArea .viewCont .viewInfo .txt {font-size: 1.6rem;}
    .boardViewArea .viewCont .viewText p {font-size: 1.6rem;}
    .boardViewArea .viewCont .viewText p .se-video {width: 100% !important; max-width: 560px !important;}
    .boardViewArea .viewCont .viewText p .se-video iframe {width: 100% !important; max-width: 560px !important;}
    .boardViewArea .profileCont {padding: 5rem 3rem;}
    .boardViewArea.type2 .textArea .title {padding: 2.5rem 2rem; font-size: 1.6rem;}
    .boardViewArea.type2 .textArea .title .tit {font-size: 2.5rem; margin-bottom: 2.5rem;}
    .boardViewArea.type2 .textArea .list li {flex-wrap: wrap; gap: 1rem; font-size: 1.6rem; padding: 1.5rem 2rem;}
    .boardViewArea.type2 .textArea .list li div {width: 100%; gap: 2rem;}
    .boardViewArea.type2 .textArea .list li div .tit::before {right: -1.2rem;}
    .boardViewArea.type2 .textArea .list li.file .txt .pdf {font-size: 1.4rem; width: 7rem;}
    .boardViewArea.type2 .viewCont {padding: 0 2rem;}
    .boardViewArea.type2 .boardPrevNext li a {padding: 1.5rem 2rem; font-size: 1.6rem;}
    .boardViewArea.type2 .boardPrevNext li a div {gap: 2rem; width: 70%;}

    /* photoBoard */
    .photoBoard {gap: 2rem;}
    .photoBoard>li {width: calc(50% - 1rem); border-radius: 24px;}
    .photoBoard>li a .tunmbnailArea {border-radius: 24px;}
    .photoBoard>li a .textArea p.tit {font-size: 1.8rem;}

    /* yearBoard */
    .yearBoard {gap: 2rem; row-gap: 5rem;}
    .yearBoard li {width: calc(50% - 1rem);}
    .yearBoard li>a .tunmbnailArea {height: 35rem;}

    /* noticeBoard */
    .noticeBoard>li {background-image: none;}
    .noticeBoard>li:not(:last-of-type) {margin-bottom: 1.5rem;}
    .noticeBoard>li a {padding: 3rem 3.5rem; gap: 2.5rem;}
    .noticeBoard>li a .tit {padding-right: 5rem; font-size: 2rem;}
    .noticeBoard>li a .notice {width: 4rem;}
    .noticeBoard>li a .info {flex-wrap: wrap; gap: 1rem;}
    .noticeBoard.type2 li a>div {width: calc(100% - 10rem);}

    /* boardText */
    .boardText {padding: 3rem;}
    .boardText p {font-size: 1.6rem;}

    /* boardWriteArea */
    .boardWriteArea .boardWrite li .title {width: 10rem; font-size: 1.6rem;}
    .boardWriteArea .boardWrite li .inputWrap, .boardWriteArea .boardWrite li .inputWrap.flex {width: calc(100% - 10rem);}
    .boardWriteArea.type2 .boardWrite li {width: 100% !important;}

    /* programBoard */
    .programBoard .textArea>.tit {font-size: 2.6rem; margin-bottom: 3rem;}
    .programBoard .textArea .info {margin-bottom: 4rem;}
    .programBoard .textArea .info li {font-size: 1.8rem;}
    .programBoard .textArea .cont .tit {font-size: 1.8rem; margin-bottom: 3rem;}
    .programBoard .textArea .cont .tit::before {top: -1.3rem;}
    .programBoard .textArea .cont .txt {font-size: 1.6rem;}

    /* monthBoard */
    .monthBoard>li {width: calc(50% - 1.5rem);}

    /* signGuide */
    .signGuide {gap: 2rem;}
    .signGuide li {width: 100% !important;}
    .signGuide.nth4 li span {font-size: 2.4rem;}

    /* signStep */
    .signStep {gap: 2rem; row-gap: 6rem; margin-top: 7rem;}
    .signStep li {width: calc(50% - 1rem);}
    .signStep li .txt {font-size: 1.6rem; word-break: keep-all;}
    .signStep li .txt>br {display: none;}
    .signStep li a {font-size: 1.4rem; padding: 1rem 2rem 1rem 2.6rem; margin-top: 1.5rem;}

    /* blogText */
    .blogText {padding-left: 11rem; line-height: 2.6rem;}
    .blogText.type2 {margin-top: 4rem;}
    .blogText img {left: 2rem; width: 6.5rem;}
    
    /* blogList */
    .blogList>li {padding: 3rem;}
    .blogList>li .topArea {margin-bottom: 3rem;}
    .blogList>li .topArea .userArea .name span {font-size: 2.2rem;}
    .blogList>li .bottomArea .tit {font-size: 2.2rem; margin-bottom: 2.5rem;}
    .blogList>li .bottomArea .newsList li:not(:last-of-type) {margin-bottom: 1.5rem;}
    .blogList>li .bottomArea .newsList li a {font-size: 1.6rem;}

    /* blogMainWrap */
    .blogMainWrap .blogTitleArea .title .txt {font-size: 2rem; margin-bottom: 2.5rem;}
    .blogMainWrap .blogTitleArea .title h2 {font-size: 4.4rem;}
    .blogMainWrap .blogSlideArea::after {width: 33rem; top: 27rem;}
    .blogMainWrap .blogSlideArea::before {width: 3.5rem; left: -1.1rem;}
    .blogMainWrap .blogSlideArea .swiper-slide a {height: 32rem;}
    .blogMainWrap .blogTextArea::before {bottom: -14rem; right: -17rem; width: 17rem;}
    .blogMainWrap .blogTextArea .txt {margin-bottom: 2.5rem;}
    .blogMainWrap .blogTextArea .link {padding: 1.5rem 0; max-width: 19rem;}
    .blogMainWrap .blogUserArea {flex-wrap: wrap;}
    .blogMainWrap .blogUserArea .proflieImg {width: 14rem; height: 14rem;}
    .blogMainWrap .blogUserArea .reportIcon {min-width: 16rem; padding: 1.2rem 1.8rem 1.2rem 7.5rem; font-size: 1.5rem;}
    .blogMainWrap .blogUserArea .reportIcon img {left: 2rem;}

    /* loginArea */
    .subCont.login .bdBgImg.num2 {top: 47rem; right: 16rem; width: 9rem;}
    .subCont.login .bdBgImg.boogi {top: 39rem; right: 3rem; width: 9rem;}
    .loginArea .busanLogin .busan {height: 9rem; font-size: 2rem;}
    .loginArea .busanLogin .busan img {width: 12rem;}
    .loginArea .busanLogin .busan span::before {top: 0.3rem; left: -1.8rem; height: 3rem;}
    .loginArea .btnList {gap: 1rem !important;}
    .loginArea .reportLogin .inputWrap>div {width: 70%;}
    .loginArea .reportLogin .inputWrap .loginBtn {width: calc(30% - 1.5rem);}
    .loginArea .reportLogin .btnList li {width: calc(50% - 0.5rem);}

    /* puzzleWrap */
    .puzzleWrap .puzzleArea {flex-wrap: wrap; padding: 4rem;}
    .puzzleWrap .puzzleArea .puzzleBox {width: 60rem; overflow-x: scroll;}
    .puzzleWrap .puzzleArea .puzzleBox::-webkit-scrollbar {height: 5px;}
    .puzzleWrap .puzzleArea .puzzleBox::-webkit-scrollbar-track {background: #e5e5e5;}
    .puzzleWrap .puzzleArea .puzzleBox::-webkit-scrollbar-thumb {background: #303030;}
    .puzzleWrap .puzzleArea .puzzleBtn {display: flex; align-items: center; gap: 1rem;}
    .puzzleWrap .puzzleArea .puzzleBtn button.save {margin-bottom: 0;}
    #grid {width: 60rem; margin-bottom: 1rem;}

    /* 명예의 전당 */
    .hallList {gap: 2rem; row-gap: 4rem;}
    .hallList>li {width: calc(50% - 1rem);}

    /* calTableBox */
    .calTableBox {flex-wrap: wrap; gap: 8rem;}
    .calTableBox .calTable {width: 100%;}
    .calTableBox .scheduleBox {width: 100%; padding-top: 0;}
    .calTableBox .calTable table thead th::before {width: 6rem; height: 6rem;}
    .calTableBox .calTable table tbody {top: 4rem;}

    /* 좋아요 팝업 */
    .likePopup {width: 85%;}
    .likePopup .likeCont {padding: 2.3rem 2rem 2.3rem 3rem;}
    .likePopup .likeCont .list {gap: 2.5rem;}

    /* 탑텐기사 */
    .topTen .basicText {font-size: 1.8rem;}
}

@media screen and (max-width: 480px) {
    /* searchArea */
    .searchArea select {width: 100%;}

    /* boardList */
    .boardList, .boardList, .boardList.type2 {row-gap: 1.5rem;}
    .boardList>li a {padding: 3rem 2rem 2rem 2rem;}
    .boardList>li a .cont {flex-wrap: wrap;}
    .boardList>li a .tit {font-size: 2rem; margin-bottom: 1.5rem;}
    .boardList>li a .cont .txt {margin-bottom: 1.5rem;}
    .boardList>li a .cont .user .img {width: 3.5rem; height: 3.5rem;}
    .boardList>li a .cont .tunmbnailArea {width: 100%; height: 25rem;}

    /* 탑텐 기사 */
    .boardList.topTen:first-child>li.top1 a .tunmbnailArea {height: 25rem;}
    .boardList.topTen:first-child>li.top1 a .tunmbnailArea .rank {left: 2rem;}
    .boardList.topTen:first-child>li.top1 a .tunmbnailArea .rank img {width: 7rem;}
    .boardList.topTen:first-child>li.top1 a .tunmbnailArea .title {flex-wrap: wrap; gap: 1rem;}
    .boardList.topTen:first-child>li.top1 a .tunmbnailArea .title p {font-size: 1.8rem; width: 100%;}

    /* boardViewArea */
    .boardViewArea {padding-top: 5rem;}
    .boardViewArea .profileCont {padding: 4rem 2.5rem;}
    .boardViewArea .profileCont .userProflie {margin-bottom: 3.5rem;}
    .boardViewArea .profileCont .proflie .img {width: 13.7rem; height: 13.7rem;}
    .boardViewArea .profileCont .proflie::before {width: 11.7rem;}
    .boardViewArea .profileCont .name p {font-size: 2.5rem;}
    .boardViewArea .profileCont .name p span {font-size: 1.6rem;}
    .boardViewArea .profileCont .txt {padding: 2rem 2.5rem;}
    .boardViewArea .profileCont .blogLink {padding: 1.6rem 2.5rem;}
    .boardViewArea .profileCont .userNewsList .tit {font-size: 1.8rem; padding-left: 3.5rem;}

    /* photoBoard */
    .photoBoard>li {width: 100%;}
    li.htoListCnt {font-size: 2rem; margin-top: 3rem;}

    /* yearBoard */
    .yearBoard {row-gap: 3rem;}
    .yearBoard li {width: 100%;}
    .yearBoard li>a .tunmbnailArea {margin-bottom: 2rem;}
    .yearBoard li .btnArea {bottom: 3.8rem;}
    .yearBoard li .tit {font-size: 1.8rem;}

    /* noticeBoard */
    .noticeBoard>li:hover {background-image: none;}
    .noticeBoard>li a {padding: 3rem 2.5rem; gap: 1.5rem;}
    .noticeBoard>li a .notice {display: none;}
    .noticeBoard>li.topNotice a .tit {padding-left: 3rem; position: relative;}
    .noticeBoard>li.topNotice a .tit::before {content: ''; position: absolute; top: 0; left: 0; width: 2.3rem; height: 1.8rem; background: url('/kids/images/board/notice_icon.png') no-repeat; background-size: 100%;}
    .noticeBoard>li.topNotice a>div {width: 100%;}
    .noticeBoard>li a .tit {padding-right: 0; font-size: 1.8rem; margin-bottom: 1.8rem;}
    .noticeBoard>li a .tit.file img {width: 3rem;}
    .noticeBoard>li a .info {gap: 1rem;}
    .noticeBoard>li a .info li {font-size: 1.5rem;}
    .noticeBoard.type2 li a>div {width: calc(100% - 7.7rem);}
    .noticeBoard.type2 li .state {width: 6rem; height: 6rem; font-size: 1.4rem;}

    /* boardText */
    .boardText p {font-size: 1.5rem;}

    /* boardWriteArea */
    .boardWriteArea .boardWrite li {flex-wrap: wrap;}
    .boardWriteArea .boardWrite li .title {font-size: 1.5rem; width: 100%; padding: 1.5rem 0;}
    .boardWriteArea .boardWrite li .inputWrap.flex {justify-content: center;}
    .boardWriteArea .boardWrite li .inputWrap, .boardWriteArea .boardWrite li .inputWrap.flex {width: 100%; padding: 1.5rem 0;}
    .boardWriteArea .boardWrite li .inputWrap .inputArea {width: 100%;}
    .boardWriteArea .boardWrite li .inputWrap input {font-size: 1.5rem;}
    .boardWriteArea .boardWrite li .inputWrap input, .boardWriteArea .boardWrite li .inputWrap select {width: 100%;}
    .boardWriteArea .boardWrite li button.btn {flex-shrink: 0; font-size: 1.4rem;}
    .boardWriteArea .boardWrite li .inputWrap .address .inputArea {width: calc(50% - 0.5rem);}
    .boardWriteArea.type2 .boardWrite li .inputWrap, .boardWriteArea.type2 .boardWrite li .inputWrap.flex {padding: 1rem 0;}
    .boardWriteArea .boardWrite li .inputWrap p {font-size: 1.5rem;}

    /* programBoard */
    .programBoard {gap: 4rem;}
    .programBoard::after {right: 0; width: 20rem; height: 15.6rem;}
    .programBoard .textArea .cont {padding-bottom: 7.5rem;}
    .programBoard .img {width: 85%;}
    .programBoard .textArea>.tit {font-size: 2.2rem; margin-bottom: 2rem;}
    .programBoard .textArea .info li {gap: 2rem; font-size: 1.6rem;}
    .programBoard .textArea .info li:not(:last-of-type) {margin-bottom: 1rem;}
    .programBoard .textArea .info li>div {gap: 1rem;}
    .programBoard .textArea .info li>div span {width: 5.3rem;}
    .programBoard .textArea .info li>div span::before {right: -0.5rem;}

    /* monthBoard */
    .monthBoard {row-gap: 2rem;}
    .monthBoard>li {width: 100%;}

    /* monthSel */
    .monthSel {padding-top: 0; padding-right: 0; margin-bottom: 3rem;}
    .monthSel .monthList {width: 100%;}
    .monthSel .monthList::before {display: none;}
    .monthSel .monthList>li>a {width: 100%;}

    /* signGuide */
    .signGuide li {gap: 1.5rem; padding: 2.5rem !important; font-size: 1.5rem; line-height: 2.4rem;}
    .signGuide li img {width: 2.2rem;}

    /* signStep */
    .signStep::before {display: none;}
    .signStep li {width: 100%; min-height: auto; padding: 4.5rem 2rem 4rem 2rem;}

    /* blogText */
    .blogText {padding: 2.5rem;}
    .blogText img {display: none;}

    /* blogList */
    .blogList>li {padding: 2.5rem;}
    .blogList>li .topArea {flex-wrap: wrap;}
    .blogList>li .topArea .userArea {gap: 1rem;}
    .blogList>li .topArea .userArea .img {width: 6rem; height: 6rem;}
    .blogList>li .topArea .userArea .name {font-size: 1.4rem;}
    .blogList>li .topArea .userArea .name span {font-size: 2rem;}
    .blogList>li .topArea .btnArea a {width: 7rem; height: 7rem; font-size: 1.4rem;}
    .blogList>li .topArea .btnArea li:first-of-type a img {width: 2.5rem;}
    .blogList>li .topArea .btnArea li:nth-child(2) a img {width: 2.2rem;}
    .blogList>li .topArea .btnArea a .num {font-size: 2rem; line-height: 2.9rem;}
    .blogList>li .bottomArea .tit {font-size: 2rem; margin-bottom: 2rem;}
    .blogList>li .bottomArea .newsList li a {font-size: 1.5rem;}

    /* blogMainWrap */
    .blogMainWrap .blogTitleArea .title .txt {margin-bottom: 2rem;}
    .blogMainWrap .blogTitleArea .title h2 {font-size: 4rem; line-height: 1.2;}
    .blogMainWrap .blogTitleArea {padding-bottom: 2rem;}
    .blogMainWrap .blogUserArea .reportIconList {gap: 1rem;}
    .blogMainWrap .blogUserArea .reportIcon {min-width: 13rem; max-width: 13rem; padding: 1.2rem 1rem 1.2rem 6rem;}
    .blogMainWrap .blogUserArea .reportIcon img {left: 1.4rem;}
    .blogMainWrap .blogReportList>li {width: 100%;}
    .blogMainWrap .blogReportList a .textArea {padding: 2rem 2rem 1.5rem 2rem;}
    .blogMainWrap .blogReportList a .textArea .title {font-size: 1.8rem; margin-bottom: 1.8rem;}
    .blogMainWrap .blogReportList a .imgArea {height: 17rem;}
    .blogMainWrap .blogSlideArea {margin-bottom: 3rem;}
    .blogMainWrap .blogSlideArea::after {width: 27rem; top: 16rem;}
    .blogMainWrap .blogTextArea {width: 100%;}
    .blogMainWrap .blogTextArea::before {width: 14rem; bottom: -20rem; right: -3rem;}
    .blogMainWrap .blogTextArea .tit {font-size: 2.2rem; margin-bottom: 1.5rem;}
    .blogMainWrap .blogTextArea .txt.line4 {font-size: 1.6rem; margin-bottom: 2rem;}
    .blogMainWrap .blogTextArea .link {font-size: 1.4rem; gap: 1.3rem; padding: 1.3rem 0; max-width: 16rem;}
    /* 블로그 기사 없을떄 */
    .blogMainWrap .blogSecWrap>img {width: 7rem;}

    /* loginArea */
    .subCont.login .bdBgImg.num2, .subCont.login .bdBgImg.boogi {display: none;}
    .loginArea .busanLogin .busan {font-size: 1.8rem; flex-wrap: wrap; row-gap: 1rem;}
    .loginArea .busanLogin .busan span::before {top: 0.7rem; left: -1.8rem; height: 2rem;}
    .loginArea .reportLogin .inputWrap {flex-wrap: wrap;}
    .loginArea .reportLogin .inputWrap>div {width: 100%;}
    .loginArea .reportLogin .inputWrap .inputArea:first-of-type {margin-bottom: 1rem;}
    .loginArea .reportLogin .inputWrap .inputArea input {height: 5rem; font-size: 1.5rem; padding-left: 1.5rem;}
    .loginArea .reportLogin .inputWrap .loginBtn {width: 100%; height: 5rem; font-size: 1.6rem;}
    .loginArea .btnList li {width: 100% !important;}
    .loginArea .btnList li a {width: 100% !important;}
    .loginArea .reportLogin p {font-size: 1.6rem;}

    /* puzzleWrap */
    .puzzleWrap .puzzleArea {padding: 3rem 2rem; gap: 2.5rem;}
    .puzzleWrap .puzzleArea .puzzleBtn button {width: 10rem; padding: 1.2rem 0; font-size: 1.6rem;}
    .puzzleWrap .textWrap {padding: 3rem 2rem 3rem 3rem;}
    .puzzleWrap .textWrap h3 {font-size: 2.2rem; margin-bottom: 2rem;}
    .puzzleWrap .textWrap ul {padding-right: 2rem;}
    .puzzleWrap .textWrap ul li:not(:last-of-type) {margin-bottom: 2rem;}

    /* 명예의 전당 */
    .hallList>li {width: 100%; padding-bottom: 3.5rem;}
    .hallList>li .name {margin-bottom: 1.5rem;}

    /* calTableBox */
    .calTableBox {gap: 6rem;}
    .calTableBox .calTable .monthSelect .nowMonth {font-size: 2.8rem;}
    .calTableBox .calTable table thead th {font-size: 1.6rem; padding: 0;}
    .calTableBox .calTable table thead th::before {width: 4rem; height: 4rem;}
    .calTableBox .calTable table tbody {top: 3rem;}
    .calTableBox .scheduleBox .tit {font-size: 1.6rem; padding: 1.7rem 0;}
    .calTableBox .scheduleBox .list a {padding: 1.5rem 0 1.5rem 4.8rem; font-size: 1.5rem;}

    /* 공유하기 */
    .boardViewArea .viewCont .viewText .shareList {width: 25rem;}
    .boardViewArea .viewCont .viewText .shareList a img {width: 3rem;}

    /* 온라인 맞춤법 검사기 */
    .boardTest {padding: 2rem;}
}
        
@media screen and (max-width: 310px) {
    .blogMainWrap .blogSecWrap {margin-bottom: 4rem;}
    .blogMainWrap .blogSlideArea::after,.blogMainWrap .blogTextArea::before {display: none;}
}