@charset "UTF-8";

/* 이용약관-개인정보처리방침 콘텐츠 스타일
 * 2022.10.26
 * 한경닷컴
 */

/* UI 변경 */
#auth_wrap {max-width:900px}   
#auth_wrap .contentWrap,
#auth_wrap .Info_con {width:100%; height:auto; padding:15px; box-sizing:border-box}
#selectHistory {width:100% !important; box-sizing:border-box}

/* 콘텐츠 내부 */
.hk-rules-wrap,
.hk-rules-wrap * {font-size:15px; line-height:1.45}
.hk-rules-wrap > dl {margin:30px 0}
.hk-rules-wrap > dl dt {margin-bottom:10px}
.hk-rules-wrap > dl:last-child {margin-bottom:0}
.hk-rules-wrap .bul-list .columns {display:flex; gap:5px}
.hk-rules-wrap .bul-list .columns.ct {justify-content:center}
.hk-rules-wrap .bul-list .columns .num {position:relative; top:-1px}
.hk-rules-wrap .bul-list > li + li {margin-top:5px}
.hk-rules-wrap .bul-list .bul-list,
.hk-rules-wrap .desc-block {padding:10px 0 10px 20px}

.hk-rules-tit {margin:50px 0 35px; font-weight:bold}
.hk-rules-tit:first-child {margin-top:0}

.data-table-wrap {margin:10px 0; overflow-x:auto}
.data-table caption{position:static !important; overflow:hidden; width:0; height:0; font-size:0; line-height:0}
.data-table th,
.data-table td {padding:5px; border:1px solid #bbb; word-break:keep-all}
.data-table thead th {background-color:#ddd; text-align:center}
.data-table .align-lt {text-align:left}
.data-table .align-ct {text-align:center}
.data-table .align-rt {text-align:right}
.data-table .desc-block {padding:5px 0 5px 18px}
.data-table .columns.ct + .desc-block {padding:5px 0}

/* 아이프레임 대체(2023.03.27) */
.iframe-wrap {height:calc(100vh - 370px)}
.iframe-wrap iframe {width:100%; height:100%}

/* 갓머리 */
.top-area {position:absolute; top:0; transform:translate(0, 0)}

@media all and (max-width:720px) {
    .data-table th,
    .data-table td,
    .data-table td * {font-size:13px}
}
@media all and (max-width:360px) {
    .data-table th,
    .data-table td,
    .data-table td * {font-size:12px}
}
@media all and (min-width:460px) {
    .top-area {top:10px; transform:translate(-10px, 0);}
}

/* OS dark mode */
@media (prefers-color-scheme: dark) {
    iframe {filter:invert(1) grayscale(1)}
}