@charset "utf-8";

:root {
    /* main color */
    --color-main:#2F3E73;
    --color-sub:#40538F;
    --color-main-rgb:47, 62, 115;

    /* base color */
    --color-white:#FFF;

    /* background */
    --bg-main-1:#F5F5F5;

    /* grayscale */
    --grayscale11: #0A0A0A;
    --grayscale10: #171717;
    --grayscale9: #262626;
    --grayscale8: #404040;
    --grayscale7: #525252;
    --grayscale6: #737373;
    --grayscale5: #A3A3A3;
    --grayscale4: #D4D4D4;
    --grayscale3: #E5E5E5;
    --grayscale2: #F5F5F5;
    --grayscale1: #FAFAFA;
    --grayscale1-rgb:250,250,250;

    /* font size */
    --fs-160:clamp(88px,11.11vw,160px);
    --fs-140:clamp(80px,9.72vw,140px);
    --fs-120:clamp(72px,8.33vw,120px);
    --fs-100:clamp(64px,6.94vw,100px);

    --fs-96:clamp(56px,6.67vw,96px);
    --fs-80:clamp(48px,5.56vw,80px);
    --fs-72:clamp(42px,5vw,72px);
    --fs-64:clamp(40px,4.44vw,64px);
    --fs-60:clamp(36px,4.17vw,60px);
    --fs-56:clamp(34px,3.89vw,56px);
    --fs-52:clamp(32px,3.61vw,52px);
    --fs-48:clamp(32px,3.33vw,48px);
    --fs-42:clamp(30px,2.92vw,42px);
    --fs-40:clamp(28px,2.78vw,40px);
    --fs-36:clamp(28px,2.5vw,36px);
    --fs-32:clamp(24px,2.22vw,32px);
    --fs-30:clamp(22px,2.08vw,30px);
    --fs-24:clamp(20px,1.67vw,24px);
    --fs-22:clamp(18px,1.53vw,22px);
    --fs-20:clamp(18px,1.39vw,20px);
    --fs-18:clamp(16px,1.25vw,18px);
    --fs-16:clamp(15px,1.11vw,16px);
    --fs-15:clamp(13px,1.04vw,15px);
    --fs-14:clamp(12px,0.97vw,14px);
    --fs-13:clamp(11px,0.9vw,13px);
    --fs-12:clamp(10px,0.83vw,12px);

    --text-shadow: 0 4px 10px rgba(0,0,0,.25);
    
    --shadow: 0 4px 10px 0 rgba(0,0,0,.25);
}

/*==========================================================
    TEXT COLOR
==========================================================*/
.color-main{color:var(--color-main)!important;}
.color-sub{color:var(--color-sub)!important;}
.color-white{color:var(--color-white)!important;}
.gray-11{color:var(--grayscale11)!important;}
.gray-10{color:var(--grayscale10)!important;}
.gray-9{color:var(--grayscale9)!important;}
.gray-8{color:var(--grayscale8)!important;}
.gray-7{color:var(--grayscale7)!important;}
.gray-6{color:var(--grayscale6)!important;}
.gray-5{color:var(--grayscale5)!important;}
.gray-4{color:var(--grayscale4)!important;}
.gray-3{color:var(--grayscale3)!important;}
.gray-2{color:var(--grayscale2)!important;}
.gray-1{color:var(--grayscale1)!important;}

/*==========================================================
    BACKGROUND
==========================================================*/
.bg-main-1{background:var(--bg-main-1)!important;}
.bg-main{background:var(--color-main)!important;}
.bg-sub{background:var(--color-sub)!important;}
.bg-white{background:var(--color-white)!important;}
.bg-gray-11{background:var(--grayscale11)!important;}
.bg-gray-10{background:var(--grayscale10)!important;}
.bg-gray-9{background:var(--grayscale9)!important;}
.bg-gray-8{background:var(--grayscale8)!important;}
.bg-gray-7{background:var(--grayscale7)!important;}
.bg-gray-6{background:var(--grayscale6)!important;}
.bg-gray-5{background:var(--grayscale5)!important;}
.bg-gray-4{background:var(--grayscale4)!important;}
.bg-gray-3{background:var(--grayscale3)!important;}
.bg-gray-2{background:var(--grayscale2)!important;}
.bg-gray-1{background:var(--grayscale1)!important;}

