/* 메인: 2026-09-23 시안, 공통 헤더: 2026-09-30 시안. */
@font-face {
    font-family: 'SEBANG';
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src:  url(../font/SEBANG-Gothic.woff) format('woff');
}

@font-face {
    font-family: 'SEBANG';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src:  url(../font/SEBANG-Gothic-Bold.woff) format('woff');
}






.site-header {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    z-index: 9;
}

.site-header .header_wrap {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.site-header .main_header_type.header_fix {
    background:rgba(27,69,126,0.8);      -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
}

.site-header .header_inner {
    height: 95px;
    position: relative;
}

.site-header .header_inner:after {
    clear: both;
}

.site-header .header_inner:after,
.site-header .header_inner:before {
    display: table;
    content: " ";
}

.site-header .header_inner h1 {
    position: absolute;
    left: 0;
    top: 33px;
    padding: 0;
    margin: 0;
}

.site-header .header_inner h1 a {
    transition: all 0.3s ease;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    width: 345px;
    height: 34px;
    background: url(../img/main-0923/logo.png) no-repeat 0 50%;
    background-size: auto 34px;
}

.site-header .main_header_type {
    background: transparent;       border-bottom: 1px solid transparent;
}

.site-header .main_header_type .header_inner h1 a {
    background: url(../img/main-0923/daon_logo_w.png) no-repeat 0 50%;background-size: auto 34px;
}

.site-header .main_header_type #gnb li .nav_menu_a span {
    color: #fff;
}

.site-header .main_header_type .sub_search_bt {
    background:rgba(255,255,255,0.2) url(../img/main-0923/mobile_search_bt_w.svg) no-repeat 50% 50%;
}

.site-header .top_nav_wrap {
    margin: 0 370px;
    transition: all 0.3s ease;
}

.site-header .top_nav_wrap ul li {
    list-style: none;
}

.site-header #gnb {
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.site-header #gnb li .nav_menu_a {
    display: block;
    height: 95px;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    padding: 38px 10px 0 10px;
    font-family: SCDream;
    min-width: 120px;
    white-space: nowrap;
}

.site-header #gnb li .nav_menu_a span {
    font-size: 18px;
    color: #4d4d4d;
    display: inline-block;
    position: relative;
}

.site-header #gnb li .nav_menu_a span:after {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    background: #074881;
    left: 0;
    right: 0;
    transition: all 0.3s ease;
    opacity: 0;
}

.site-header .main_header_type #gnb li .nav_menu_a span:after {
    background: #fff;
}

.site-header #gnb li .nav_menu_a .nav_link_i {
    padding-right: 26px;
    background: url(../img/main-0923/n_link_i.svg) no-repeat right 0;
    background-size: 20px auto;
}

.site-header .main_header_type #gnb li .nav_menu_a .nav_link_i {
    background-image: url(../img/main-0923/n_link_i_w.svg);
}

.site-header #gnb li .nav_menu_a.active span {
    color: #095092;
}

.site-header #gnb li .nav_menu_a.active:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 17px;
    width: 6px;
    height: 6px;
    background: #095092;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.site-header #gnb li .nav_menu_a.on {
    color: #095092;
}

.site-header #gnb li .nav_menu_a.on:after {
    opacity: 1;
    top: 10px;
}

.site-header #gnb li .nav_menu_a.on span:after {
    opacity: 1
}

.site-header #gnb .menu {
    position: relative;
    display: inline-block;
    flex: 0 1 auto;
    margin-left: 0
}

.site-header #gnb .menu:first-child,
.site-header .top_util .util li:first-child,
.site-header .top_util .top_roll ul li:first-child,
.site-header .f_util li:first-child {
    margin-left: 0;
    padding-left: 0;
    background: none;
}

.site-header #gnb .sub_menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 96px;
    z-index: 30;
    border-right: 1px solid #e9e9e9;
    height: 257px;
}

.site-header #gnb .sub_menu ul {
    text-align: left;
    padding: 17px 0 0 0;
    transition: all 0.3s ease;
}

.site-header #gnb .sub_menu li {
    position: relative;
    float: none;
    padding: 5px 4px;
    margin-bottom: 7px;
    white-space: nowrap;
}

.site-header #gnb .sub_menu li:last-child {
    margin-bottom: 0;
}

.site-header #gnb .sub_menu li a {
    color: #333;
    padding: 0 0 0 6px;
    font-size: 15px;
    display: block;
    line-height: 16px;
    text-align: left;
    font-family: SCDream;
}

