@charset "utf-8";

/*-------------------------------------------------
Author : WEB,Seo
Create date : 2025. 01. 17
Last update : 
-------------------------------------------------*/

/* ========== import ========== */
@import url('/resources/css/assets/fonts.css');
@import url('/resources/css/assets/mixin.css');

/* ========== default setting ========== */
html {
    font: 300 16px/1.3 'Pretendard', sans-serif;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Pretendard', sans-serif;
    word-break: keep-all;
    overflow-x: clip;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-thumb {
    width: 10px;
    background: rgba(0, 0, 0, 0.3);
    /* 스크롤바 색상 */
    border-radius: 10px;
    /* 스크롤바 둥근 테두리 */
}

/* ========== //default setting ========== */

/* common */

/* 게시판 페이징 */
.paging {
    gap: 7px;
    margin-top: 60px;
}

.paging li a {
    border-radius: 50px;
    width: 32px;
    height: 32px;
    line-height: 34px;
    box-sizing: border-box;
    text-align: center;
    display: block;
    font-weight: 500;
}

.paging li.active a {
    background: var(--green-color2);
    color: white;
}

.community .paging li.active a {
    background: var(--blue-color2);
    color: white;
}

.gallery .paging li.active a {
    background: var(--pink-color2);
    color: white;
}

.page_direct a {
    background: #f1f1f1;
    font-size: 19px;
    color: #666;
}

.double_prev i {
    transform: rotate(-180deg) translateY(2px);
}

.page_prev {
    margin-right: 10px;
}

.page_next {
    margin-left: 10px;
}

/* ========== main ========== */

/* common */
.main_header {
    text-align: center;
}

.main_tit {
    font-size: 1.5625em;
    font-weight: 700;
}

.main_p {
    font-size: 0.9375em;
    margin-top: 10px;
    font-weight: 500;
    color: var(--gray-color);
}

/* visual */
.visual {
    width: 100%;
    position: relative;
}

.visual:after {
    content: '';
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.visual .txt_box {
    position: absolute;
    left: 0;
    top: 150px;
    width: 100%;
    z-index: 5;
}

.visual .txt_box_inner {
    position: relative;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.vis_span {
    font-size: 1.875em;
    color: white;
}

.vis_tit {
    font-size: 5em;
    margin: 5px 0 10px;
    color: white;
}

.vis_p {
    font-size: 1.0625em;
    line-height: 1.5;
    color: white;
}

.vis_icon {
    position: absolute;
    left: 370px;
    top: -40px;
    width: 160px;
}

.main_slide {
    height: 100vh;
    width: 100%;
    position: relative;
}

.main_slide:after {
    content: '';
    background: url(/resources/images/main/banner_round.png) center / cover;
    width: 100%;
    height: 138px;
    bottom: 0px;
    left: 0;
    display: block;
    position: absolute;
    z-index: 1;
}

.main_slide ul {
    width: 100%;
    height: 100%;
}

.main_slide li {
    width: 100%;
    height: 100%;
    position: relative;
}



.main_slide li:after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    background: linear-gradient(180deg, #0073a85b, transparent, transparent);
}

.main_slide li:nth-child(2):after {
    background: linear-gradient(180deg, #274b1f6e, transparent);
}

.main_slide li:nth-child(3):after {
    background: linear-gradient(180deg, #524c3a59, transparent);
}

.main_slide li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* main_cont */
.main_cont {
    padding: 100px 0;
}

.main_contents {
    padding: 50px 0;
}

.main_cont_li {
    width: 20%;
    text-align: center;
    cursor: pointer;
}

.cont_img_wrap {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border-radius: 100%;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

.main_cont_li img {
    display: block;
    max-width: 120px;
    max-height: 120px;
}

.main_cont_li:nth-child(1) .cont_img_wrap {
    background: var(--pink-color);
}

.main_cont_li:nth-child(2) .cont_img_wrap {
    background: var(--orange-color);
}

.main_cont_li:nth-child(3) .cont_img_wrap {
    background: var(--yellow-color);
}

.main_cont_li:nth-child(4) .cont_img_wrap {
    background: var(--green-color);
}

.main_cont_li:nth-child(5) .cont_img_wrap {
    background: var(--blue-color);
}

.main_cont_li span {
    display: block;
    text-align: center;
    font-size: 1.125em;
    font-weight: 500;
    margin-top: 20px;
}

/* latest */
.latest {
    padding: 100px 0;
    background: url('/resources/images/main/latest_bg.jpg') 100% / cover no-repeat;
}

.latest_header {
    margin-bottom: 25px;
    align-items: baseline;
}

.latest .main_tit {
    font-size: 1.5625em;
    position: relative;
    z-index: 1;
}

.latest .main_tit:after {
    content: '';
    width: 38px;
    height: 38px;
    background: #F7FCDD;
    border-radius: 100%;
    position: absolute;
    left: -20px;
    top: -10px;
    z-index: -1;
}

.see_more {
    font-weight: 500;
    gap: 5px;
}

.lat_board {
    width: calc(50% - 10px);
    background: white;
    border-radius: 30px;
    padding: 50px;
    border: 1px solid var(--green-color2);
    box-sizing: border-box;
}

.notice .lat_tit {
    width: 70%;
}

.lat_tit {
    font-size: 0.9375em;
    font-weight: 400;
    display: block;
}

.lat_date {
    color: #888;
    font-weight: 500;
    font-size: 0.875em
}

.not_li a {
    padding: 7px 0;
}

.gal_li {
    width: calc(50% - 10px);
}

.gal_li p {
    width: 100%;
    height: 210px;
    margin-bottom: 10px;
}

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

/* photo */
.photo {
    padding: 100px 0;
}

.photo .main_header {
    position: relative;
    margin-bottom: 50px;
}

.photo .see_more {
    position: absolute;
    right: 0;
    bottom: 0;
}

.photo_ul {
    gap: 20px;
}

.photo_li {
    width: calc(33% - 10px);
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}

.photo_li p {
    width: 100%;
    height: 300px;
}

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

.photo_tit {
    font-size: 1.0625em;
    font-weight: 600;
    padding: 20px 25px 0;
    box-sizing: border-box;
}

.photo_date {
    color: #888;
    font-weight: 500;
    font-size: 0.875em;
    padding: 5px 25px 20px;
    display: block;
}

/* ========== //main ========== */



/* ========== page / common ========== */

.sub_tit {
    font-size: 1.5625em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

.sub_p {
    font-size: 1.0625em;
    margin-top: 10px;
    font-weight: 500;
}

.sub_ex {
    color: #FFB612;
    font-weight: 700;
    text-align: center;
    display: block;
    font-size: 1.1875em;
}

/* sub_visual */
.sub_visual {
    background: url('/resources/images/page/sub_visual_bg01.jpg') 100% / cover;
    width: 100%;
    height: 250px;
}

.sub_visual_inner {
    height: 100%;
    /* background: url(/resources/images/page/sub_vis_child.png) 100% 50px / 250px no-repeat; */
}

.sub_vis_tit {
    font-size: 1.875em;
    font-weight: 600;
    margin-bottom: 10px;
}

.sub_vis_p {
    font-size: 1.0625em;
    font-weight: 400;
    color: #5A5A5A;
}

.edu .sub_visual {
    background: url('/resources/images/page/sub_visual_bg02.jpg') 100% / cover;
}

/* .edu .sub_visual_inner {
    background: url(/resources/images/page/sub_vis_child02.png) 100% 50px / 350px no-repeat;
} */

.class .sub_visual {
    background: url('/resources/images/page/sub_visual_bg03.jpg') 100% / cover;
}

/* .class .sub_visual_inner {
    background: url(/resources/images/page/sub_vis_child03.png) 100% 50px / 250px no-repeat;
} */

.community .sub_visual {
    background: url('/resources/images/page/sub_visual_bg04.jpg') 100% / cover;
}

.community .sub_visual_inner {
    /* background: url(/resources/images/page/sub_vis_child04.png) 100% 50px / 350px no-repeat; */
    /* background: url(/resources/images/page/sub_vis_child04.png) 100% 50px / 300px no-repeat; */
}

.gallery .sub_visual {
    background: url('/resources/images/page/sub_visual_bg05.jpg') 100% / cover;
}

/* .gallery .sub_visual_inner {
    background: url(/resources/images/page/sub_vis_child05.png) 100% 50px / 250px no-repeat;
} */

/* snb */
.snb {
    background: white;
    border-bottom: 1px solid #ddd;
    height: 71px;
    position: relative;
}

.snb_inner::-webkit-scrollbar {
    display: none;
}

.snb li {
    width: 250px;
}

.class .snb li {
    width: calc(100% / 7);
}

.snb li a {
    width: 100%;
    height: 70px;
    color: var(--gray-color);
    font-weight: 500;
    font-size: 1.0625em;
    border-bottom: 3px solid transparent;
}

.snb li.active a {
    color: var(--black-color);
    border-bottom: 3px solid var(--yellow-color2);
}

.edu .snb li.active a {
    border-bottom: 3px solid var(--orange-color2);
}

.class .snb li.active a {
    border-bottom: 3px solid var(--green-color2);
}

.community .snb li.active a {
    border-bottom: 3px solid var(--blue-color2);
}

.gallery .snb li.active a {
    border-bottom: 3px solid var(--pink-color2);
}

.guide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(96 96 96 / 86%);
    color: #fff;
    font-weight: 400;
    font-size: 1.1875em;
    gap: 10px;
    animation-duration: 1s;
    animation-name: opacity;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
    display: none;
}

.guide i {
    transform: rotate(90deg);
    font-size: 1.5625em;
}

@keyframes opacity {
    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ========== //page / common ========== */


/* ========== page / 양실유치원 ========== */

/* greet */
.greet {
    padding: 100px 0;
}

.greet_inner {
    gap: 100px;
}

.greet .sub_p {
    white-space: pre-line;
    line-height: 1.5;
}

.greet .sub_p br {
    display: none;
}

.greet .sub_p b {
    font-weight: 700;
    color: #FFD500;
}

/* sub_banner */
.sub_banner {
    width: 100%;
    text-align: center;
    height: 350px;
    background: url('/resources/images/page/sub_banner_bg.jpg') center / cover;
}

.sub_banner .txt_box {
    width: 100%;
    background: #fff8977a;
    height: 100%;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    justify-content: center;
    box-sizing: border-box;
    padding: 0 10px;
}

.sub_banner span {
    font-size: 1.5625em;
    color: white;
}

.sub_banner h3 {
    font-size: 2.1875em;
    color: white;
}

/* goal */
.goal {
    padding: 150px 0;
}

.goal_li {
    width: calc(20% - 20px);
    text-align: center;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    padding: 60px 20px 35px;
    box-sizing: border-box;
}

.goal_li:after {
    content: '';
    width: 400px;
    height: 280px;
    background: var(--pink-color);
    position: absolute;
    left: 50%;
    top: -60px;
    border-radius: 100%;
    z-index: -1;
    opacity: 0.8;
    transform: translateX(-50%);
}

.goal_li:nth-child(2):after {
    background: var(--orange-color);
}

.goal_li:nth-child(3):after {
    background: var(--yellow-color);
}

.goal_li:nth-child(4):after {
    background: var(--green-color);
}

.goal_li:nth-child(5):after {
    background: var(--blue-color);
}

.goal_li h3 {
    font-size: 1.1875em;
    font-weight: 600;
}

.goal_li p {
    color: #6b6b6b;
    font-weight: 400;
    margin-top: 10px;
    min-height: 37px;
}

.goal_icon {
    max-width: 150px;
    margin-top: 40px;
}

/* operate */
.operate {
    background: #fffff8;
    padding: 150px 0 200px;
    background: url(/resources/images/page/main_reading_bg2.png) center top / 120%;
}

.ope_li {
    width: calc(25% - 15px);
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

.ope_li .numb {
    color: #FF6A6A;
    font-weight: 800;
    display: block;
    font-size: 2.1875em;
}

.ope_li h3 {
    font-weight: 700;
    position: relative;
    margin: 0 0 10px;
    font-size: 1.5625em;
}

.ope_li h3:before {
    content: '';
    width: 25px;
    background: #ddd;
    height: 0.5px;
    display: block;
    margin: 20px 0 40px;
}

.ope_li:nth-child(2) .numb {
    color: var(--orange-color2);
}

.ope_li:nth-child(3) .numb {
    color: var(--blue-color2);
}

.ope_li:nth-child(4) .numb {
    color: var(--green-color2);
}

.ope_li p {
    white-space: pre-line;
    font-weight: 400;
    line-height: 1.4;
}

/* organization */
.organization {
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    background: #fffff8;
}

.organization img {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: block;
}


/* ========== //page / 양실유치원 ========== */

/* ========== page / 오시는길 ========== */
.map {
    padding: 100px 0;
}

.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont {
    display: none;
}

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

.map_info {
    width: 30%;
}

.map_flex {
    gap: 50px;
}

.map .sub_tit {
    text-align: left;
    margin-top: 20px;
}

.map_li {
    width: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 50px;
    gap: 20px;
}

.map_li span {
    background: #FEDB00;
    color: white;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    font-size: 1.6em;
}

.map_li span img {
    max-width: 25px;
    max-height: 25px;
}

.map_li h3 {
    font-size: 1.0625em;
    font-weight: 600;
    margin-bottom: 5px;
}

.map_li p {
    font-weight: 400;
}

/* ========== //page / 오시는길 ========== */

/* ========== page / 하루일과 ========== */
/* day_cal */
.day_cal {
    padding: 100px 0;
}

.day_cal_inner {
    max-width: 800px;
}

.day_cont {
    background: #FFFEF5;
    padding: 80px 0 250px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.day_cont:before {
    background: url(/resources/images/page/note_hole.png) left 120px / auto repeat-y;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    content: '';
    z-index: 1;
}

.day_cont:after {
    content: '';
    background: url(/resources/images/page/picnic.svg) bottom center / 100% no-repeat;
    position: absolute;
    left: 0;
    bottom: -80px;
    width: 100%;
    height: 300px;
}

.cont_tit {
    text-align: center;
    font-size: 1.875em;
    margin-bottom: 50px;
}

.day_cont table {
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
}

.day_cont td,
.day_cont th {
    padding: 11px 20px;
}

.day_cont thead {
    background: var(--orange-color);
    font-size: 1.125em;
}

.day_cont tbody tr {
    border-bottom: 1px solid var(--orange-color);
}

.day_cont tbody tr:last-child {
    border-bottom: 0;
}

.day_cont tbody td {
    background: #fff;
    font-size: 1.0625em;
}

.day_cont tbody td:first-child {
    background: #FFFBF2;
    text-align: center;
}

/* ========== //page / 하루일과 ========== */


/* ========== //page / 교육환경 ========== */
/* surround */
.surround {
    padding: 100px 0;
}

.surround_ul {
    flex-wrap: wrap;
    gap: 25px 0;
}

.surround_li {
    width: calc(33% - 15px);
    position: relative;
    overflow: hidden;
}

.sur_name {
    padding: 18px 25px 20px;
    position: absolute;
    text-align: center;
    background: #ffffff;
    right: 0px;
    bottom: 0;
    font-weight: 500;
    z-index: 1;
    border-radius: 30px 0 0 0;
}

.sur_name:before {
    content: '';
    position: absolute;
    left: -30px;
    bottom: 5px;
    z-index: -1;
    width: 30px;
    height: 25px;
    border-radius: 0 0 25px 0;
    box-shadow: 25px 25px 0 25px #fff;
}

.sur_name:after {
    content: '';
    position: absolute;
    right: 0px;
    top: -30px;
    z-index: -1;
    width: 30px;
    height: 30px;
    border-radius: 0 0 25px 0;
    box-shadow: 25px 25px 0 25px #fff;
}

.surround_li .img_wrap {
    position: relative;
}

.surround_li .img_wrap img {
    border-radius: 30px;
}

/* ========== //page / 교육환경 ========== */


/* ========== page / 몬테소리교육 ========== */
/* mote */
.mote {
    padding: 100px 0;
}

.mote_inner {
    gap: 100px;
}

.mote .sub_p {
    white-space: pre-line;
    line-height: 1.5;
}

.mote .sub_p br {
    display: none;
}

.mote .sub_p b {
    font-weight: 600;
    color: var(--orange-color2);
}

/* purpose */
.purpose {
    padding: 150px 0;
    background: #FFF9EC;
}

.pur_cont {
    gap: 120px;
}

.pur_li {
    align-items: baseline;
    margin: 10px 0;
}

.purpose img {
    width: fit-content;
}

.pur_li span {
    color: var(--orange-color2);
    font-size: 4em;
    font-weight: 700;
    display: inline-block;
    width: 65px;
}

.pur_li h3 {
    color: var(--orange-color2);
    font-size: 1.1875em;
    font-weight: 600;
    padding-bottom: 5px;
}

.pur_li p {
    white-space: pre-line;
    font-weight: 500;
    line-height: 1.4;
}

/* monte_area */
.monte_area {
    padding: 150px 0;
}

.area_cont:nth-child(odd) {
    flex-direction: row-reverse;
}

.area_cont .img_area,
.area_cont .txt_area {
    width: 50%;
}

.area_cont .img_area {
    height: 450px;
}

.area_cont .txt_area {
    padding: 0 60px 0 50px;
    box-sizing: border-box;
}

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

.area_cont h3 {
    color: var(--orange-color2);
    font-weight: 600;
    font-size: 1.375em;
    border-bottom: 1px solid #eee;
    padding: 0 5px 15px;
    box-sizing: border-box;
}

.area_cont p {
    white-space: pre-line;
    font-weight: 400;
    line-height: 1.4;
    padding: 15px 5px 0;
    box-sizing: border-box;
}



/* ========== //page / 몬테소리교육 ========== */


/* ========== page / 우리반이야기 ========== */
/* 리스트페이지 */
.class_board {
    padding: 100px 0;
    position: relative;
}

#authModal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    /* align-items: center; */
    z-index: 5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#authForm {
    background: #fff;
    padding: 22px 20px 18px;
    border-radius: 8px;
    /* min-width: 300px; */
    text-align: center;
    max-width: 100%;
    position: sticky;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    top: 300px;
    height: fit-content;
    width: 300px;
    margin: 5% 10px;
}

#authForm h3 {
    font-size: 1.25em;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#authForm .alert {
    margin: 13px 0 10px;
    padding-left: 5px;
    font-size: 1em;
    text-align: left;
}

#authForm input {
    width: 100%;
    padding: 8px;
    background: #f5f5f5;
    height: 45px;
}

#authForm button {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    background: #444;
    color: #fff;
    border: none;
    border-radius: 5px;
}

#errorMsg {
    color: red;
    display: none;
    margin-bottom: 10px;
}

.board_list {
    flex-wrap: wrap;
    gap: 20px;
}

.list_cont {
    border-radius: 20px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    width: calc(33% - 12px);
    overflow: hidden;
    border: 1px solid #ececec;
    box-sizing: border-box;
}

.list_cont p {
    background: #F3F3F3;
    padding: 17px 25px 13px 20px;
    color: var(--gray-color);
    box-sizing: border-box;
    font-weight: 500;
    font-size: 0.875em;
}

.list_cont .number {
    background: white;
    border-radius: 30px;
    padding: 10px;
    width: 100px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}

.list_cont .subject {
    padding: 5px 25px 15px;
    font-size: 0.9375em;
    font-weight: 500;
    box-sizing: border-box;
    background: #F3F3F3;
}

.community .list_cont .subject {
    background: white;
    padding: 17px 30px 15px;
}

.board_total {
    border-bottom: 1px solid #eee;
    padding: 10px 5px;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 0.875em;
}

.board_total b {
    font-size: 20px;
    font-weight: 600;
    display: inline-block;
    margin-left: 3px;
}

/* 뷰페이지 */
.view_board {
    padding: 100px 0;
    position: relative;
}

.view_header {
    border-top: 1px solid #333;
    margin-bottom: 20px;
    position: relative;
}

.view_board .date,
.back_btn {
    font-weight: 500;
    color: #777;
    gap: 5px;
}

.view_board .date i,
.view_board .back_btn i {
    font-size: 1.125em;
}

.view_board .view_tit {
    font-size: 1.125em;
    font-weight: 600;
    text-align: center;
    padding: 20px 10px;
    /* background: #f9f9f9; */
}

.view_board .view_info {
    padding: 15px 20px;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
    font-size: 0.875em
}

.view_cont {
    padding: 10px 10px 30px;
    border-bottom: 1px solid #ddd;
}

.view_cont img {
    width: fit-content;
    max-width: 100%;
}

.list_back_btn {
    gap: 10px;
}

.back_btn2 {
    margin: 20px 10px 0 auto;
    gap: 10px;
    font-size: 1.0625em;
    font-weight: 600;
    color: #555;
}

.back_btn2 i {
    border: 1px solid #888;
    padding: 10px;
    border-radius: 100px;
    font-size: 0.875em;
}

.img-with-download {
    position: relative;
    display: inline-block;
}

.img-download-btn {
    position: absolute;
    right: 10px;
    bottom: 15px;
    background: white;
    border-radius: 10px;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.img-download-btn i {
    line-height: 50px !important;
    font-size: 25px !important;
}

/* ========== //page / 우리반이야기 ========== */


/* ========== page / 공지사항 ========== */
/* 공지사항 리스트 */
.notice .cate.imp {
    display: none;
}

.notice .board_list .pin {
    border: 1px solid var(--blue-color);
}

.notice .pin .cate.imp {
    display: flex;
    color: #3E7897;
}

.notice .pin .cate.normal {
    display: none;
}

.notice .board_list .pin p {
    background: var(--blue-color);
}

.notice .cate {
    background: white;
    border-radius: 30px;
    padding: 8px;
    width: 100px;
    box-sizing: border-box;
    gap: 8px;
    font-weight: 600;
}

.notice .cate img {
    width: 18px;
}

/* 공지사항 뷰페이지 */

.notice.view_board .cate {
    position: absolute;
    left: 20px;
    top: 15px;
    background: #f9f9f9;
    color: #555;
}

.view_board .file_info {
    flex-wrap: wrap;
    gap: 1em;
    border-bottom: unset;
}

.view_board .file_info .file {
    width: calc((100% - (1em * 6)) / 7);

    color: #777;
}

.view_board .file_info .file .file_name {
    gap: 5px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ========== //page / 공지사항 ========== */

/* ========== page / 건강식단 ========== */
/* diet */
.diet_board {
    padding: 100px 0;
}

.gall_list {
    flex-wrap: wrap;
    gap: 25px;
}

.gall_cont {
    width: calc(25% - 20px);
    border: 3px solid #eee;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.gall_cont p {
    width: 100%;
    height: 210px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}

.gall_cont p img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
}

.gall_cont h3 {
    background: #eee;
    padding: 15px 15px 12px;
    font-weight: 500;
    text-align: center;
}

/* big_thumb */
.big_thumb {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    visibility: collapse;
    opacity: 0;
    transition: 0.3s;
}

.big_thumb.active {
    visibility: visible;
    opacity: 1;
}

.thumb_inner {
    width: fit-content;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    overflow: hidden;
}

.thumb_header {
    background: var(--blue-color2);
    padding: 20px 0 15px;
    text-align: center;
    position: relative;
}

.thumb_header h3 {
    color: white;
    font-size: 0.9375em;
    font-weight: 400;
}

.thumb_header .close_btn {
    border-radius: 100%;
    position: absolute;
    right: 15px;
    top: 17px;
    color: white;
    font-size: 1.5625em;
}

.thumb_img_wrap {
    background: white;
    padding: 15px 15px 10px;
    border: 1px solid white;
    box-sizing: border-box;
}

.thumb_img {
    border-radius: 15px;
    width: fit-content;
    max-width: 800px;
}

/* ========== //page / 건강식단 ========== */


/* ========== //page / 건강식단 ========== */
.gall_li_thumb {
    width: 100%;
    height: 250px;
}

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

.gallery .list_cont .subject {
    background: #F3F3F3;
    padding: 3px 30px 17px;
    box-sizing: border-box;
}

.gallery .list_cont p {
    padding-top: 20px;
}

/* ========== //page / 건강식단 ========== */