/*==========================================================
    SHADOW
==========================================================*/
.shadow{box-shadow:var(--shadow)!important;}

/*==========================================================
    GRADIENT
==========================================================*/
.gradient-main{background:var(--gradient-main)!important;}

/*==========================================================
    TYPOGRAPHY
==========================================================*/

/* Hero */
.hero-tit{word-break:keep-all; font-size:var(--fs-52); font-weight:500; line-height:1.2;}
.hero-sub{word-break:keep-all; font-size:var(--fs-24); font-weight:500;}

/* Header */
.header-menu {word-break:keep-all; font-size:var(--fs-16); font-weight:500;}

/* Section */
.section-tit{word-break:keep-all; font-size:var(--fs-32); font-weight:500; line-height:1.4; color:var(--grayscale9);}
.section-sub{word-break:keep-all; font-size:var(--fs-18); font-weight:400; line-height:1.5; color:var(--grayscale8);}

/* Category */
.eyebrow {word-break:keep-all; font-size:var(--fs-15); font-weight:500; line-height:1.5; color:var(--color-main);}

/* Card */
.card-tit{word-break:keep-all; font-size:var(--fs-22); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.card-tit2{word-break:keep-all; font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.card-txt {word-break:keep-all; font-size:var(--fs-16); line-height:1.5; color:var(--grayscale8);}

/* Sub Page */
.sub-hero-sub{word-break:keep-all; font-size:var(--fs-20); font-weight:500; line-height:1.2;}
.sub-hero-tit{word-break:keep-all; font-size:var(--fs-42); font-weight:500; line-height:1.2;}

/* Article */
.article-tit{word-break:keep-all; font-size:var(--fs-24); font-weight:500; line-height:1.5;}
.body-txt{word-break:keep-all; font-size:var(--fs-18); line-height:1.8; color:var(--grayscale8);}

/*==========================================================
    BTTOUN
==========================================================*/
.btn {width: fit-content; display:inline-flex; align-items:center; justify-content:center; gap: 8px; padding: 8px var(--fs-16); background-color: var(--color-white); border:1px solid var(--grayscale4); border-radius:4px; font-size:var(--fs-16); color: var(--grayscale6); font-weight:500; line-height:1.5; text-decoration:none; white-space:nowrap; transition:all .3s ease; cursor:pointer;}
.btn svg{width:var(--fs-24); height:var(--fs-24); flex-shrink:0; transition:transform .3s ease;}
.btn:hover {background-color: rgba(212,212,212,.2);}
.btn-primary {background-color: var(--color-main); color: var(--color-white); border-color: var(--color-main);}
.btn-primary:hover {background-color: var(--color-sub); border-color: var(--color-sub);}
.btn.btn-line {border: 1px solid var(--color-white); background-color: transparent; color: var(--color-white);}
.btn.btn-line.no-hover {cursor: default;}
.btn.btn-line.no-hover:hover {background-color: transparent;}

.btn-l {font-size: var(--fs-18); line-height: 1.8; font-weight: 400;}
.btn-l span {display: flex; align-items: center; column-gap: 4px; color: var(--fs-18); font-weight: 400;}
.fb-btn {border-color: #0866FF; color: #0866FF;}

/* 공통부분 */
.inner {width: calc(100% - 32px); max-width: 1520px; margin: 0 auto;}
.inner-s {width: calc(100% - 32px); max-width: 1006px; margin: 0 auto;}

.pd-160 {padding: var(--fs-160) 0;}
.pd-140 {padding: var(--fs-140) 0;}
.pd-120 {padding: var(--fs-120) 0;}
.pd-100 {padding: var(--fs-100) 0;}
.pd-80 {padding: var(--fs-80) 0;}

.common-flex {display: flex; column-gap: 30px; row-gap: 60px;  flex-wrap: wrap;}
.common-flex-3 > a {width: calc(100% / 3 - 20px);}

.btn-area {display: flex; align-items: center; column-gap: var(--fs-12);}

.br-8 {border-radius: 8px;}

.line {display: block; width: 100%; height: 1px; background-color: var(--grayscale3);}

.img-wrap {overflow: hidden;}
.img-wrap img {width: 100%; height: 100%; object-fit: cover; transition:.4s;}

.text-shadow {text-shadow: var(--text-shadow);}

/*
<div class="section-info">
    <h2 class="section-tit">함께: 하다</h2>
    <p class="section-sub">협회의 발걸음과 주요 활동을 전합니다.</p>
</div>
*/
.section-info {display:flex; flex-direction:column; row-gap:8px;}
.section-info .section-tit {display:flex; align-items:center; column-gap:var(--fs-12);}
.section-info .section-tit::after {content:''; width:var(--fs-48); height:2px; background-color: #226BB5;}

/*
<a href="#" class="common-card">
    <div class="img-wrap">
        <img src="/img/temp.jpg" alt="">
    </div>
    <div class="text">
        <span class="eyebrow">회장님 문안</span>
        <strong class="card-tit2">국민훈장 '석류장'을 받으며</strong>
        <p class="card-txt">한국교통장애인협회 중앙회장 김락환</p>
    </div>
</a>
*/
.common-card {display:block;}
.common-card .img-wrap {overflow:hidden; border-radius:8px; width: 100%; height: 320px;}
.common-card:hover .img-wrap img {transform:scale(1.05);}
.common-card .card-text {display:flex; flex-direction:column; row-gap:8px; margin-top:var(--fs-24);}

.common-card .card-tit,
.common-card .card-tit2 {display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word;}
.common-card .card-txt {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word;}

/*
<a href="#" class="common-card-row">
    <div class="img-wrap">
        <img src="/img/temp.jpg" alt="">
    </div>
    <div class="card-text">
        <strong class="card-tit">2026년도 (사)한국교통장애인협회 정기총회 개최</strong>
        <p class="card-txt">한국교통장애인협회(회장 김락환)는 지난 2월 26일(목) 구미시장애인체육관 주경기장에서 '2026년도 정기총회'를 열고 2025년도 사업보고를 진행했습니다.</p>
    </div>
</a>
*/
.common-card-row {display:flex; align-items: center; column-gap:var(--fs-24);}
.common-card-row .img-wrap {flex-shrink:0; width:220px; border-radius:4px; aspect-ratio:220/120; overflow:hidden;}
.common-card-row:hover .img-wrap img {transform:scale(1.05);}
.common-card-row .card-text {flex:1; display:flex; flex-direction:column; row-gap:var(--fs-12);}
.common-card-row .card-tit,
.common-card-row .card-tit2 {display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word;}
.common-card-row .card-txt {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word;}

/* 그리드 레이아웃 */
.common-grid2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-40);}
.common-grid3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-40);}
.common-grid4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-40);}