.site-header #gnb .sub_menu.on {
    z-index: 40;
    background: #f9f9f9;
}

.site-header #gnb .sub_menu.on ul {
    position: relative;
}

.site-header #gnb .sub_menu li a em {
    display: block;
    padding-top: 5px;
}

.site-header #gnb .sub_menu a:hover {
    text-decoration: underline;
}

.site-header #gnb .sub_menu .line_space {
    width: 61px;
}

.site-header .gnb_bg {
    border-top: 1px solid #e2dedd;
    display: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 95px;
    width: 100%;
    height: 258px;
    background: #fff;
    z-index: 10;
    overflow: hidden;
}

.site-header .gnb_bg .bg_wrap {
    height: 172px;
}

.site-header .gnb_back_bg {
    content: '';
    display: block;
    clear: both;
    position: fixed;
    width: 100%;
    top: 95px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    background:rgba(0,0,0,0.8);
    z-index: 9;
    text-indent: -9999px;
    overflow: hidden;
}

.site-header .top_nav_wrap ul .sub_menu .menu_num {
    position: absolute;
    right: 5px;
    top: 0;
    line-height: 20px;
    color: #fff;
    background: #656abc;
    padding: 0 6px;
    border-radius: 10px;
    display: block;
    font-size: 13px;
    font-style: normal;
}

.site-header .top_right_box {
    right: -20px;
    visibility: hidden;
    opacity: 1;
}

.site-header .top_right_box {
    position: absolute;
    right: 0;
    top: 26px;
    transition: all 0.3s ease;
    visibility: visible;
    opacity: 1;
}

.site-header .search_bt_box {
    position: relative;
    float: left;
}

.site-header .sub_search_bt {
    background: url(../img/main-0923/mobile_search_bt.png) no-repeat 50% 50%;
    text-align: left;
    text-indent: -9999px;
    overflow: hidden;
    width: 44px;
    height: 44px; border-radius: 22px;
    display: block;
}

.site-header .h_t_user {
    float: left;
    margin-left: 8px;
    padding-top: 2px;
}

.site-header .h_login_bt {
    display: inline-block;
    border-radius: 20px;
    background: #fff;
    padding: 0 20px;
    border: 1px solid #878787;
    line-height: 35px;
    color: #333;
    font-size: 14px;
}

.main-page .brick {
    background: #fff;
    border-radius: 10px;
    position: relative;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    transition: all 0.3s ease;
    hyphens: auto;
    box-shadow: 0 2px 10px rgba(72, 72, 72, 0.1);
}

.main-page .brick_line {
    background: #fff;
    border-radius: 10px;
    position: relative;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    transition: all 0.3s ease;
    hyphens: auto;border:1px solid #ddd;
}

.main-page .brick_line:hover {
    border-color: var(--primay-color);
}

.main-page .brick:hover {
    box-shadow: 0 3px 15px rgba(72, 72, 72, 0.2);
}

.main-page .b_shadow_none {
    box-shadow: none;
}

.main-page .line_bt {
    border: 1px solid #ccc;
    color: #333;
    font-size: 14px;
    display: inline-block;
    background: #fff;
    line-height: 34px;
    padding: 0 14px;
    height: 36px;
    transition: all 0.3s ease;
    border-radius: 18px;
    text-align: center;
    min-width: 100px;
    text-align: center;
}

.main-page .bt_add_icon span {
    display: inline-block;
    padding: 0px 25px 0 0;
    line-height: 30px;
    transition: all 0.1s ease;
}

.main-page .line_bt:hover {
    color: #333365;
    border-color: #333365;
}

.main-page .line_bt span {
    display: inline-block; padding: 0 24px 0 0;  position: relative;
}

.main-page .line_bt span:after {
    content: ''; display: block; width: 24px; height: 24px; position: absolute; right: 0; top:4px;
}

.main-page .line_bt .bt_plus_i:after {
    background: url(../img/main-0923/bt_plus_i.svg) no-repeat 50% 50%;
}

.main-page .line_bt .bt_arr_i:after {
    background: url(../img/main-0923/bt_arr_i.svg) no-repeat 50% 50%;
}

.main-page .main_visual_wrap {
    background: #fff url(../img/main-0923/main_visual_bg.jpg) no-repeat 50% 50%;
    background-size: cover; padding: 80px 0 0 0;
}

.main-page .m_v_con_box {
    display: flex; height: 580px; align-items: center;
}

