/* Theme Name: cncaf Theme URI: Author: NA.SH Author URI: Description: (사)충남농어업회의소 전용 테마 Version: 1.0.2 Text Domain: cncaf */ @charset "utf-8"; @font-face { font-family: "Hakgyoansim Rikodeo"; src: url("./fonts/HakgyoansimRikodeoOTFR.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Hakgyoansim Sangjang"; src: url("./fonts/Hakgyoansim_SangjangOTFR.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* reset */ html, body {position: relative;width: 100%;min-height: 100%;font-family: 'Pretendard', 'Malgun Gothic', sans-serif;color: #333;font-size: 62.5%;word-break: keep-all;word-wrap: break-word;-webkit-tap-highlight-color: transparent;scroll-behavior: smooth;line-height: 1.5;background-color:var(--color-gray10);} body { font-size: 1.6rem;} body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, a, button, select, span, em, label, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-text-size-adjust: none; font-family: inherit; } ul, ol { list-style: none; } a, button { background: none; border: 0; padding: 0; cursor: pointer; } a, a:hover, a:active, a:focus { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; vertical-align: top; } .blind, .sr_only { position: absolute !important; width: 0.1rem !important; height: 0.1rem !important; padding: 0 !important; margin: -0.1rem !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; } :root { /* color */ --color-primary: #1a5f2a; --color-red: #FB3E3E; --color-blue: #004FE1; --color-blue-dark: #003399; --color-link: #007BFF; --color-gray100: #30363A; --color-gray70: #727272; --color-gray50: #999999; --color-gray40: #E2E2E2; --color-gray30: #EBEBEB; --color-gray20: #F3F3F3; --color-gray10: #FBFBFB; /* layout */ --max-width: 121.6rem; /* font */ --font-hakgyoansim: "Hakgyoansim Rikodeo", "Malgun Gothic", sans-serif; --font-hakgyoansim-sangjang: "Hakgyoansim Sangjang", "Malgun Gothic", sans-serif; } input[type="search"]::-webkit-search-cancel-button{display:none;-webkit-appearance:none;appearance:none;} @keyframes cncaf_overlay_fade{from{opacity:0;}to{opacity:1;}} @keyframes cncaf_panel_slide{from{transform:translateX(100%);}to{transform:translateX(0);}} /* skip navigation (접근성) */ .skip_nav {position: absolute;top: 0;left: 0;z-index: 1000;pointer-events: none;} .skip_nav a {position: absolute;width:100%;height: 0.1rem;padding: 0;margin: -0.1rem;overflow: hidden;clip: rect(0, 0, 0, 0);clip-path: inset(50%);white-space: nowrap;border: 0;pointer-events: auto; } .skip_nav a:focus {width: auto;height: auto;padding: 1.2rem 2rem;margin: 0;clip: auto;clip-path: none;top: 0;left: 0;display: inline-block;background: var(--color-gray100);color: #fff;font-size: 1.4rem;font-weight: 500;text-decoration: none;border-radius: 0 0 0.4rem 0;outline: 0.2rem solid var(--color-primary);outline-offset: 0.2rem; } /* button */ .btn_wrap{width:100%;padding-top:3.8rem;display:flex;justify-content:space-between;gap:.6rem;align-items:center;flex-wrap:wrap;} .btn_wrap > div{display:flex;gap:.6rem;align-items:center;} .btn_wrap.left{justify-content:flex-start} .btn_wrap.right{justify-content:flex-end} .btn_wrap.center{justify-content:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:auto;border-radius:.4rem;text-align:center;font-size:1.5rem;height:4.2rem;padding:0 1.6rem;background:#fff;border:.1rem solid var(--color-gray70);transition:background-color .3s, border .3s, color .3s;} .btn:hover{background-color:var(--color-gray10);color:var(--color-gray100);border-color:var(--color-gray100);} .btn.primary{background-color:var(--color-gray100);color:#fff;min-width:16rem;border:0;} .btn.btn_form{width:100%;height:5.2rem; padding: 0 2.4rem; font-size: 1.6rem; font-weight: 500; background: var(--color-blue); color: #fff; border: 0; border-radius: 0.4rem; cursor: pointer; } .btn.sm{height:4rem;} .btn[class*="ico_"]::before{content:'';display:block;width:1.8rem;height:1.8rem;background-repeat:no-repeat;background-position:50%;background-size:contain;} .btn.ico_check::before{background-image:url('images/ico_check.svg');} .btn.ico_cancel::before{background-image:url('images/ico_close.svg');} .btn.ico_back::before{background-image:url('images/ico_back.svg');} .btn.ico_write::before{background-image:url('images/ico_write.svg');} .btn.ico_upload::before{background-image:url('images/ico_upload.svg');} .btn.ico_join::before{background-image:url('images/ico_join.svg');} .btn.ico_close::before{background-image:url('images/ico_close.svg');} .btn.ico_list::before{background-image:url('images/ico_list.svg');} .btn.primary.ico_check::before, .btn.btn_form.ico_check::before{background-image:url('images/ico_check_w.svg');} .btn.primary.ico_cancel::before, .btn.btn_form.ico_cancel::before{background-image:url('images/ico_close_w.svg');} .btn.primary.ico_cancel::before, .btn.btn_form.ico_cancel::before{background-image:url('images/ico_close_w.svg');} .btn.primary.ico_back::before, .btn.btn_form.ico_back::before{background-image:url('images/ico_back_w.svg');} .btn.primary.ico_write::before, .btn.btn_form.ico_write::before{background-image:url('images/ico_write_w.svg');} .btn.primary.ico_upload::before, .btn.btn_form.ico_upload::before{background-image:url('images/ico_upload_w.svg');} .btn.primary.ico_join::before{background-image:url('images/ico_join_w.svg');} .btn.primary.ico_close::before, .btn.btn_form.ico_close::before{background-image:url('images/ico_close_w.svg');} .btn.primary.ico_list::before, .btn.btn_form.ico_list::before{background-image:url('images/ico_list_w.svg');} /* KBoard: primary (글쓰기·저장·확인 등 — .btn.primary 와 동일한 진한 회색) */ a.kboard-default-button-small.primary, button.kboard-default-button-small.primary, a.kboard-thumbnail-button-small.primary, button.kboard-thumbnail-button-small.primary, a.kboard-avatar-button-small.primary, button.kboard-avatar-button-small.primary, button.kboard-contact-form-button-large.primary, button.kboard-contact-form-button-small.primary, button.kboard-mail-form-button-small.primary, .kboard-skin-thumbnail-grid .kboard-btn-write.primary { background-color: var(--color-gray100) !important; color: #fff !important; border: none !important; } .kboard-skin-thumbnail-grid .kboard-btn-write.primary:hover, .kboard-skin-thumbnail-grid .kboard-btn-write.primary:focus { background-color: var(--color-gray100) !important; color: #fff !important; opacity: 0.92; } .inp{width:auto;border-radius:.4rem;text-align:center;font-size:1.5rem;height:4.2rem;padding:0 1.6rem;background:#fff;border:.1rem solid var(--color-gray30);} .textarea{width:100%;border-radius:.4rem;text-align:center;font-size:1.5rem;height:8rem;padding:1.6rem;background:#fff;border:.1rem solid var(--color-gray30);} /* layout */ .wrap{width:100%;background:#fff;} /* header */ #header{position:relative;width:100%;z-index:2000;} #header .header_inner{position:relative;width:100%;max-width: var(--max-width);margin: 0 auto;padding:3.2rem 1.2rem;display:flex;justify-content: space-between;align-items: center;transition:padding 0.3s, height 0.3s;height:auto;z-index:2001} @media (min-width:1280px){ #header .header_inner{min-height:15.2rem;padding:0;} } #header .site_id{} #header .site_id a{display: block;height:2.8rem;aspect-ratio:18.2/2.4;background: url('images/logo.svg') no-repeat 50% / contain;} #header .utils{display:flex;align-items: center;gap: 1.6rem;} #header .utils a, #header .utils button{background:none;border:0;padding:0;font-size:1.5rem;cursor:pointer;} #header .utils .btn_login::before, #header .utils .btn_logout::before, #header .utils .btn_user::before, #header .utils .btn_srch_toggle::before, #header .utils .btn_menu_toggle::before, #header .nav_wrap_m .btn_menu_close::before{position:relative;display:block;width:2.4rem;height:2.4rem;background-repeat:no-repeat;background-position: 50%;background-size: contain;} #header .utils .btn_login::before{content: '';background-image: url('images/ico_login.svg');} #header .utils .btn_logout::before{content: '';background-image: url('images/ico_logout.svg');} #header .utils .btn_user::before{content: '';background-image: url('images/ico_user.svg');} #header .utils .btn_user::before{content: '';background-image: url('images/ico_member.svg');} #header .utils .btn_srch_toggle::before{content: '';background-image: url('images/ico_srch.svg');} #header .utils .btn_menu_toggle::before{content: '';background-image: url('images/ico_menu.svg');} html.is_search_open #header .utils .btn_srch_toggle::before, #header .nav_wrap_m .btn_menu_close::before{content: '';background-image: url('images/ico_close.svg');} #header .utils .btn_login, #header .utils .btn_logout, #header .utils .btn_user{font-size:1.5rem;display:flex;align-items: center;gap: 0.4rem;} #header .utils .btn_srch_toggle, #header .utils .btn_login span, #header .utils .btn_logout span, #header .utils .btn_user span{display:none} #header .nav_wrap_m .btn_menu_close{position:absolute;top:3.2rem;right:1.2rem;width:2.4rem;height:2.4rem;background:none;border:0;padding:0;font-size:1.5rem;cursor:pointer;} @media (min-width:1024px){ #header .utils .btn_menu_toggle{display:none;} #header .utils .btn_srch_toggle, #header .utils .btn_user span {display:block;} #header .nav_wrap { display: block; } #header .nav_wrap_m { display: none !important; } } #header .nav_wrap, #header .nav_wrap_m { display: none; } html.is_menu_open #header .nav_wrap_m { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } #header .nav_wrap_m::after{content:'';display:block;width:100%;height:100%;background:rgba(0,0,0,0.5);position:absolute;top:0;left:0;z-index:100;opacity:0;} html.is_menu_open #header .nav_wrap_m::after{animation:cncaf_overlay_fade 0.3s ease forwards;} #header .nav_wrap_m .nav_wrap_m_inner{position:absolute;top:0;right:0;width:80vw;max-width:48rem;min-width:30rem;max-width:38rem;height:100%;background:#fff;z-index:101;padding:8.2rem 1.6rem 2.4rem;transform:translateX(100%);border-radius:2.4rem 0 0 2.4rem;} html.is_menu_open #header .nav_wrap_m .nav_wrap_m_inner{animation:cncaf_panel_slide 0.35s ease forwards;} #header .nav_wrap_m .lnb{} #header .nav_wrap_m .lnb ul {display:flex;flex-direction:column;gap:1.6rem;} #header .nav_wrap_m .lnb a {font-size:1.8rem;color:var(--color-gray100);padding:1.2rem 0;} #header .nav_wrap_m .lnb .menu{display:flex;flex-direction:column;} #header .nav_wrap_m .lnb .menu > li{border-bottom:.1rem solid var(--color-gray30)} #header .nav_wrap_m .lnb .menu > li.is_sub_active > a{color:var(--color-gray100);} #header .nav_wrap_m .lnb .menu > li > a{display:block;padding:1.2rem 4.2rem 1.2rem 1.2rem;font-size:1.8rem;color:var(--color-gray70);font-weight:500;border-radius:.4rem;position:relative;} #header .nav_wrap_m .lnb .menu > li > a::after{content:'';width:2rem;height:2rem;background:url('images/ico_arr_line.svg') no-repeat 50% / contain;position:absolute;right:0;top:50%;opacity:.5;transform:translateY(-50%) rotate(-90deg);transition: .3s;} #header .nav_wrap_m .lnb .menu > li.is_sub_active > a::after{opacity:.5;transform:translateY(-50%) rotate(90deg);opacity:1;} #header .nav_wrap_m .lnb .menu .sub-menu{max-height:0;overflow:hidden;opacity:0;transition:max-height 0.35s ease,opacity 0.25s ease;padding:0 1.2rem;background-color:var(--color-gray10);border-radius:.4rem;} #header .nav_wrap_m .lnb .menu .sub-menu li{} #header .nav_wrap_m .lnb .menu .sub-menu li a{display:block;padding:.8rem 0 .8rem 1.8rem;font-size:1.6rem;color:var(--color-gray70);position:relative;} #header .nav_wrap_m .lnb .menu .sub-menu li a::before{content:'';display:block;width:0.4rem;height:0.4rem;background-color:var(--color-gray70);border-radius:50%;position:absolute;left:.6rem;top:1.8rem;} html{--header-h:15.2rem;--srch-bar-h:14.8rem;} #header .search_bar.search_bar_pc{display:flex;align-items:center;justify-content:center;position:absolute;top:var(--header-h);left:0;width:100%;height:0;min-height:0;overflow:hidden;background-color:var(--color-gray10);border-top:0.1rem solid var(--color-gray30);margin-bottom:0;transition:height .3s, opacity .3s;z-index:100;pointer-events:none;opacity:0;} html.is_search_open #header .search_bar.search_bar_pc{height:var(--srch-bar-h);min-height:var(--srch-bar-h);overflow:visible;pointer-events:auto;opacity:1;} #header .search_bar_pc::after{content:'';display:block;position:absolute;top:100%;left:0;width:100%;height:100vh;background:rgba(0,0,0,0.5);opacity:0;transition:opacity 0.3s;z-index:99;} html.is_search_open #header .search_bar_pc::after{opacity:1;} html.is_search_open body{overflow:hidden;} #header .search_bar.search_bar_pc .search_inner{width:100%;max-width:76.8rem;margin:0 auto;} #header .search_bar.search_bar_pc .search_inner .search_form{height:6.8rem;padding-left:4.8rem;position:relative;} #header .search_bar.search_bar_pc .search_inner .search_form::before{content:'';display:block;width:2.4rem;height:2.4rem;background:url('images/ico_srch.svg') no-repeat 50% / contain;position:absolute;left:2.4rem;top:50%;transform:translateY(-50%);} #header .search_bar.search_bar_pc .search_inner .search_form .search_field{font-size:1.8rem;} #header .search_bar.search_bar_pc .search_inner .search_form .search_submit{width:5.2rem;height:5.2rem;background-color:var(--color-gray50);transition:background-color 0.3s;} #header .search_bar.search_bar_pc .search_inner .search_form .search_submit:hover, #header .search_bar.search_bar_pc .search_inner .search_form .search_submit:focus-visible{background-color:var(--color-gray100);} #header .search_bar{width:100%;margin-bottom:3.2rem;} #header .search_bar .search_inner{} #header .search_bar .search_inner .search_form{width:100%;max-width:76.8rem;margin:0 auto;position:relative;background-color:var(--color-gray20);padding-right:5rem;border-radius:5.2rem;height:5.2rem;} #header .search_bar .search_inner .search_form .screen_reader_text{display:none;} #header .search_bar .search_inner .search_form label{display:block;border-radius:2.4rem;height:100%;} #header .search_bar .search_inner .search_form .search_field{width:100%;padding:0 1.6rem;height:100%;border:0;background-color:transparent;font-size:1.6rem;outline:0;} #header .search_bar .search_inner .search_form .search_submit{position:absolute;top:50%;right:.7rem;transform:translateY(-50%);width:3.8rem;height:3.8rem;border:0;padding:0;font-size:1.5rem;cursor:pointer;text-indent:-9999px;overflow:hidden;white-space:nowrap;background-color:var(--color-gray100);border-radius:50%;} #header .search_bar .search_inner .search_form .search_submit::after{content:'';display:block;width:2.4rem;height:2.4rem;background:url('images/ico_go_srch.svg') no-repeat 50% / contain;background-color:transparent;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);} #header .lnb{position:relative;z-index:1000;} #header .lnb .menu li.is_sub_active .sub-menu{max-height:50rem;opacity:1;padding:1.2rem;gap:0;} @media (min-width:1024px){ #header .utils .btn_menu_toggle{display:none;} #header .utils .btn_srch_toggle, #header .utils .btn_user span {display:block;} #header .nav_wrap { display: block; } #header .nav_wrap_m { display: none !important; } } #header .nav_wrap{--h:3.8rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} #header .nav_wrap .lnb{height:100%;} #header .nav_wrap .lnb .menu{display:flex;flex-direction:row;gap:1.6rem;} #header .nav_wrap .lnb .menu > li:not(:first-child){padding-left:1.8rem;} #header .nav_wrap .lnb .menu > li:not(:first-child)::before{content:'';display:block;width:0.4rem;height:0.4rem;background-color:var(--color-gray50);border-radius:50%;position:absolute;left:0;top:50%;transform:translateY(-50%);} #header .nav_wrap .lnb .menu > li{position:relative;padding-bottom:.8rem;padding-top:.8rem} #header .nav_wrap .lnb .menu > li > a{display:flex;align-items: center;height:var(--h);padding:0 1.6rem;font-size:1.7rem;color:var(--color-gray100);font-weight:500;border-radius:8rem;transition:all 0.3s;white-space:nowrap;} #header .nav_wrap .lnb .menu > li.is_active > a{background-color:var(--color-gray100);color:#fff;} #header .nav_wrap .lnb .menu:hover > li > a{color:var(--color-gray50);} #header .nav_wrap .lnb .menu > li:hover > a{color:var(--color-gray100);} #header .nav_wrap .lnb .menu > li.is_active:hover > a{color:#fff;} #header .nav_wrap .lnb .menu > li .sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:100%;width:fit-content;background-color:#fff;padding:.4rem;border-radius:.6rem;border:0.1rem solid var(--color-gray40);opacity:0;visibility:hidden;transition:opacity 0.25s ease,visibility 0.25s ease;pointer-events:none;} #header .nav_wrap .lnb .menu > li:hover .sub-menu{opacity:1;visibility:visible;pointer-events:auto;display:flex;gap:.4rem;flex-direction:column;} #header .nav_wrap .lnb .menu > li:not(:first-child) .sub-menu{margin-left:1.1rem;} #header .nav_wrap .lnb .menu > li .sub-menu li a{display:block;padding:1.2rem 1.8rem;font-size:1.5rem;color:var(--color-gray70);word-break:keep-all;white-space:nowrap;text-align:center;transition:color 0.3s, background-color 0.3s;border-radius:.4rem;} #header .nav_wrap .lnb .menu > li .sub-menu li a:hover{color:var(--color-gray100);background-color:var(--color-gray20);} #header .nav_wrap .lnb .menu > li.current-menu-parent > a{background:var(--color-gray100);color:#fff;} /* footer */ #footer{position:relative;width:100%;background-color:var(--color-gray10);border-top:0.1rem solid var(--color-gray20);} #footer .footer_inner{width:100%;max-width: var(--max-width);margin:0 auto;padding:4.6rem 1.2rem;display:flex;flex-direction:column;gap:3.2rem} #footer .footer_inner .footer_slogan{display:flex;flex-direction:column;gap:1.6rem;} #footer .footer_inner .footer_slogan .footer_logo{width:13rem;height:3.4rem;background:url(images/logo_footer.png) no-repeat 50% 50% / contain;} #footer .footer_inner .footer_slogan .slogan_box{display:flex;flex-direction:column;gap:1.2rem;} #footer .footer_inner .footer_slogan .slogan_box .slogan{font-size:2.2rem;font-weight:500;} #footer .footer_inner .footer_slogan .slogan_box .desc{font-size:1.6rem;color:var(--color-gray70)} #footer .info_box{display:flex;gap:1.8rem;flex-direction:column;} #footer .info_box .footer-links{display:flex;flex-wrap:wrap;gap:1.8rem;list-style:none;margin:0;padding:0;} #footer .info_box .footer-links li{position:relative} #footer .info_box .footer-links li:not(:first-child){padding-left:2rem;} #footer .info_box .footer-links li:not(:first-child)::before{content:'';width:.2rem;height:.2rem;background-color:var(--color-gray100);border-radius:50%;position:absolute;left:0;top:50%;transform:translateY(-50%);} #footer .info_box .footer-links a{} #footer .info_box .footer-links a:hover{color:var(--color-gray100);text-decoration:underline;} #footer .info_box .addr{font-style:normal;} #footer .info_box .addr dl{display:flex;flex-direction:column;gap:.8rem;} #footer .info_box .addr dl div{display:flex;gap:.8rem;} #footer .info_box .addr dl div dt{font-size:1.5rem;font-weight:500;color:var(--color-gray100);flex:0 0 8rem} #footer .info_box .addr dl div dd{font-size:1.5rem;color:var(--color-gray100);flex:1 1 auto;} #footer .info_box .copy{font-size:1.4rem;color:var(--color-gray70);} @media (min-width:1024px){ #footer .footer_inner{flex-direction:row;justify-content: space-between;} #footer .info_box{gap:3.2rem;} } @media (min-width:1280px){ #footer .footer_inner{padding:5.2rem 1.2rem;} } /* container */ #container{width:100%;padding-bottom:6.2rem;} #container .container_inner{display:block;margin:0 auto;padding:0 1.2rem} .pag_text{font-size:2rem;color:var(--color-gray100);margin-bottom:3.2rem;font-weight:600;transition:font-size .3s;} @media (min-width:1024px){ .pag_text{font-size:2.2rem} } #container .content{width:100%;margin:0 auto;} #container.page_home .content{padding-top:4.8rem} #container.has-sidebar .content{margin:0;} .home #container.no-sidebar{max-width:var(--max-width);margin:0 auto;padding:0 1.2rem 6.2rem;} .home #container.no-sidebar #primary.content{max-width:100%;} /* no sidebar (e.g. front) */ .content-area-wrap.no-sidebar #primary { max-width: 100%; } /* main content area (with sidebar) */ .content-area-wrap {max-width:var(--max-width);margin: 0 auto;padding: 4rem 0 7.2rem;display: flex;} .content-area-wrap.has-sidebar { align-items: flex-start; } /* sidebar (left) */ #secondary.sidebar {flex-shrink: 0;width: 26rem;display:flex;gap:5.2rem;flex-direction:column;} #secondary .sidebar_header {} #secondary .sidebar_header .hgroup{display:flex;flex-direction:column;} #secondary .sidebar_header .hgroup h2 { font-size: 1.6rem; font-weight: 500; color: var(--color-primary);} #secondary .sidebar_header .hgroup h3 { font-size: 3.8rem; color: var(--color-gray100);font-family: var(--font-hakgyoansim);} #secondary .sidebar_header .desc { font-size: 1.8rem; color: var(--color-gray70); margin: 1rem 0 0;} #secondary .sidebar_nav {} #secondary .sidebar-menu {display:none} #secondary .sidebar-menu li{padding-left:2.4rem;position:relative;} #secondary .sidebar-menu li::before{content:'';width:1.4rem;height:.2rem;background-color:#fff;position:absolute;left:0;top:2rem;} #secondary .sidebar-menu .current-menu-item::before{background-color:var(--color-gray100);} #secondary .sidebar-menu a { display:block; padding:.8rem 0; font-size: 1.8rem; color:var(--color-gray50);transition:color .3s;} #secondary .sidebar-menu a:hover, #secondary .sidebar-menu .current-menu-item a { color:var(--color-gray100); font-weight: 500;} #secondary .sidebar-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 1.2rem; } #secondary .sidebar-menu .sub-menu li { border-bottom: none; } #secondary .sidebar-menu .sub-menu a { font-size: 1.4rem; padding: 0.8rem 0; } @media (min-width:1024px){ #container .container_inner{max-width:100%} } @media (min-width:1280px){ #container .content{max-width:76.8rem;} #container .container_inner{padding:0 0 7.2rem;} #container.has-sidebar .container_inner{display:flex;justify-content:space-between;max-width:var(--max-width)} #secondary .sidebar_header .hgroup{gap:.2rem} #secondary .sidebar_header .hgroup h2{font-size:1.4rem;} #secondary .sidebar_header .hgroup h3{font-size:2.6rem;} #secondary .sidebar_header .desc{font-size:1.6rem} #secondary .sidebar-menu {display:block;} } /* breadcrumb */ .breadcrumb {display:flex;align-items:center;justify-content:flex-end; width:100%; max-width: var(--max-width); margin:0 auto; padding:3.2rem 1.2rem;font-size:1.4rem;box-sizing:border-box;color:var(--color-gray60);} .breadcrumb ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li:not(:last-child)::after { content: '';width:1.8rem;height:1.8rem;margin-left: 0.6rem;background:url('images/ico_arr_line.svg') no-repeat 50% 50% / contain;opacity:.5;} .breadcrumb li.home a{display:inline-block;width:1.8rem;height:1.8rem;background:url('images/ico_home.svg') no-repeat 50% 50% / contain;text-indent:-9999px;overflow:hidden;white-space:nowrap;} .breadcrumb a { color:var(--color-gray60); } .breadcrumb a:hover { color:var(--color-gray100); } .breadcrumb .current strong{ color:var(--color-gray100); } @media (min-width:1280px){ .breadcrumb {padding:0 1.2rem 7.4rem;} } .page-title.entry-title{margin-bottom:1.6rem;} /* 회원가입 페이지 */ .content-area-wrap.no-sidebar.register-page { max-width: 76.8rem; margin-left: auto; margin-right: auto; } .content-area-wrap.no-sidebar.register-page #primary { max-width: 76.8rem; margin: 0 auto; } .register-form-article .register-desc { margin-bottom: 2.4rem; color: #555; font-size: 1.5rem; } .register-errors { list-style: none; margin: 0 0 2rem; padding: 1.6rem; background: #fff3f3; border: 0.1rem solid #fcc; border-radius: 0.4rem; color: var(--color-red); font-size: 1.4rem; } /* 회원가입: 모두 동의·버튼은 밖 / 약관+입력은 KBoard mail-form 에디터와 같은 회색 카드 안 */ .register-form .register-agree-all { margin-bottom: 2rem; } .register-form .register-agree-all label { display: inline-flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; line-height: 1.5; font-weight: 600; font-size: 1.4rem; color: var(--color-gray70); } .register-form .register-agree-all label span { flex: 1; min-width: 0; } .register-form-body { box-sizing: border-box; width: 100%; margin-top: 0; padding: 2.4rem 2rem; background: var(--color-gray10); border: 0; border-radius: 0.8rem; overflow: hidden; } .register-form-body .register-agree { margin-bottom: 0; } .register-form-body .register-fields { margin: 0; padding-top: 2.4rem; margin-top: 2.4rem; border-top: 0.1rem solid var(--color-gray30); } .register-form .agree-check, .register-form .agree-age label { display: inline-flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; line-height: 1.5; } .register-form .agree-check span, .register-form .agree-age label span { flex: 1; min-width: 0; } .register-form .agree-box { margin-bottom: 1.6rem; } .register-form .agree-box:last-of-type { margin-bottom: 1.2rem; } .register-form .agree-box h3 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--color-gray70);} .register-form .agree-box h3 .required-text { color: var(--color-red); font-weight: 400; font-size: 1.3rem; } .register-form .agree-content { max-height: 12rem; overflow-y: auto; padding: 1rem 1.2rem; margin-bottom: 1.2rem; font-size: 1.3rem; line-height: 1.7; color: var(--color-gray70); background:#fff; border: 0.1rem solid var(--color-gray30); border-radius: 0.4rem; } .register-form .agree-check { display: flex; font-size: 1.6rem; color: #545861; margin: 0; } .register-form .agree-age { margin-top: 0; margin-bottom: 0; font-size: 1.4rem; color: var(--color-gray70); } .register-form .agree-check { font-size: 1.4rem; color: var(--color-gray70); } /* 커스텀 체크박스·라디오 — KBoard mail-form 스킨과 동일 수치 (테마에서 공통, 아이콘은 테마 images/) */ .register-form input[type="checkbox"], #kboard-mail-form-editor input[type="checkbox"], #kboard-mail-form-editor input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; width: 2.2rem; height: 2.2rem; padding: 0; border: 0.1rem solid var(--color-gray30); border-radius: 0.35rem; background-color: #fff; background-image: url('images/ico_check_g.svg'); background-repeat: no-repeat; background-position: center; background-size: 1.6rem; cursor: pointer; vertical-align: middle; box-sizing: border-box; transition: border-color 0.2s, background-color 0.2s; } .register-form input[type="checkbox"] { margin: 0.1rem 0 0; vertical-align: top; } #kboard-mail-form-editor input[type="checkbox"], #kboard-mail-form-editor input[type="radio"] { margin: 0 0.6rem 0 0; } #kboard-mail-form-editor .kboard-mail-form-privacy-agree input[type="checkbox"] { margin-top: 0.1rem; margin-right: 0; } .register-form input[type="checkbox"]:checked, #kboard-mail-form-editor input[type="checkbox"]:checked, #kboard-mail-form-editor input[type="radio"]:checked { background-color: #fff; background-image: url('images/ico_check_b.svg'); } .register-form input[type="checkbox"]:focus-visible, #kboard-mail-form-editor input[type="checkbox"]:focus-visible, #kboard-mail-form-editor input[type="radio"]:focus-visible { outline: 0.2rem solid var(--color-link); outline-offset: 0.2rem; } #kboard-mail-form-editor input[type="checkbox"]:disabled, #kboard-mail-form-editor input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; } .register-form .register-fields { margin-bottom: 0; } .register-form .form-row { margin-bottom: 1.6rem; } .register-form .form-row:last-child { margin-bottom: 0; } .register-form .form-row label { display: block; margin-bottom: 0.6rem; font-weight: 600; font-size: 1.4rem; color: var(--color-gray70); } .register-form .form-row .input { width: 100%; max-width: none; height: 4.2rem; min-height: 4.2rem; padding: 0 1.2rem; font-size: 1.5rem; border: 0.1rem solid var(--color-gray40); border-radius: 0.4rem; background: #fff; box-sizing: border-box; } .register-form .form-row .input:focus { border-color: var(--color-gray100); outline: none; } .register-form .form-desc { display: block; margin-top: 0.4rem; font-size: 1.3rem; color: var(--color-gray70); } .register-form .required-star { display: inline-block; margin-left: 0.2rem; color: var(--color-red); font-size: 1.3rem; font-weight: 400; line-height: 1; } .register-form .form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2.4rem 0 0; padding: 0; border: 0; } .register-form .btn-cancel { min-width: 12rem; height: 5.2rem; padding: 0 2rem; font-size: 1.5rem; font-weight: 500; color: var(--color-gray100); background: #fff; border: 0.1rem solid var(--color-gray40); border-radius: 0.4rem; } .register-form .btn-cancel:hover { background: var(--color-gray20); border-color: var(--color-gray100); } .register-form .btn-submit { min-width: 16rem; height: 5.2rem; padding: 0 2.4rem; font-size: 1.6rem; font-weight: 500; color: #fff !important; background: var(--color-gray100); border: 0; border-radius: 0.4rem; } .register-form .btn-submit:hover { opacity: 0.92; } .register-form .btn-submit.ico_join::before { background-image: url('images/ico_join_w.svg'); } /* 로그인 페이지 */ .login-page #primary {width:100%; max-width:42rem !important; margin: 0 auto; } .login-form .form-row { margin-bottom: 1.6rem; } .login-form .form-row label { display: block; margin-bottom: 0.6rem; color:var(--color-gray70);font-size: 1.5rem; } .login-form .form-row .input { width: 100%; height:4.8rem; padding: 0 1.2rem; font-size: 1.5rem; border: 0.1rem solid var(--color-gray40); border-radius: 0.4rem; } .login-form .form-remember label { display: inline-flex; align-items: center; gap: 0.8rem; margin-bottom: 0; font-weight: 400; font-size: 1.4rem; color: var(--color-gray70); cursor: pointer; } .login-form .form-remember input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; width: 2.2rem; height: 2.2rem; margin: 0; padding: 0; border: 0.1rem solid var(--color-gray30); border-radius: 0.35rem; background-color: #fff; background-image: url('images/ico_check_g.svg'); background-repeat: no-repeat; background-position: center; background-size: 1.6rem; cursor: pointer; box-sizing: border-box; } .login-form .form-remember input[type="checkbox"]:checked { background-image: url('images/ico_check_b.svg'); border-color: var(--color-gray100); } .login-form .form-remember input[type="checkbox"]:focus-visible { outline: 0.2rem solid var(--color-link); outline-offset: 0.2rem; } .login-form .form-actions { margin-top: 1.6rem; } .login-form-article .login-links {display:flex;justify-content:space-between; margin-top: 2rem; font-size: 1.5rem; color: var(--color-gray70); } .login-form-article .login-links a { color: var(--color-gray70); } .login-form-article .login-links a:hover { color:var(--color-gray100); text-decoration: underline;} .login-form-article .login-links .sep { margin: 0 0.8rem; color:var(--color-gray30);font-size:1.3rem; } .login-form-article .login-links .ico_back { display:inline-flex;gap:.4rem;height:1.8rem;align-items:center;} .login-form-article .login-links .ico_back::before{content:'';display:block;width:1.8rem;height:1.8rem;background:url('images/ico_back.svg') no-repeat 50% 50% / contain;white-space:nowrap;} .login-form-article .login-links .ico_back:hover { color:var(--color-gray100); text-decoration: underline;} .find-account-page .find-account-notice { margin-bottom: 1.6rem; padding: 1.2rem 1.4rem; background: #f1f8ff; border: 0.1rem solid #c9e3ff; border-radius: 0.4rem; color: #0d4f8b; font-size: 1.4rem; } .find-account-page .find-account-form { margin-top: 1.2rem; } /* 메인 상단 비주얼 (회의소 활동 Swiper) */ .main-visual-zone { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 0; box-sizing: border-box; } .main-visual-head { display: flex; align-items:baseline; flex-direction: row; gap: 1.2rem; margin-bottom: 2.4rem; } .main-visual-head h2 { margin: 0; font-size: 3.4rem; color: var(--color-gray100); font-weight: 500; letter-spacing: -0.03em; font-family: var(--font-hakgyoansim); display: flex; align-items: flex-start; gap: 0.8rem;transition:font-size .3s;} .main-visual-head h2::before{content:'';display:block;width:3.4rem;height:3.4rem;background:url('images/ico_slogan.svg') no-repeat 50% 50% / contain;} .main-visual-head a {display:inline-flex;align-items:center; gap:0.4rem; font-size: 1.4rem; color: var(--color-gray70); } .main-visual-head a::before{content:'';display:block;width:.1rem;height:1.8rem;background-color:var(--color-gray40);margin-right:.8rem;} .main-visual-head a::after{content:'';display:block;width:1.8rem;height:1.8rem;background:url('images/ico_arr_line.svg') no-repeat 50% 50% / contain;opacity:.5;} .main-visual-head a:hover { color: var(--color-gray100); text-decoration: underline; } .main-visual-head a:hover::after{opacity:1;} .cncaf-main-swiper .swiper-slide {height: auto;border-radius: 2.4rem; overflow: hidden;} .main-visual-item { position: relative; display: block;} .main-visual-image-wrap { position: relative; width: 100%; aspect-ratio: 5 / 2.2;} .main-visual-image-wrap::after { content: ''; position: absolute; inset: 0; background: transparent; } .main-visual-image-wrap.has-image:not(.is-broken)::after { background: linear-gradient(180deg, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.7) 100%); } .main-visual-image { display: block; width: 100%; height: 100%; object-fit: cover; transition:.3s;} .main-visual-thumb-placeholder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-gray30); } .main-visual-thumb-placeholder::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7.2rem; height: 7.2rem; margin: -3.6rem 0 0 -3.6rem; border-radius: 50%; background: var(--color-gray40) url('images/bg_noresult.svg') no-repeat center / 4rem; } .main-visual-image-wrap.has-image .main-visual-thumb-placeholder { display: none; } .main-visual-image-wrap.is-broken .main-visual-image { display: none; } .main-visual-image-wrap.is-broken .main-visual-thumb-placeholder { display: block; } .main-visual-caption { position: absolute; left: 4.8rem; right: 4.8rem; bottom: 4.8rem; z-index: 2; color: #fff; transition:.3s;} .main-visual-meta { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; } .main-visual-meta .board-name { display: inline-flex; align-items: center; height: 2.6rem; padding: 0 0.8rem; border-radius: 0.3rem; background:#fff; color: var(--color-gray100); font-size: 1.3rem; font-weight: 500; } .main-visual-meta .is-new { display: inline-flex; align-items: center; height: 2.6rem; padding: 0 0.8rem; border-radius: 0.3rem; background:var(--color-red); color:#fff; font-size: 1.2rem; font-weight: 500; } .main-visual-caption h3 { margin: 0 0 0.8rem; font-size: 3.4rem; line-height: 1.2; font-weight: 500; color: #fff; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom:1.2rem;transition:.3s font-size;} .main-visual-caption p { margin: 0; font-size: 1.8rem; color:var(--color-gray40); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition:.3s font-size;} .main-visual-swiper-nav { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.2rem; color:var(--color-gray50);} .main-visual-swiper-nav span{color:var(--color-gray70);font-size:1.6rem;font-weight:300;} .main-visual-swiper-nav .swiper-pagination-current{font-weight:500;color:var(--color-blue)} .main-visual-zone .cncaf-main-swiper-pagination { position: static; width: auto; min-width: 4.2rem; text-align: center; font-size: 1.4rem; color: var(--color-gray60); } .main-visual-zone .cncaf-main-swiper-prev, .main-visual-zone .cncaf-main-swiper-next { width: 3.4rem; height: 3.4rem;cursor: pointer; position: relative; } .main-visual-zone .cncaf-main-swiper-prev::before, .main-visual-zone .cncaf-main-swiper-next::before { content: '';width:75%;height:75%; position: absolute; left: 50%; top: 50%;transform:translate(-50%,-50%);background:url('images/ico_arr_line.svg') no-repeat 50% 50% / contain;transform-origin: center;} .main-visual-zone .cncaf-main-swiper-prev::before{transform: rotate(180deg) translate(50%,50%);} .main-visual-empty .main-visual-item { cursor: default; } @media (max-width: 1024px) { .main-visual-head h2{font-size:2.8rem;} .main-visual-image-wrap { aspect-ratio: 5 / 3; } .main-visual-caption{left:2.4rem;right:2.4rem;bottom:2.4rem;} .main-visual-caption h3{font-size:2.4rem;} .main-visual-caption p{font-size:1.5rem;} } /* 메인: 언론기사 섹션 */ .main-press-zone { width: 100%; max-width: var(--max-width); margin: 5.6rem auto 0; } .main-press-head { display: flex; align-items: baseline; flex-direction: row; gap: 1.2rem; margin-bottom: 2.2rem; } .main-press-head h2 { margin: 0; font-size: 2.6rem; color: var(--color-gray100); font-weight: 500; letter-spacing: -0.03em; font-family: var(--font-hakgyoansim); display: flex; align-items: flex-start; gap: 0.8rem; } .main-press-head a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.4rem; color: var(--color-gray70); } .main-press-head a::before { content: ''; display: block; width: 0.1rem; height: 1.8rem; background: var(--color-gray40); margin-right: 0.8rem; } .main-press-head a::after { content: ''; display: block; width: 1.8rem; height: 1.8rem; background: url('images/ico_arr_line.svg') no-repeat 50% 50% / contain; opacity: .5; } .main-press-head a:hover { color: var(--color-gray100); text-decoration: underline; } .main-press-head a:hover::after { opacity: 1; } .main-press-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; } .main-press-card { display: block; color: var(--color-gray100); } .main-press-card:hover h3 { text-decoration: underline; } .main-press-thumb-wrap { position: relative; width: 100%; aspect-ratio: 5 / 3; background: var(--color-gray30); border-radius: 0.6rem; overflow: hidden; margin-bottom: 1rem; } .main-press-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .main-press-thumb-placeholder { position: absolute; inset: 0; background: var(--color-gray30); } .main-press-thumb-placeholder::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5.6rem; height: 5.6rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-gray40) url('images/bg_noresult.svg') no-repeat center / 3.2rem; } .main-press-meta { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; } .main-press-meta .badge { display: inline-flex; align-items: center; height: 2.2rem; padding: 0 0.8rem; border-radius: 0.3rem; font-size: 1.2rem; font-weight: 500; color: #fff; background: var(--color-gray100); border: 0; } .main-press-meta .badge.new { background: var(--color-red); } .main-press-meta .badge.source { color: var(--color-gray100); background: #fff; border: 0.1rem solid var(--color-gray100); max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main-press-card h3 { margin: 0; font-size: 1.7rem; font-weight: 500; color: var(--color-gray100); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } @media (max-width: 1024px) { .main-press-head h2 { font-size: 2.2rem; } .main-press-head h2::before { width: 2.8rem; height: 2.8rem; } .main-press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 메인: 3단 배너 */ .main-quick-banners { width: 100%; max-width: var(--max-width); margin: 5.6rem auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; } .main-quick-banners .quick-banner { position: relative; display: flex; align-items: center; min-height: 11rem; padding: 2.2rem 10rem 2.2rem 2.4rem; border-radius: 0.8rem; transition: transform .3s ease; overflow: hidden; } .main-quick-banners .quick-banner:hover { transform: translateY(-0.8rem); } .main-quick-banners .quick-banner::after { content: ''; position: absolute; right: 2.4rem; top: 50%; width: 5.6rem; height: 5.6rem; transform: translateY(-50%); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .main-quick-banners .quick-banner .text-wrap { min-width: 0; } .main-quick-banners .quick-banner .sub { margin: 0 0 0.6rem; font-size: 1.5rem;font-weight: 400;} .main-quick-banners .quick-banner strong { display: block; font-size: 2rem; line-height: 1.08; letter-spacing: -0.02em; font-family: var(--font-hakgyoansim); font-weight: 400; } .main-quick-banners .quick-banner-01 { background: #F3F9FF; } .main-quick-banners .quick-banner-01 .sub, .main-quick-banners .quick-banner-01 strong { color:#2E569A; } .main-quick-banners .quick-banner-01::after { background-image: url('images/img_bnr01.png'); } .main-quick-banners .quick-banner-02 { background: #FBF7EF; } .main-quick-banners .quick-banner-02 .sub, .main-quick-banners .quick-banner-02 strong { color: #865E12; } .main-quick-banners .quick-banner-02::after { background-image: url('images/img_bnr02.png'); } .main-quick-banners .quick-banner-03 { background: #FCF2F0; } .main-quick-banners .quick-banner-03 .sub, .main-quick-banners .quick-banner-03 strong { color: #D82F26; } .main-quick-banners .quick-banner-03::after { background-image: url('images/img_bnr03.png'); } @media (max-width: 1024px) { .main-quick-banners { grid-template-columns: 1fr; } .main-quick-banners .quick-banner { min-height: 9.2rem; padding: 1.8rem 7.8rem 1.8rem 2rem; } .main-quick-banners .quick-banner::after { width: 4.4rem; height: 4.4rem; right: 1.8rem; } } /* 메인: 공지사항 + 유튜브 */ .main-notice-youtube { width: 100%; max-width: var(--max-width); margin: 5.6rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4.2rem; align-items: start; } .main-notice-youtube .section-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.4rem; } .main-notice-youtube .section-head h2 { margin: 0; font-size: 2.6rem; color: var(--color-gray100); font-weight: 500; letter-spacing: -0.03em; font-family: var(--font-hakgyoansim); } .main-notice-youtube .section-head a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.4rem; color: var(--color-gray70); } .main-notice-youtube .section-head a::before { content: ''; display: block; width: 0.1rem; height: 1.8rem; background: var(--color-gray40); margin-right: 0.8rem; } .main-notice-youtube .section-head a::after { content: ''; display: block; width: 1.8rem; height: 1.8rem; background: url('images/ico_arr_line.svg') no-repeat 50% 50% / contain; opacity: .5; } .main-notice-youtube .notice-list { border-top: 0.1rem solid var(--color-gray100); padding-top: 0.8rem; } .main-notice-youtube .notice-list li { display: grid; grid-template-columns: 1fr auto; gap: 2.4rem; align-items: center; padding: 1.4rem 0 1.4rem 1.2rem; border-bottom:.1rem solid var(--color-gray30); position: relative;} .main-notice-youtube .notice-list li::before{content:'';display:block;width:.4rem;height:.4rem;background:var(--color-gray50);border-radius:50%;position:absolute;left:0;top:50%;transform:translateY(-50%);} .main-notice-youtube .notice-list .title { min-width: 0; display: inline-flex; align-items: center; gap: 0.6rem; color: var(--color-gray100); } .main-notice-youtube .notice-list .title span:last-child { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main-notice-youtube .notice-list .badge-new { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; border-radius: 0.3rem; background: var(--color-red); color: #fff; font-size: 1.1rem; font-weight: 500; line-height: 1; } .main-notice-youtube .notice-list .date { color: var(--color-gray50); font-size: 1.3rem; } .main-notice-youtube .notice-list .empty { color: var(--color-gray70); font-size: 1.5rem; padding: 1.2rem 0; display: block; } .main-notice-youtube .youtube-wrap { border-radius: 0.8rem; overflow: hidden; background: #000; line-height: 0; } .main-notice-youtube .youtube-wrap iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; } @media (max-width: 1024px) { .main-notice-youtube { grid-template-columns: 1fr; } .main-notice-youtube .section-head h2 { font-size: 2.2rem; } } /* 메인: 협력기관 로고 배너 */ .main-agency-banners { width: 100%; max-width: var(--max-width); margin: 5.6rem auto 0; } .main-agency-banners .agency-list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; align-items: center; } .main-agency-banners .agency-list li { display: flex; align-items: center; justify-content: center; min-height: 4.8rem; } .main-agency-banners .agency-list img { display: block; width: 100%; height: 7.2rem; max-width: 100%; object-fit: contain; } @media (max-width: 1024px) { .main-agency-banners .agency-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 마이페이지 */ .mypage-page #primary { width: 100%; max-width: 76.8rem !important; margin: 0 auto; } .mypage-card { margin-bottom: 2rem; } .mypage-card:last-child { margin-bottom: 0; } .mypage-section-title { margin: 0 0 1.4rem; font-size: 2rem; color: var(--color-gray100); } .mypage-info-list { list-style: none; margin: 0; padding: 0; border-top: 0.1rem solid var(--color-gray30); } .mypage-info-list li { display: flex; gap: 1.2rem; align-items: center; padding: 1.2rem 0; border-bottom: 0.1rem solid var(--color-gray20); } .mypage-info-list li strong { width: 8rem; flex-shrink: 0; color: var(--color-gray70); font-size: 1.4rem; font-weight: 600; } .mypage-info-list li span { color: var(--color-gray100); font-size: 1.5rem; } .mypage-delete-desc { margin: 0 0 1.4rem; color: var(--color-gray70); font-size: 1.4rem; } .mypage-form .form-actions { margin-top: 2rem; } /* KBoard 게시글 보기 헤더 통일 (default·thumbnail·avatar·mail-form·contact-form 등 classic 스킨 + board와 동일 구조) */ #kboard-default-document.post-view, #kboard-thumbnail-document.post-view, #kboard-avatar-document.post-view, #kboard-mail-form-document.post-view, #kboard-contact-form-document.post-view { display: block; float: none; width: 100%; max-width: var(--max-width); margin-left: auto; margin-right: auto; } #kboard-default-document.post-view .kboard-document-wrap, #kboard-thumbnail-document.post-view .kboard-document-wrap, #kboard-avatar-document.post-view .kboard-document-wrap, #kboard-mail-form-document.post-view .kboard-document-wrap, #kboard-contact-form-document.post-view .kboard-document-wrap { float: none; width: 100%; max-width: var(--max-width); margin-left: auto; margin-right: auto; } #kboard-default-document.post-view .view-header, #kboard-thumbnail-document.post-view .view-header, #kboard-avatar-document.post-view .view-header, #kboard-mail-form-document.post-view .view-header, #kboard-contact-form-document.post-view .view-header { border-bottom: 0.1rem solid var(--color-gray100); padding-bottom: 1.2rem; text-align: left; } #kboard-default-document.post-view .view-title-row, #kboard-thumbnail-document.post-view .view-title-row, #kboard-avatar-document.post-view .view-title-row, #kboard-mail-form-document.post-view .view-title-row, #kboard-contact-form-document.post-view .view-title-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: nowrap; margin-bottom: 1.2rem; width: 100%; } #kboard-default-document.post-view .view-title-row .view-title-box, #kboard-thumbnail-document.post-view .view-title-row .view-title-box, #kboard-avatar-document.post-view .view-title-row .view-title-box, #kboard-mail-form-document.post-view .view-title-row .view-title-box, #kboard-contact-form-document.post-view .view-title-row .view-title-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; } #kboard-default-document.post-view .view-actions, #kboard-thumbnail-document.post-view .view-actions, #kboard-avatar-document.post-view .view-actions, #kboard-mail-form-document.post-view .view-actions, #kboard-contact-form-document.post-view .view-actions { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; align-self: flex-start; } #kboard-default-document.post-view .view-badges, #kboard-thumbnail-document.post-view .view-badges, #kboard-avatar-document.post-view .view-badges, #kboard-mail-form-document.post-view .view-badges, #kboard-contact-form-document.post-view .view-badges { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } #kboard-default-document.post-view .view-badges .badge-notice, #kboard-thumbnail-document.post-view .view-badges .badge-notice, #kboard-avatar-document.post-view .view-badges .badge-notice, #kboard-mail-form-document.post-view .view-badges .badge-notice, #kboard-contact-form-document.post-view .view-badges .badge-notice { display: inline-flex; align-items: center; justify-content: center; min-height: 2.2rem; padding: 0 0.6rem; font-size: 1.1rem; line-height: 1; color: #fff; background: var(--color-gray100); border-radius: 0.3rem; box-sizing: border-box; } #kboard-default-document.post-view .view-badges .badge-new, #kboard-thumbnail-document.post-view .view-badges .badge-new, #kboard-avatar-document.post-view .view-badges .badge-new, #kboard-mail-form-document.post-view .view-badges .badge-new, #kboard-contact-form-document.post-view .view-badges .badge-new { display: inline-flex; align-items: center; justify-content: center; min-height: 2.2rem; padding: 0 0.6rem; font-size: 1.1rem; line-height: 1; color: #fff; background: var(--color-red); font-weight: 500; border-radius: 0.3rem; box-sizing: border-box; } #kboard-default-document.post-view .view-title, #kboard-thumbnail-document.post-view .view-title, #kboard-avatar-document.post-view .view-title, #kboard-mail-form-document.post-view .view-title, #kboard-contact-form-document.post-view .view-title { margin: 0; flex: 1; min-width: 0; text-align: left; font-weight: 700; color: var(--color-gray100); } #kboard-default-document.post-view .btn-icon, #kboard-thumbnail-document.post-view .btn-icon, #kboard-avatar-document.post-view .btn-icon, #kboard-mail-form-document.post-view .btn-icon, #kboard-contact-form-document.post-view .btn-icon { width: 4.2rem; height: 4.2rem; min-width: 4.2rem; border-radius: 1.2rem; background: var(--color-gray20); border: 0; color: var(--color-gray70); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.3s; flex-shrink: 0; } #kboard-default-document.post-view .btn-icon::after, #kboard-thumbnail-document.post-view .btn-icon::after, #kboard-avatar-document.post-view .btn-icon::after, #kboard-mail-form-document.post-view .btn-icon::after, #kboard-contact-form-document.post-view .btn-icon::after { content: ''; display: block; width: 2rem; height: 2rem; background-position: 50%; background-repeat: no-repeat; background-size: contain; } #kboard-default-document.post-view .btn-icon:hover, #kboard-thumbnail-document.post-view .btn-icon:hover, #kboard-avatar-document.post-view .btn-icon:hover, #kboard-mail-form-document.post-view .btn-icon:hover, #kboard-contact-form-document.post-view .btn-icon:hover { background-color: var(--color-gray30); } #kboard-default-document.post-view .btn-icon.btn-print::after, #kboard-thumbnail-document.post-view .btn-icon.btn-print::after, #kboard-avatar-document.post-view .btn-icon.btn-print::after, #kboard-mail-form-document.post-view .btn-icon.btn-print::after, #kboard-contact-form-document.post-view .btn-icon.btn-print::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill='%23727272' d='M14.333 1.66699C14.7009 1.66717 14.9988 1.96508 14.999 2.33301V5.83301H16.8359C17.6643 5.83301 18.3358 6.50473 18.3359 7.33301V15.167C18.3358 15.5351 18.0371 15.834 17.6689 15.834H14.999V17.667C14.9989 18.035 14.701 18.3338 14.333 18.334H5.83301C5.46487 18.334 5.1661 18.0351 5.16602 17.667V15.834H2.33301C2.15628 15.8339 1.98726 15.7627 1.8623 15.6377C1.73737 15.5127 1.66704 15.3437 1.66699 15.167L1.66895 7.33301C1.66919 6.50478 2.34073 5.83305 3.16895 5.83301H5V2.33301C5.00018 1.96497 5.29891 1.66699 5.66699 1.66699H14.333ZM6.49902 17H13.666V12.334H6.49902V17ZM3.16895 7.16699C3.07704 7.16703 3.00213 7.24113 3.00195 7.33301L3 14.5H5.16602V11.667C5.16602 11.2988 5.46482 11 5.83301 11H14.333C14.5096 11.0001 14.6788 11.0705 14.8037 11.1953C14.9287 11.3203 14.999 11.4902 14.999 11.667V14.5H17.0029V7.33301C17.0028 7.24111 16.9279 7.16699 16.8359 7.16699H3.16895ZM6.33301 5.83301H13.666V3H6.33301V5.83301Z'/%3E%3C/svg%3E"); } #kboard-default-document.post-view .view-meta, #kboard-thumbnail-document.post-view .view-meta, #kboard-avatar-document.post-view .view-meta, #kboard-mail-form-document.post-view .view-meta, #kboard-contact-form-document.post-view .view-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.4rem; color: var(--color-gray70); margin-bottom: 0; } #kboard-default-document.post-view .view-meta .meta-sep, #kboard-thumbnail-document.post-view .view-meta .meta-sep, #kboard-avatar-document.post-view .view-meta .meta-sep, #kboard-mail-form-document.post-view .view-meta .meta-sep, #kboard-contact-form-document.post-view .view-meta .meta-sep { color: var(--color-gray40); user-select: none; } #kboard-default-document.post-view .view-meta .meta-author, #kboard-thumbnail-document.post-view .view-meta .meta-author, #kboard-avatar-document.post-view .view-meta .meta-author, #kboard-mail-form-document.post-view .view-meta .meta-author, #kboard-contact-form-document.post-view .view-meta .meta-author { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; } #kboard-avatar-document.post-view .view-meta .meta-author img.avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; vertical-align: middle; } #kboard-default-document.post-view .view-categories, #kboard-thumbnail-document.post-view .view-categories, #kboard-avatar-document.post-view .view-categories, #kboard-mail-form-document.post-view .view-categories, #kboard-contact-form-document.post-view .view-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 1rem; margin-bottom: 0; } #kboard-default-document.post-view .view-cat-chip, #kboard-thumbnail-document.post-view .view-cat-chip, #kboard-avatar-document.post-view .view-cat-chip, #kboard-mail-form-document.post-view .view-cat-chip, #kboard-contact-form-document.post-view .view-cat-chip { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; font-size: 1.3rem; color: var(--color-gray70); background: var(--color-gray10); border: 0.1rem solid var(--color-gray30); border-radius: 0.3rem; } /* 접수형(mail-form·contact-form) 글보기: 응답 필드 카드 + 본문·하단 동선 */ #kboard-mail-form-document.post-view .kboard-content, #kboard-contact-form-document.post-view .kboard-content { margin-top: 1.6rem; } #kboard-mail-form-document.post-view .kboard-content .content-body, #kboard-contact-form-document.post-view .kboard-content .content-body { font-family: inherit; font-size: 1.5rem; line-height: 1.75; color: var(--color-gray100); word-break: break-word; } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields { margin: 0 0 2rem; padding: 0; background: var(--color-gray10); border: 0.1rem solid var(--color-gray30); border-radius: 0.8rem; overflow: hidden; box-sizing: border-box; } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields .kboard-document-add-option-value, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields .kboard-document-add-option-value { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: 0.6rem 1.6rem; align-items: start; padding: 1.2rem 1.6rem; margin: 0; font-size: 1.5rem; line-height: 1.55; border-bottom: 0.1rem solid var(--color-gray30); box-sizing: border-box; } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields .kboard-document-add-option-value:last-of-type, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields .kboard-document-add-option-value:last-of-type { border-bottom: 0; } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields .option-separator, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields .option-separator { display: none; } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields .option-name, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields .option-name { font-weight: 600; font-size: 1.4rem; color: var(--color-gray70); } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields .option-value, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields .option-value { color: var(--color-gray100); font-weight: 400; } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields .option-value .kboard-button-action, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields .option-value .kboard-button-action { margin: 0; vertical-align: baseline; } #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields hr, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields hr { display: none; margin: 0; border: 0; height: 0; } @media (max-width: 560px) { #kboard-mail-form-document.post-view .cncaf-kboard-doc-fields .kboard-document-add-option-value, #kboard-contact-form-document.post-view .cncaf-kboard-doc-fields .kboard-document-add-option-value { grid-template-columns: 1fr; gap: 0.4rem 0; } } #kboard-mail-form-document.post-view .kboard-document-action, #kboard-contact-form-document.post-view .kboard-document-action { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 0.1rem solid var(--color-gray30); } #kboard-mail-form-document.post-view .kboard-attach, #kboard-contact-form-document.post-view .kboard-attach { margin-top: 1.2rem; padding: 1.2rem 0 0; border-top: 0.1rem solid var(--color-gray30); display: flex; flex-wrap: wrap; gap: 0.8rem; } #kboard-mail-form-document.post-view .kboard-document-navi, #kboard-contact-form-document.post-view .kboard-document-navi { float: none; width: 100%; margin-top: 2rem; padding-top: 1.6rem; border-top: 0.1rem solid var(--color-gray30); display: flex; flex-direction: column; gap: 0.8rem; clear: both; } #kboard-mail-form-document.post-view .kboard-document-navi a, #kboard-contact-form-document.post-view .kboard-document-navi a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.4rem; color: var(--color-gray70); text-decoration: none; transition: color 0.2s; } #kboard-mail-form-document.post-view .kboard-document-navi a:hover, #kboard-contact-form-document.post-view .kboard-document-navi a:hover { color: var(--color-gray100); } #kboard-mail-form-document.post-view .kboard-document-navi .navi-document-title, #kboard-contact-form-document.post-view .kboard-document-navi .navi-document-title { font-weight: 500; color: var(--color-gray100); } #kboard-mail-form-document.post-view .kboard-control, #kboard-contact-form-document.post-view .kboard-control { float: none !important; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.2rem; width: 100% !important; margin-top: 2rem; padding-top: 1.6rem; border-top: 0.1rem solid var(--color-gray30); clear: both; box-sizing: border-box; } #kboard-mail-form-document.post-view .kboard-control .left, #kboard-mail-form-document.post-view .kboard-control .right, #kboard-contact-form-document.post-view .kboard-control .left, #kboard-contact-form-document.post-view .kboard-control .right { float: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; } #kboard-mail-form-document.post-view .kboard-control .btn, #kboard-contact-form-document.post-view .kboard-control .btn { min-width: auto; height: 4.2rem; padding: 0 1.4rem; font-size: 1.4rem; font-weight: 500; border-radius: 0.5rem; } #kboard-mail-form-document.post-view .kboard-control .btn.primary, #kboard-contact-form-document.post-view .kboard-control .btn.primary { min-width: 10rem; } /* KBoard 글쓰기: 캡차 라벨(보안코드) + 이미지 줄바꿈 */ .kboard-attr-captcha .kboard-captcha-image { margin-bottom: 0.8rem; } .kboard-attr-captcha .kboard-captcha-image img { display: block; max-width: 100%; height: auto; vertical-align: top; } /* ------------------------------------------------------------------------- * KBoard: 글쓰기·비밀번호 확인 하단 버튼(취소/목록/저장·확인 등) — 모두 오른쪽 한 줄(동선) * ------------------------------------------------------------------------- */ #kboard-default-editor .kboard-control, #kboard-thumbnail-editor .kboard-control, #kboard-avatar-editor .kboard-control, #kboard-contact-form-editor .kboard-control, #kboard-mail-form-editor .kboard-control, #kboard-mail-form-editor .kboard-mail-form-control.btn_wrap { float: none !important; display: flex !important; flex-flow: row wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 0.8rem 1rem !important; width: 100% !important; box-sizing: border-box; clear: both; } #kboard-default-editor .kboard-control .left, #kboard-default-editor .kboard-control .right, #kboard-thumbnail-editor .kboard-control .left, #kboard-thumbnail-editor .kboard-control .right, #kboard-avatar-editor .kboard-control .left, #kboard-avatar-editor .kboard-control .right, #kboard-contact-form-editor .kboard-control .left, #kboard-contact-form-editor .kboard-control .right, #kboard-mail-form-editor .kboard-control .left, #kboard-mail-form-editor .kboard-control .right, #kboard-mail-form-editor .kboard-mail-form-control.btn_wrap > .left, #kboard-mail-form-editor .kboard-mail-form-control.btn_wrap > .right { float: none !important; position: static !important; width: auto !important; max-width: none !important; text-align: inherit !important; display: flex !important; flex-flow: row wrap !important; align-items: center !important; gap: 0.8rem !important; margin: 0 !important; } @media screen and (max-width: 76.8rem) { #kboard-mail-form-editor .kboard-mail-form-control.btn_wrap { flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; } #kboard-mail-form-editor .kboard-mail-form-control.btn_wrap > .left, #kboard-mail-form-editor .kboard-mail-form-control.btn_wrap > .right { width: auto !important; justify-content: flex-end !important; } } /* KBoard 통합검색 (page-kboard-search.php) — kboard skin/board 모바일 리스트·검색과 동일 톤 (10px=1rem) */ .cncaf-kboard-search-wrap #primary.cncaf-kboard-search { max-width: 76.8rem; margin-left: auto; margin-right: auto; width: 100%; } .cncaf-kboard-search-article { width: 100%; } .cncaf-kboard-search-header .page-title { font-size: 2.2rem; font-weight: 600; color: var(--color-gray100); margin: 0 0 2.4rem; } /* 통합검색창: 헤더에서 검색 버튼 눌렀을 때와 동일 (#header .search_bar.search_bar_pc .search_inner …) */ .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar { width: 100%; margin: 0 0 3.2rem; position: relative; left: auto; top: auto; height: auto; min-height: 0; overflow: visible; opacity: 1; pointer-events: auto; background: transparent; border: 0; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar::after { display: none; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner { width: 100%; max-width: 76.8rem; margin: 0 auto; } /* 헤더 PC 검색 패널과 동일: 높이 6.8rem · 돋보기 · 제출 5.2rem·gray50 */ .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form { width: 100%; max-width: 76.8rem; margin: 0 auto; position: relative; background-color: var(--color-gray20); padding-right: 5rem; padding-left: 4.8rem; border-radius: 5.2rem; height: 6.8rem; box-sizing: border-box; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form::before { content: ''; display: block; width: 2.4rem; height: 2.4rem; background: url('images/ico_srch.svg') no-repeat 50% / contain; position: absolute; left: 2.4rem; top: 50%; transform: translateY(-50%); pointer-events: none; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form .screen_reader_text { display: none; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form label { display: block; border-radius: 2.4rem; height: 100%; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form .search_field { width: 100%; padding: 0 1.6rem; height: 100%; border: 0; background-color: transparent; font-size: 1.8rem; outline: 0; box-sizing: border-box; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form .search_submit { position: absolute; top: 50%; right: 0.7rem; transform: translateY(-50%); width: 5.2rem; height: 5.2rem; border: 0; padding: 0; font-size: 1.5rem; cursor: pointer; text-indent: -9999px; overflow: hidden; white-space: nowrap; background-color: var(--color-gray50); border-radius: 50%; transition: background-color 0.3s; } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form .search_submit:hover, .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form .search_submit:focus-visible { background-color: var(--color-gray100); } .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner .search_form .search_submit::after { content: ''; display: block; width: 2.4rem; height: 2.4rem; background: url('images/ico_go_srch.svg') no-repeat 50% / contain; background-color: transparent; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 결과 요약 + 목록 구분선 */ .cncaf-kboard-search-summary { float: none; display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0 0 0; padding: 0 0 1.2rem; font-size: 2rem; color: var(--color-gray100); line-height: 1.5; border-bottom: 0.1rem solid var(--color-gray100); } .cncaf-kboard-search-kw { font-weight: 600; } .cncaf-kboard-search-count { color: var(--color-red); font-weight: 700; } /* 검색 결과 영역 (요약 + 리스트 또는 빈 화면) */ .cncaf-kboard-search-results { margin-top: 0; width: 100%; background: #fff; } /* 검색 0건: bg_noresult.svg + 안내 (상단 요약·구분선 아래 영역) */ .cncaf-kboard-search-empty-state { margin: 0; padding: 0; background: #fff; clear: both; } .cncaf-kboard-search-empty-state__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 28rem; padding: 4rem 2rem 4.8rem; box-sizing: border-box; border-bottom: 0.1rem solid var(--color-gray30); } .cncaf-kboard-search-empty-state__icon { display: block; width: 7.7rem; height: auto; margin: 0 0 2rem; flex-shrink: 0; } .cncaf-kboard-search-empty-state__title { margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.4; color: var(--color-gray100); } .cncaf-kboard-search-empty-state__desc { margin: 1.2rem 0 0; font-size: 1.4rem; font-weight: 400; line-height: 1.5; color: var(--color-gray70); } /* 리스트: 기존 레이아웃 유지, 폰트만 cn_board 목록(.list-title a / .list-meta)과 맞춤 */ .cncaf-kboard-search-list { float: none; list-style: none; padding: 0; font-size: 1.4rem; background: #fff; border-top: 0; } .cncaf-kboard-search-item { position: relative; display: block; margin: 0; padding: 0; border: 0; border-bottom: 0.1rem solid var(--color-gray30); } .cncaf-kboard-search-item::after { content: ''; position: absolute; right: 1.2rem; top: 50%; width: 2rem; height: 2rem; transform: translateY(-50%); background: url('images/ico_arr_line.svg') no-repeat center / contain; pointer-events: none; z-index: 0; } .cncaf-kboard-search-item__link { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0.8rem 0; min-height: min-content; padding: 2.2rem 3rem 2.2rem 0; text-decoration: none; color: inherit; box-sizing: border-box; } .cncaf-kboard-search-item__body { display: flex; flex-direction: column; min-width: 0; min-height: min-content; width: 100%; overflow: visible; } .cncaf-kboard-search-item__title { margin-bottom: 0.8rem; font-size: 1.7rem; font-weight: 600; line-height: 1.5; color: var(--color-gray100); word-break: keep-all; overflow-wrap: anywhere; } .cncaf-kboard-search-item__link:hover .cncaf-kboard-search-item__title { color: var(--color-primary); } .cncaf-kboard-search-item__title .cncaf-search-hit { color: var(--color-blue); font-weight: 500; } .cncaf-kboard-search-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.45rem; font-size: 1.3rem; line-height: 1.4; color: var(--color-gray70); } .cncaf-kboard-search-item__sep { color: var(--color-gray40); user-select: none; font-weight: 300; } .cncaf-kboard-search-item__date { color: inherit; } @media screen and (max-width: 76.8rem) { .cncaf-kboard-search-item__title { font-size: 1.6rem; font-weight: 500; } } .cncaf-kboard-search-empty, .cncaf-kboard-search-hint { margin-top: 2rem; font-size: 1.5rem; color: var(--color-gray70); } /* 페이지네이션: board .pagination-pages */ .cncaf-kboard-search-pagination { float: none; padding: 2.4rem 0; text-align: center; } .cncaf-kboard-search-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.4rem; } .cncaf-kboard-search-pagination li { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .cncaf-kboard-search-pagination .page-numbers { min-width: 3.6rem; height: 3.6rem; line-height: 3.6rem; padding: 0 1rem; color: var(--color-gray70); background: transparent; border-radius: 0.4rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .cncaf-kboard-search-pagination a.page-numbers:hover { color: var(--color-gray100); background: var(--color-gray30); } .cncaf-kboard-search-pagination .page-numbers.current { color: var(--color-gray100); background: var(--color-gray20); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; } @media screen and (max-width: 768px) { .cncaf-kboard-search-wrap .search_bar.search_bar_pc.cncaf-kboard-search_bar .search_inner { max-width: none; } } @media (max-width: 767px) { #header .main-nav { display: none; } .content-area-wrap { flex-direction: column; padding: 3.8rem 1.6rem 7.2rem; } #secondary.sidebar { width: 100%; } #footer .footer-top { flex-direction: column; } } .page_header{width:100%;aspect-ratio:100/32;border-radius:1.2rem;font-family: var(--font-hakgyoansim-sangjang);color:#fff;display:flex;padding:2.4rem 3.2rem;font-size:2.2rem;margin-bottom:5.2rem;} .hr{margin:3.2rem 0;border:0;border-top:0.1rem solid var(--color-gray100);} .hr.no_line{margin:3.2rem 0 0;border:0;} @media (min-width:768px){ .hr{margin:5.2rem 0;} .hr.no_line{margin:5.2rem 0 0;} } .cont_ol{line-height:1.8em} .cont_ol .tit_box{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.8rem;} .cont_ol .tit_box .num{font-size:1.6rem;font-weight:500;color:#fff;background:var(--color-gray100);width:3.8rem;height:3.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;} .cont_ol .tit_box h3{font-size:1.8rem;} .cont_ol p{} @media (min-width:768px){ .cont_ol .tit_box .num{font-size:1.7rem;} .cont_ol .tit_box h3{font-size:2rem;} } /* 인사말 */ .page_header.greetings{background:url('images/img_greetings.jpg') no-repeat center / cover;align-items:flex-end;justify-content:flex-start;} .greetings_cont{} .greetings_cont strong{font-size:2rem;font-weight:500;} .greetings_cont p{margin-top:3.2rem;} .greetings_cont .sign{margin-top:7.2rem;color:var(--color-gray70);display:flex;align-items:baseline;gap:1.2rem;justify-content:flex-end;} .greetings_cont .sign strong{font-size:2.8rem;font-weight:500;font-family: var(--font-hakgyoansim-sangjang);color:var(--color-gray100);letter-spacing:2rem;} @media (min-width:768px){ .page_header{font-size:3.2rem} .greetings_cont strong{font-size:2.4rem} .greetings_cont p{font-size:1.8rem} .greetings_cont .sign{font-size:2rem;} .greetings_cont .sign strong{font-size:3.8rem;} } /* about */ .page_header.about{align-items:center;justify-content:center;background:url('images/img_about.jpg') no-repeat center / cover;} .page_header.about strong{width:10rem;aspect-ratio:100/83;background:url('images/logo_white.png') no-repeat center / contain;text-indent:-9999px;overflow:hidden;} @media (min-width:768px){ .cont_ol .about_p{font-size:1.8rem;padding-left:5rem} } /* history */ .history{display:flex;flex-direction:column;gap:3.2rem;position:relative;} .history .year{font-size:2.8rem;color:var(--color-primary);} .history_cont{display:flex;flex-direction:column;gap:2rem;padding-left:3.8rem;position: relative;} .history_cont::before{content:'';display:block;width:.1rem;height:100%;background:var(--color-gray30);position:absolute;left:2rem;top:0;} .history_cont li{} .history_cont li .month{color:var(--color-gray50);font-size:.85em} .history_cont li p{font-weight:400;} @media (min-width:768px){ .history{flex-direction:row;gap:5.2rem;align-items:flex-start;} .history .year{font-size:3.6rem;flex:0 0 20rem;align-self:flex-start;position:sticky;top:3.2rem;left:0;z-index:1;} .history_cont{flex:1 1 auto;gap:2.8rem;padding:0;} .history_cont::before{display:none;} .history_cont li{font-size:1.7rem;} } /* partner */ .partner{} .partner ul{display:flex;flex-direction:row;gap:1.2rem;flex-wrap:wrap;} .partner ul li{width:calc( ( 100% - 1.2rem) / 2 );aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:.8rem;border:.1rem solid var(--color-gray30);transition:transform .3s,box-shadow .3s;} .partner ul li img{width:100%;height:100%;max-width:18rem;max-height:7rem;object-fit:contain;} .partner ul li:hover{transform:translateY(-.4rem);box-shadow:0 .4rem .8rem rgba(0,0,0,0.1);} @media (min-width:768px){ .partner ul li{width:calc( ( 100% - 2.4rem) / 3 );} } @media (min-width:1024px){ .partner ul li{width:calc( ( 100% - 3.6rem) / 4 );} } /* 오시는길 */ .address_box{display:flex;flex-direction:column;gap:2.4rem;margin-top:2.4rem;} .address_box div{display:flex;gap:1.2rem;align-items:baseline;} .address_box div dt{font-size:1.5rem;font-weight:500;} .address_box div dd{font-size:1.6rem;flex:1 1 auto;} @media (min-width:768px){ .address_box div dt{font-size:1.6rem;width:12rem} .address_box div dd{font-size:1.8rem;} } .organ_img_box{padding:2.4rem;border-radius:1.2rem;background:var(--color-gray10);} .organ_img_box img{width:100%;height:100%;object-fit:contain;} @media (min-width:768px){ .organ_img_box{padding:4.8rem;} } .organ_members{display:flex;flex-direction:column;gap:2.4rem;margin-top:2.4rem;} .organ_member_box .tit{font-size:2rem;font-weight:500;color:var(--color-gray100);display:block;margin-bottom:1.2rem;} .organ_member_box .lst_member{display:flex;flex-direction:column;gap:.8rem;} .organ_member_box .lst_member li{padding:2.4rem 1.6rem;background:var(--color-gray20);border-radius:1.2rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content: space-between;font-size:1.6rem;transition:transform .3s,box-shadow .3s;} .organ_member_box .lst_member li:hover{transform:translateY(-.4rem);box-shadow:0 .4rem .8rem rgba(0,0,0,0.1);} .organ_member_box .lst_member li .affiliation{max-width:70%;font-size:1.4rem;letter-spacing:-.05em;color:var(--color-gray70);} .organ_member_box .lst_member li .info{display:flex;gap:.8rem;} .organ_member_box .lst_member li .info .position{font-weight:400;} .organ_member_box .lst_member li .info .name{font-size:1.8rem;font-weight:500;font-family: var(--font-hakgyoansim-sangjang);} @media (min-width:768px){ .organ_member_box .tit{font-size:2.2rem;} .organ_member_box .lst_member{gap:1.2rem;flex-direction:row;flex-wrap:wrap;align-items:flex-start;} .organ_member_box .lst_member li{width:calc( ( 100% - 1.2rem) / 2 );} .organ_member_box .lst_member li .info{justify-content:flex-end;} .organ_member_box .lst_member li .info .name{font-size:2rem;} } /* KBoard 목록 이전·다음: 메인 비주얼 슬라이드(.cncaf-main-swiper)와 동일 라인 화살표 */ #kboard-default-list.board .pagination-pages li.prev-page > a, #kboard-default-list.board .pagination-pages li.next-page > a, #kboard-default-list.gallery .pagination-pages li.prev-page > a, #kboard-default-list.gallery .pagination-pages li.next-page > a, #kboard-default-list:not(.board):not(.gallery) .kboard-pagination .kboard-pagination-pages li.prev-page > a, #kboard-default-list:not(.board):not(.gallery) .kboard-pagination .kboard-pagination-pages li.next-page > a, #kboard-avatar-list .kboard-pagination .kboard-pagination-pages li.prev-page > a, #kboard-avatar-list .kboard-pagination .kboard-pagination-pages li.next-page > a, #kboard-thumbnail-list .kboard-pagination .kboard-pagination-pages li.prev-page > a, #kboard-thumbnail-list .kboard-pagination .kboard-pagination-pages li.next-page > a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; min-width: 3.4rem; height: 3.4rem; padding: 0; line-height: 0; font-size: 0; color: transparent; overflow: hidden; box-sizing: border-box; vertical-align: middle; } #kboard-default-list.board .pagination-pages li.prev-page > a::before, #kboard-default-list.board .pagination-pages li.next-page > a::before, #kboard-default-list.gallery .pagination-pages li.prev-page > a::before, #kboard-default-list.gallery .pagination-pages li.next-page > a::before, #kboard-default-list:not(.board):not(.gallery) .kboard-pagination .kboard-pagination-pages li.prev-page > a::before, #kboard-default-list:not(.board):not(.gallery) .kboard-pagination .kboard-pagination-pages li.next-page > a::before, #kboard-avatar-list .kboard-pagination .kboard-pagination-pages li.prev-page > a::before, #kboard-avatar-list .kboard-pagination .kboard-pagination-pages li.next-page > a::before, #kboard-thumbnail-list .kboard-pagination .kboard-pagination-pages li.prev-page > a::before, #kboard-thumbnail-list .kboard-pagination .kboard-pagination-pages li.next-page > a::before { content: ''; position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; background: url('images/ico_arr_line.svg') no-repeat 50% 50% / contain; transform: translate(-50%, -50%); transform-origin: center; pointer-events: none; } #kboard-default-list.board .pagination-pages li.prev-page > a::before, #kboard-default-list.gallery .pagination-pages li.prev-page > a::before, #kboard-default-list:not(.board):not(.gallery) .kboard-pagination .kboard-pagination-pages li.prev-page > a::before, #kboard-avatar-list .kboard-pagination .kboard-pagination-pages li.prev-page > a::before, #kboard-thumbnail-list .kboard-pagination .kboard-pagination-pages li.prev-page > a::before { transform: rotate(180deg) translate(50%, 50%); } #kboard-default-list.board .pagination-pages li.prev-page > a:focus-visible, #kboard-default-list.board .pagination-pages li.next-page > a:focus-visible, #kboard-default-list.gallery .pagination-pages li.prev-page > a:focus-visible, #kboard-default-list.gallery .pagination-pages li.next-page > a:focus-visible, #kboard-default-list:not(.board):not(.gallery) .kboard-pagination .kboard-pagination-pages li.prev-page > a:focus-visible, #kboard-default-list:not(.board):not(.gallery) .kboard-pagination .kboard-pagination-pages li.next-page > a:focus-visible, #kboard-avatar-list .kboard-pagination .kboard-pagination-pages li.prev-page > a:focus-visible, #kboard-avatar-list .kboard-pagination .kboard-pagination-pages li.next-page > a:focus-visible, #kboard-thumbnail-list .kboard-pagination .kboard-pagination-pages li.prev-page > a:focus-visible, #kboard-thumbnail-list .kboard-pagination .kboard-pagination-pages li.next-page > a:focus-visible { outline: 0.2rem solid var(--color-blue); outline-offset: 0.2rem; }