.section-box {display: flex; flex-direction: column; row-gap: var(--fs-60);}

/* layout */
header {width: 100%; position: fixed; top: 0; height: 80px; z-index: 99998; background-color: var(--color-main);}
header .inner {position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between;}
header .gnb-menu {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; column-gap: var(--fs-52);}
header .gnb-menu a {position: relative; font-size: var(--fs-16); font-weight: 500; color: var(--color-white); padding: 10px 6px; transition: all .3s;}
header .gnb-menu a::after {position:absolute; width:0; height:2px; left:0; bottom:0; background-color:var(--color-white); display:block; content:''; transition:width .4s cubic-bezier(.4,0,.2,1);}
header .gnb-menu a.active::after,
header .gnb-menu a:hover::after {width:100%;}
header .logo img {height: 44px;}
header .mo-btn {position:relative; z-index:100001; width:24px; height:15px; font-size:0; cursor:pointer;}
header .mo-btn:before {position:absolute; content:''; top:0; left:0; width:2px; height:2px; border-radius:50%; background:var(--color-white);}
header .mo-btn:after {position:absolute; content:''; right:0; bottom:0; width:2px; height:2px; border-radius:50%; background:var(--color-white);}
header .mo-btn span {position:absolute; top:0; right:0; width:100%; height:2px; border-radius:5px; background:var(--color-white); transition:all .3s;}
header .mo-btn span:nth-child(2) {top:50%; margin-top:-1px;}
header .mo-btn span:nth-child(3) {top:auto; right:auto; bottom:0; left:0; width:100%;}

