@charset "utf-8";

/* 한빛국제뉴스 메인 레이아웃 */
:root {
    --main-navy:#07345B;
    --main-navy-deep:#052844;
    --main-blue:#1686C3;
    --main-gold:#D3AE52;
    --main-black:#171A1F;
    --main-text:#3D444C;
    --main-gray:#747C85;
    --main-line:#DEE3E8;
    --main-bg:#F4F6F8;
    --main-white:#FFFFFF;
}


/* =========================================================
   NEW 01. 통합 헤드라인 메인 섹션
   latest 내부 디자인은 latest/hb_main_headline/style.css
========================================================= */
.hbm_headline_section {
    width:100%;
    padding:45px 0 ;
}

@media (max-width:767px) {
    .hbm_headline_section {
        padding:35px 0;
        padding-top: 0;
    }
}



/* =========================================================
   NEW 02. 통합 최신 뉴스 + 많이 본 뉴스
   기사 목록 내부 디자인은 latest/hb_main_feed/style.css
========================================================= */
.hbm_feed_section {
    width:100%;
    padding:45px 0;
}

.hbm_feed_layout {
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(300px, 1fr);
    align-items:start;
    gap:55px;
}

.hbm_feed_latest,
.hbm_feed_popular {
    min-width:0;
}

.hbm_feed_heading {
    display:flex;
    align-items:center;
    min-height:45px;
    margin-bottom:24px;
    border-bottom:1px solid #dee3e8;
}

.hbm_feed_heading h2 {
    position:relative;
    margin:0;
    padding:0 0 14px;
    color:#171a1f;
    font-size:27px;
    line-height:1.3;
    font-weight:800;
}

.hbm_feed_heading h2:after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:44px;
    height:3px;
    background:#1686c3;
}

@media (max-width:969px) {
    .hbm_feed_layout {
        grid-template-columns:minmax(0, 1fr) 300px;
        gap:32px;
    }
}

@media (max-width:767px) {
    .hbm_feed_section {
        padding:35px 0;
    }

    .hbm_feed_layout {
        display:block;
    }

    .hbm_feed_popular {
        margin-top:45px;
    }

    .hbm_feed_heading h2 {
        font-size:24px;
    }
}


/* =========================================================
   NEW 03. 분야별 뉴스
   카드 내부 디자인은 latest/hb_main_fields/style.css
========================================================= */
.hbm_field_section {
    width:100%;
    padding:45px 0;
}

.hbm_field_heading {
    display:flex;
    align-items:center;
    min-height:45px;
    margin-bottom:24px;
    border-bottom:1px solid #dee3e8;
}

.hbm_field_heading h2 {
    position:relative;
    margin:0;
    padding:0 0 14px;
    color:#171a1f;
    font-size:27px;
    line-height:1.3;
    font-weight:800;
}

.hbm_field_heading h2:after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:44px;
    height:3px;
    background:#1686c3;
}

.hbm_field_section .hbfd_wrap {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:28px;
}

@media (max-width:969px) {
    .hbm_field_section .hbfd_wrap {
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:45px 24px;
    }
}

@media (max-width:600px) {
    .hbm_field_section {
        padding:35px 0;
    }

    .hbm_field_heading h2 {
        font-size:24px;
    }

    .hbm_field_section .hbfd_wrap {
        grid-template-columns:1fr;
        gap:42px;
    }
}



/* =========================================================
   NEW 04. 동영상뉴스
   영상 카드 내부 디자인은 latest/hb_main_video/style.css
========================================================= */
.hbm_video_section {
    width:100%;
    padding:45px 0;
}

.hbm_video_top {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    min-height:45px;
    margin-bottom:24px;
    border-bottom:1px solid #dee3e8;
}

.hbm_video_heading h2 {
    position:relative;
    margin:0;
    padding:0 0 14px;
    color:#171a1f;
    font-size:27px;
    line-height:1.3;
    font-weight:800;
}

.hbm_video_heading h2:after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:44px;
    height:3px;
    background:#1686c3;
}

.hbm_video_tabs {
    display:flex;
    align-items:center;
    gap:25px;
}

.hbm_video_tabs button {
    position:relative;
    margin:0;
    padding:0 1px 15px;
    border:0;
    background:none;
    color:#747c85;
    font-family:inherit;
    font-size:19px;
    font-weight:600;
    cursor:pointer;
}

.hbm_video_tabs button.is_active {
    color:#07345b;
    font-weight:800;
}

.hbm_video_tabs button.is_active:after {
    content:"";
    position:absolute;
    right:0;
    bottom:-1px;
    left:0;
    height:3px;
    background:#d3ae52;
}

@media (max-width:767px) {
    .hbm_video_section {
        padding:35px 0;
    }

    .hbm_video_top {
        display:block;
    }

    .hbm_video_heading h2 {
        font-size:24px;
    }

    .hbm_video_tabs {
        gap:22px;
        overflow-x:auto;
        white-space:nowrap;
    }

    .hbm_video_tabs button {
        flex:0 0 auto;
        padding-top:14px;
    }
}



/* =========================================================
   NEW 05. 카드뉴스
   카드 내부 디자인은 latest/hb_main_card/style.css
========================================================= */
.hbm_card_section {
    width:100%;
    padding:45px 0 0 0;
}

.hbm_card_heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:45px;
    margin-bottom:24px;
    border-bottom:1px solid #dee3e8;
}

.hbm_card_heading h2 {
    position:relative;
    margin:0;
    padding:0 0 14px;
    color:#171a1f;
    font-size:27px;
    line-height:1.3;
    font-weight:800;
}

.hbm_card_heading h2:after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:44px;
    height:3px;
    background:#1686c3;
}

.hbm_card_heading > a {
    padding-bottom:13px;
    color:#747c85;
    font-size:16px;
    text-decoration:none;
}

.hbm_card_heading > a:hover {
    color:#1686c3;
}

@media (max-width:600px) {
    .hbm_card_section {
        padding:35px 0 0 0;
    }

    .hbm_card_heading h2 {
        font-size:24px;
    }
}


/* =========================================================
   NEW 06. 축제 & 행사
   행사 카드 내부 디자인은 latest/hb_main_event/style.css
========================================================= */
.hbm_event_section {
    width:100%;
    padding:45px 0;
}

.hbm_event_heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:45px;
    margin-bottom:24px;
    border-bottom:1px solid #dee3e8;
}

.hbm_event_heading h2 {
    position:relative;
    margin:0;
    padding:0 0 14px;
    color:#171a1f;
    font-size:27px;
    line-height:1.3;
    font-weight:800;
}

.hbm_event_heading h2:after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:44px;
    height:3px;
    background:#1686c3;
}

.hbm_event_heading > a {
    padding-bottom:13px;
    color:#747c85;
    font-size:14px;
    text-decoration:none;
}

.hbm_event_heading > a:hover {
    color:#1686c3;
}

@media (max-width:600px) {
    .hbm_event_section {
        padding:35px 0;
    }

    .hbm_event_heading h2 {
        font-size:24px;
    }
}