@charset "utf-8";
/* 초시생 가이드 PC — 프론트 pc_editor · 관리자 미리보기 · 관리자 에디터가 같이 쓴다. 본문 루트는 .eg-pc
   루트에 사이트 변수와 body 글자 값을 같은 값으로 다시 둬서, 사이트 CSS 가 없는 관리자에서도 같게 보인다 */

.eg-pc{--color-highlight: #025AF6; --blue-70: #025AF6; --gray-5: #FAFAFC; --gray-10: #F6F6F9; --gray-20: #EDEDF3; --gray-60: #7E8B9A; --gray-100: #121212; --white: #fff; color: #121212; font-family: 'Noto Sans KR', sans-serif, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', helvetica, 'Apple SD Gothic Neo', sans-serif; font-size: 13px; line-height: normal; letter-spacing: -0.03em; word-break: break-all; overflow-wrap: break-word;}
.eg-pc :where(p, h1, h2, h3, h4, ul, ol, li, blockquote, th, td, figure){margin: 0; padding: 0;}
.eg-pc :where(h1, h2, h3, h4){line-height: inherit;}
.eg-pc :where(li){list-style: none;}
.eg-pc :where(caption){height: 0; padding: 0; font-size: 0; line-height: 0; caption-side: top;}
.eg-pc :where(a){color: inherit; text-decoration: none;}
.eg-pc :where(:not(pre, code)){font-family: inherit;}

.eg-pc table .rank{text-align: center !important; padding-left:5px !important;}
.eg-pc table .rank img{mix-blend-mode: multiply;}
.eg-pc .tbl_style02 table td.bd_lr{border-left:1px solid var(--gray-20); text-align: center !important; padding-left: 5px;}
.eg-pc .tbl_style02 table.style_left tbody tr td[rowspan] + td:not(.bd_lr){text-align: left; padding-left: 15px;}
.eg-pc .txt_info{color: var(--gray-60);}

/* 링크 · 링크 아이콘 — 프론트 exam_info/layout.css(.tbl_txt) · common.css(.ico) 와 같은 값. 밑줄 · 아이콘은 링크 글자색을 따른다 */
.eg-pc a{position: relative; color: var(--color-highlight); font-size: 13px; font-weight: 700; line-height: 140%; letter-spacing: -0.02em;}
.eg-pc a[target="_blank"]::after{content: ''; position: absolute; bottom: 1px; left: 0; right: 0; height: 1px; background-color: currentColor;}
.eg-pc a:hover{text-decoration: none !important;}
.eg-pc .ico{position: relative; display: inline-flex; width: 12px; height: 12px; margin-top: -2px; vertical-align: middle;}
.eg-pc .ico::after{content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: inline-block; width: 100%; height: 24px; margin: auto; background-color: var(--blue-70); -webkit-mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center;}
.eg-pc a .ico::after{background-color: currentColor;}
.eg-pc .ico.ico_link::after{-webkit-mask-image: url('//un-static.conects.com/un_static/img/common/icon/svg/new_iexternal_link.svg'); mask-image: url('//un-static.conects.com/un_static/img/common/icon/svg/new_iexternal_link.svg');}
.eg-pc div.style_dash > ul{font-weight: 400; font-size: 13px; line-height: 150%; letter-spacing: -0.03em; position: relative; padding-left: 18px;}
.eg-pc div.style_dash > p{margin-top: 13px;}

/* 단계 흐름(.tbl_arrow) — 프론트 exam_info/layout.css · common.css(style_dot) 와 같은 값. 에디터 '단계 흐름' 블록 */
.eg-pc ul.style_dot{margin: 0;padding-inline-start:0;list-style-position: inside;}
.eg-pc ul.style_dot > li{font-weight: 400;font-size: 13px;line-height: 160%;letter-spacing: -0.03em;position:relative;padding-left:18px;}
.eg-pc ul.style_dot > li::before{content:''; width:4px; height:4px;background-color:var(--gray-100);position:absolute;top:8px;left:6px;border-radius:100%;overflow:hidden;}
.eg-pc .tbl_arrow{display:flex;flex-direction: column;gap:32px;}
.eg-pc .tbl_arrow .arrow_item{display:flex;align-items: stretch;}
.eg-pc .tbl_arrow .arrow_item .item_box{display:flex;align-items: stretch;flex-direction: column;gap:32px;}
.eg-pc .tbl_arrow .arrow_item .item_box ~ .item_box{margin-left:20px;}
.eg-pc .tbl_arrow .arrow_item .item_box > div{width:120px;background: #F1F6FE;border-radius: 10px;display:flex;justify-content: center;align-items:center;height:100%;min-height:60px;font-weight: 700;line-height: 140%;text-align: center;letter-spacing: -0.02em;position:relative;}
.eg-pc .tbl_arrow .arrow_item .item_box > div > em{position:absolute;top:0;left:0;font-weight: 700;font-size: 11px;line-height:18px;text-align: center;letter-spacing: -0.03em;color: #fff;background: var(--color-highlight);border-radius: 2px;min-width: 40px;height: 18px;padding: 0px 5px;}
.eg-pc .tbl_arrow .arrow_item .item_box > div::before{content:'';position:absolute;bottom:-28px;left:50%;transform: translateX(-50%);display: inline-block; width: 25px; height: 24px; background-color: var( --gray-20); -webkit-mask-size: 100%; mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center;-webkit-mask-image: url('//static.conects.com/un_static/img/common/icon/svg/down_thin.svg'); mask-image: url('//static.conects.com/un_static/img/common/icon/svg/down_thin.svg');}
.eg-pc .tbl_arrow > .arrow_item:nth-last-child(1) .item_box > div:nth-last-child(1)::before{display:none;}
.eg-pc .tbl_arrow .arrow_item .item_txt{display:flex;margin-left:8px;align-items:center;}

.eg-pc > *{margin: 0;}
.eg-pc > * + *{margin-top: 8px;}
.eg-pc > :is(h1, h2, ul, ol, table, blockquote, hr) + *, .eg-pc > * + :is(h1, h2, h3, table){margin-top: 12px;}
.eg-pc > h3.tit-dep3 + table{margin-top: 12px;}
.eg-pc > .tbl_arrow + *, .eg-pc > * + .tbl_arrow{margin-top: 24px;}
.eg-pc > h3.tit-dep3 + .tbl_arrow{margin-top: 12px;}

.eg-pc > h1.tit-dep1{display: flex; align-items: center; color: var(--gray-100); font-size: 20px; font-weight: 700;}
.eg-pc > h2.tit-dep2{display: flex; align-items: center; color: var(--gray-100); font-size: 16px; font-weight: 700;}
.eg-pc > h3.tit-dep3{display: flex; align-items: center; justify-content: space-between; color: var(--gray-100); font-size: 13px; font-weight: 900;}
.eg-pc > table{width: 100%; table-layout: fixed; border-collapse: collapse;}
.eg-pc > table caption{height: 0; padding: 0; font-size: 0; line-height: 0;}
.eg-pc > table :is(th, td){text-align: center; vertical-align: middle; border-right: 1px solid var(--gray-20); border-bottom: 1px solid var(--gray-20);}
.eg-pc > table tr > *:last-child{border-right: 0 none;}
.eg-pc > table thead th{height: 37px; padding: 8px 0; color: #fff; font-weight: 700; line-height: 140%; letter-spacing: -0.02em; background: var(--gray-60);}
.eg-pc > table tbody th{height: 50px; padding: 13px; font-weight: 400; background: var(--gray-10);}
.eg-pc > table tbody td{height: 50px; padding: 13px;}
.eg-pc > ul{padding: 0; list-style: none;}
.eg-pc > ul > li{position: relative; padding-left: 18px; font-size: 13px; font-weight: 400; line-height: 160%; letter-spacing: -0.03em;}
.eg-pc > ul > li::before{content: ''; position: absolute; top: 8px; left: 6px; width: 4px; height: 4px; overflow: hidden; background-color: var(--gray-100); border-radius: 100%;}
.eg-pc > ol{padding: 0 0 0 18px; font-size: 13px; line-height: 160%; letter-spacing: -0.03em;}
.eg-pc > table :is(th, td) :is(ul, ol){text-align: left;}
.eg-pc > table :is(th, td) ul > li{position: relative; padding-left: 18px; line-height: 160%; letter-spacing: -0.03em;}
.eg-pc > table :is(th, td) ul > li::before{content: ''; position: absolute; top: 8px; left: 6px; width: 4px; height: 4px; overflow: hidden; background-color: currentColor; border-radius: 100%;}
.eg-pc > table :is(th, td) ol{padding-left: 18px;}
.eg-pc > table :is(th, td) ol > li{line-height: 160%; letter-spacing: -0.03em; list-style: decimal;}
.eg-pc > p{font-size: 13px; line-height: 160%; letter-spacing: -0.03em;}
.eg-pc > blockquote{padding: 24px 20px; background: var(--gray-5); border-radius: 4px;}
.eg-pc > hr{width: 100%; border: 0; border-top: 1px solid var(--gray-20);}
.eg-pc img{max-width: 100%; height: auto;}