#gnb_all {position:fixed; inset:0; z-index:99999; width:100%; height:100%; margin:0; padding:0; overflow:hidden; visibility:hidden; opacity:0; pointer-events:none; background:rgba(0,0,0,.5); transition:opacity .5s, visibility 0s linear .5s;}
#gnb_all .gnb-panel {position:absolute; top:0; right:0; width:40%; height:100%; min-height:100vh; transform:translateX(100%); transition:transform .5s cubic-bezier(.4,0,.2,1);}
body.menu-open #gnb_all {visibility:visible; opacity:1; pointer-events:auto; transition:opacity .5s, visibility 0s;}
body.menu-open #gnb_all .gnb-panel {transform:translateX(0);}#gnb_all .gnb-content {width:100%; height:100%; display: flex; flex-direction: column; row-gap: var(--fs-80); padding:clamp(50px,4.17vw,80px) clamp(40px,5vw,100px); box-sizing:border-box; overflow-y:auto; background:#000;}
#gnb_all .gnb-content .mo-link {display: none;}
#gnb_all .gnb-content::-webkit-scrollbar {display:none;}
#gnb_all .gnb-close {position:absolute; top:50%; left:0; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:50%; background:var(--color-white); cursor:pointer;}
#gnb_all .gnb-close span {position:absolute; width:17px; height:1.5px; background:var(--grayscale8);}
#gnb_all .gnb-close span:nth-child(1) {transform:rotate(45deg);}
#gnb_all .gnb-close span:nth-child(2) {transform:rotate(-45deg);}
#gnb_all .gnb-section p {margin:0; font-size:var(--fs-18); font-weight:400; line-height:1.7; color:var(--color-white);}
#gnb_all .gnb-section {display:flex; flex-direction:column; row-gap: var(--fs-24);}
#gnb_all .gnb-section strong {display:block; font-size:var(--fs-18); font-weight:600; line-height:1.5; color:var(--color-white);}
#gnb_all .gnb-section ul {display:flex; flex-direction:column; row-gap:4px; margin:0; padding:0; list-style:none;}
#gnb_all .gnb-section li {margin:0; padding:0; font-size:var(--fs-18); font-weight:400; line-height:1.5; color:var(--color-white); text-decoration:none; transition:opacity .3s;}
#gnb_all .gnb-section li a {display:block; font-size:var(--fs-18); font-weight:400; line-height:1.5; color:var(--color-white); text-decoration:none; transition:opacity .3s;}
#gnb_all .gnb-section li a:hover {opacity:.6;}

body.sub header {background-color:var(--color-white);}
body.sub header .logo img {content:url("../img/logo.svg");}
body.sub header .gnb-menu a {color:var(--grayscale10);}
body.sub header .gnb-menu a.active,
body.sub header .gnb-menu a:hover {color:var(--color-main);}
body.sub header .gnb-menu a::after {background-color:var(--color-main);}
body.sub header .mo-btn:before,
body.sub header .mo-btn:after,
body.sub header .mo-btn span {background:var(--grayscale10);}

.footer-top {width: 100%; height: 68px; display: flex; align-items: center; justify-content: center; background: var(--grayscale11);}
.footer-top p {color: var(--color-white); text-align: center;}
footer {padding: 70px 0; background-color: var(--grayscale10);}
footer .logo {display: flex; padding-bottom: 40px;}
footer .logo img {height: 50px;}
footer ul { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 8px; padding-bottom: 24px;}
footer ul li {position: relative; color: var(--color-white); opacity: 0.6;}
footer ul li::after {position: absolute; width: 1px; height: 14px; background-color: #707070; top: 50%; right: -14px; transform: translate(0, -50%); display: block; content: '';}
footer ul li:nth-of-type(3):after {display: none;}
footer .design-by{ opacity:0; transition: all 0.15s; font-size:13px; color: var(--grayscale10); pointer-events:none;}
footer .design-by.show{ opacity:1; pointer-events:auto;}
#top_btn {position:fixed;bottom:50px;right:8%;width:64px;height:64px;z-index: 999;display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-main); border: 0; cursor: pointer; box-shadow: var(--shadow);}


/* 메인 배너 */
.main-visual {margin-top: 80px;}
.main-visual-swiper {position:relative; overflow:hidden; height:clamp(520px,70vw,720px);}
.main-visual-swiper .swiper-slide {position: relative; overflow:hidden;}
.main-visual-swiper .swiper-slide::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.35); display: block; content: '';}
.main-visual-swiper .swiper-slide img {display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 7s ease;}
.main-visual-swiper .swiper-slide-active img {transform:scale(1);}
.main-visual-swiper .main-tit {position:absolute; left:50%; top: 50%; transform:translate(-50%, -50%); z-index:99; display:flex; flex-direction:column; row-gap:18px;}
.main-visual-swiper .main-tit .btn {margin-top: var(--fs-20);}