.main-page .m_v_inner {
    width: 100%;
    position: relative; display: flex; align-items: flex-end;  justify-content:space-between;
    overflow: hidden;
}

.main-page .m_v_t_box {
    width: 50%;
    float: left;
}

.main-page .m_v_m_t {
    display: flex;gap:15px;  margin-bottom: 20px;align-items: center;
}

.main-page .m_v_m_t p {
    font-size: 16px; color: #CBDAFF; padding: 20px 0 0 0;  position: relative; line-height: 22px;
}

.main-page .m_v_m_t p:after {
    content: ''; display: block; position: absolute; left: 0; top:0; width: 26px; height: 2px;  background: #00C3FF;
}

.main-page .m_v_m_t p span {
    display: block; padding: 0 0 0 5px;
}

.main-page .m_v_t_box h2 {
    font-size: 70px;
    color: #fff;
     font-family:SEBANG;

    font-weight: 700;
}

.main-page .m_v_t_box .m_v_text01 {
    font-size: 18px;
    color: #fff;
    font-family: SEBANG;
    font-weight: 500; letter-spacing: -1px;
}

.main-page .m_v_t_box .m_v_text02 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 65px;
    font-family: SCDream;
}

.main-page .main_search_wrap {
    position: relative;
}

.main-page .main_search_box {
    background: #fff;
    height: 80px;
    position: relative;
    padding: 29px 74px 0 28px;
    border-radius: 40px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
    border: 0px ;
}

.main-page .main_search_box input {
    height: 26px;
    background: #fff;
    border: 0px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    outline: none;
}

.main-page .main_search_box .m_search_bt {
    position: absolute;
    right: 6px;
    top:4px;
    width: 70px;
    height: 70px;
    background: #CF4627 url(../img/main-0923/main_search_i.svg) no-repeat 50% 50%;
    text-indent: -9999px;
    border-radius: 34px;
}

.main-page .m_chart_c_wrap {
    background:#f3f3f3 url(../img/main-0923/daon_logo_bg.png) no-repeat right bottom;  padding: 60px 0;
}

.main-page .m_c_s_wrap {
    position: relative;
}

.main-page .control_chart_box {
    position: absolute; right:0; top:0;
}

.main-page .m_h3_tit {
    font-size: 26px; color: #000; margin-bottom: 20px;
}

.main-page .m_tab_tit {
    margin-bottom: 20px;  position: relative;
}

.main-page .m_tab_tit .m_t_tab {
    margin-left: 0;
}

.main-page .m_tab_tit .m_t_tab ul li :is(a, button) {
    width: auto; min-width: 140px; padding: 0 20px;
}

.main-page #m_project_slide .owl-nav {
    margin: -18px 0px 0 0;
    position: relative;
}

.main-page #m_project_slide .owl-nav [class*=owl-] {
    width: 52px;
    height: 52px;
    border: 1px solid #d9d9d9;
    border-radius: 28px;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0;
    position: absolute;
    top: 0;
}

.main-page #m_project_slide .owl-nav .owl-prev {
    left: 0;
    background: #fff url(../img/main-0923/m_p_slide_arr.png) no-repeat 50% 50%;
}

.main-page #m_project_slide .owl-nav .owl-next {
    right: 0;
    background: #fff url(../img/main-0923/m_p_slide_arr_r.png) no-repeat 50% 50%;
}

.main-page #m_project_slide .owl-dots {
    margin-top: 17px;
}

.main-page .quick_bt_box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    height: 248px;
    font-family: SCDream;
}

.main-page .quick_card {
    box-sizing: border-box;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;     -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.main-page .quick_card a,
.main-page a.quick_card {
    color: #fff;
    text-decoration: none;
}

.main-page .quick_card_newsletter {
    height: 248px;
    padding: 20px;
}

.main-page .quick_card_head {
    display: block;
    position: relative;
    height: 75px;
}

.main-page .quick_icon {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 32px 32px;
}

.main-page .quick_icon_newsletter {
    background:rgba(255, 255, 255, 0.3) url(../img/main-0923/m_quick_i01.svg) no-repeat 50% 50%;
}

.main-page .quick_icon_expert {
    background:rgba(255, 255, 255, 0.3) url(../img/main-0923/m_quick_i02.svg) no-repeat 50% 50%;
}

.main-page .quick_icon_similarity {
    background:rgba(255, 255, 255, 0.3) url(../img/main-0923/m_quick_i03.svg) no-repeat 50% 50%;
}

.main-page .quick_title {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}

.main-page .quick_card_head .quick_title {
    margin-top: 10px;
}

.main-page .quick_arrow {
    position: relative;
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background:url(../img/main-0923/m_quick_arr.svg) no-repeat 50% 50%;
}

.main-page .quick_card_head > .quick_arrow {
    position: absolute;
    top: 0;
    right: -6px;
}

.main-page .quick_sub_links {
    margin-top: 30px;
}

.main-page .quick_sub_links a,
.main-page .quick_title_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
}

