@charset "UTF-8";
/* =========================================================
   경북ICT융합산업진흥협회 메인
   - 기준: html 20px(≤1024px 18px), 본문 .8rem, 컨테이너 70rem(1400px)
   - 폰트: 유앤아이 모던(없는 글자는 Noto Sans KR) / 숫자·날짜 Play / 아이콘 XEIcon
   ========================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: inherit; }
html { overflow: hidden; overflow-y: auto; box-sizing: border-box; font-size: 20px; }
body { overflow: hidden; margin: 0; padding: 0; font-size: .8rem; line-height: 1.75; font-family: "Youandi Modern", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-weight: 400; color: #000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
header, footer, main, section, article, nav, aside { display: block; }
ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, form, figure { margin: 0; padding: 0; }
input, select { max-width: 100%; vertical-align: middle; }
input, select, button, textarea { margin: 0; font-family: inherit; font-size: inherit; color: inherit; }
address, em, i { font-style: normal; }
strong { font-weight: 600; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0 none; background: none; cursor: pointer; }
img { border: 0; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); }
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis_2 { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; height: 2.4rem; line-height: 1.2rem; }
#skipNav a { position: absolute; left: 0; top: -1000px; z-index: 1000; width: 100%; padding: 8px 0; background: #20262c; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
#skipNav a:focus { top: 0; }

.container { width: 70rem; max-width: 100%; margin: auto; }
.container::after { display: block; clear: both; content: ''; }

/* =========================================================
   HEADER
   ========================================================= */
#header { position: relative; z-index: 50; }

/* topbar (40px) */
#header .topbar { height: 40px; overflow: hidden; border-bottom: 1px solid #eaeaea; }
/* 상단 줄: 모든 항목을 40px 높이의 가운데에 맞춘다 */
#header .topbar > .container { display: flex; align-items: center; height: 100%; }
#header .topbar > .container::before, #header .topbar > .container::after { display: none; }
#header .topbar .right_menu { margin-left: auto; }
#header .topbar .sns, #header .topbar .right_menu, #header .topbar .right_menu .log, #header .topbar .size_wrap, #header .topbar .size { display: flex; align-items: center; }
#header .topbar .sns li + li { padding-left: 1.25rem; }
#header .topbar .sns li a { display: flex; align-items: center; height: 26px; color: #757575; font-size: 1.05rem; line-height: 1; }
#header .topbar .sns li a:hover { color: #000; }
#header .topbar .right_menu .log { margin-right: 1.5rem; }
#header .topbar .right_menu .log li { line-height: 1; }
#header .topbar .right_menu .log li + li { padding-left: 1.6rem; }
#header .topbar .right_menu .log li a { display: inline-flex; align-items: center; gap: 4px; height: 26px; font-size: .75rem; font-weight: 500; line-height: 1; color: #444; }
#header .topbar .right_menu .log li a:hover { color: #3f51b5; }
#header .topbar .right_menu .log li i { font-size: 1rem; line-height: 1; }
#header .topbar .size_wrap { gap: 6px; height: 28px; padding: 0 3px 0 .6rem; border: 1px solid #dfdfdf; border-radius: 100px; }
#header .topbar .size_wrap > span { font-size: .75rem; font-weight: 500; line-height: 1; color: #444; }
#header .topbar .size li + li { margin-left: 4px; }
#header .topbar .size li a { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 100px; background: #f2f2f2; color: #333; line-height: 1; }
#header .topbar .size li a i { font-size: .8rem; }
#header .topbar .size li a:hover { background: #414141; color: #fff; }

/* logobar (103px) */
#header .logobar { position: relative; height: 103px; border-top: 1px solid #efefef; background: #fff; }
#header .logobar .container { position: relative; height: 100%; }
#header .logobar .logo { float: left; position: relative; top: 50%; height: 56px; transform: translateY(-50%); line-height: 56px; }
#header .logobar .logo a { display: block; }
#header .logobar .logo img { display: block; width: auto; height: 44px; margin-top: 6px; }
#header .logobar .search_wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 0; }
#header .logobar .search_wrap form { display: block; }
#header .logobar .input-group { display: block; position: relative; width: 20rem; height: 2.35rem; vertical-align: middle; border: 3px solid transparent; border-radius: 30px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #1c388d, #2196f3); background-origin: border-box; background-clip: content-box, border-box; }
#header .logobar .input-group .form-control { width: 100%; height: 100%; padding: .3rem 3rem .3rem 1.5rem; border: 0; border-radius: 30px; background: none; font-size: .8rem; outline: 0; }
#header .logobar .input-group .form-control::placeholder { text-align: center; font-size: .8rem; font-weight: 300; color: #808080; }
#header .logobar .input-group-btn { position: absolute; top: 0; right: 5px; bottom: 0; display: flex; align-items: center; justify-content: center; width: 35px; color: #24aae1; }
#header .logobar .input-group-btn button { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; font-size: 1.4rem; line-height: 1; }
#header .logobar .input-group-btn button i { display: block; line-height: 1; }
#header .logobar .relation { padding-top: 7px; text-align: center; }
#header .logobar .relation li { display: inline-block; position: relative; vertical-align: middle; font-size: .7rem; }
#header .logobar .relation li > a { display: inline-block; padding: .1rem .6rem; border-radius: 1000px; background: #f7f7f7; color: #7d7d7d; font-weight: 700; transition: all .3s; }
#header .logobar .relation li > a:hover { background: #373737; color: #fff; }
#header .company_wrap { position: absolute; top: 50%; right: 0; width: 300px; height: 50px; transform: translateY(-50%); text-align: right; }
#header .company_wrap .company { position: relative; height: 100%; padding-right: 20px; }
#header .company_wrap .company li { position: absolute; top: 0; left: 0; right: 20px; height: 50px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
#header .company_wrap .company li.on { opacity: 1; visibility: visible; }
#header .company_wrap .company li a, #header .company_wrap .company li > span { display: block; height: 50px; padding-right: 14px; line-height: 50px; text-align: center; background: #fff; }
#header .company_wrap.single .arrow1 { display: none; }
#header .company_wrap .company li img { display: inline-block; max-width: 100%; max-height: 40px; vertical-align: middle; }
#header .company_wrap .company .txt_link { font-size: 1.1rem; font-weight: 500; letter-spacing: -.5px; color: #1c388d; }
#header .company_wrap .company .txt_link strong { font-weight: 800; color: #5a4ed6; }
#header .company_wrap .arrow1 { position: absolute; top: 50%; right: 0; transform: translateY(-50%); line-height: 1; text-align: center; }
#header .company_wrap .arrow1 a { display: block; width: 18px; height: 18px; border: 1px solid #e9e9e9; border-radius: 3px; background: #fff; color: #777; font-size: 14px; line-height: 16px; transition: all .3s; }
#header .company_wrap .arrow1 a:hover, #header .company_wrap .arrow1 a:focus { background: #777; color: #fff; }
#header .company_wrap .arrow1 button { display: block; width: 18px; height: 18px; margin: 2px 0; color: #777; font-size: 12px; }
#header .company_wrap .arrow1 .start { display: none; }
#header .company_wrap.stop .arrow1 .pause { display: none; }
#header .company_wrap.stop .arrow1 .start { display: block; }

/* menubar (68px) */
#header .menubar { position: relative; height: 68px; background: linear-gradient(45deg, #1c388d, #2196f3); }
#header .menubar > .container { position: relative; height: 100%; }
#gnb { position: relative; height: 100%; letter-spacing: -.4px; }
#head_menu { display: flex; justify-content: space-between; width: calc(100% - 50px); }
#head_menu > li { position: relative; flex-grow: 1; max-width: calc(100% / 5); height: 68px; }
#head_menu > li > a { position: relative; display: block; padding: 0 1rem; font-size: 1.13rem; font-weight: 700; line-height: 68px; color: #fff; text-align: center; transition: all .3s; }
#head_menu > li > a span { position: relative; }
.menubar.active #head_menu > li.active > a,
.menubar.on #head_menu > li.active > a { background: #001247; }