/* 주요소식 */
.section01 .main-notice {display:block; border-radius: 8px; overflow: hidden;  height: 446px;}
.section01 .main-notice .img-wrap {position:relative; height: 100%; overflow:hidden;}
.section01 .main-notice .img-wrap::before {content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); z-index:1;}
.section01 .main-notice:hover .img-wrap img {transform:scale(1.05);}
.section01 .main-notice .info {position:absolute; left:var(--fs-40); right:var(--fs-40); bottom:var(--fs-40); display:flex; flex-direction:column; row-gap:var(--fs-12); z-index:2;}
.section01 .main-notice .info .btn {align-self:flex-start; margin-top:var(--fs-12);}
.section01 .section-news-list {display: flex; flex-direction: column; justify-content: space-between;}

/* 함께 하다 */
.section02 .common-card-swiper {width: 100%;}

/* 함께 나누다 */
.section03 .inner {display:flex; align-items: flex-start; column-gap: var(--fs-40);}
.section03 .section-content {display: flex; flex-direction: column; row-gap: var(--fs-100); flex:0 0 482px;}
.section03 .section-text {display: flex; flex-direction: column; row-gap: var(--fs-12);}
.section03 .section-text .btn {margin-top: var(--fs-48);}
.section03 .mo-mode {display: none;}
.section03 .img-wrap {flex:1; aspect-ratio:998/498; border-radius:var(--fs-12); overflow:hidden;}
.section03 .img-wrap img {width:100%; height:100%; object-fit:cover;}

/* sub */
.sub-visual {position:relative; height:clamp(240px,25vw,360px); overflow:hidden; margin-top: 80px;}
.sub-visual-bg {position:absolute; inset:0;}
.sub-visual-bg img {display:block; width:100%; height:100%; object-fit:cover;}
.sub-visual-dim {position:absolute; inset:0; background:rgba(0,0,0,.6);}
.sub-visual-content {position:relative; z-index:1; height:100%; display:flex; flex-direction:column; row-gap: var(--fs-24); align-items:center; justify-content:center; text-align:center; color:var(--color-white);}
.sub-visual-tit {font-size:var(--fs-20); font-weight:500; line-height:1.5; word-break: keep-all;}
.sub-visual-title {font-size:var(--fs-42); font-weight:500; line-height:1.3; color:var(--color-white); word-break: keep-all;}

.article-btn-area {display:grid; grid-template-columns:repeat(2,1fr); height:clamp(160px,16.67vw,240px);}
.article-btn-area > a {position:relative; display:flex; flex-direction:column; align-items: center; justify-content:center; padding:var(--fs-40) var(--fs-80); background-position:center; background-size:cover; background-repeat:no-repeat; color:var(--color-white); overflow:hidden;}
.article-btn-area > a::before {content:''; position:absolute; inset:0; background:rgba(0,0,0,.5); transition:background .3s;}
.article-btn-area .label,
.article-btn-area .subject-name {position:relative; z-index:1;}
.article-btn-area .label {font-size:var(--fs-18); font-weight:500;}
.article-btn-area .subject-name {display:flex; align-items:center; column-gap:8px; font-size:var(--fs-24); font-weight:500; line-height:1.5; word-break: keep-all;}
.article-btn-area .subject-name svg {display:block; flex-shrink:0; width:36px; height:36px; opacity:0; transition:opacity .3s ease, transform .3s ease;}
.article-btn-area .prev-btn .subject-name svg {transform:translateX(-15px);}
.article-btn-area .next-btn .subject-name svg {transform:translateX(15px);}
.article-btn-area > a:hover .subject-name svg {opacity:1; transform:translateX(0);}
.article-btn-area > a:hover::before {background:rgba(0,0,0,.85);}
.article-btn-area .prev-btn {text-align:right;}
.article-btn-area .next-btn {text-align:left;}
.article-btn-area .btn-inner {display:flex; flex-direction:column; justify-content:center; row-gap:8px;}
.article-btn-area .prev-btn .btn-inner {align-items: flex-end;}

