@charset "UTF-8";

@font-face {
    font-family:'Hamchorom';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/HCRDotum.woff') format('woff');
    font-weight:normal;
    font-display:swap;
}

#header .header_wrap { background-color: rgba(255, 255, 255, 1); /*position:fixed; left: 0; top: 0; z-index: 14;*/ width: 100%; text-align: center; transition: top 0.3s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hambuger_menu .hambuger_nav { padding: 11vh 28px 30px 28px; background-color: #fafafa;}
.hambuger_menu .hambuger_nav > ul > li { width:100%; position:relative; min-height:18%; padding:20px 0; }
/*common.css 미반영 대비 서브 CSS에 중복 적용*/
.HBbox { border: 1px solid #a5a5a5; max-width: 410px; background-color: #fff; margin-left: 0; padding: 18px 22px;}


/* ==================================================
메인 레이아웃
================================================== */
:root { --main-left-width:500px; --main-gap:54px; --main-column-gap:40px; }
:root { --main-left-width:500px; --main-gap:54px; --main-column-gap:40px; }

.section { width:calc(100% - 80px); max-width:1566px; margin:0 auto; padding:30px 0 80px; display:grid; grid-template-columns:var(--main-left-width) minmax(0,1fr); column-gap:var(--main-gap); align-items:start; box-sizing:border-box; }

.main_left { width:100%; min-width:0; position:static; box-sizing:border-box; }








/* ==================================================
왼쪽 메인 슬라이드
================================================== */
.main_left .imgBox { --bar-h:36px; width:100%; height:auto; position:relative; isolation:isolate; background:#fff; box-sizing:border-box; }

.main_left .imgBox.jsMainSlick { opacity:0; visibility:hidden; }

.main_left .imgBox.jsMainSlick.is-ready { opacity:1; visibility:visible; transition:opacity .15s ease; }

.main_left .imgBox .slick-list { position:relative; z-index:1; overflow:hidden; box-sizing:border-box; }

.main_left .imgBox .slick-track { position:relative; z-index:1; }

.main_left .imgBox .slick-slide { position:relative; z-index:1; }

.main_left .imgBox .imgSlide { display:flex; flex-direction:column; }

.main_left .imgBox .imgSlide > div,.main_left .imgBox .mainVisualImg { width:100%; height:auto; display:flex; justify-content:center; align-items:flex-start; overflow:hidden; background:#fff; box-sizing:border-box; }

.main_left .imgBox .imgSlide img { display:block; width:100%; max-width:100%; height:auto; margin:0 auto; object-fit:contain; }


/* 캡션 */
.main_left .imgBox .captionBar { height:var(--bar-h); margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; }

.main_left .imgBox .captionText { flex:1; min-width:0; font-size:16px; line-height:1.4; white-space:normal; overflow:visible; text-overflow:unset; word-break:keep-all; }


/* 슬라이드 컨트롤 */
.main_left .imgBox .img_btn { position:static!important; width:160px; height:var(--bar-h); margin:0; padding:4px 16px; display:flex; align-items:center; justify-content:center; gap:12px; flex:0 0 auto; border-radius:50px; background:#5b5b5b; color:#fff; box-sizing:border-box; transform:none!important; z-index:10; }

.main_left .imgBox .img_btn .pager { display:flex; align-items:center; gap:8px; }

.main_left .imgBox .img_btn button { padding:0; border:0; background:transparent; color:inherit; cursor:pointer; line-height:1; }

.main_left .imgBox .img_btn .btn_prev,.main_left .imgBox .img_btn .btn_next { font-size:20px; }

.main_left .imgBox .img_btn .count { margin:0; display:flex; align-items:center; gap:4px; font-size:20px; line-height:1; }

.main_left .imgBox .img_btn .stick { width:24px; height:22px; display:flex; align-items:center; justify-content:center; gap:8px; }

.main_left .imgBox .img_btn .stick span { display:block; width:4px; height:22px; background:#fff; }

.main_left .imgBox .img_btn .stick.is-paused span { display:none; }

.main_left .imgBox .img_btn .stick.is-paused::before { content:""; display:block; width:0; height:0; margin-left:4px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:14px solid #fff; }


/* ==================================================
오른쪽 전체
박물관 공감 / 한글 공감
참여 행사 / 배너
================================================== */
.main_right { width:100%; min-width:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; column-gap:var(--main-column-gap); row-gap:42px; align-items:start; box-sizing:border-box; }

.main_right > ul { width:100%; min-width:0; margin:0; padding:0; list-style:none; box-sizing:border-box; }

.main_right .list_box1 { grid-column:1; grid-row:1; }

.main_right .list_box2 { grid-column:2; grid-row:1; }

.main_right .list_box3 { grid-column:1; grid-row:2; }

.main_right .list_box4 { grid-column:2; grid-row:2; padding-top:61px; }


/* ==================================================
오른쪽 제목/목록 공통
================================================== */
.main_right ul > h2 { margin:0; padding:0 0 20px; font-size:28px; font-weight:500; border-bottom:1px solid #000; }

.main_right ul:not(.list_box4) li { width:100%; min-height:0; margin-top:20px; padding:12px 0; border:1px solid transparent; box-sizing:border-box; transition:all .5s; }

.main_right ul:not(.list_box4) li p { margin:0; font-size:18px; color:#666; font-weight:400; }

.main_right ul:not(.list_box4) li span { font-size:22px; line-height:1.5; font-weight:500; word-break:keep-all; overflow-wrap:break-word; }

.main_right ul:not(.list_box4) li:hover,.main_right ul:not(.list_box4) li:active,.main_right ul:not(.list_box4) li:focus-within { padding-left:20px; border:1px solid #0060ff; }

.main_right ul:not(.list_box4) li:hover span,.main_right ul:not(.list_box4) li:active span,.main_right ul:not(.list_box4) li:focus-within span { color:#0060ff; }


/* ==================================================
오른쪽 배너
================================================== */
.main_right .list_box4 li { width:100%; height:87px; margin:0 0 18px; padding:0; border:1px solid #ccc; box-sizing:border-box; background:url("../img/common/main_btn3.png") no-repeat right 16px center; }

.main_right .list_box4 li a { width:100%; height:100%; padding:0 45px 0 20px; display:flex; align-items:center; box-sizing:border-box; }

.main_right .list_box4 li span { font-size:18px; line-height:1.4; font-weight:500; word-break:keep-all; }


/* ==================================================
1400 이하
================================================== */
@media (min-width:961px) and (max-width:1400px) {

    :root { --main-left-width:460px; --main-gap:42px; --main-column-gap:30px; }

    .section { width:calc(100% - 56px); }

}


/* ==================================================
1200 이하
================================================== */
@media (min-width:961px) and (max-width:1200px) {

    :root { --main-left-width:420px; --main-gap:32px; --main-column-gap:24px; }

    .section { width:calc(100% - 40px); }

    .main_right ul > h2 { font-size:25px; }

    .main_right ul:not(.list_box4) li p { font-size:16px; }

    .main_right ul:not(.list_box4) li span { font-size:19px; }

}


/* ==================================================
태블릿 / 모바일
================================================== */
@media (max-width:960px) {

    .pc { display:none!important; }

    .mob { display:block!important; }

    .section { width:100%; max-width:none; margin:0; padding:30px 28px 0; display:block; box-sizing:border-box; }

    .main_left { width:100%; margin:0; }

    .main_left .imgBox { --bar-h:30px; }

    .main_left .imgBox .captionText { font-size:14px; }

    .main_left .imgBox .img_btn { width:142px; }

    .main_left .imgBox .img_btn .btn_prev,.main_left .imgBox .img_btn .btn_next,.main_left .imgBox .img_btn .count { font-size:16px; }


    /* 박물관 공감 / 한글 공감 2단 유지 */
    .main_right { width:100%; margin:72px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:46px; row-gap:0; }

    .main_right .list_box1 { grid-column:1; grid-row:1; }

    .main_right .list_box2 { grid-column:2; grid-row:1; }

    .main_right ul > h2 { font-size:24px; }

    .main_right ul:not(.list_box4) li { min-height:120px; margin-top:20px; }

    .main_right ul:not(.list_box4) li p { font-size:16px; }

    .main_right ul:not(.list_box4) li span { font-size:18px; }


    /* 모바일 참여행사 */
    .mob_list_box4 { width:100%; padding:30px 28px; box-sizing:border-box; }

    .mob_list_box4 h2 { margin:0; padding-bottom:20px; font-size:24px; font-weight:500; border-bottom:1px solid #000; }

    .mob_box1 { margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:46px; list-style:none; }

    .mob_list_box4 ul li { min-height:87px; margin-top:20px; padding:12px 0; border:1px solid transparent; box-sizing:border-box; transition:all .5s; }

    .mob_list_box4 ul li p { margin:0; font-size:16px; color:#666; }

    .mob_list_box4 ul li span { font-size:18px; line-height:1.5; font-weight:500; word-break:keep-all; }

    .mob_list_box4 ul li:hover,.mob_list_box4 ul li:active,.mob_list_box4 ul li:focus-within { padding-left:20px; border:1px solid #0060ff; }

    .mob_list_box4 ul li:hover span,.mob_list_box4 ul li:active span,.mob_list_box4 ul li:focus-within span { color:#0060ff; }


    /* 모바일 배너 */
    .mob_box2 { padding-top:30px; }

    .mob_box2 a { display:block; }

    .mob_box2 a div { width:100%; height:87px; padding-left:20px; display:flex; align-items:center; border:1px solid #ccc; background:url("../img/common/main_btn3.png") no-repeat right 5% center; box-sizing:border-box; }

    .mob_box2 a:first-child div { margin-bottom:30px; }

    .mob_box2 a div span { font-size:18px; font-weight:500; }

}


/* ==================================================
작은 모바일
================================================== */
@media (max-width:480px) {

    .section { padding:20px 0 0; }

    .main_left { width:100%; margin:0; position:relative; top:auto; left:auto; }

    .main_left .imgBox .captionBar { gap:0; }

    .main_left .imgBox .captionText { margin-left:10px; font-size:14px; text-align:left; }

    .main_left .imgBox .img_btn { width:32%; margin-right:4px; }

    .main_left .imgBox .img_btn .pager { gap:3px; }

    .main_left .imgBox .img_btn .count { font-size:14px; }


    .main_right { margin-top:55px; padding:0 20px; column-gap:24px; }

    .main_right ul > h2 { font-size:22px; }

    .main_right ul:not(.list_box4) li { min-height:146px; }

    .main_right ul:not(.list_box4) li p { font-size:15px; }

    .main_right ul:not(.list_box4) li span { font-size:17px; }


    .mob_list_box4 { padding:30px 20px; }

    .mob_box1 { gap:24px; }

    .mob_box2 a div { height:76px; }

    .mob_box2 a div span { font-size:16px; }

}

/* ==============================
푸터 - 기존 레이아웃 유지
============================== */
footer { position:sticky; bottom:20px; left:auto; width:746px; max-width:100%; margin-left:max(40px,calc((100% - 1566px) / 2)); box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; }

.sns_group { order:1; flex:0 0 100%; margin-bottom:0; }

.sns { display:flex; gap:10px; }

address { order:2; flex:1 1 auto; min-width:260px; }

address p { font-size:14px; font-weight:300; }

address p:last-child { letter-spacing:-0.04em; }

.issue_group { order:3; flex:0 0 auto; margin-left:auto; }

.footer_link { display:flex; align-items:center; gap:10px; }

.link_1 { display:flex; align-items:center; justify-content:space-evenly; width:150px; height:38px; border-radius:20px; background-color:#000; color:#fff; font-size:16px; }

.link_2 { display:flex; align-items:center; justify-content:space-evenly; width:148px; height:36px; margin-left:10px; border:1px solid #000; border-radius:20px; background-color:#fff; color:#000; cursor:pointer; font-size:16px; }

.issue-select { position:relative; display:inline-block; margin-left:10px; }

.issue-select-btn { position:relative; width:130px; height:38px; display:flex; align-items:center; padding-left:20px; border:1px solid #000; border-radius:30px; background:#fff; font-size:16px; cursor:pointer; }

.issue-select-btn::after { content:""; position:absolute; right:18px; top:50%; width:24px; height:24px; background:url("../img/common/icon_arrow_down.svg") no-repeat center/24px; transform:rotate(-180deg) translateY(50%); }

.issue-select-list { display:none; position:absolute; bottom:calc(100% + 8px); left:0; z-index:20; width:100%; max-height:175px; padding:10px 0; overflow:auto; border:1px solid #ccc; border-radius:30px; background:#fff; }

.issue-select.open .issue-select-list { display:block; }

.issue-select-list li { padding:12px 32px; }

.issue-select-list li a { display:block; font-size:1.125rem; text-align:center; }

.issue-select.open .issue-select-btn::after { transform:translateY(-50%) rotate(0deg); }


/* ==============================
푸터 1400 이하
============================== */
@media (min-width:961px) and (max-width:1400px) {
    footer { margin-left:28px; }
}


/* ==============================
푸터 1200 이하
============================== */
@media (min-width:961px) and (max-width:1200px) {
    footer { margin-left:20px; }
}


/* ==============================
푸터 1080 이하
============================== */
@media (max-width:1080px) {

    footer { position:static; width:auto; margin:60px auto 60px; padding-left:28px; padding-right:28px; flex-wrap:wrap; align-items:flex-start; }

    .sns_group { order:1; flex:0 0 auto; white-space:nowrap; }

    .sns { display:flex; gap:10px; }

    .issue_group { order:2; flex:0 0 auto; margin-left:auto; white-space:nowrap; }

    .issue-select { margin-left:0; }

    .footer_link { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-direction:row; }

    address { order:3; flex:0 0 100%; }

}


/* ==============================
푸터 960 이하
============================== */
@media (max-width:960px) {

    .issue-select { margin-left:0; }

    .sns_group { margin-top:48px; }

    footer { margin:0 auto 60px; }

    .issue_group { order:2; flex:0 0 auto; margin-left:auto; margin-top:48px; white-space:nowrap; }

    .footer_link { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-direction:row; }

}


/* ==============================
푸터 620 이하
============================== */
@media (max-width:620px) {

    footer { margin:60px auto; }

    .footer_link { flex-direction:column; }

    .issue_group { margin-top:0; }

}


/* ==============================
푸터 480 이하
============================== */
@media (max-width:480px) {

    footer { margin-top:20px; }

    .sns_group { order:2; margin-top:0; position:absolute; bottom:114px; }

    .issue_group { order:1; }

    .sns { gap:0; }

    .sns a img { width:80%; }

    .link_1 { width:146px; height:36px; font-size:14px; }

    .issue-select-btn { width:126px; height:34px; font-size:14px; }

    address p { font-size:13px; }

}