/* mega menu : 모든 2차메뉴가 컬럼으로 함께 펼쳐짐 */
.gnb_bg { position: absolute; top: 68px; left: 50%; z-index: 1; width: 100vw; transform: translateX(-50%); height: 0; overflow: hidden; visibility: hidden; opacity: 0; background: #fff; }
.menubar.active .gnb_bg, .menubar.on .gnb_bg { visibility: visible; opacity: 1; z-index: 10; box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0; transition: opacity .2s; }
#head_menu .submenu { position: relative; display: block; height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .3s, height .3s; }
.menubar.active #head_menu .submenu, .menubar.on #head_menu .submenu { visibility: visible; opacity: 1; background: #fff; z-index: 99; }
#head_menu .submenu > ul { position: relative; height: 100%; padding: 1.75rem .5rem 1.5rem; }
#head_menu .submenu > ul::before { position: absolute; top: 1.75rem; left: 0; width: 1px; height: calc(100% - 3.25rem); background: #ddd; content: ''; }
#head_menu .mnlast .submenu > ul::after { position: absolute; top: 1.75rem; right: 0; width: 1px; height: calc(100% - 3.25rem); background: #ddd; content: ''; }
#head_menu .submenu > ul > li { position: relative; margin-bottom: 5px; }
#head_menu .submenu > ul > li > a { position: relative; display: block; padding: .4rem .6rem; border: 1px solid #cfcfcf; border-radius: 4px; background: #fff; font-size: .76rem; font-weight: 500; line-height: 1.2; color: #434343; }
#head_menu .submenu > ul > li:hover > a, #head_menu .submenu > ul > li:focus-within > a { border-color: #001247; background: #001247; color: #fff; }
#head_menu .submenu .lnb-detail { padding: .4rem .3rem; }
#head_menu .submenu .lnb-detail > li { position: relative; padding-left: 8px; line-height: 1.2; }
#head_menu .submenu .lnb-detail > li + li { margin-top: 6px; }
#head_menu .submenu .lnb-detail > li::before { position: absolute; top: 10px; left: 0; width: 3px; height: 3px; background: #008eff; content: ''; }
#head_menu .submenu .lnb-detail > li > a { font-size: .7rem; color: #767676; word-break: keep-all; }
#head_menu .submenu .lnb-detail > li > a:hover, #head_menu .submenu .lnb-detail > li > a:focus { color: #125095; text-decoration: underline; }

.utile-wrap { position: absolute; top: 50%; right: 0; height: 68px; transform: translateY(-50%); }
.utile-wrap .sitemap-mo { position: relative; top: 50%; transform: translateY(-50%); }
.utile-wrap .btnAllmenu { position: relative; display: block; width: 28px; height: 24px; }
.utile-wrap .btnAllmenu > em { position: absolute; top: 50%; right: 0; display: inline-block; width: 28px; height: 3px; background: #fff; transform: translateY(-50%); transition: all .5s cubic-bezier(.535, 0, 0, 1); }
.utile-wrap .btnAllmenu > em::before, .utile-wrap .btnAllmenu > em::after { position: absolute; right: 0; width: 28px; height: 3px; background: #fff; content: ''; transition: all .5s cubic-bezier(.535, 0, 0, 1); }
.utile-wrap .btnAllmenu > em::before { top: 10px; }
.utile-wrap .btnAllmenu > em::after { top: -10px; }
.utile-wrap .btnAllmenu.active > em { background: transparent; }
.utile-wrap .btnAllmenu.active > em::before { top: 0; transform: rotate(-45deg); }
.utile-wrap .btnAllmenu.active > em::after { top: 0; transform: rotate(45deg); }
.moblie_login { display: none; }

/* =========================================================
   MAIN
   ========================================================= */
#wrap:not(.sub) #contents { padding-top: 15px; }
.section .left_cont { float: left; width: 46.5rem; padding-right: 1.15rem; }
.section .right_cont { float: left; width: calc(100% - 46.5rem); padding-left: 1.15rem; }
.section + .section { margin-top: 2.5rem; }
.box { position: relative; float: left; width: 50%; padding: 0 1rem; }
.posi { position: relative; }

/* ---------- section1 : visual + quick ---------- */
#section1 { margin-top: 1.5rem; }
#section1 .visual_wrap { position: relative; display: block; width: 100%; height: 0; padding-bottom: var(--vh-pc, 29.4%);   /* 높이: 관리자 > 메인비주얼 설정 */ overflow: hidden; border-radius: 10px; background: #0d1f5c; }
#section1 .visual { position: absolute; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; }
#section1 .visual li { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
#section1 .visual li.on { opacity: 1; visibility: visible; }
/* 넘김 효과 (관리자 > 메인비주얼 설정) */
#section1 .visual_wrap[data-effect] .visual li { transition-duration: var(--vspeed, .7s); }
#section1 .visual_wrap[data-effect="slide"] .visual li,
#section1 .visual_wrap[data-effect="slide_up"] .visual li { opacity: 1; transition: none; }
#section1 .visual_wrap[data-effect="none"] .visual li { transition: none; }
#section1 .visual_wrap[data-effect="zoom"] .visual li { transform: scale(1.08); transition-property: opacity, visibility, transform; transition-timing-function: ease; }
#section1 .visual_wrap[data-effect="zoom"] .visual li.on { transform: scale(1); }
#section1 .visual li > a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: linear-gradient(110deg, #1c388d 0, #1c388d 38%, #2196f3 100%); }
/* 배경 그림 + 그늘 + 글 상자(부제목·타이틀·주요내용) — 관리자 편집기에서 끌어 놓은 자리(%) 그대로 */
#section1 .visual_wrap { container-type: inline-size; }
@media screen and (min-width: 769px) and (max-width: 1024px) { #section1 .visual_wrap { padding-bottom: var(--vh-t, var(--vh-pc, 29.4%)); } }
#section1 .visual .vbg { position: absolute; inset: 0; overflow: hidden; }
#section1 .visual .vbg picture { display: block; width: 100%; height: 100%; }
/* 그림을 칸보다 작게 줄였을 때(확대 100% 미만): 남는 곳은 그림 가장자리 색(.vbg 배경색)으로 이어진다 */
/* 축소 그리기(is-fit): 그림 자체를 '칸을 꽉 채우는 크기 × 배율'로 — 칸에 잘려 있던 부분까지 다 보인다.
   --ir 그림 가로/세로, --sc 배율, --fxn/--fyn 위치(0~1). 100% 이상에서도 같은 결과라 화면별 값이 섞여도 맞다 */
.vbg.is-fit { container-type: size; }
#section1 .visual .vbg.is-fit picture { position: absolute; inset: 0; }
#section1 .visual .vbg.is-fit img, #section3 .onslide .bn .vbg.is-fit img, .gpop_card .vbg.is-fit img {
  --w: calc(max(100cqw, 100cqh * var(--ir)) * var(--sc, 1));
  position: absolute; left: calc((100cqw - var(--w)) * var(--fxn, .5)); top: calc((100cqh - var(--w) / var(--ir)) * var(--fyn, .5));
  width: var(--w); height: calc(var(--w) / var(--ir)); max-width: none; object-fit: fill; transform: none !important; }
#section1 .visual .vbg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--sc, 1)); }
#section1 .visual .vshade { position: absolute; inset: 0; pointer-events: none; }
.vs-left { background: linear-gradient(90deg, rgba(8, 20, 60, .82) 0, rgba(8, 20, 60, .5) 38%, rgba(8, 20, 60, 0) 68%); }
.vs-right { background: linear-gradient(270deg, rgba(8, 20, 60, .82) 0, rgba(8, 20, 60, .5) 38%, rgba(8, 20, 60, 0) 68%); }
.vs-bottom { background: linear-gradient(0deg, rgba(8, 20, 60, .85) 0, rgba(8, 20, 60, .35) 45%, rgba(8, 20, 60, 0) 75%); }
.vs-full { background: rgba(8, 20, 60, .42); }
.vs-light { background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, 0) 75%); }
#section1 .visual .vtxt { position: absolute; inset: 0; z-index: 2; letter-spacing: -.02em; pointer-events: none; }
#section1 .visual .vl { position: absolute; left: var(--x); top: var(--y); width: var(--w); color: var(--c); text-align: var(--al); font-weight: var(--wt); display: block; font-size: max(calc(var(--fs) * .1cqw), calc(var(--fs) * .42px)); line-height: 1.32; word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
#section1 .visual .vl-body { line-height: 1.6; }
/* 태블릿을 따로 맞춘 배너 (관리자 → 메인비주얼 → 편집기 '태블릿' 탭) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #section1 .visual li.t-on .vbg img { object-position: var(--fx-t) var(--fy-t); transform-origin: var(--fx-t) var(--fy-t); transform: scale(var(--sc-t)); }
  #section1 .visual li.t-on .vbg.is-fit img { --sc: var(--sc-t); --fxn: var(--fxn-t); --fyn: var(--fyn-t); }
  #section1 .visual li.t-on .vl { left: var(--x-t); top: var(--y-t); width: var(--w-t); color: var(--c-t); text-align: var(--al-t); font-weight: var(--wt-t); font-size: max(calc(var(--fs-t) * .1cqw), calc(var(--fs-t) * .42px)); }
}
#section1 .arrow_wrap { position: absolute; right: 0; bottom: 0; z-index: 3; width: 18%; min-width: 150px; height: 47px; border-radius: 0 0 10px 0; background: rgba(0, 0, 0, .7); }
#section1 .slick-counter { position: absolute; left: 15px; bottom: 0; font-size: 1rem; line-height: 47px; color: #fff; }
#section1 .arrow { position: absolute; right: 0; bottom: 0; padding: 0 15px 0 10px; font-size: 1rem; line-height: 47px; color: #fff; text-align: right; }
#section1 .arrow button { display: inline-block; color: #fff; line-height: 47px; }
#section1 .arrow .start, .arrow .start { display: none; }
.stop .arrow .pause { display: none !important; }
.stop .arrow .start { display: inline-block !important; }

#section1 .quick_wrap ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
#section1 .quick_wrap li { font-size: .75rem; color: #333; }
#section1 .quick_wrap li a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 6.4rem; padding: 1rem .3rem .9rem; border: 1px solid #e3e6ec; border-radius: 12px; background: #fff; transition: background-color .25s, border-color .25s, color .25s; }
#section1 .quick_wrap li .img { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #eef2fa; font-size: 1.25rem; color: #2c4aa6; transition: background-color .25s, color .25s; }
#section1 .quick_wrap li .txt { display: block; padding-top: .6rem; text-align: center; }
#section1 .quick_wrap li .txt em { font-weight: 600; letter-spacing: -.3px; word-break: keep-all; transition: color .25s; }
#section1 .quick_wrap li a:hover, #section1 .quick_wrap li a:focus-visible { border-color: #2c4aa6; background: #f7f9fd; }
#section1 .quick_wrap li a:hover .img, #section1 .quick_wrap li a:focus-visible .img { background: #2c4aa6; color: #fff; }
#section1 .quick_wrap li a:hover .txt em, #section1 .quick_wrap li a:focus-visible .txt em { color: #2c4aa6; }

/* ---------- section2 : board ---------- */
#section2 .flo-left { margin: 0 -1rem; }
#section2 .flo-left::after, #section2 .left_cont::after { display: block; clear: both; content: ''; }
.box2 .tab-list { width: 100%; height: 100%; }
.box2 .tab-list::after { display: block; clear: both; content: ''; }
.box2 .tab-list > li { float: left; padding-right: .4rem; }
.box2 .tab-list > li > a { position: relative; display: block; height: 44px; padding: 0 6px 0 3px; font-size: .96rem; font-weight: 400; line-height: 1.75; letter-spacing: -.5px; color: #767676; transition: all .1s; }
.box2 .tab-list > li.on > a, .box2 .tab-list > li > a:hover, .box2 .tab-list > li > a:focus { font-size: .96rem; font-weight: 600; color: #3f51b5; }
.notice_wrap { height: calc(44px + 14.5rem); }
.box2 .notice-list { position: absolute; top: 44px; left: 0; display: none; width: 100%; height: 14.5rem; }
.box2 .tab-list > li.on .notice-list { display: block; }
.box2 .more { position: absolute; top: -44px; right: 0; padding: .34rem; border: 1px solid #d3d3d3; border-radius: 10px; font-size: .75rem; line-height: 1; color: #000; transition: all .3s; }
.box2 .more > span { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0); }
.box2 .more i { display: block; transition: all .3s; }
.box2 .more:hover { border-color: #000; }
.box2 .more:hover i, .box2 .more:focus i { transform: rotate(180deg); }
.box2 .notice-list .thumb_tit { position: relative; padding: .85rem 0 .6rem; }
.box2 .notice-list .thumb_tit > a { display: flex; align-items: center; gap: 15px; }   /* 날짜칸 + 글: 글꼴의 띄어쓰기 폭과 상관없이 나란히 */
.box2 .notice-list .thumb_tit .tit_day { flex: none; display: inline-block; width: 75px; height: 76px; padding-top: 4px; vertical-align: middle; border-radius: 20px 0; background: #3f51b5; font-family: 'Play', sans-serif; font-weight: 700; line-height: 1.2; color: #fff; text-align: center; }
.box2 .notice-list .thumb_tit .tit_day > strong { display: block; margin-top: .2rem; font-size: 1.6rem; }
.box2 .notice-list .thumb_tit .tit_day > span { font-size: .6rem; font-weight: 400; }
.box2 .notice-list .thumb_tit .txt { flex: 1; min-width: 0; display: block; }
.box2 .notice-list .thumb_tit a:hover .txt > *, .box2 .notice-list .thumb_tit a:focus .txt > * { text-decoration: underline; }
.box2 .notice-list .thumb_tit .txt > strong { display: block; padding-bottom: 6px; font-size: 1.1rem; font-weight: 500; letter-spacing: -.6px; color: #000; }
.box2 .notice-list .thumb_tit .txt > span { height: 2.4rem; line-height: 1.2rem; }
.box2 .notice-list .depth { font-size: .8rem; font-weight: 400; line-height: 1.5; letter-spacing: -.5px; color: #373737; }
.box2 .notice-list a:hover .depth, .box2 .notice-list a:focus .depth { color: #364f9b; }
.box2 .thumb_lst { padding-top: .1rem; }
.box2 .notice-list .no_data { padding: 4rem 0 0; font-size: .8rem; color: #888; text-align: center; }
.box2 .notice-list .no_data i { display: block; margin-bottom: .5rem; font-size: 2rem; color: #c5cbd6; }
.bul01 li { position: relative; padding-left: 9px; }
.bul01 li::before { position: absolute; top: 12px; left: 0; width: 3px; height: 3px; background: #767676; content: ''; }
.box2 .thumb_lst li a { display: block; padding: 0 4.5rem 0 0; }
.box2 .thumb_lst li span { display: inline-block; width: 100%; }
.box2 .thumb_lst li .day { position: absolute; top: 0; right: 0; }
.day { font-family: 'Play', sans-serif; font-size: .68rem; font-weight: 500; color: #8d8d8d; }


.box3 .tab-list > li { float: none; padding-right: 0; }
.box3 .tab-list > li > a { display: inline-block; }
.box3 .photo-list { position: relative; }
.box3 .photo-list .more { top: -44px; }
.box3 .photo-list .thumbnail { display: block; overflow: hidden; padding-top: 1rem; }
.box3 .photo-list .thumbnail:first-child { padding-top: 0; }
.box3 .photo-list .thumbnail > * { display: inline-block; vertical-align: middle; }
.box3 .photo-list .thumbnail .img { width: 184px; height: 130px; overflow: hidden; border-radius: 5px; }
.box3 .photo-list .thumbnail .img > img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.box3 .photo-list .thumbnail > .txt { width: calc(100% - 194px); padding-left: .8rem; }
.box3 .photo-list .thumbnail > .txt > strong { height: 2.2rem; font-size: .9rem; font-weight: 500; line-height: 1.2; word-break: keep-all; }
.box3 .photo-list .thumbnail:hover strong, .box3 .photo-list .thumbnail:focus strong { text-decoration: underline; }
.box3 .photo-list .thumbnail > .txt .view { padding-top: .5rem; }
.box3 .photo-list .thumbnail > .txt .view span { font-family: 'Play', sans-serif; font-weight: 700; color: #767676; }
.box3 .photo-list .thumbnail > .txt .view span > * { display: inline-block; vertical-align: middle; }
.box3 .photo-list .thumbnail > .txt .view i { margin: 2px 5px 0 0; font-size: .8rem; }
.box3 .photo-list .thumbnail > .txt .view em { font-size: .75rem; color: #767676; }

/* ---------- section3 ---------- */
#section3 .list_style1 { margin-bottom: 1.5rem; }
#section3 .list_style1 .flo-left { margin: 0 -1rem; }
#section3 .list_style1 .flo-left::after { display: block; clear: both; content: ''; }
#section3 a.more { position: absolute; top: .3rem; right: 1rem; padding: .34rem; border: 1px solid #d3d3d3; border-radius: 10px; font-size: .75rem; line-height: 1; color: #333; transition: all .3s; }
#section3 a.more > span { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0); }
#section3 a.more i { display: block; transition: all .3s; }
#section3 a.more:hover { border-color: #000; }
#section3 a.more:hover i { transform: rotate(180deg); }
#section3 .box > .tit { margin-bottom: .5rem; }
#section3 .box > .tit > a.sns { display: inline-block; font-family: 'Play', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -.5px; color: #5a4ed6; }
#section3 .box > .tit > a.sns > * { display: inline-block; vertical-align: middle; line-height: 1.5; }
#section3 .box > .tit > a.sns > span { padding-left: 8px; }
#section3 .box > .tit > a.sns > i { width: 30px; height: 30px; border-radius: 10px; background: #5a4ed6; font-size: 18px; line-height: 30px; color: #fff; text-align: center; }
#section3 .mv_wrap .tit > a.sns { color: #00339f; }
#section3 .mv_wrap .tit > a.sns > i { background: #00339f; }
#section3 .list_box { width: calc(100% + .75rem); overflow: hidden; }
#section3 .list_box li { float: left; width: 50%; padding-right: .75rem; }
#section3 .list_box li a { display: block; }
#section3 .list_box li a:hover .txt, #section3 .list_box li a:focus .txt { text-decoration: underline; }
#section3 .list_box li .img { position: relative; display: block; width: 100%; height: 6.1rem; overflow: hidden; border-radius: 10px; }
#section3 .list_box li .img b { position: absolute; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); top: .7rem; left: .8rem; z-index: 1; font-size: .8rem; font-weight: 700; line-height: 1.25; color: #fff; }
#section3 .list_box li a .txt { height: 2rem; margin: 10px 0; font-weight: 300; line-height: 1.3; letter-spacing: -.5px; color: #333; }
.ban_lms, .ban_sw, .ban_xr, .ban_ms, .bn { background-repeat: no-repeat; background-position: right -10px center; background-size: auto 130%; }
.ban_lms, .bn_lms { background-color: #00339f; background-image: url(../images/main/future_bg.png), linear-gradient(90deg, #00339f, #121e4a); }
.ban_sw, .bn_sw { background-color: #5a4ed6; background-image: url(../images/main/swa_bg.png), linear-gradient(90deg, #5a4ed6, #515bd4); }
.ban_xr, .bn_xr { background-color: #00339f; background-image: url(../images/main/metaverse2_bg.png), linear-gradient(90deg, #00339f, #121e4a); }
.ban_ms, .bn_ms { background-color: #5a4ed6; background-image: url(../images/main/metaverse_bg.png), linear-gradient(90deg, #5a4ed6, #515bd4); }
.bn_ch { background-color: #00339f; background-image: url(../images/main/challenge_bg.png), linear-gradient(90deg, #00339f, #121e4a); }
.bn_blue { background-color: #00339f; background-image: linear-gradient(90deg, #00339f, #121e4a); }
.bn_purple { background-color: #5a4ed6; background-image: linear-gradient(90deg, #5a4ed6, #515bd4); }

#section3 .list_style2 { padding: 8px; border-radius: 20px; background: #f3f3f3; }
#section3 .list_style2 > ul::after { display: block; clear: both; content: ''; }
#section3 .list_style2 li { position: relative; float: left; width: 20%; letter-spacing: -.3px; color: #333; text-align: center; }
#section3 .list_style2 li a { display: block; margin: 8px; padding: .8rem 0; border: 1px solid #dfdfdf; border-radius: 20px; background: #fff; font-size: .76rem; font-weight: 600; transition: all .3s; }
#section3 .list_style2 li a:hover, #section3 .list_style2 li a:focus { border-color: #a1a1a1; box-shadow: 3px 2px 1px 1px rgba(0, 0, 0, .1); }
#section3 .list_style2 li a span { position: relative; display: block; }
#section3 .list_style2 li a i { display: block; height: 37px; margin: 0 auto 5px; font-size: 34px; line-height: 37px; color: #2c4aa6; }

#section3 .banner { position: relative; padding-bottom: 7px; }
#section3 .right_cont > div + div { margin-top: 2.6rem; }
#section3 .tit { font-size: .96rem; font-weight: 600; letter-spacing: -.3px; color: #3f51b5; }
#section3 .ban_wrap { margin-bottom: .6rem; padding-top: 3px; }
#section3 .banner .arrow { position: absolute; top: 5px; right: 0; line-height: 28px; }
#section3 .banner .arrow button { display: inline-block; color: #777; }
#section3 .banner .slick-counter { position: absolute; top: 5px; right: 3.15rem; font-weight: 700; line-height: 28px; color: #818181; }
#section3 .banner .slick-counter .current { color: #0f0f0f; }
#section3 .onslide { position: relative; height: auto; aspect-ratio: 1000 / 240; }   /* 내부·외부소식 칸: 어느 화면에서나 같은 모양(관리자 미리보기와 같게) */
#section3 .onslide li { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
#section3 .onslide li.on { opacity: 1; visibility: visible; }
#section3 .onslide .bn { position: relative; display: block; height: 100%; border-radius: 10px; background-position: right 1rem center, 0 0; background-size: auto 115%, 100% 100%; }
/* 배너 편집기로 만든 글 상자 — 글자 크기는 배너 높이 116px 기준(px)에 비례(cqh) */
#section3 .onslide .bn { overflow: hidden; container-type: size; }
#section3 .onslide .bn_img { background: #f4f5f7; }
#section3 .onslide .bn .vbg { position: absolute; inset: 0; overflow: hidden; }
#section3 .onslide .bn .vbg img { display: block; width: 100%; height: 100%; object-fit: cover; }
#section3 .onslide .bn .vshade { position: absolute; inset: 0; pointer-events: none; }
#section3 .onslide .bn .vtxt { position: absolute; inset: 0; z-index: 2; letter-spacing: -.02em; pointer-events: none; }
#section3 .onslide .bn .vl { position: absolute; display: block; font-size: calc(var(--fs) * .9px); font-size: min(calc(var(--fs) * 100cqh / 116), calc(var(--fs) * .2044cqw)); line-height: 1.28; word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
#section3 .onslide .bn .vl-body { line-height: 1.5; }
/* 정책브리핑 위젯 */

/* ---------- section4 : 관련기관 ---------- */
.section4 { position: relative; padding: 1.25rem 0; }
.section4::before { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #ddd; content: ''; }
.section4 .container { position: relative; }
.section4 .company_view { position: relative; margin-left: 6.5rem; overflow: hidden; }
.section4 .company_lst { display: flex; white-space: nowrap; transition: transform .6s; }
.section4 .company_lst li { flex: 0 0 auto; display: flex; align-items: center; height: 38px; padding-right: 3rem; }
.section4 .company_lst li a { display: block; }
.section4 .company_lst li img { display: block; max-height: 32px; max-width: 150px; vertical-align: middle; }
.section4 .arrow { position: absolute; white-space: nowrap; top: 50%; left: 0; z-index: 1; width: 3.5rem; transform: translateY(-50%); font-size: 1rem; text-align: center; }
.section4 .arrow button { display: inline-block; padding: 0; font-size: .9rem; color: #000; }
#section3 .banner .arrow .start, .section4 .arrow .start { display: none; }

/* =========================================================
   FOOTER
   ========================================================= */
#footer { position: relative; width: 100%; color: #777; }
#footer::before { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #ddd; content: ''; }
#footer .ft_link { overflow: hidden; padding: 1rem 0; }
#footer .ft_link li { position: relative; display: inline-block; vertical-align: middle; font-weight: 300; letter-spacing: -2px; }
#footer .ft_link li + li { padding-left: 2.4rem; }
#footer .ft_link li + li::before { position: absolute; top: 50%; left: 1.25rem; width: 3px; height: 3px; border-radius: 100px; background: #838383; content: ''; transform: translateY(-50%); }
#footer .ft_link li > a { letter-spacing: -1.2px; color: #727272; }
#footer .ft_link li > a:hover { text-decoration: underline; }
#footer .foot-wrap { position: relative; overflow: hidden; padding: 1rem 0 1.25rem; border-top: 1px solid #ddd; }
#footer .foot-wrap .container { position: relative; }
#footer .foot-add { float: left; }
#footer .foot-add address { display: block; }
#footer .foot-add address::after { display: block; clear: both; content: ''; }
#footer .foot-add address + address { margin-top: .3rem; }
#footer .foot-add address strong { float: left; width: 8rem; border: 1px solid #d3d3d3; border-radius: 100px; font-weight: 400; line-height: 1.6; letter-spacing: -.5px; color: #777; text-align: center; }
#footer .foot-add address span { float: left; width: calc(100% - 8rem); padding-left: 14px; font-weight: 300; line-height: 1.6; }
#footer .copyright { display: block; float: left; padding-top: 20px; font-size: 12px; font-weight: 300; }
#footer .foot-relation { position: absolute; top: 0; right: 1rem; }
#footer .foot-relation > * { display: inline-block; vertical-align: middle; }
#footer .foot-relation .sns { margin-right: 1rem; }
#footer .foot-relation .sns li { display: inline-block; }
#footer .foot-relation .sns li + li { padding-left: 1rem; }
#footer .foot-relation .sns li a { display: block; }
#footer .foot-relation .sns li a i { position: relative; bottom: 0; padding: .5rem; border-radius: 100px; background: #e9e9e9; color: #000; transition: all .3s; }
#footer .foot-relation .sns li a:hover i { bottom: 4px; background-color: #121212; color: #fff; }
#footer .form_select { position: relative; display: inline-block; color: #333; }
#footer .form_select::after { position: absolute; top: 50%; right: 3rem; transform: translateY(-50%); font-family: 'xeicon'; font-size: .9rem; color: #b2b2b2; content: '\e936'; pointer-events: none; }
#footer .form_select select { width: 12.4rem; height: 1.9rem; margin-left: 15px; padding: 0 1.5rem 0 .5rem; vertical-align: top; border: 1px solid #ddd; border-radius: 5px; background: #fff; font-size: .7rem; font-weight: 300; color: #777; appearance: none; -webkit-appearance: none; transition: all .2s; }
#footer .form_select select:hover, #footer .form_select select:focus { border-color: #000; }
#footer .gtlink { height: 1.9rem; padding: 0 .4rem; border-radius: 5px; background-color: #3552a7; color: #fff; }
#footer .foot-relation > .foot-logo { --lh: 36px; display: flex; justify-content: flex-end; align-items: flex-start; padding-top: 2rem; }
#footer .foot-relation > .foot-logo .logo { display: inline-block; padding-top: 6px; }
#footer .foot-relation > .foot-logo .logo img { display: block; height: var(--lh); width: auto; filter: grayscale(1); opacity: .75; }

/* =========================================================
   RESPONSIVE (KEIT 기준 브레이크포인트)
   ========================================================= */
@media screen and (max-width: 1400px) {
  .container { width: 100%; padding-left: 1rem; padding-right: 1rem; }
  #header .company_wrap { right: 1rem; }
  .utile-wrap { right: 1rem; }
  #footer .ft_link li + li { padding-left: .7rem; }
  #footer .ft_link li + li::before { left: .35rem; }
  .section .left_cont { width: 70%; }
  .section .right_cont { width: 30%; padding-left: 0; }
  .box { padding: 0 .6rem; }
  #section2 .flo-left, #section3 .list_style1 .flo-left { margin: 0 -.6rem; }
}
@media screen and (max-width: 1320px) {
  #head_menu > li > a { font-size: 1.04rem; }
}
@media screen and (max-width: 1200px) {
  #header .logobar .input-group { width: 16rem; }
  #head_menu > li > a { padding: 0 .4rem; }
  #section1 .right_cont, #section1 .left_cont,
  #section2 .left_cont, #section2 .right_cont { float: none; display: block; width: 100%; margin-bottom: 1rem; padding-left: 0; padding-right: 0; }
  #section1 .quick_wrap li a { min-height: 5.6rem; padding: .8rem .3rem .7rem; }
  #section3 a.more { right: .6rem; }
  #tabRight .posi { padding: 0 .6rem; }
  #footer::before { display: none; }
  #footer .ft_link { width: calc(100% + 10px); padding: .5rem 0; }
  #footer .ft_link li { float: left; width: 33.3333%; margin-bottom: 9px; padding-right: 10px; text-align: center; }
  #footer .ft_link li + li { padding-left: 0; }
  #footer .ft_link li + li::before { display: none; }
  #footer .ft_link li a { display: block; padding: .3rem; border: 1px solid #d1d1d1; border-radius: 3px; font-size: .7rem; }
  #footer .foot-add { float: none; padding-bottom: .5rem; }
  #footer .foot-relation { position: static; float: none; clear: both; padding-bottom: 1rem; text-align: center; }
  #footer .foot-relation .sns { display: none; }
  #footer .form_select select { width: 14.4rem; margin-left: 0; }
  #footer .copyright { float: none; width: 100%; text-align: center; }
}
@media screen and (max-width: 1024px) {
  html { font-size: 18px; }
  #header { position: relative; height: 82px; }
  #header .topbar, #header .logobar .relation { display: none; }
  #header .logobar { position: fixed; top: 0; z-index: 99; width: 100%; height: 82px; }
  #header .company_wrap { right: 3.5rem; width: 250px; }
  .moblie_login { display: block; }
  .moblie_login ul { overflow: hidden; padding: 3px 6px; background: linear-gradient(45deg, #00bcd4, #2196f3); }
  .moblie_login li { position: relative; float: left; width: 33.3333%; font-size: .7rem; line-height: 30px; color: #181818; }
  .moblie_login li a { display: block; margin: 3px; border-radius: 100px; background: #fff; text-align: center; }
  #header .menubar { height: 82px; z-index: 100; width: 0; }
  #gnb { display: none; position: fixed; top: 82px; right: 0; z-index: 9999; width: 100%; height: calc(100vh - 82px); overflow-y: auto; background: #fff; }
  .menubar.on #gnb { display: block; }
  .menubar.on .gnb_bg, .menubar.active .gnb_bg { display: none; }
  #head_menu { position: relative; display: block; width: 100%; min-height: calc(100vh - 82px - 42px); background: linear-gradient(45deg, #1c388d, #2196f3); }
  #head_menu > li { position: static; float: none; width: 146px; max-width: none; height: 56px; }
  #head_menu > li > a { float: left; width: 146px; height: 56px; padding: 0 .4rem; font-size: .9rem; line-height: 56px; color: #fff; }
  .menubar.on #head_menu > li.active > a { background: #fff; color: #000; }
  #head_menu .submenu { position: absolute; top: 0; left: 146px; z-index: 999; width: calc(100% - 146px); padding-top: 11px; background: #fff; }
  .menubar.on #head_menu .submenu { visibility: hidden; opacity: 0; height: 0; }
  .menubar.on #head_menu > li.active .submenu { visibility: visible; opacity: 1; height: 100% !important; overflow-y: auto; }
  #head_menu .submenu > ul { height: auto; padding: 0 1rem; }
  #head_menu .submenu > ul::before, #head_menu .mnlast .submenu > ul::after { display: none; }
  #head_menu .submenu > ul > li > a { padding: .5rem 1rem; font-size: .9rem; text-align: left; }
  #head_menu .submenu .lnb-detail { padding: .6rem 1rem; }
  #head_menu .submenu .lnb-detail > li + li { margin-top: .8rem; }
  #head_menu .submenu .lnb-detail > li > a { font-size: .8rem; }
  .utile-wrap { position: fixed; top: 0; right: 1rem; z-index: 101; height: 82px; transform: none; }
  .utile-wrap .sitemap-mo { top: 29px; transform: none; }
  .utile-wrap .btnAllmenu > em, .utile-wrap .btnAllmenu > em::before, .utile-wrap .btnAllmenu > em::after { background: #3f51b5; }
  .utile-wrap .btnAllmenu.active > em { background: transparent; }

  #section3 .left_cont, #section3 .right_cont { float: none; display: block; width: 100%; padding-right: 0; }
  #section3 .right_cont { width: auto; margin: 1rem -.6rem 0; }
  #section3 .right_cont::after { display: block; clear: both; content: ''; }
  #section3 .right_cont .banner { float: left; width: 50%; padding: 0 .6rem; }
  #section3 .right_cont > div + div { margin-top: 0; }
  #section3 .list_box { width: calc(100% + 1.5rem); }
  #section3 .list_box li { padding-right: 1.5rem; }
  .section .left_cont { padding-right: .6rem; }
  .bul01 li::before { top: 9px; }
}
@media screen and (max-width: 930px) {
  #header .logobar .search_wrap { left: auto; right: 3.5rem; transform: translateY(-50%); }
  #header .company_wrap { top: auto; bottom: -3rem; left: 50%; right: auto; transform: translateX(-50%); background: #fff; }
  #header .company_wrap .company::before { position: absolute; top: -7px; left: 0; width: 1000%; height: 64px; margin-left: -500%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; content: ''; }
  #wrap:not(.sub) #contents { padding-top: 3.4rem; }
}
@media screen and (max-width: 855px) {
  .section .left_cont, .section .right_cont { float: none; width: 100%; overflow: hidden; padding-right: 0; }
  .section .right_cont { margin-top: 1rem; }
  #section1 .arrow_wrap { width: 7.5rem; min-width: 0; height: 2.5rem; }
  #section1 .slick-counter, #section1 .arrow { line-height: 2.5rem; font-weight: 700; }
  #section1 .slick-counter { left: 10px; font-size: .8rem; }
  #section1 .arrow { padding: 0 8px 0 0; font-size: .9rem; }
  #section1 .arrow button { line-height: 2.5rem; }
  #section2 .box, #section3 .right_cont .banner { float: none; width: 100%; }
  #section3 .right_cont .banner + .banner { margin-top: 1rem; }
}
@media screen and (max-width: 700px) {
  #header .logobar .logo { width: 260px; }
  #header .logobar .logo img { max-width: 100%; height: auto; }
  #header .logobar .input-group { width: 12rem; }
  #section3 .list_box li .img { height: 10rem; }
  #section3 .list_style2 li { width: 50%; }
  #section3 .list_style2 li a { margin-bottom: 8px; }
  #section3 .box { float: none; width: 100%; }
  #section3 .box + .box { margin-top: 1rem; }
  #footer .ft_link li { width: 50%; }
  #footer .foot-relation > .foot-logo { justify-content: center; }
}
@media screen and (max-width: 530px) {
  .utile-wrap { right: 8px; }
  #header .logobar > .container { max-width: 98%; }
  #header .logobar .logo { width: 225px; }
  #header .logobar .input-group { width: 10rem; }
  #section1 .arrow_wrap { width: 6.5rem; height: 1.6rem; }
  #section1 .slick-counter, #section1 .arrow, #section1 .arrow button { font-size: .7rem; font-weight: 300; line-height: 1.6rem; }
  #section2 .box3 .photo-list .thumbnail .img { width: 160px; height: 106px; }
  .box3 .photo-list .thumbnail > .txt { width: calc(100% - 170px); }
  #section3 .list_box li .img { height: 7rem; }
  #section3 .list_box { width: calc(100% + 11px); }
  #section3 .list_box li { padding-right: 11px; }
    .box2 .tab-list > li > a { font-size: .8rem; }
  .section4 .company_lst li { padding-right: 54px; }
}
@media screen and (max-width: 480px) {
  #header .logobar .search_wrap { display: none; }
}
@media screen and (max-width: 375px) {
  #section3 .list_box li .img { height: 5rem; }
}

/* =========================================================
   모바일 다듬기 (메인·공통)
   ========================================================= */
@media screen and (max-width: 930px) {
  /* 헤더 아래 관련사이트 로고 띠 제거 → 헤더만 깔끔하게 */
  #header .company_wrap { display: none; }
  #wrap:not(.sub) #contents { padding-top: 1rem; }
}
@media screen and (max-width: 768px) {
  body { word-break: keep-all; }
  .container { padding-left: 1.1rem; padding-right: 1.1rem; }
  #header .logobar { box-shadow: 0 1px 0 #e8ebf0; }
  /* 로고를 삼선 메뉴와 같은 높이(머리줄 가운데)에, 메뉴는 오른쪽 끝에서 띄움 */
  #header .logobar .logo { top: 0; display: flex; align-items: center; height: 82px; transform: none; line-height: 1; }
  #header .logobar .logo img { margin-top: 0; }
  .utile-wrap { right: 1.1rem; }
  /* 메인 아래 협회 바로가기 묶음(인사말·연혁·조직도…)은 휴대폰에서 숨김 */
  #section3 .list_style2 { display: none; }

  /* 메인비주얼: 16:9 비율, 사진 위 하단 문구 */
  #section1 { margin-top: .5rem; }
  #section1 .visual_wrap { padding-bottom: var(--vh-m, 50%); border-radius: 14px; }
  #section1 .visual li > a { border-radius: 14px; }
  /* 휴대폰: 비율이 달라 끌어 놓은 자리 대신 글을 아래쪽에 모아 보여 준다 */
  #section1 .visual li:not(.m-on) .vshade { background: linear-gradient(0deg, rgba(8, 20, 60, .92) 0, rgba(8, 20, 60, .55) 42%, rgba(8, 20, 60, 0) 78%); }
  #section1 .visual li:not(.m-on) .vtxt { top: auto; bottom: 3.1rem; left: 1.1rem; right: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
  #section1 .visual li:not(.m-on) .vl { position: static; width: auto !important; font-size: 1rem; color: #fff !important; text-align: left !important; }
  #section1 .visual li:not(.m-on) .vl-subtitle { font-size: .7rem; opacity: .9; }
  #section1 .visual li:not(.m-on) .vl-title { font-size: 1.05rem; line-height: 1.4; }
  #section1 .visual li:not(.m-on) .vl-body { display: none; }
  /* 모바일을 따로 맞춘 배너: 끌어 놓은 자리 그대로 (글자 크기는 배너 폭에 비례) */
  #section1 .visual li.m-on .vbg img { object-position: var(--fx-m) var(--fy-m); transform-origin: var(--fx-m) var(--fy-m); transform: scale(var(--sc-m)); }
  #section1 .visual li.m-on .vbg.is-fit img { --sc: var(--sc-m); --fxn: var(--fxn-m); --fyn: var(--fyn-m); }
  #section1 .visual .vbg.is-fit img { --ir: var(--ir-m); }     /* 휴대폰은 휴대폰 그림 비율로 */
  #section1 .visual li.m-on .vl { left: var(--x-m); top: var(--y-m); width: var(--w-m); color: var(--c-m); text-align: var(--al-m); font-weight: var(--wt-m); font-size: calc(var(--fs-m) * .1cqw); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
  #section1 .arrow_wrap { right: .8rem; bottom: .8rem; width: auto; min-width: 0; height: 1.7rem; padding: 0 .3rem 0 .7rem; border-radius: 100px; background: rgba(0, 0, 0, .45); }
  #section1 .slick-counter, #section1 .arrow { position: static; display: inline-block; height: 1.7rem; padding: 0; font-size: .65rem; font-weight: 500; line-height: 1.7rem; vertical-align: top; }
  #section1 .arrow { margin-left: .3rem; }
  #section1 .arrow button { width: 1.3rem; font-size: .75rem; line-height: 1.7rem; }

  /* 퀵메뉴 */
  #section1 .right_cont { margin-top: .9rem; }
  #section1 .quick_wrap ul { gap: .4rem; }
  #section1 .quick_wrap li a { min-height: 0; padding: .75rem .3rem .7rem; border-radius: 12px; }
  #section1 .quick_wrap li .img { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
  #section1 .quick_wrap li .txt { padding-top: .4rem; font-size: .72rem; }

  /* 게시판: 탭 높이 자동, 탭 글자 크기 통일, 밑줄 표시 */
  .section + .section { margin-top: 2.2rem; }
  #section2 .box { padding: 0; }
  #section2 .flo-left { margin: 0; }
  #section2 .box + .box { margin-top: 2.2rem; }
  .notice_wrap { height: auto; }
  .notice_wrap .tab-list { display: flex; flex-wrap: wrap; gap: 0 1.1rem; height: auto; }
  .notice_wrap .tab-list > li { display: contents; }
  .notice_wrap .tab-list > li > a, .notice_wrap .tab-list > li.on > a, .notice_wrap .tab-list > li > a:hover { position: relative; height: 40px; padding: 0; font-size: .9rem; line-height: 40px; }
  .notice_wrap .tab-list > li.on > a::after { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #3f51b5; content: ''; }
  .notice_wrap .notice-list { position: static; order: 1; width: 100%; height: auto; }
  .notice_wrap .more { top: 5px; right: 0; padding: .3rem; border-radius: 8px; }
  .box2 .notice-list .thumb_tit { padding: 1rem 0 .4rem; }
  .box2 .notice-list .thumb_tit > a { display: flex; align-items: flex-start; gap: .8rem; }
  .box2 .notice-list .thumb_tit .tit_day { flex: 0 0 56px; width: 56px; height: 58px; padding-top: 3px; border-radius: 14px 0; }
  .box2 .notice-list .thumb_tit .tit_day > strong { margin-top: .1rem; font-size: 1.25rem; }
  .box2 .notice-list .thumb_tit .tit_day > span { font-size: .55rem; }
  .box2 .notice-list .thumb_tit .txt { flex: 1; min-width: 0; width: auto; padding-left: 0; }
  .box2 .notice-list .thumb_tit .txt > strong { padding-bottom: 3px; font-size: .92rem; font-weight: 600; line-height: 1.4; }
  .box2 .notice-list .thumb_tit .txt > span { height: auto; max-height: 2.8em; font-size: .75rem; line-height: 1.4; color: #666; }
  .box2 .thumb_lst { padding-top: .4rem; }
  .box2 .thumb_lst li { padding: .5rem 0 .5rem 9px; border-top: 1px solid #f0f1f4; }
  .box2 .thumb_lst li::before { top: 50%; margin-top: -2px; }
  .notice_wrap .tab-list > li > a { border-bottom: 0; }
  .notice_wrap .posi { border-bottom: 0; }
  .notice_wrap .notice-list { border-top: 1px solid #e3e6ec; }
  .notice_wrap .tab-list > li.on > a { z-index: 1; }
  .box2 .thumb_lst li a { padding-right: 4.2rem; }
  .box2 .thumb_lst li .depth { font-size: .78rem; line-height: 1.5; color: #333; }
  .box2 .thumb_lst li .day { top: 50%; transform: translateY(-50%); font-size: .65rem; }
  .box2 .notice-list .no_data { padding: 2.2rem 0 1rem; font-size: .75rem; }

  /* 협회소식 */
  #section2 .right_cont { margin-top: 2.2rem; }
  #tabRight .posi { padding: 0; }
  .box3 .photo-list .thumbnail { display: flex; align-items: center; gap: .9rem; padding-top: .9rem; }
  .box3 .photo-list .thumbnail .img { flex: 0 0 120px; width: 120px !important; height: 84px !important; border-radius: 10px; }
  .box3 .photo-list .thumbnail > .txt { width: auto !important; padding-left: 0; }
  .box3 .photo-list .thumbnail > .txt > strong { height: auto; font-size: .85rem; font-weight: 600; line-height: 1.4; }
  .box3 .photo-list .thumbnail > .txt .view { padding-top: .3rem; }
  .box3 .tab-list > li > a { height: 40px; font-size: .9rem; line-height: 40px; }
  .box3 .photo-list .more { top: -38px; }

  /* SW미래채움·METAVERSE 카드 */
  #section3 .box > .tit > a.sns { font-size: .9rem; }
  #section3 .box > .tit > a.sns > i { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; line-height: 26px; }
  #section3 a.more { top: 0; right: 0; }
  #section3 .list_style1 .flo-left { margin: 0; }
  #section3 .box { padding: 0; }
  #section3 .list_box { width: calc(100% + .7rem); }
  #section3 .list_box li { padding-right: .7rem; }
  #section3 .list_box li .img { height: 7rem; border-radius: 12px; }
  #section3 .list_box li .img b { font-size: .75rem; }
  #section3 .list_box li a .txt { height: auto; margin: 6px 0 0; font-size: .72rem; -webkit-line-clamp: 1; }

  /* 바로가기 버튼 5개 → 3열 */
  #section3 .list_style2 { padding: 6px; border-radius: 16px; }
  #section3 .list_style2 > ul { display: grid; grid-template-columns: repeat(3, 1fr); }
  #section3 .list_style2 li { float: none; width: auto !important; }
  #section3 .list_style2 li a { margin: 4px !important; padding: .7rem 0 .6rem; border-radius: 14px; font-size: .7rem; }
  #section3 .list_style2 li a i { height: 28px; margin-bottom: 2px; font-size: 24px; line-height: 28px; }

  /* 배너 */
  #section3 .right_cont { margin-top: 2rem; }
  #section3 .right_cont .banner + .banner { margin-top: 1.4rem; }
  #section3 .ban_wrap .tit, #section3 .tit { font-size: .9rem; }
  #section3 .onslide .bn { border-radius: 12px; background-size: auto 120%, 100% 100%; }

  /* 관련기관 로고 */
  .section4 { padding: 1rem 0; }
  .section4 .company_view { margin-left: 4.6rem; }
  .section4 .arrow { width: 4.2rem; font-size: .8rem; }
  .section4 .arrow button { font-size: .75rem; }
  .section4 .company_lst li { height: 30px; padding-right: 1.6rem !important; }
  .section4 .company_lst li img { max-height: 24px; max-width: 110px; }

  /* 푸터: 왼쪽 정렬, 간결하게 */
  #footer { background: #f7f8fa; }
  #footer .ft_link { width: 100%; padding: 1rem 0 .4rem; }
  #footer .ft_link li { width: auto !important; float: left; margin: 0 1rem .5rem 0; padding: 0; text-align: left; }
  #footer .ft_link li a { display: inline; padding: 0; border: 0; font-size: .72rem; }
  /* 휴대폰: 하단 링크 6개를 한 줄로 (화면 폭에 맞춰 글자 크기 조절) */
  @media (max-width: 700px) {
    #footer .ft_link { display: flex; align-items: center; justify-content: space-between; gap: .3rem; overflow: visible; padding: .85rem 0; }
    #footer .ft_link li { flex: none; float: none; margin: 0; line-height: 1.3; white-space: nowrap; }
    #footer .ft_link li a { font-size: min(.72rem, 2.55vw); letter-spacing: -.06em; }
  }
  #footer .foot-wrap { padding: .6rem 0 1.4rem; border-top: 1px solid #e3e6ec; }
  #footer .copyright { padding-top: 1rem; font-size: .6rem; text-align: left; }
  #footer .foot-relation { padding: .8rem 0 0; text-align: left; }
  #footer .form_select { display: flex; }
  #footer .form_select select { flex: 1; width: auto; height: 2.2rem; }
  #footer .gtlink { height: 2.2rem; margin-left: 4px; padding: 0 .9rem; }
  #footer .form_select::after { right: 4.4rem; }
  #footer .foot-relation { display: flex; flex-direction: column-reverse; gap: 1rem; }
  #footer .foot-relation > .foot-logo { --lh: 26px; justify-content: flex-start; padding-top: 0; }
}

/* =========================================================
   푸터 주소 (KEIT 푸터: 둥근 라벨 + 주소 줄)
   ========================================================= */
#footer .foot-add { width: calc(100% - 480px); }
#footer .foot-add address span { word-break: keep-all; }
/* 대표전화: 로고 안 '경북ICT융합산업진흥협회' 글자 줄(로고 높이의 약 32% 지점)에 가운데를 맞춘다 */
#footer .foot-relation > .foot-logo > strong { flex: none; margin-top: calc(6px + var(--lh) * .32 - .4rem); padding: 0 5px 0 12px; font-size: .8rem; font-weight: 500; line-height: 1; color: #333; }
#footer .foot-relation > .foot-logo > a { margin-top: calc(6px + var(--lh) * .32 - .75rem); font-family: 'Play', sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1; color: #ff5722; white-space: nowrap; }
@media screen and (max-width: 768px) {
  /* 휴대폰: 로고 오른쪽에 대표전화 한 줄 */
  #footer .foot-relation > .foot-logo { --lh: 24px; flex-wrap: nowrap; align-items: center; }
  #footer .foot-relation > .foot-logo .logo { flex: none; padding-top: 0; }
  #footer .foot-relation > .foot-logo > strong { margin: 0 0 0 auto; padding: 0 6px 0 10px; font-size: .62rem; white-space: nowrap; }
  #footer .foot-relation > .foot-logo > a { margin-top: 0; font-size: 1.05rem; }
}
@media screen and (max-width: 400px) {
  #footer .foot-relation > .foot-logo { --lh: 20px; }
  #footer .foot-relation > .foot-logo > strong { padding: 0 4px 0 8px; font-size: .56rem; }
  #footer .foot-relation > .foot-logo > a { font-size: .9rem; }
}
@media screen and (max-width: 1200px) {
  #footer .foot-add { width: 100%; }
}
@media screen and (max-width: 700px) {
  /* 휴대폰 주소: 왼쪽 정렬, 작은 라벨 + 주소 */
  #footer .foot-add address { display: flex; align-items: center; gap: .45rem; padding: .5rem 0; font-size: .68rem; }
  #footer .foot-add address::after { display: none; }
  #footer .foot-add address + address { margin-top: 0; border-top: 1px solid #e6e9ef; }
  #footer .foot-add address strong { flex: none; float: none; width: 3.9rem; margin: 0; padding: 0; text-align: center; border: 0; border-radius: 100px; background: #e8edf7; font-size: .54rem; font-weight: 500; line-height: 1.7; letter-spacing: -.03em; color: #1c388d; white-space: nowrap; }
  /* 주소는 한 줄: 넘치면 js/main.js 가 글자 크기를 줄여 맞춘다 */
  #footer .foot-add address span { flex: 1; float: none; width: auto; min-width: 0; overflow: hidden; padding-left: 0; font-size: .62rem; line-height: 1.5; letter-spacing: -.04em; color: #666; white-space: nowrap; text-overflow: ellipsis; word-break: normal; }
  #footer .foot-add address span > i { display: inline-block; font-style: normal; transform-origin: left center; }
}

/* =========================================================
   서버 기능 공통 (알림 메시지, 로그아웃 버튼, 오류 페이지)
   ========================================================= */
.site_messages { position: fixed; top: 1.2rem; left: 50%; z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 2rem); transform: translateX(-50%); pointer-events: none; }
/* 알림은 토스트로 잠깐 떴다가 사라진다 (오류는 조금 더 오래) */
.site_messages .msg { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .75rem 1.2rem .75rem .9rem; border-radius: 100px; background: rgba(28, 33, 48, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: .8rem; font-weight: 500; line-height: 1.45; color: #fff; word-break: keep-all; pointer-events: auto; cursor: pointer;
  backdrop-filter: blur(6px); animation: toastIn .35s cubic-bezier(.2, .9, .3, 1.2) both, toastOut .4s ease 3.6s forwards; }
.site_messages .msg::before { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #2196f3; font-size: .7rem; font-weight: 800; content: 'i'; }
.site_messages .msg.success::before { background: #22b573; content: '✓'; }
.site_messages .msg.error::before { background: #e5484d; content: '!'; }
.site_messages .msg.warning::before { background: #f5a623; content: '!'; }
.site_messages .msg.error { animation: toastIn .35s cubic-bezier(.2, .9, .3, 1.2) both, toastOut .4s ease 6s forwards; }
.site_messages .msg.hide { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .site_messages .msg { animation: toastOut .01s linear 4s forwards; } }
#header .topbar .right_menu .log .logout_form { display: inline-flex; }
#header .topbar .right_menu .log .logout_form button { display: inline-flex; align-items: center; gap: 4px; height: 26px; font-size: .75rem; font-weight: 500; line-height: 1; color: #444; }
#header .topbar .right_menu .log .logout_form button i { font-size: 1rem; line-height: 1; }
.moblie_login li form button { display: block; width: calc(100% - 6px); margin: 3px; border-radius: 100px; background: #fff; font-size: .7rem; line-height: 30px; }
.box3 .photo-list .thumbnail .img img.noimg { object-fit: contain; padding: 20%; opacity: .3; filter: grayscale(1); }
.error_page { padding: 3rem 1rem 6rem; text-align: center; }
.error_page .error_img { display: block; width: 360px; max-width: 80%; height: auto; margin: 0 auto 1rem; }
.error_page strong { display: block; font-family: 'Play', sans-serif; font-size: 5rem; line-height: 1; color: #1c388d; }
.error_page h2 { margin: 1rem 0 .5rem; font-size: 1.3rem; }
.error_page p { margin-bottom: 1.6rem; font-size: .8rem; color: #666; }
.error_page .btn_list { display: inline-block; padding: 12px 32px; border-radius: 6px; background: #333; color: #fff; }

/* 메인 SNS (유튜브·인스타그램) */
#section3 .youtube_wrap .tit > a.sns { color: #e62117; }
#section3 .youtube_wrap .tit > a.sns > i { background: #e62117; }
#section3 .instagram_wrap .tit > a.sns { color: #c13584; }
#section3 .instagram_wrap .tit > a.sns > i { background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); }
#section3 .sns_box .list_box li .img { background: #eef0f3; }
#section3 .sns_box .list_box li .img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
#section3 .sns_box .list_box li a:hover .img img { transform: scale(1.05); }
#section3 .sns_box .list_box li .img .play { position: absolute; top: 50%; left: 50%; width: 38px; height: 26px; margin: -13px 0 0 -19px; border-radius: 7px; background: rgba(230, 33, 23, .92); font-size: 14px; line-height: 26px; color: #fff; text-align: center; }
#section3 .sns_box .list_box li a .txt { height: auto; }
#section3 .sns_empty a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 6.1rem; border: 1px dashed #d3d6db; border-radius: 10px; font-size: .8rem; color: #555; }
#section3 .sns_empty a i { font-size: 1.3rem; }

/* 헤더 오른쪽 배너: 사업관리시스템(SMART) · SW미래채움 LMS 로고 (Higgsfield 로 제작) */
#header .company_wrap .company .hd_logo { display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 10px; border-radius: 10px; transition: background-color .3s; }
#header .company_wrap .company .hd_logo img { display: block; width: auto; max-width: 100%; height: 44px; max-height: none; object-fit: contain; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
#header .company_wrap .company .hd_logo:hover img, #header .company_wrap .company .hd_logo:focus img { transform: scale(1.04); }

/* 메인 정책브리핑 정책뉴스 카드 */

/* 메인 SNS·바로가기(왼쪽)와 내부·외부소식(오른쪽) 높이·여백 맞춤 (PC)
   - 두 칸을 같은 높이로(stretch), 오른쪽 두 배너는 남는 높이를 반씩 나눠 이미지 높이를 채운다
   - 제목 줄 높이(35px)와 제목-이미지 간격(.5rem)을 왼쪽 SNS 와 같게 */
@media screen and (min-width: 1025px) {
  #section3 > .container { display: flex; align-items: stretch; }
  #section3 > .container > .left_cont, #section3 > .container > .right_cont { float: none; }
  #section3 .right_cont { display: flex; flex-direction: column; gap: 1.5rem; }
  #section3 .right_cont > div + div { margin-top: 0; }
  #section3 .right_cont .banner { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; padding-bottom: 0; }   /* 두 배너가 남는 높이를 똑같이 나눠 가진다(가운데 여백 없이) */
  #section3 .ban_wrap { display: flex; align-items: center; height: 35px; margin-bottom: .5rem; padding-top: 0; }
  #section3 .banner .arrow, #section3 .banner .slick-counter { top: 3px; }
  #section3 .onslide { flex: 1 1 auto; height: auto; min-height: 96px; aspect-ratio: auto; }   /* PC: 내부·외부소식 같은 높이로 칸을 채움 */
}

/* =========================================================
   알림 팝업 (메인) — 테두리 없는 카드, 뒤는 투명하게 흐리게
   ========================================================= */
.gpop_layer { position: fixed; inset: 0; z-index: 10000; display: flex; overflow-y: auto; padding: 24px 0; background: rgba(10, 14, 32, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: gpopFade .3s ease; }
.gpop_layer[hidden] { display: none; }
html.gpop_open, html.gpop_open body { overflow: hidden; }
/* 팝업존: 제목 · 좌우 단추 · 한 줄 카드(넘치면 옆으로 미끄러짐) · 오늘 하루 그만보기 · 닫기 */
.gpop_zone { --gh: min(560px, calc(100vh - 230px)); --side: max(56px, calc((100vw - 1288px) / 2)); width: 100%; margin: auto; }
.gpop_head, .gpop_foot { padding: 0 var(--side); }
.gpop_head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.gpop_head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.gpop_nav { display: flex; gap: 12px; }
.gpop_nav[hidden] { display: none; }
.gpop_nav button { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font-size: 22px; color: #333; transition: transform .2s, opacity .2s, background .2s; }
.gpop_nav button:hover { transform: scale(1.06); background: #f2f5fb; }
.gpop_nav button:disabled { opacity: .45; cursor: default; transform: none; }
.gpop_view { overflow: hidden; margin: -50px 0 -60px; padding: 50px var(--side) 60px; touch-action: pan-y; }
.gpop_list { position: relative; display: flex; align-items: center; gap: 28px; width: max-content; min-width: 100%; transition: transform .6s cubic-bezier(.22, .8, .25, 1); will-change: transform; }
.gpop_view.fits .gpop_list { justify-content: center; }
.gpop { flex: none; width: min(calc(var(--gh) * var(--pw) / var(--ph)), calc(100vw - 112px)); animation: gpopUp .45s ease backwards; }
.gpop:nth-child(2) { animation-delay: .06s; } .gpop:nth-child(3) { animation-delay: .12s; } .gpop:nth-child(4) { animation-delay: .18s; }
.gpop_card { position: relative; display: block; overflow: hidden; aspect-ratio: var(--pw) / var(--ph); border-radius: 14px; background: linear-gradient(135deg, #1c388d, #2196f3); box-shadow: 0 22px 50px rgba(0, 0, 0, .4); container-type: inline-size; color: #fff; transition: transform .3s ease, box-shadow .3s ease; }
a.gpop_card { cursor: pointer; }
a.gpop_card:hover, a.gpop_card:focus-visible { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.gpop_card .vbg { position: absolute; inset: 0; overflow: hidden; }
.gpop_card .vbg img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.gpop_card .vshade { position: absolute; inset: 0; pointer-events: none; }
.gpop_card .vtxt { position: absolute; inset: 0; z-index: 2; letter-spacing: -.02em; pointer-events: none; }
.gpop_card .vl { position: absolute; display: block; font-size: calc(var(--fs) * 100cqw / var(--pw)); line-height: 1.32; word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.gpop_card .vl-body { line-height: 1.6; }
.gpop_foot { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.gpop_today { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; color: #fff; cursor: pointer; user-select: none; }
.gpop_today input { width: 22px; height: 22px; margin: 0; border-radius: 5px; accent-color: #2554d6; cursor: pointer; }
.gpop_count { margin-left: auto; font-size: .7rem; letter-spacing: .08em; color: rgba(255, 255, 255, .75); }
.gpop_close { display: flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); font-size: 24px; color: #2554d6; transition: transform .25s; }
.gpop_close:hover { transform: rotate(90deg); }
.gpop_count:empty + .gpop_close { margin-left: auto; }
@keyframes gpopFade { from { opacity: 0; } }
@keyframes gpopUp { from { opacity: 0; transform: translateY(18px); } }
@media screen and (max-width: 768px) {
  .gpop_zone { --gh: min(520px, calc(100vh - 210px)); --side: 20px; }
  .gpop { width: min(calc(var(--gh) * var(--pw) / var(--ph)), calc(100vw - 64px)); }
  .gpop_list { gap: 16px; }
  .gpop_head { margin-bottom: 16px; }
  .gpop_head h2 { font-size: 1.15rem; }
  .gpop_nav button { width: 42px; height: 42px; font-size: 18px; }
  .gpop_foot { margin-top: 20px; }
  .gpop_close { width: 52px; height: 52px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .gpop_list { transition: none; } .gpop { animation: none; } }
#header .topbar .right_menu .log li a.admin_link { color: #1c42b4; font-weight: 600; }