.sub-cont {padding: var(--fs-80) 0 var(--fs-120) 0;}
.sub-cont .img-wrap:hover img {transform:scale(1.05);}

.article-wrap .inner-s {display: flex; flex-direction: column; row-gap: var(--fs-80);}
.article-wrap p,
.article-wrap li {font-size: var(--fs-18); color: var(--grayscale8); line-height: 1.8; word-break: keep-all;}
.article-wrap .common-grid2,
.article-wrap .common-grid3 {gap: var(--fs-30);}
.article-wrap .common-grid2 .img-wrap,
.article-wrap .common-grid3 .img-wrap {height:clamp(220px,20.83vw,300px);}
.article-wrap .article-cont {display: flex; flex-direction: column; row-gap: var(--fs-40);}
.article-wrap .article-box {display: flex; flex-direction: column; row-gap: var(--fs-24);}
.article-wrap .article-img-box {display: flex; flex-direction: column; row-gap: var(--fs-30);}
.article-wrap .article-text-box {display: flex; flex-direction: column; row-gap: var(--fs-20);}
.article-wrap .article-text-box.small {display: flex; flex-direction: column; row-gap: var(--fs-12);}
.article-wrap .img-wrap {height:clamp(300px,41.67vw,600px); border-radius: 8px;}
.article-wrap .img-wrap.img-large {width:100%; aspect-ratio:1/1; height:auto;}
.article-wrap .article-tit {font-size: var(--fs-24); font-weight: 500; color: var(--color-main);}
.article-wrap .article-sign {position: relative; display: flex; align-items: center; column-gap: 6px; padding-left: 22px;}
.article-wrap .article-sign::before {position: absolute; width: 2px; height: var(--fs-24); left: 0; top: 50%; transform: translateY(-50%); background-color: var(--color-main); display: block; content: '';}
.article-wrap .article-sign span {font-size: var(--fs-18); color: var(--grayscale9); line-height: 1.8;}
.article-wrap .article-sign strong {font-weight: 500; font-size: var(--fs-20); color: var(--grayscale9); line-height: 1.8;}
.article-wrap ._bullet {display: flex; align-items: flex-start; column-gap: var(--fs-14); font-size: var(--fs-24); line-height: 1.5; font-weight: 500; color: var(--color-main);}
.article-wrap ._bullet.black {color: var(--grayscale9);}
.article-wrap ._bullet span {width: 3px; height: var(--fs-24); margin-top: 6px; display: block; background-color: var(--color-main);}

.article-wrap .btn-area .btn:hover {background-color: var(--color-main); border-color: var(--color-main); color: var(--color-white);}
.article-wrap .btn-area .like-btn:hover path {fill: var(--color-white); stroke: var(--color-white);}
.article-wrap .btn-area .share-btn:hover path {stroke: var(--color-white);}