.main-page .quick_sub_links a {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.main-page .quick_sub_links a + a {
    margin-top: 15px;
}

.main-page .quick_side {
    display: grid;
    grid-template-rows: repeat(2, 119px);
    gap: 10px;
}

.main-page .quick_card_small {
    display: block;
    height: 119px;
    padding: 20px;
}

.main-page .quick_card_small .quick_title_row {
    margin-top: 10px;
}

.main-page .quick_card,
.main-page .quick_card a {
    transition: background-color 0.2s ease;
}

.main-page .quick_card:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.main-page .m_v_quick_wrap {
    width: 461px;
    max-width: 100%;
}

.main-page .m_new_wrap {
    background: #fff;
    padding: 60px 0 60px 0;
}

.main-page .m_tit_box {
    position: relative;
    overflow: hidden;  display: flex;  align-items: center;
    margin-bottom: 20px;
}

.main-page .m_tit_box h3 {
    font-size: 26px;
    color: #000;
}

.main-page .m_t_tab {
    margin-left: 20px
}

.main-page .m_t_tab ul {
    display:flex;  gap:5px;
}

.main-page .m_t_tab ul li :is(a, button) {
    display: block;

    height: 40px;
    color: #333;
    background: #d7d7d7;
    border-radius: 25px; padding:  0 20px;
    text-align: center;
    font-size: 18px;
    line-height: 40px
}

.main-page .m_t_tab ul li :is(a, button):hover {
    background: #e4e4e4;
}

.main-page .m_t_tab ul li :is(a, button).on {
    background: #010101;
    color: #fff;
}

.main-page .more_plus {
    position: absolute;
    right: 0px;
    top: -2px;
    width: 40px;
    height: 40px;
    background: url(../img/main-0923/more_plus.png) no-repeat 50% 50%;
    text-indent: -99999px;
    transition: all 0.3s ease-in-out;
}

.main-page .more_plus:hover {
    transform: rotate(90deg);
}

.main-page .m_p_box {
    padding: 20px 18px;
}

.main-page .m_p_tit {
    position: relative;
    margin-bottom: 15px;
}

.main-page .m_p_tit a {
    display: block;
    font-size: 18px;
    color: #000;
    overflow: hidden;
    line-height: 26px;
    height: 50px;
}

.main-page .m_p_tit span {
    color: #fff;
    background: #4e4bcb;
    width: 70px;display: inline-block;
    text-align: center;
    line-height: 32px;
    border-radius: 10px; margin-bottom: 10px;
}

.main-page .m_p_date {
    padding: 0 0 0 24px;
    background: url(../img/main-0923/list_time_i.svg) no-repeat 0 0;
    color: #333;
    font-size: 16px;

    margin: 0 0 0 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    overflow: hidden;
}

.main-page .m_p_date p {
    font-family: GmarketSans;  margin-bottom: 5px;
}

.main-page .m_p_date span {
    display: block; color: #555;
}

.main-page .m_p_tit .green_t {
    background: #159b19;
}

.main-page .m_p_s_wrap {
    position: relative;padding: 0 1px;
    padding-bottom: 20px
}

.main-page .m_p_s_bt {
    text-align: center;
}

.main-page .m_p_s_bt .line_bt {
    width: 170px;
}

.main-page .main_notice_wrap {
    padding: 0 0 100px 0;
    background: #fff;
}

.main-page .main_notice_inner {
    position: relative; display: grid;  align-items: center;
    padding: 30px 60px 30px 30px;
    overflow: hidden; background: #EFF2F8; border:1px solid #C2CAD9; border-radius: 15px;

        grid-template-columns: 130px minmax(0, 1fr);
}

.main-page .main_notice_inner h3 {
    padding: 0 0 0 50px; position: relative;

    font-size: 20px;
    color: #090808;
    font-weight: normal;
    line-height: 44px;
}

.main-page .main_notice_inner h3:before {
    content: ''; display: block; position: absolute; left:0; top:0; width: 44px; height: 44px; border-radius: 22px; background:#2E2994 url(../img/main-0923/m_notice_icon.svg) no-repeat 50% 50%;
}

.main-page .m_n_list ul {
    margin: 0;
    padding: 0;
}

.main-page .m_n_list ul li {
    float: left;
    width: 50%;
    position: relative;
    padding: 0 0px 0 40px;
}

.main-page .m_n_list ul li a {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: auto;
    padding: 0 0 0 10px;
    background: url(../img/main-0923/m_notice_bullet.png) no-repeat 0 50%;
    font-size: 17px;
    color: #333;
    line-height: 26px;
}

.main-page .m_n_list ul li a:hover {
    color: #000;
    text-decoration: underline
}

.main-page .main_notice_inner .m_n_plus {
    position: absolute;
    display: block;
    background: url(../img/main-0923/plus_i_lg.svg) no-repeat 50% 50%;
    width: 44px;
    height: 44px;
    text-indent: -9999px;
    overflow: hidden;
    right: 20px;
    top: 50%; margin-top: -22px;
    transition: all 0.3s ease;
}

.main-page .main_notice_inner .m_n_plus:hover {
    transform: rotate(90deg);
}

.main-page .chart_bottom_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px 15px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #d7f2ff;
}

