@charset "UTF-8";
/*
 * 텐아시아 다국어
 * View css
 */

/* view */
.view .btn-default {display:inline-block; padding:10px 15px; border-radius:10px; border:1px solid #aaa; font-weight:700; font-size:14px; box-sizing:border-box}
.article-wrap {max-width:600px; margin:0 auto; padding:0 20px; box-sizing:border-box}
.article-top {padding-bottom:29px; border-bottom:2px solid #121212; box-sizing:border-box}
.article-category {display:block; margin-bottom:15px}
.article-category a {font-weight:700; color:#e30f61; font-size:14px}
.headline {font-family:Georgia, "times new roman", times, serif; line-height:36px; font-size:27px}
.article-timestamp {margin-top:25px}
.article-timestamp .datetime {display:flex; color:#757777; font-size:12px; align-items:center}
.article-timestamp .datetime .item + .item::before {content:''; display:inline-block; width:1px; height:9px; margin:0 10px; background-color:#777}
.article-byline {margin-top:10px; font-size:13px}
.article-byline a {text-decoration:underline}
.article-share {display:flex; margin-top:20px}
.article-share li {width:30px; height:30px}
.article-share li + li {margin-left:20px}
.article-share [class^="btn-share-"]::before {content:''; display:inline-block; width:30px; height:30px; background-repeat:no-repeat; background-size:contain; background-position:50% 50%}
.article-share .btn-share-facebook::before {background-image:url('https://hkstatic.hankyung.com/img/www/w/news/view/icon-share-facebook.svg')}
.article-share .btn-share-twitter::before {border-radius:50%; background-image:url('https://hkstatic.hankyung.com/img/www/w/news/view/icon-share-twitter.svg')}
.article-share .btn-share-twitter.twitter-x::before {background-image:url('https://hkstatic.hankyung.com/resource/common/img/icon/icon-twitter-cir-x.svg')}

.article-body {padding:30px 0 80px; color:#333; line-height:28px; font-size:18px; box-sizing:border-box}
.article-body .summary {color:#333; line-height:26px; font-weight:700; font-size:18px}
.article-body .summary::before {content:''; display:block; width:100px; height:6px; margin-bottom:12px; background-color:#eee}
.article-body .btn-area {margin-top:50px}
.article-body .google-mark {display:inline-block; margin-top:12px; width:122px; height:16px}
.article-body ol li, .article-body ul li {margin-left:25px}
.article-body ol, .article-body ol ol, .article-body ol li {list-style-type:decimal}
.article-body ol ol ol, .article-body ol ol li {list-style-type:upper-alpha}
.article-body ol ol ol ol, .article-body ol ol ol li {list-style-type:lower-alpha}
.article-body ol ol ol ol ol, .article-body ol ol ol ol li {list-style-type:decimal}
.article-body ol ul ul, .article-body ol ul li {list-style-type:disc}
.article-body ol ul ul ul, .article-body ol ul ul li {list-style-type:circle}
.article-body ol ul ul ul ul, .article-body ol ul ul ul li {list-style-type:square}
.article-body ul, .article-body ul ul, .article-body ul li {list-style-type:disc}
.article-body ul ul ul, .article-body ul ul li {list-style-type:circle}
.article-body ul ul ul ul, .article-body ul ul ul li {list-style-type:square}
.article-body ul ol ol, .article-body ul ol li {list-style-type:decimal}
.article-body ul ol ol ol, .article-body ul ol ol li {list-style-type:upper-alpha}
.article-body ul ol ol ol ol, .article-body ul ol ol ol li {list-style-type:lower-alpha}
.article-body ul ol ol ol ol ol, .article-body ul ol ol ol ol li {list-style-type:decimal}
.article-body table {max-width:100%; margin:10px 0; width:100%; font-size:inherit}
.article-body table th,
.article-body table td {padding:5px 8px; border:1px solid #e5e5e5; font-size:inherit; font-size:12px !important}
.article-body hr {display:block; border-style:solid; border-color:#c3c3c3}
.article-figure {margin:30px auto; max-width:100%; text-align:center}
.article-figure .figure-img {display:inline-flex; position:relative; border-radius:0px; overflow:hidden; text-align:center; vertical-align:top}
.article-figure .figure-img img {max-width:100%; max-height:100%; object-fit:contain}
.article-figure .figure-img .btn-photo-viewer {position:absolute; right:15px; bottom:15px; width:50px; height:50px; border-radius:100%; background:rgba(34, 34, 34, .7)}
.article-figure .figure-img .btn-photo-viewer svg {position:relative; top:2px}
.article-figure .figure-caption {max-width:100%; margin:10px auto 0; color:#757777; text-align:left; font-size:12px; line-height:16px}
.article-figure.img-lt {float:left; margin:20px 20px 20px 0}
.article-figure.img-rt {float:right; margin:20px 0 20px 20px}
.article-figure + .article-video {margin-top:20px}
.iframe-youtube {position:relative; height:0; padding-bottom:56.25%; overflow:hidden}
.iframe-youtube iframe {position: absolute; top:0; left:0; width:100%; height:100%}
.iframe-youtube.vertical {max-width:56.25%; margin:0 auto; padding-bottom:100%}
.article-video {margin:30px 0}
.article-video .iframe-youtube {border-radius:0; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0)}
/* modal */
.hk__icon-x {content:''; display:inline-block; width:20px; height:20px; background-image:linear-gradient(to bottom, #373737 0%, #373737 100%), linear-gradient(to left, #373737 0%, #373737 100%); background-size:100% 1px,1px 100%; background-position:center; background-repeat:no-repeat; transform:rotate(45deg); vertical-align:top}
.hk-modal {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999999; align-items:center; justify-content:center; background:rgba(0,0,0,.5)}
.hk-modal.show {display:flex}
.hk-modal-inner {position:relative; padding:40px 30px 30px; border-radius:10px; box-shadow:3px 3px 7px rgba(0,0,0,.05); background:#fff; box-sizing:border-box}
.modal-btn-close {position:absolute; top:20px; right:20px}
/* 이미지 크게보기 */
.modal-photoviewer {display:flex;overflow:hidden;background:#111;visibility:hidden;transform:scale(.8);opacity:0;transition:all ease .2s}
.modal-photoviewer .hk-modal-inner {position:static; padding:0; border-radius:0; box-shadow:none; background:none}
.modal-photoviewer .article-figure {display:flex; flex-direction:column; max-height:100vh; margin:0; box-sizing:border-box}
.modal-photoviewer .article-figure .figure-img {border-radius:0}
.modal-photoviewer .article-figure .figure-caption {font-size:14px}
.modal-photoviewer .modal-btn-close {top:30px; right:30px; width:50px; height:50px; border-radius:100%; background:#1d1d1d}
.modal-photoviewer .hk__icon-x {background-image:linear-gradient(to bottom, #fff 0%, #fff 100%), linear-gradient(to left, #fff 0%, #fff 100%)}
.modal-photoviewer.show {visibility:visible; z-index:1000000; transform:scale(1); opacity:1}

/* 기사뷰 하단 관련기사 */
.sub-tit-wrap {padding-bottom:20px; border-bottom:2px solid #121212}
.sub-tit-wrap .cont-tit {margin-right:0; font-family:Arial, Verdana, Helvetica, Tahoma, sans-serif; font-weight:500; font-size:20px}
.sub-tit-wrap .cont-tit .point-color {font-weight:700}
.related-article {padding:0 20px; box-sizing:border-box}

@media (max-width:600px) {
    .article-wrap {padding:0 20px}
}
/* tablet */
@media (min-width:768px){
    /* view */
    .view .btn-default {padding:10px; font-size:16px}
    .article-wrap {padding:0}
    .headline {line-height:46px; font-size:34px}
    
    .related-article .news-list-area {display:flex; margin:0 -5px; padding:20px 0}
    .related-article .news-item {flex:0 0 auto; flex-direction:column-reverse; width:25%; padding:0 5px; box-sizing:border-box}
    .related-article .news-tit {font-size:16px}
    .related-article .thumb {position:relative; width:auto; height:0; padding-bottom:59.6%; overflow:hidden}
    .related-article .thumb > a {display:block; position:absolute; top:0; left:0; width:100%; height:100%}
    .related-article .txt-cont {width:100%}
    .sub-tit-wrap .cont-tit {font-size:22px}
}
/* pc */
@media (min-width:1040px){
    .view .contents + .footer, .view .ad-wrap[style="display:none"] + .footer {max-width:800px}
    .view .ft-txt {max-width:1040px}
    .article-wrap {max-width:800px}
    .article-category {font-size:16px}
    .headline {line-height:52px; font-size:40px}
    .article-share li + li {margin-left:15px}
    .article-body {line-height:30px; font-size:20px}
    .article-body .summary {line-height:30px; font-size:20px}
    .related-article {max-width:800px; margin:0 auto; padding:0}
    .related-article .news-list-area {padding:30px 0}
    .related-article .news-item {gap:10px}
    .related-article .thumb {width:192px; height:120px; padding:0}
    .related-article .thumb > a {position:static; top:auto; left:auto}
}