.article-box.bg {background-color: var(--grayscale2); padding: var(--fs-30);}
.article-box.bg .article-tit {width: fit-content; font-size: var(--fs-24); font-weight: 500; line-height: 1.5; padding: 8px 16px; background-color: var(--color-main); color: var(--color-white);}
.article-box.bg strong {color: var(--color-main); font-weight: 600;}
.article-box.bg h3 {font-size:var(--fs-20); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.article-box.bg ol {display:flex; flex-direction:column; row-gap:4px; padding-left:0;}
.article-box.bg ol li {font-size:var(--fs-18); color:var(--grayscale8); line-height:1.8; word-break:keep-all;}

.sub-cont .img-wrap img {cursor:pointer;}
.image-modal {position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; padding:40px; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .3s, visibility .3s;}
.image-modal.is-open {visibility:visible; opacity:1; pointer-events:auto;}
.image-modal-bg {position:absolute; inset:0; background:rgba(0,0,0,.7); cursor:pointer;}
.image-modal-content {position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; pointer-events:none;}
.image-modal-img {display:flex; align-items:center; justify-content:center; width:100%; height:100%; pointer-events:none;}
.image-modal-img img {display:block; width:auto; height:auto; max-width:90vw; max-height:90vh; object-fit:contain; pointer-events:auto;}
.image-modal-close {position:absolute; top:var(--fs-40); right: var(--fs-40); z-index:2; width:var(--fs-52); height:var(--fs-52); border-radius: 50%; background-color: var(--color-white); cursor:pointer; pointer-events:auto;}
.image-modal-close span {position:absolute; top:50%; left:50%; width: var(--fs-24); height:2px; background:var(--grayscale6); transform:translate(-50%,-50%) rotate(45deg);}
.image-modal-close span:nth-child(2) {transform:translate(-50%,-50%) rotate(-45deg);}
body.modal-open {overflow:hidden;}

.news-tab {width:100%; border-bottom:1px solid var(--grayscale3);}
.news-tab-swiper {overflow:hidden;}
.news-tab-swiper .swiper-wrapper {display:flex;}
.news-tab-btn {position:relative; width:fit-content !important; height:auto; padding:var(--fs-20) 0; font-size:var(--fs-24); font-weight:500; line-height:1.2; color:var(--grayscale9); white-space:nowrap;}
.news-tab-btn::after {position:absolute; left:0; bottom:-1px; width:0; height:3px; content:''; background:var(--color-main); transition:width .3s;}
.news-tab-btn:hover,
.news-tab-btn.active {color:var(--color-main);}
.news-tab-btn:hover::after,
.news-tab-btn.active::after {width:100%;}

.news-tab-content {width:100%;}
.news-tab-panel {display:none; flex-direction: column; row-gap: var(--fs-60);}
.news-tab-panel.active {display:flex;}
.news-tab-content li.color-main {font-size: var(--fs-20); font-weight: 500;}

/* 반응형 */
@media screen and (max-width: 1800px) {

}
@media screen and (max-width: 1520px) {
}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 1024px) {

    header .gnb-menu {display: none;}
    #gnb_all .gnb-panel {width: 80%;}
    #gnb_all .gnb-content .mo-link {display: flex; flex-direction: column; row-gap: var(--fs-20);}
    #gnb_all .gnb-content .mo-link a {font-size: var(--fs-20); font-weight: 500; color: var(--color-white); transition:opacity .3s;}
    #gnb_all .gnb-content .mo-link a:hover {opacity: .6;}
    #gnb_all .gnb-section > p {display: none;}

    .section03 .mo-mode {display: block;}
    .section03 .pc-mode {display: none;}
    .section03 .section-content {flex: auto; row-gap: var(--fs-60);}

    .section01 .common-grid2 {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--fs-60);}
    .section01 .section-news-list {row-gap: var(--fs-20);}

}
@media screen and (max-width: 768px) {

    .pd-120,
    .pd-100 {padding: var(--fs-80) 0;}

    #top_btn {right: 4%;}

    .footer-top {height: 54px;}
    .footer-top p {font-size: 15px;}

    .common-card-row .img-wrap {width:clamp(160px,15.28vw,220px);}

    .section01 .main-notice {height:clamp(320px,53.33vw,768px);}
    .section04 .common-grid2 {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--fs-100);}

    .article-btn-area {height: auto; grid-template-columns: repeat(1,1fr);}
    .article-btn-area > a {padding: var(--fs-80) var(--fs-40);}

    .article-wrap .common-grid2,
    .article-wrap .common-grid3 {grid-template-columns: repeat(1, minmax(0, 1fr));}
}
@media screen and (max-width: 600px) {

    
}
@media screen and (max-width: 500px) {

    #top_btn {width: 54px; height: 54px; }
    #top_btn svg {width: 32px; height: 32px;}

    .pd-120,
    .pd-100 {padding: 60px 0;}

    .menu-open #gnb_all .gnb-panel {width: 90%;}

    .article-btn-area .btn-inner {width: 100%;}

    .image-modal-close {width: 42px; height: 42px; left: 50%; right: auto; transform: translateX(-50%);}

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 375px) {
    .article-wrap .article-sign {flex-direction: column; row-gap: 2px; align-items: flex-start;}
}

@media screen and (max-width: 340px) {

}

/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/* 좋아요 활성(liked) 상태 */
.article-wrap .btn-area .like-btn.liked path {fill: #E5484D; stroke: #E5484D;}
.article-wrap .btn-area .like-btn.liked:hover path {fill: var(--color-white); stroke: var(--color-white);}