.main-page .chart_b_i_row {
    display: flex;
    align-items: center;
    justify-content: space-between; gap:15px;
}

.main-page .chart_bottom_info .chart_info_item {
    flex: 0 0 auto;
    margin: 0;
}

.main-page .chart_bottom_info dt {
    margin: 0 0 2px;
    color: #555;
    font-family: SCDream;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
}

.main-page .chart_bottom_info dd {
    display: flex;
    align-items: flex-end;
    height: 22px;
    margin: 0;
}

.main-page .chart_bottom_info dd strong {
    color: #000;
    font-family: GmarketSans;
    font-size: 19px;
    font-weight: 700;
    line-height: 22px;
    white-space: nowrap;
}

.main-page .chart_bottom_info dd span {
    margin: 0 0 1px 5px;
    color: #555;
    font-family: SCDream;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
}

.main-page .chart_bottom_info dd .chart_increase {
    display: inline-flex;
    align-items: center; padding: 0 0 0 20px;
    color: #ff2727;  background: url(../img/main-0923/m_c_arr_down.svg) no-repeat 0 4px;
}

.main-page .m_chart_pd {
    padding: 10px;
}

.main-page .m_chart_box {
    height: 340px;
}

@media only screen and (max-width: 600px) {
.main-page .chart_bottom_info {
    flex-wrap: wrap;
        height: auto;
        gap: 15px 0;
}

.main-page .chart_bottom_info .chart_info_item:nth-child(n) {
    width: 33.333%;
        margin: 0;
}

.main-page .chart_bottom_info .chart_detail_bt {
    margin-left: auto;
}
}

.main-page .m_publication_row {
    display: flex; gap:10px;   flex-direction: column;
}

.main-page .news_letter_box {
    display: grid;
    grid-template-columns: 182px minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    height: 202px;
    padding: 10px;
}

.main-page .news_letter_thumbnail {
    position: relative;
    width: 182px;
    height: 182px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #bababa;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.main-page .news_letter_thumbnail img {
    width: 100%; height: 100%;
}

.main-page .news_letter_content {
    position: relative;
    min-width: 0;
    height: 182px; display: flex; justify-content: space-between; flex-direction: column;
    font-family: SCDream; padding-top: 10px;
}

.main-page .news_letter_type {
    color: #4252ad;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px; margin-bottom: 10px;  display: block;
}

.main-page .news_letter_title {
    margin-bottom: 10px;
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-page .news_letter_meta > span {
    display: flex;
    align-items: center;
    color: #555;
    font-size: 16px;
    line-height: 20px;
}

.main-page .news_letter_meta > span + span {
    margin-top: 5px;
}

.main-page .news_letter_icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.main-page .news_letter_icon_date {
    background: url(../img/main-0923/news_date_i.svg) no-repeat 50% 50%;
}

.main-page .news_letter_more.line_bt {
    position: absolute;
    bottom: 2px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 105px;
    min-width: 105px;
    height: 36px;
    padding: 0 6px 0 15px;
    box-sizing: border-box;
    border-color: #ccc;
    border-radius: 30px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    line-height: 34px;
}

.main-page .news_letter_more_icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 24px 24px;
}

