@charset "UTF-8";
/*
 * 텐아시아 개편 (M) 2020.01 ~
 * 공통 UI css
 */
/* RESET */
html,body {-webkit-text-size-adjust:none}
body, button, input, select, option, textarea {color:#222; font-size:15px; font-family:'Helvetica Neue','Apple SD Gothic Neo','AppleGothic','Droid Sans fallback',sans-serif}
body,div,span,em,strong,select,section,article,nav,footer,header,address,caption,figure,figcaption,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,textarea,input,button,tr,th,td,table {margin:0; padding:0; box-sizing:border-box}
h1,h2,h3,h4,h5,h6 {font-size:100%}
ol,ul,li {list-style-type:none}
img,fieldset, iframe {border:0 none; vertical-align:top}
img {max-width:100%}
input,button,select,textarea,label {vertical-align:middle; resize:none; outline:none}
input,textarea {-webkit-appearance:none; -webkit-border-radius:0}
input[type='checkbox'] {-webkit-appearance:checkbox}
input[type='radio'] {-webkit-appearance:radio; -webkit-border-radius:10px}
input[type='button'], input[type='submit'], input[type='reset'] {cursor:pointer}
button {border:0 none; background:transparent; cursor:pointer}
i,em,address,optgroup {font-style:normal}
hr {display:none}
table {border-collapse:collapse; border-spacing:0}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
legend, .blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
caption {width:0; height:0; overflow:hidden; color:transparent; text-indent:-9999px}
a {color:#222; text-decoration:none}
a:hover {text-decoration:none}
/* COMMON */
/* skip-navi */
.skip-navi {position:relative; z-index:9999}
.skip-navi a {display:block; width:100%; font-size:0; line-height:0}
.skip-navi a:focus {padding:20px 0; font-size:14px; line-height:12px; color:#fff; text-align:center; background:#e11b6d}
/* sprite img */
.icon,
.thumb-video:after,
.slidenews-num:before,
.slidenews-card-num:before,
.slidenews-card-type .btn:before,
.poll-header-tit strong:before,
.article-comment .btn-comment:after,
.article-audio-player .btn-audio:before {
    background-image:url('https://hkstatic.hankyung.com/img/tenasia/m/common-250319.svg');
    background-repeat:no-repeat;
}
/* icon */
.icon,
.slidenews-num:before,
.slidenews-card-num:before,
.slidenews-card-type .btn:before {display:inline-block; position:relative; overflow:hidden; color:transparent; white-space:nowrap}
.icon:before {content:'.'; position:absolute; top:0; left:0; width:inherit; height:inherit; color:transparent; z-index:-1}
.icon-search-open {width:20px; height:21px; background-position:-86px -8px}
.icon-search-close {width:15px; height:15px; background:none}
.icon-sns-youtube {width:21px; height:15px; background-position:-151px -10px}
.icon-sns-naverv {width:19px; height:22px; background-position:-217px -7px}
.icon-sns-facebook {width:10px; height:21px; background-position:-281px -7px}
.icon-sns-twitter {width:21px; height:18px; background-position:-335px -9px}
.icon-sns-instagram {width:21px; height:21px; background-position:-400px -7px}
.icon-sns-googlenews {width:17px; height:18px; background-position:-465px -9px}
.icon-top {width:41px; height:41px; background-position:-323px -150px}
.icon-share-kakao {width:17px; height:16px; background-position:-3px -60px}
.icon-share-facebook {width:9px; height:17px; background-position:-46px -59px}
.icon-share-twitter {width:17px; height:14px; background-position:-83px -60px}
.icon-share-naver {width:14px; height:13px; background-position:-124px -61px}
.icon-share-band {width:14px; height:17px; background-position:-164px -59px}
.icon-share-copyurl {width:15px; height:15px; background-position:-204px -60px;}
.icon-font-big {width:21px; height:14px; background-position:-240px -60px}
.icon-font-sm {width:20px; height:14px; background-position:-281px -60px}
.icon-img-big {width:25px; height:26px; background-position:0 -103px}
.icon-sns-twitter.twitter-x {width:21px; height:21px; background:url('https://hkstatic.hankyung.com/resource/common/img/icon/icon-twitter-x.svg') no-repeat center}
.icon-share-twitter.twitter-x {width:15px; height:15px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18.077'%3E%3Cpath fill='%23585858' d='M15.752 0h3.067l-6.7 7.657L20 18.077h-6.172L9 11.757l-5.532 6.32H.395l7.167-8.19L0 0h6.328l4.37 5.777Zm-1.077 16.242h1.7L5.4 1.738H3.582Z'/%3E%3C/svg%3E") no-repeat 50% 50%/contain}
/* thumb icon */
.thumb {position:relative}
.icon-thumb {display:inline-block; position:absolute; width:45px; height:40px; overflow:hidden; pointer-events:none; background-image:url(https://hkstatic.hankyung.com/img/tenasia/w/spr-icon-thumb.svg); background-repeat:no-repeat; transform-origin:right bottom}
.icon-thumb.icon-thumb-vod {width:45px; height:45px; background-position:-295px 0}
.icon-thumb.icon-thumb-audio {width:45px; height:45px; background-position:-145px 0}
.icon-thumb.icon-thumb-graph {width:45px; height:45px; background-position:-220px 0}
.icon-thumb.icon-thumb-photo {width:39px; height:34px; background-position:0 0}
.icon-thumb.icon-thumb-slide {width:45px; height:40px; background-position:-69px 0}
.news-top .thumb .icon-thumb {right:15px; bottom:15px; transform:scale(.9) /*42x37*/}
.news-midtop .thumb .icon-thumb {right:7px; bottom:7px; transform:scale(.6);/* 28x25 */}
.news-list .thumb .icon-thumb {right:6px; bottom:6px; transform:scale(.6);/* 28x25 */}
.search-list .thumb .icon-thumb {right:5px; bottom:5px; transform:scale(.4);/* 19x17 */}
.related-article-list .thumb .icon-thumb {right:6px; bottom:6px; transform:scale(.7);/* 32x28 */}
/* button */
.btn {display:inline-block; vertical-align:middle}
.btn-more-list {margin-top:20px; width:100%; padding:15px 0; border:1px solid #ddd; font-weight:bold; font-size:17px; box-sizing:border-box}
.btn-more-list::after {content:''; display:inline-block; width:6px; height:6px; margin-left:5px; border-bottom:1px solid #222; border-right:1px solid #222; vertical-align:4px; transform:rotate(45deg)}
/* layout */
.contents {max-width:720px; margin:0 auto; padding:0 20px; background:#fff}
/* form */
.inptxt {display:inline-block; box-sizing:border-box}
.inptxt::placeholder {color:#999}
.inptxt:-ms-input-placeholder {color:#999}
.inptxt::-ms-input-placeholder {color:#999}
/* google translate */
/* .goog-te-gadget-simple {border:none !important; font-size:13px !important; font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif !important}
.goog-te-gadget-simple .goog-te-menu-value {text-decoration:none !important; font-size:13px !important;} */
/* header */
#wrap {max-width:none !important; font-family:'Helvetica Neue','Apple SD Gothic Neo','AppleGothic','Droid Sans fallback',sans-serif !important; font-size:14px !important}
.header {overflow:visible !important; height:auto !important; border-bottom:1px solid #e5e5e5}
.header-wrap {position:relative; max-width:720px; margin:0 auto}
.header-wrap h1 {height:50px; margin-top:0; padding:12px 0 0; text-align:center}
.header-wrap h1 > a {display:inline-block}
.header-wrap h1 > a > .logo {display:inline-block; position:static; top:auto; left:auto; width:55px; height:37px; overflow:hidden; background-image:url(https://hkstatic.hankyung.com/img/tenasia/logo/logo.svg); background-repeat:no-repeat; background-size:contain; color:transparent; white-space:nowrap}
.header-wrap .btn-search-open {position:absolute; top:15px; right:15px; padding:5px}
.header .util-wrap {position:relative; max-width:720px; margin:0 auto 5px; border-bottom:1px solid #e5e5e5; font-size:13px}
.header .util-link a {display:inline-block; padding:3px 15px}
.util-link.link-lang-flag {display:inline-flex; gap:0 4px; padding:0 13px}
.util-link.link-lang-flag li {line-height:1}
.util-link.link-lang-flag a {display:inline-block; position:relative; padding:7px 5px; box-sizing:content-box}
.util-link.link-lang-flag a::before {content:''; display:inline-block; width:22px; height:17px; background-repeat:no-repeat; background-size:contain; vertical-align:top; box-sizing:border-box}
.util-link.link-lang-flag a::after {content:''; position:absolute; top:7px; left:5px; width:22px; height:17px; border:1px solid rgba(0,0,0,.1); pointer-events:none; box-sizing:border-box}
.util-link.link-lang-flag .english a::before {background-image:url('https://hkstatic.hankyung.com/resource/common/img/flag/flag-english.svg')}
.util-link.link-lang-flag .japan a::before {background-image:url('https://hkstatic.hankyung.com/resource/common/img/flag/flag-japan.svg')}
.layer-search {display:none; position:absolute; top:60px; left:0; right:0; z-index:100; margin:0 calc(50% - 50vw); padding:12px 0; background:#f3f3f3; text-align:center; box-shadow:0 3px 5px rgba(0,0,0,.1)}
.layer-search .inptxt {width:210px; height:35px; padding:0 15px; border:none; background:#fff; line-height:35px; text-align:left; font-size:16px !important}
.layer-search .btn-search {width:50px; height:35px; margin-left:-4px; background:#e11b6d; color:#fff !important; line-height:35px; text-align:center; border-radius:0 !important; font-size:15px !important; padding:0 !important}
.layer-search .btn-search-close {position:relative; margin-left:6px; padding:5px}
.layer-search .btn-search-close::before,
.layer-search .btn-search-close::after {content:''; position:absolute; left:50%; top:50%; width:1px; height:20px; background-color:#222}
.layer-search .btn-search-close:before {transform:translate(-50%, -50%) rotate(45deg)}
.layer-search .btn-search-close:after {transform:translate(-50%, -50%) rotate(-45deg)}
.gnb {overflow:hidden; position:relative; height:40px; border-bottom:none !important; background:#fff}
.gnb::before, .gnb::after {content:''; display:block; position:absolute; top:0; width:22px; height:40px; z-index:10}
.gnb::before {left:0; background:-moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%); background:-webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%); background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,0) 100%)}
.gnb::after {right:0; background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%); background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 51%, rgba(255,255,255,1) 100%)}
.gnb .inner-scroll {overflow-y:hidden; overflow-x:auto; position:absolute; top:0; left:10px; right:10px; height:40px; -webkit-overflow-scrolling:touch}
.gnb .inner-scroll::-webkit-scrollbar {display:none}
.gnb ul {display:table; position:absolute; top:0; left:0; width:auto}
.gnb li {display:table-cell; vertical-align:middle; float:none !important; width:auto !important; height:auto !important}
.gnb li a {overflow:hidden; display:block; position:relative; padding:0 12px; color:#222; font-size:17px; line-height:40px; text-align:center; text-decoration:none; white-space:nowrap}
.gnb li:first-child a {padding-left:10px}
.gnb li:last-child a {padding-right:10px}
.gnb li.on a {color:#e11b6d; font-weight:bold}
/* footer */
.link-sns {display:flex; align-items:center}
.link-sns > li {flex:1 0 20%; text-align:center}
.link-sns.item6 > li {flex:1 0 16.6666%}
.footer {padding-bottom:30px}
.footer-link-wrap > ul,
.footer-copy-wrap {max-width:720px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px}
.footer-link-wrap {position:relative; z-index:2; padding:22px 0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5}
.footer-link-wrap .footer-sitemap {display:grid; grid-template-columns:repeat(3, auto);  justify-content:space-between; margin-top:20px}
.footer-link-wrap .footer-sitemap > li {padding:5px 0}
.footer-link-wrap .footer-sitemap > li a {display:inline-block; padding:5px 0; font-size:14px; line-height:1.3; vertical-align:top}
.footer-copy-wrap {position:relative; font-size:12px}
.footer-copy-wrap .copyright {padding:30px 50px 22px 0; line-height:1.4em}
.footer-copy-wrap .copyright p > span {display:inline-block}
.footer-copy-wrap .footer-menu ul {display:flex; flex-wrap:wrap}
.footer-copy-wrap .footer-menu li {flex:0 0 35%; padding:0px 8px 0px 0}
.footer-copy-wrap .footer-menu li a {display:inline-block; padding:6px 0; box-sizing:border-box}
.footer-copy-wrap .footer-menu li:nth-child(3n) {flex:0 0 30%}
.footer-copy-wrap .footer-menu li:last-child {padding-right:0}
.footer-copy-wrap .copy,
.footer .footer-hkgroup {margin-top:15px}
.footer .footer-hkgroup dt {margin-bottom:3px; font-weight:bold}
.footer .btn-top {position:fixed; bottom:110px; right:20px; z-index:50; width:40px; height:40px; opacity:.8}
/* AD */
.ad-box {margin:25px -20px; padding:20px; background:#f7f7f7; text-align:center}
.ad-box > div {max-width:100%; margin:0 auto}
.ad-box > div + div {margin-top:20px}
.ad-box .ad-label {display:block; margin-bottom:10px; color:#585858; font-size:12px; letter-spacing:0px; line-height:1}
.ad-box-col {display:flex; justify-content:center; margin:20px -20px}
.ad-box-col > div {flex:0 0 auto; margin:0 10px}
.ad-module {margin:30px 0}
.ad-bottom {padding:10px 0; background:#f1f1f1; text-align:center}
.ad-floating {z-index:9999999999}
/* AD - 구글광고 정렬 */
div[id^="div-gpt-ad-"] {margin:0 auto}
div[id^="div-gpt-ad-"] > div {text-align:center; margin:0 auto}
div[id^="div-gpt-ad-"] > div,
div[id^="div-gpt-ad-"] iframe {max-width:100% !important}
/* AD - 하단고정광고 */
.ad-bottom-fix {position:fixed; bottom:0; left:0; z-index:100; width:100%; background-color:#f2f2f2; text-align:center}
.ad-bottom-fix > div {margin:0 auto}
.ad-bottom-fix + .footer {padding-bottom:70px}
/* 하단고정광고(닫기 버튼 있는 겨우) */
.btn-close-ad {display:none}
.btn-close-ad::before,
.btn-close-ad::after {content:''; position:absolute; left:50%; top:0; width:2px; height:20px; background-color:#fff}
.btn-close-ad:before {transform:translate(-50%) rotate(45deg)}
.btn-close-ad:after {transform:translate(-50%) rotate(-45deg)}
.ad-bottom-fix.close-ad {background:rgba(0,0,0,0.6)}
.ad-bottom-fix.close-ad .ad-inner {min-height:50px; margin-left:-40px}
.ad-bottom-fix.close-ad .btn-close-ad {display:block; position:absolute; top:50%; right:50%; width:20px; height:20px; margin:-10px -175px 0 0}
@media screen and (max-width:376px) {
	.ad-box {padding-left:0; padding-right:0}
}
@media all and (max-width:359px){
	.ad-bottom-fix.close-ad .ad-inner {margin-left:0}
	.ad-bottom-fix.close-ad .btn-close-ad {top:-50%; margin:0 -155px 0 0; background:rgba(0,0,0,0.6)}
}
/* contents common */
.breadcrumb {padding:15px 0}
.breadcrumb > li {display:inline-block}
.breadcrumb > li + li:before {content:'>'; font-family:serif}
.news-tit > a {display:block; display:-webkit-box; overflow:hidden; text-overflow:clip; -webkit-box-orient:vertical; word-break:keep-all; word-wrap:break-word}
.news-list {margin:20px 0}
.news-list > li {display:table; table-layout:fixed; width:100%; padding:0 0 10px}
.news-list > li + li {padding-top:10px; border-top:1px solid #e2e2e2}
.news-list > li:last-child {padding-bottom:0}
.news-list > li.list-ad {position:relative; padding:0; border-top:none}
.news-list > li.list-ad:after {content:''; display:block; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#fff}
.news-list .thumb {display:table-cell; width:130px; vertical-align:top}
.news-list .thumb > a {display:block; width:130px; height:81px; overflow:hidden}
.news-list .thumb > a > img {width:100%; min-height:100%; object-fit:cover; object-position:center top; aspect-ratio:25 / 14}
.news-list .txt-wrap {display:table-cell; vertical-align:middle}
.news-list .txt-wrap .news-tit {font-weight:normal; font-size:18px; line-height:1.3em}
.news-list .txt-wrap .news-tit > a {-webkit-line-clamp:3; word-break:break-all}
.news-list .thumb + .txt-wrap {padding-left:15px}
.news-list .ad-box {margin:0 -20px}
.breadcrumb + .news-list  {margin:0}
.breadcrumb + .news-list > li:last-child:not(.list-ad) {padding-bottom:10px}
.thumb-video {position:relative}
.thumb-video:before {content:''; display:inline-block; position:absolute; right:0; bottom:0; z-index:2; width:25px; height:25px; background:rgba(0,0,0,.4)}
.thumb-video:after {content:''; display:inline-block; position:absolute; right:6px; bottom:6px; z-index:2; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:11px solid #fff}
.list-loading {padding:20px 0; text-align:center}
.btn-more-wrap {padding-top:15px; padding-bottom:15px; background:#fff; text-align:center}
.btn-more-wrap .btn-more {display:block; width:100%; padding:15px 0; border:1px solid #ddd; font-weight:bold; font-size:17px; box-sizing:border-box}
.btn-more-wrap .btn-more:after {content:''; display:inline-block; width:6px; height:6px; margin-left:5px; border-bottom:1px solid #222; border-right:1px solid #222; vertical-align:4px; transform:rotate(45deg)}
.slick-dots li {display:inline-block}
.slick-dots li button {width:10px; height:10px; border-radius:5px; background:#444; color:transparent; vertical-align:top}
.slick-dots li.slick-active button {background:#fff}
.slick-dots li + li {margin-left:10px}
/* select paging */
@media screen and (max-width:359px) {
    .footer-copy-wrap .footer-menu ul {flex-wrap:wrap}
    .footer-copy-wrap .footer-menu li,
	.footer-copy-wrap .footer-menu li:nth-child(3n) {flex:1 0 50%}
	.footer-copy-wrap .footer-menu li > a {padding-bottom:5px}
}
@media screen and (min-width:410px) {
	.gnb li a {padding:0 13px}
	.footer-link-wrap .footer-sitemap {grid-template-columns:repeat(4, auto)}
}
@media screen and (min-width:641px) {
    .gnb::before, .gnb::after {display:none}
    .gnb .inner-scroll {left:0; right:0}
    .gnb ul {width:100%}
	.footer-copy-wrap .footer-menu li,
	.footer-copy-wrap .footer-menu li:nth-child(3n) {flex:0 0 auto}
	.footer-copy-wrap .footer-menu li {padding-right:0}
	.footer-copy-wrap .footer-menu li > a {padding-right:15px}
	.thumb-video:before {width:45px; height:45px}
	.thumb-video:after {right:10px; bottom:10px; border-top-width:10px; border-bottom-width:10px; border-left-width:21px}
}
@media screen and (min-width:781px) {
    .footer .btn-top {left:50%; right:auto; margin-left:340px}
}
