@charset "UTF-8";

/* 한경 이벤트
 * 개편 2023.06
*/

/* 간소화헤더, 푸터 반영 */
.hk-header--simplify {margin-bottom:20px}
.footer--simplify {margin-top:40px}
@media all and (min-width:1180px) {
    .hk-header--simplify {max-width:1180px; margin:0 auto 30px}
}


/* common */
html {background-color:#fff}
img {max-width:100%}
.layout-inner, .foot-inner {max-width:1180px}
.layout-inner {margin:0 auto}
.foot-inner {line-height:1.45}
.btn-top-wrap .btn-position {right:-620px}
.pc-footer {display:none}
.mobile-footer {display:block}

.logo-hk {display:inline-block; width:60px; height:15px; vertical-align:middle; background:url('https://static.hankyung.com/resource/common/img/logo/logo-hk-w.svg') no-repeat left center/contain}
.login-area svg, .login-area .txt {display:inline-block}
.login-area svg {width:12px; height:12px; margin-right:4px}
.login-area .svg-icon {fill:#fff}
.login-area .txt {color:#fff; font-size:12px; letter-spacing:0}
.login-link:hover {text-decoration:none}

.header > .layout-inner {position:relative; z-index:2; margin-bottom:28px; background-color:#142c67; box-sizing:border-box}

.header-top {display:flex; justify-content:space-between; padding:8px 15px 7px; border-bottom:1px solid #2F4D98; box-sizing:border-box}
.logo-section {display:flex; align-items:center}
.logo-section .section-title {/*font-family:'Noto Serif KR', serif;*/ font-weight:700; color:#fff; line-height:1; letter-spacing:0; font-size:15px}
.logo-section .section-title::before {content:''; display:inline-block; width:1px; height:12px; margin-left:7px; margin-right:8px; background-color:#fff}

.flex-align-center {align-items:center !important}
.btn-area {margin-top:20px; text-align:center}
.txt-center {text-align:center}

/* 개인정보 레이어 추가 */
.layer-my {position:absolute; top:30px; right:15px; max-width:610px; width:calc(100vw - 30px); border:1px solid #c3c3c3; border-radius:5px; background:#fff; font-size:14px; box-shadow:3px 3px 5px rgba(0,0,0,.2); box-sizing:border-box; visibility:hidden; transform:scale(.5); z-index:-1; opacity:0; transition:all cubic-bezier(.25, .1, .25, 1.3) .2s}
.layer-my.active {visibility:visible; z-index:9999; transform:scale(1); opacity:1}
.layer-my .user-info {padding:25px 19px; text-align:center}
.layer-my .user-info .account-info .email {letter-spacing:0; overflow:visible; white-space:unset; text-overflow:unset; word-break:break-all}
.layer-my .user-info .account-info .email .txt {display:inline; color:#121212; font-size:13px}
.layer-my .btns {margin-top:20px}
.layer-my .btns [class^="btn-"] {display:inline-block; width:90px; height:35px; margin:0 3px; border:1px solid #c3c3c3; border-radius:20px; line-height:33px; box-sizing:border-box} 
.layer-my .subscription-info {padding:25px 19px; border-top:1px solid #ddd}
.layer-my .subscription-info .details dt {margin-bottom:10px; font-weight:bold; font-size:15px}
.layer-my .subscription-info .details dd {position:relative; margin-top:5px; padding:0 75px 0 7px; line-height:25px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.layer-my .subscription-info .details dd::before {content:'·'; position:absolute; top:0; left:0}
.layer-my .subscription-info .details dd .badge-subscribing {position:absolute; top:0; right:0; width:70px; height:25px; border-radius:50rem; background:#f3f3f3; font-size:12px; text-align:center}
.layer-my .mypages-area {display:flex; align-items:center; justify-content:center; margin:0 -5px 25px}
.layer-my .mypages-area > a {flex:0 0 auto; display:inline-flex; justify-content:center; width:calc(50% - 10px); margin:0 5px; border-radius:10px; background:#ff761b; color:#fff; font-size:14px; line-height:35px; white-space:nowrap}
.layer-my .mypages-area > a:only-child {width:calc(100% - 10px)}
.layer-my .mypages-area > a.new > span {position:relative}
.layer-my .mypages-area > a.new > span::before {content:''; position:absolute; top:8px; left:-11px; width:7px; height:7px; border-radius:100%; background:#ff0000}

.inner {padding:0 20px; box-sizing:border-box;}
.main-txt {display:inline-block; margin-bottom:15px; line-height:1.4; font-size:min(max(15px, 2.08vw), 18px); text-align:left}

.list_item {overflow:hidden; width:100%; box-sizing:border-box}
.list_item + .list_item {margin-top:20px}
.list_item .list_con {display:block; height:100%}
.list_item .img_box {overflow:hidden; display:block; position:relative; width:100%; height:0; padding-bottom:64%; border-radius:10px; text-align:center}
.list_item .img_box img {position:absolute; top:0; left:50%; width:100%; height:100%; transform:translate(-50%, 0); object-fit:cover}
.list_item .list_txt {display:block; overflow:hidden; position:relative; padding:15px 0 8px; box-sizing:border-box; text-align:left}
.list_item .list_txt:hover {text-decoration:none}
.list_item .event-tit {overflow:hidden; width:100%; max-height:52px; line-height:26px; font-size:19px; letter-spacing:-0.4px; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical; word-wrap:break-word}
.list_info {position:relative; width:100%; box-sizing:border-box}
.list_info .event-date {display:inline-block; height:100%; padding:8px 15px 6px; border-radius:15px; color:#585858; font-size:13px; letter-spacing:0; line-height:1; background-color:#f3f3f3}
.list_item.end {box-shadow:none}
.list_item.end .img_box {position:relative}
.list_item.end .img_box::before {z-index:1; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#00000099}
.list_item.end .event-tit {color:#6f6f6f}

.btn-more-wrap {margin-top:20px; text-align:center}
.btn-more {display:flex; align-items:center; justify-content:center; width:100%; max-width:330px; padding:14px 0 13px; border:1px solid #585858; border-radius:6px; font-weight:bold; font-size:17px; letter-spacing:0; box-sizing:border-box}
.btn-more:after {content:''; display:inline-block; width:6px; height:6px; margin-left:10px; border-bottom:1px solid #121212; border-left:1px solid #121212; vertical-align:4px; transform:rotate(-45deg)}

/* 2026.03.30 신규 간소화 GNB 변경 조정건 */
html:has(.hk-header-compact),
body:has(.hk-header-compact) {background:#F3F4F6}
body:has(.hk-header-compact) .wrap {padding-top:0}
body:has(.hk-header-compact) .inner {padding:0}
body:has(.hk-header-compact) .list_info .event-date {background-color:#e7e8ea}

@media screen and (max-width:1179px) {
    body, button, input, select, option, textarea, table, th, td {font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif; /*'Apple SD Gothic Neo','Helvetica Neue','AppleGothic','Droid Sans fallback',sans-serif;*/ letter-spacing:0}
    .layer-my .btns [class^="btn-"] {line-height:35px}
    .layer-my .subscription-info .details dd .badge-subscribing {line-height:25px}

    /* footer */
    .foot-sitemap {padding:0 15px; border-top:6px solid #f3f2f8; background:#fff; font-size:12px}
    .foot-sitemap .foot-inner {padding:0; border-top:0}
    .foot-sitemap img.icon-premium {width:8px; height:11px; margin-left:4px; vertical-align:middle}
    .foot-sitemap .service-cate {padding:15px 0}
    .foot-sitemap .service-cate + .service-cate {border-top:1px solid #e6e6e7}
    .foot-sitemap .service-cate a {font-size:11px}
    .foot-sitemap .sv-list {display:flex; flex-wrap:wrap}
    .foot-sitemap .sv-list > li {flex:0 0 auto; width:35%; min-height:20px}
    .foot-sitemap .sv-list > li > a {display:block}
    .foot-sitemap .sv-list > li:nth-child(3n) {width:30%}
    .foot-sitemap .sv-list > li:nth-child(3n + 1) {width:33%}
    .foot-sitemap .sv-list > li:nth-child(3) ~ li {margin-top:3px}

    .service-cate.columns-3 {display:flex; justify-content:space-between}
    .service-cate.columns-3 > ul {flex:0 0 auto}
    .service-cate.columns-3 > ul > li + li {margin-top:5px}

    .service-cate.col3 > ul {display:flex; flex-wrap:wrap}
    .service-cate.col3 > ul > li {flex:0 0 auto; width:33.33336%; min-height:20px; padding:0 5px; box-sizing:border-box}

    .footer-wrap {padding:0 15px; font-size:12px; background:#fff}
    .foot-cont {padding:20px 0 70px; border-top:1px solid #e6e6e7}
    .foot-cont .f-item-group + .f-item-group {margin-top:20px}
    .foot-cont .f-item-group dt {margin-bottom:5px; font-weight:bold}
    .foot-cont .f-item {font-size:11px}
    .foot-cont .f-item > a,
    .foot-cont .f-item > span,
    .foot-cont .f-item > address {display:inline-block; margin-right:13px}
    .foot-cont .f-item > address {margin-top:15px; font-style:normal}
    .foot-cont .f-item + .f-item {margin-top:5px}
    .foot-cont .f-item > a:before, .foot-cont .f-item > span:before {display:none}
    .foot-cont .f-item:nth-child(3),
    .foot-cont .f-item:nth-child(4) {display:inline}
    .foot-cont .hk-dotcom .f-item:last-of-type {margin-top:15px}
    .foot-cont .copyright {margin-bottom:15px}
    .foot-sponsor {display:none}

    .btn-more {max-width:100%}
}
@media all and (max-width:359px){
    .foot-sitemap .sv-list > li:nth-child(3n) {width:35%}
    .foot-sitemap .sv-list > li:nth-child(3n + 1) {width:27%}
    .foot-sitemap .sv-list > li:nth-child(3n + 2) {width:38%}
}
@media screen and (min-width:768px) {
    .layer-my {max-width:300px}
}
@media screen and (min-width:768px) and (max-width:1179px) {
    .list_area {display:flex; flex-wrap:wrap; margin:0 -5px}
    .list_item {flex:0 0 auto; width:calc(50% - 20px); margin:20px 10px 0}
}
/* pc */
@media screen and (min-width:1180px) {
    body, button, input, select, option, textarea, table, th, td {font-family:-apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Apple SD 산돌고딕 Neo', 'Malgun Gothic', '맑은 고딕', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif}
    .skip_navi {position:absolute; top:0; left:0; width:100%}

    /* common */
    .wrap {padding-top:50px}
    .header > .layout-inner {margin-bottom:50px; padding:20px; border-radius:10px}
    .layer-my {top:45px}
    .foot-inner {line-height:normal}
    .pc-footer {display:block}
    .mobile-footer {display:none}

    .logo-hk {width:80px; height:20px}
    .login-area .txt {font-size:15px}

    .logo-section {position:relative}
    .logo-section .section-title {font-size:19px; letter-spacing:-.075em;}
    .logo-section .section-title::before {height:15px; margin-left:12px; margin-right:10px}
    .header-top {padding:0; border-bottom:none}
    .inner {max-width:1180px; margin:0 auto; padding:0}

    .main-txt {margin-bottom:30px}
    .list_area {display:flex; flex-wrap:wrap; gap:50px}
    .list_item {flex:0 0 auto; width:360px; border-radius:8px; border:1px solid #e5e5e5; box-sizing:border-box; box-shadow: 0px 0px 16px #1212121a}
    .list_item:nth-child(3n) {margin-right:0}
    .list_item + .list_item {margin-top:0}
    .list_item .img_box {height:254px; padding:0; border-radius:0}
    .list_item .img_box img {position:relative; top:auto; left:auto; object-fit:cover; transform:none}
    .list_item .list_txt {padding:15px 20px; height:94px; line-height:32px}
    .list_item .event-tit {max-height:64px; line-height:32px}
    .list_info {padding:15px 25px; border-top:1px solid #eee; box-sizing:border-box}
    .list_info .event-date {padding:8px 15px; font-size:14px}

    .list_item.end .list_con {background-color:#f3f3f3}
    .list_item.end .list_info .event-date {padding:8px 0; background: transparent;}
   
    .btn-more-wrap {margin:50px 0 70px}
    .btn-more {padding:12px 0 14px; font-size:17px}

    /* 2026.03.30 신규 간소화 GNB 변경 조정건 */
    body:has(.hk-header-compact) .list_area {gap:32px}
    body:has(.hk-header-compact) .list_item {width:calc(33.33336% - (64px / 3))}
    body:has(.hk-header-compact) .list_item:not(.end) {background:#fff}
    body:has(.hk-header-compact) .list_item.end .list_con {background-color:#e7e8ea}
}
@media (prefers-color-scheme: dark) {
    /* @media all and (max-width:767px){ */
    html {background-color:#000}
    body, .wrap {background-color:#121212}
    body, button, input, select, option, textarea, table, th, td, a,
    .layer-my .user-info .account-info .email .txt {color:#fff}


    

    .foot-sitemap,
    .footer-wrap {background-color:#1c1c1e}
    .list_info .event-date {background-color:#323235; color:#bdbdbd;}

    .foot-sitemap .foot-inner {border-top:none}

    .layer-my .subscription-info,
    .foot-cont,
    .foot-sitemap .foot-inner,
    .foot-sitemap .service-cate + .service-cate {border-width:0.5px; border-color:#323235}

    .layer-my .btns [class^="btn-"] {border:none; color:#bdbdbd; background:#323235}
    .layer-my .subscription-info .details dd .badge-subscribing {background-color:#323235}
    .layer-my,
    .btn-more {border:none; background:#1c1c1e}

    .foot-sitemap {border-color:#121212}
    .list_item.end .list_info .event-date {color:#888}
    .btn-more:after {border-color:#fff}

    .footer-module, .footer-module a {color:#fff}
    .footer-infomation .item:not(:last-child)::after,
    .footer-infomation .hk-family dt::after {background:#fff}
    .footer-module > div > .foot-inner {border-width:.5px; border-color:#323235}
    .footer-module > div:first-child > .foot-inner {border-top-color:#555}
    .footer-sponsor-list .f-sponsor-samsung {background-image:url('https://static.hankyung.com/resource/common/img/footer/footer-sponsor-samsung-w.svg')}
    .footer-sponsor-list .f-sponsor-wooribank {background-image:url('https://static.hankyung.com/resource/common/img/footer/footer-sponsor-wooribank-w.svg')}
    .footer-sponsor-list .f-sponsor-kbstar {background-image:url('https://static.hankyung.com/resource/common/img/footer/footer-sponsor-kbstar-w.svg')}
    /* 2024.03.22 푸터 패밀리 사이트 select type */
    .footer-infomation .hk-family-select {background:#1c1c1e; border-radius:8px}
    .footer-infomation .hk-family-select select {border:none; border-radius:0; color:#fff}
    .footer-infomation .hk-family-select::after {filter:invert()}
    .footer--simplify > .footer__inner {border-color:#323235; border-width:.5px}
    
    .footer--simplify ~ .btn-top-wrap .btn-prevpage,
    .footer--simplify ~ .btn-top-wrap .btn-top {border-color:#323235; background:rgba(0, 0, 0, .6)}
    .footer--simplify ~ .btn-top-wrap .btn-prevpage::before,
    .footer--simplify ~ .btn-top-wrap .btn-top::before {filter:invert(1)}


    /* 2026.03.30 신규 간소화 GNB 변경 조정건 */
    html:has(.hk-header-compact),
    body:has(.hk-header-compact) {background:#000}
    body:has(.hk-header-compact) .list_info .event-date {background-color:#323235}
    @media all and (min-width:1080px){
        body:has(.hk-header-compact) .list_item:not(.end),
        .list_item {border:none; background:#323235}
        body:has(.hk-header-compact) .list_info .event-date,
        .list_info .event-date,
        body:has(.hk-header-compact) .list_item.end .list_con,
        .list_item.end .list_con {background-color:#1c1c1e}
        .list_item .list_info {border-width:0.5px; border-color:rgba(0,0,0,.7)}
    }
    /* } */
}