@media only screen and (max-width: 500px) {
.main-page .news_letter_box {
    grid-template-columns: 130px minmax(0, 1fr);
        gap: 15px;
}

.main-page .news_letter_thumbnail {
    width: 130px;
}

.main-page .news_letter_title {
    font-size: 16px;
}
}

.main-page .report_con_box {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    height: 108px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
}

.main-page .news_letter_thumbnail.report_thumbnail {
    width: 62px;
    height: 84px;
}

.main-page .report_con {
    position: relative;
    min-width: 0; padding-top: 5px;
    height: 88px;
    font-family: SCDream;
}

.main-page .report_con_title {
    display: block;
    overflow: hidden;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-page .news_letter_meta.report_meta {
    position: absolute;
    top: 56px;
    left: 0;
    display: flex;
    align-items: center;
}

.main-page .news_letter_meta.report_meta > span {
    display: block;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.main-page .news_letter_meta.report_meta > span + span {
    margin: 0 0 0 20px;
}

.main-page .report_more {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 50%;     background:#fff url(../img/main-0923/bt_arr_i.svg) no-repeat 50% 50%;
}

.main-page .m_n_t_r {
    position: absolute; right:0; top:0;
}

.main-page .fb_bt_box {
    overflow: hidden; padding: 0 0 0 1px; margin-bottom: 1px;
}

.main-page .fb_bt_box :is(a, button) {
    display: block; float: left; width:40px;height: 40px;  text-indent: -9999px; transition:all 0.3s ease; border-radius: 10px;
}

.main-page .fb_bt_box .fb_prev {
    background:url(../img/main-0923/bt_arr_i.svg) no-repeat 50% 50%; transform: rotate(180deg);
}

.main-page .fb_bt_box .fb_next {
    background:url(../img/main-0923/bt_arr_i.svg) no-repeat 50% 50%;
}

.main-page .fb_bt_box .fb_play {
    background:url(../img/main-0923/m_s_play_i.svg) no-repeat 50% 50%; display: none;
}

.main-page .fb_bt_box .fb_stop {
    background:url(../img/main-0923/m_s_stop_i.svg) no-repeat 50% 50%;
}

.main-page .fb_bt_box :is(a, button):hover {
    background-color: #f3f3f3;
}

/* 기존 CSS에만 있던 속성을 초기화해 시안의 간격을 유지한다. */
.main-home > .contents_wrap { padding-top: 0; margin-bottom: 0; }
.main-home > footer { margin-top: 0; }
.site-header .mobile_s_wrap { top: 95px; }
.site-header .side_bt_box { margin-left: 20px; }
.site-header .main_header_type .ms_box .sub_search_bt {
    background: #f9f9f9 url(../img/background/rn_close_bt.png) no-repeat center;
    background-size: 20px;
}
.site-header.top_wide_type .header_inner h1 a { width: 200px; background-size: 200px auto; }
.site-header.top_wide_type .top_nav_wrap { position: relative; margin: 0; background: rgba(255, 255, 255, .8); }
.site-header.top_wide_type .main_header_type .top_nav_wrap { background: rgba(27, 69, 126, .8); }
.site-header.top_wide_type .header_wrap .container-fluid { padding: 0; }
.site-header.top_wide_type #gnb li .nav_menu_a { width: auto; min-width: 150px; padding-left: 0; padding-right: 0; }
.site-header.top_wide_type .top_right_box { right: -20px; visibility: hidden; }
.site-header .main_header_type .mobile_nav_bt span { background-color: #fff; }
.main-page .m_v_inner { padding: 0; }
.main-page .m_v_t_box { padding: 0; }
.main-page .m_v_t_box h2, .main-page .m_v_t_box .m_v_text01 { margin: 0; }
.main-page .main_search_box .m_search_bt { border: 0; }
.main-page .m_v_quick_wrap { position: static; float: none; padding: 0; }
.main-page .m_t_tab { float: none; padding: 0; }
.main-page .m_t_tab ul { margin: 0; padding: 0; }
.main-page .m_t_tab ul li { float: none; margin: 0; }
.main-page .m_t_tab ul li button { width: auto; border: 0; font-family: inherit; cursor: pointer; }
.main-page .fb_bt_box button { border: 0; cursor: pointer; }
.main-page .fb_bt_box button:disabled { opacity: .35; cursor: default; }
.main-page .m_tit_box h3 { float: none; margin: 0; }
.main-page .m_p_tit { padding: 0; }
.main-page .m_p_tit span { position: static; height: auto; }
.main-page .m_p_tit a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.main-page .m_p_date { font-family: inherit; }
.main-page .m_p_s_wrap { margin: 0; }
.main-page #m_project_slide .item { padding: 0; }
.main-page .b_shadow_none, .main-page .b_shadow_none:hover { box-shadow: none; }
.main-page .line_bt { letter-spacing: normal; }
.main-page .chart-panel[hidden] { display: none !important; }
.main-page .chart-area { width: 100%; height: 340px; }
.main-page .main-chart-message { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center; }
.main-page .chart-skeleton { height: 100%; box-sizing: border-box; padding: 34px 24px 40px 46px; }
.main-page .chart-skeleton-plot {
    height: 100%;
    border-bottom: 1px solid #edf0f3;
    background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #f1f3f5 calc(25% - 1px), #f1f3f5 25%);
}
.main-page .chart-skeleton-plot svg { display: block; width: 100%; height: 100%; animation: main-chart-pulse 1.6s ease-in-out infinite; }
.main-page .chart-skeleton-fill { fill: #f1f3f5; }
.main-page .chart-skeleton-line { fill: none; stroke: #dfe4e9; stroke-width: 2; stroke-linejoin: round; }
.main-page .chart-panel.is-loading .chart_info_item dd { position: relative; min-width: 64px; }
.main-page .chart-panel.is-loading .chart_info_item dd > * { visibility: hidden; }
.main-page .chart-panel.is-loading .chart_info_item dd::after {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 64px;
    height: 16px;
    border-radius: 3px;
    background: #c8dce7;
    animation: main-chart-pulse 1.6s ease-in-out infinite;
}
@keyframes main-chart-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .main-page .chart-skeleton-plot svg,
    .main-page .chart-panel.is-loading .chart_info_item dd::after { animation: none; }
}
.main-page .summary-change.positive { color: #ff2727; }
.main-page .summary-change.negative { color: #2355ab; }
.main-page .news_letter_thumbnail img { object-fit: contain; }
.main-page .publication-placeholder { display: grid; place-items: center; height: 100%; color: #67718a; background: #eff2f8; font-size: 13px; }
.main-page .publication-empty, .main-page #announce-empty, .main-page #announce-error { padding: 30px; text-align: center; }
.main-page .main_notice_wrap { border-bottom: 0; }
.main-page .main_notice_inner h3 { float: none; margin: 0; background: none; }
.main-page .m_n_list { margin: 0; min-width: 0; }
.main-page button:focus-visible, .main-page a:focus-visible { outline: 3px solid #178cce; outline-offset: 3px; }

/* 시안 반응형 치수 기반: 헤더 메뉴 폭 축소는 1600px부터 적용한다. */
@media (max-width: 1710px) {
    .site-header .top_nav_wrap { margin: 0 120px 0 370px; }
    .site-header.top_wide_type .top_nav_wrap { margin: 0; }
}
@media (max-width: 1600px) {
    .site-header #gnb li .nav_menu_a { min-width: auto; }
}
@media (max-width: 1400px) {
    .main-page .m_v_t_box { width: 50%; }
    .main-page .m_v_quick_wrap { width: 45%; }
}
@media (max-width: 1280px) {
    .site-header .top_nav_wrap, .site-header .h_t_user { display: none; }
    .site-header .side_bt_box { display: block; }
}
@media (max-width: 1200px) {
    .main-page .m_v_con_box { height: auto; }
    .main-page .m_v_inner { flex-direction: column; gap: 40px; padding: 70px 0 90px; }
    .main-page .m_v_t_box, .main-page .m_v_quick_wrap { width: 100%; }
    .main-page .m_v_t_box .m_v_text02 { margin-bottom: 20px; }
    .main-page .m_chart_box { height: auto; }
    .main-page .chart-area { height: 340px; }
}
@media (max-width: 992px) {
    .main-page .m_v_t_box h2 { font-size: 56px; }
    .main-page .m_v_t_box .m_v_text02 { font-size: 18px; }
    .main-page .main_notice_inner { grid-template-rows: 50px minmax(0, 1fr); grid-template-columns: auto; gap: 20px; padding: 10px 60px 30px 30px; }
    .main-page .m_n_list ul li { width: 100%; padding-left: 0; margin-bottom: 10px; }
    .main-page .m_n_list ul li:last-child { margin-bottom: 0; }
    .main-page .main_notice_inner .m_n_plus { top: 10px; margin-top: 0; }
}
@media (max-width: 768px) {
    .site-header .header_wrap .header_inner h1 a { width: 280px; background-size: 280px auto; }
    .main-page .m_c_s_wrap { padding-bottom: 50px; }
    .main-page .chart-area { height: 240px; }
    .main-page .control_chart_box { top: auto; bottom: 0; }
    .main-page .chart_bottom_info { flex-direction: column; gap: 20px; }
    .main-page .chart_b_i_row { width: 100%; }
    .main-page .m_v_m_t { flex-direction: column; align-items: flex-start; }
    .main-page .m_v_m_t p span { display: inline; }
    .main-page .m_tit_box { flex-direction: column; align-items: flex-start; gap: 15px; }
    .main-page .m_t_tab { margin-left: 0; }
    .main-page .main_notice_inner { padding: 10px 15px 20px; }
    .main-page .m_tab_tit .m_t_tab ul li :is(a, button) { min-width: auto; }
    .main-page .m_t_tab ul li :is(a, button) { font-size: 16px; }
}

/* 좁은 화면에서만 시안의 탭 줄바꿈과 로고·검색 버튼 겹침을 방지한다. */
@media (max-width: 440px) {
    .site-header .header_wrap .header_inner h1 a {
        max-width: calc(100vw - 138px);
        background-size: contain;
    }
    .main-page .m_tab_tit .m_t_tab ul li { flex: 1; min-width: 0; }
    .main-page .m_tab_tit .m_t_tab ul li :is(a, button) {
        width: 100%; padding: 0; white-space: nowrap;
    }
}
@media (max-width: 360px) {
    .main-page .m_tab_tit .m_t_tab ul li :is(a, button) { font-size: 14px; }
}

/* 메인 통계: 차트 카드 구성. 요약 영역의 색상은 디자이너 시안을 유지한다. */
.main-page #m_chart_slide { border: 1px solid #e8edf4; border-radius: 14px; }
.main-page .m_chart_pd { padding: 16px; }
.main-page .chart_bottom_info { padding: 16px; background: #d7f2ff; border: 0; border-radius: 10px; }
.main-page .chart_bottom_info dt { margin-bottom: 2px; line-height: 16px; }
.main-page .chart_bottom_info dd strong { font-size: 21px; }
.main-page .summary-change.positive { color: #ff2727; }
@media (max-width: 768px) {
    .main-page .m_chart_pd { padding: 12px; }
    .main-page .chart_bottom_info { gap: 16px; }
    .main-page .chart_bottom_info dd strong { font-size: 19px; }
}

/* 세 가지 요약 지표와 상세 링크를 같은 영역 안에 배치한다. */
.main-page .chart_bottom_info { gap: 16px; flex-wrap: wrap; }
.main-page .chart_b_i_row { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 22px; }
.main-page .chart_bottom_info .chart_info_item:nth-child(n) { min-width: 0; width: auto; }
.main-page .chart_bottom_info dt { position: relative; font-size: 11px; line-height: 16px; }
.main-page .chart_bottom_info dd { height: auto; min-height: 22px; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.main-page .chart_bottom_info dd strong { font-size: 18px; }
.main-page .chart_bottom_info .line_bt { flex-shrink: 0; }
.main-page .summary-help { border: 0; background: transparent; padding: 0 2px; color: #555; font-size: 12px; cursor: help; }
.main-page .summary-help-text { display: none; position: absolute; z-index: 5; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: 220px; overflow-wrap: anywhere; padding: 10px 12px; background: #263b56; color: #fff; border-radius: 6px; font-size: 12px; line-height: 1.6; font-weight: 400; box-shadow: 0 3px 12px #0002; }
.main-page .chart_info_item:last-child .summary-help-text { left: auto; right: 0; }
.main-page .summary-help:hover + .summary-help-text, .main-page .summary-help:focus + .summary-help-text { display: block; }
@media (max-width: 768px) {
    .main-page .chart_b_i_row { flex: 0 1 auto; gap: 20px; }
    .main-page .chart_bottom_info dd strong { font-size: 15px; }
    .main-page .chart_bottom_info dd span { font-size: 10px; margin-left: 3px; }
}
@media (max-width: 380px) {
    .main-page .chart_bottom_info dd strong { font-size: 14px; }
}