@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
@font-face {font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal;}

* {margin:0 auto; padding: 0;}
html{scroll-behavior: smooth;  user-select: none;}
ol, ul, li, dl, dt, dd{list-style: none;}
html, body, div, p, strong, span, ol, ul, li, dl, dt, dd, i, em, pre{font-family: 'Plus Jakarta Sans','Noto Sans KR', 'Malgun Gothic', sans-serif;}

strong{font-weight: 700;}
em,
i{font-style: normal;}
[class^="bg_"]{padding: 100px 0;}

.content-wrapper{font-family: 'Plus Jakarta Sans','Noto Sans KR', 'Malgun Gothic', sans-serif;}
.table-wrapper a{width: fit-content; display: block;}
.inner{width: 1100px; margin: 0 auto; position: relative;}

ul.quick{position: fixed; right: 10px; bottom: 30%; z-index: 2; border-radius: 50px; background: rgba(90,0,255,0.8); padding: 15px 5px;}
ul.quick li{padding: 15px 10px; text-align: center; position: relative; font-weight: 700; color: #fff;}
ul.quick a{display: block; border-bottom: 1px dashed rgba(255,255,255,0.2);}
ul.quick li:hover{color: #fff600;}
ul.quick a:last-child{border-bottom: 0;}

.bg_01{background: #ececec;}
.bg_02{background: #f4f9ff;}
.bg_03{background: #e8f3f2;}
.bg_04{background: #fff;}

.bg-tab{background: #f4f9ff; padding-top: 100px;}
.bg-tab p{padding-bottom: 50px;}

.top-bnr{background: #393624 url('https://cdn.ibstudy.co.kr/Content_new/images/sub/bnr_practice_center.png') no-repeat center 0; height: 370px; text-align: center;}
.top-bnr div{padding: 90px 0;}
.top-bnr p{color: #fff;}
.top-bnr .tit{font-size: 36px; line-height: 1;}
.top-bnr .tit strong{display: block; font-size: 95px; padding: 20px 0 30px;}
.top-bnr .txt{font-size: 23px;}

.conts-tit,.sub-tit,.tit-bar{font-weight: 800; text-align: center; line-height: 1;}

.conts-tit{font-size: 55px; color: #000;}
.sub-tit{font-size: 50px;}
.tit-bar{background: #000; padding: 20px 0; color: #fff; font-size: 31px; border-radius: 5px;}

.color-b{color: #477bbc;}
.color-g{color: #14b2a1;}
.color-y{color: #f6ff00;}
.color-r{color: #ee0759;}

.small{font-size: 16px; font-weight: 700;}

.info-box{margin: 30px auto 70px;}
.info-box p{padding: 15px 230px; font-size: 22px; font-weight: 700;}
.info-box i{width: 150px; margin-right: 30px; padding: 5px 0; text-align: center; letter-spacing: -1px; border: 1px solid #477bbc; border-radius: 30px; display: inline-block;}
.info-box span{color: rgba(0,0,0,0.3); font-weight: 100; font-size: 20px; margin: 0 20px;}
.info-box strong{margin-right: 10px;}

.info-box.human{border-top: 1px solid #d0def0;}
.info-box.human p{border-bottom: 1px solid #d0def0;}
.info-box.human i{color: #477bbc; border: 1px solid #477bbc;}
.info-box.korean{border-top: 1px solid #aee1d5;}
.info-box.korean p{border-bottom: 1px solid #aee1d5;}
.info-box.korean i{color: #14b2a1; border: 1px solid #aee1d5;}

.tab_wp{width: 100%;}
.tab_wp.fix{background: rgba(255,255,255,0.8); position: fixed; top: 0; z-index: 100; padding: 20px 0;}

.conts_tab{width: 1100px;  margin: 0 auto; overflow: hidden; text-align: center;}
.conts_tab li{display: inline-block; position: relative;}
.conts_tab li:first-child{margin-right: 20px;}
.conts_tab li a{background: #999; color: rgba(255,255,255,0.8); cursor: pointer; display: inline-block; width: 530px; padding: 25px 0; line-height: 25px; font-size: 25px; letter-spacing: -1px; border-radius: 6px; text-align: center;}
.conts_tab li a::after{content:'▼'; font-size: 10px; position: absolute; margin-left: 10px;}

.conts_tab li.human a::after{content:'▲'; font-size: 10px; position: absolute; margin-left: 10px;}
.conts_tab li.human.on a::after{content:'▼'; font-size: 10px; position: absolute; margin-left: 10px;}

.conts_tab li.on a{color: #fff; font-weight: 700;}
.conts_tab li.human.on a{background: #477bbc;}
.conts_tab li.korean.on a{background: #14b2a1;}
.conts_tab li.on strong{font-weight: 700;}

table{table-layout: fixed; word-break: break-all; border-collapse: collapse; width: 100%; border-bottom: 1px solid #fff; margin: 30px 0; font-size: 20px;}
table thead th,
table thead td{padding: 20px 10px;}
table tbody th,
table tbody td{background: #fff; text-align: center; padding: 10px;}
table thead th{border-radius: 5px 5px 0 0;}
table tbody tr:last-child{border-bottom: 1px solid transparent !important;}

table.human td{border-left: 1px solid rgba(200,210,222,0.35); text-align: center;}
table.human thead th{background: #477bbc; color: #fff; border-right: 0 !important; font-weight: 700; font-size: 27px;}
table.human thead em{background: #fff; color: #477bbc; border-radius: 5px; text-align: center; padding: 5px 20px; margin-right: 20px;}
table.human tbody tr{border-bottom: 1px solid rgba(200,210,222,0.35);}

table.korean td{background: #fff; border-left: 1px solid rgba(200,222,216,0.5); text-align: center;}
table.korean thead th{background: #14b2a1; color: #fff; border-right: 0 !important; font-weight: 700; font-size: 27px;}
table.korean thead em{background: #fff; color: #14b2a1; border-radius: 5px; text-align: center; padding: 5px 20px; margin-right: 20px;}
table.korean tbody tr{border-bottom: 1px solid  rgba(200,222,216,0.5);}

.bg-b{background: rgba(200,210,222,0.2); font-weight: 700;}
.bg-g{background: rgba(242,254,253,0.8) !important; font-weight: 700;}

.btn{width: 550px; margin: 50px auto 0; padding: 30px 0; border-radius: 50px; color: #fff; font-size: 30px; font-weight: 700; text-align: center;}
.btn.human{background: #477bbc;}
.btn.korean{background: #14b2a1;}

table tbody em {font-size: 18px; color: #555; font-weight: 600;}
table tbody em::before{content: '(';}
table tbody em::after{content: ')';}

table tbody .date {height: fit-content;}
table tbody .date th {font-size: 22px;}
table tbody .date td {padding: 20px;}
table tbody ul {display: flex; gap: 10px; flex-wrap: wrap;}
table tbody ul li {border: 2px solid #444; padding: 5px 10px; border-radius: 5px; font-weight: 600; font-size: 19px;}

.sub-txt{padding: 20px 0;}
.sub-txt p{font-size: 27px;text-align: center; font-weight: 700;}
.map-box{width: 1104px; margin: 0 auto; border: 1px solid rgba(0,0,0,0.2);}

.pr{margin-top: 30px; text-align: center;}
.pr strong {font-size: 24px;}
.pr ul{ position: relative; margin: 20px auto; display: flex; align-items: stretch; width: 100%; overflow: hidden; background: #fff; border-radius: 8px;}
.pr ul li{background: #fff; font-size: 26px; padding: 35px 60px; font-weight: 600; flex: 1; display: flex; align-items: center;text-align: center; justify-content: center; flex-direction: column;}
.pr ul li:nth-child(1){color: #fff; font-size: 30px; flex: 0 0 60%;}
.pr ul li:nth-child(2){flex: 0 0 40%;}
.pr ul .about{ font-weight: 700; text-align: center; border-radius: 5px; width: 100px; padding: 4px; margin-bottom: 5px; display: block;}
.pr ul .about p{ font-size: 17px; color: #fff;}
.pr ul.human li:nth-child(2) {background: #fff;}
.pr ul.human li:nth-child(1), .pr ul.human .about{background: #477bbc;}
.pr ul.korean li:nth-child(1), .pr ul.korean .about{background: #14b2a1;}

.tabs {display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 30px;}
.tabs p{font-size: 20px; font-style: italic; font-weight: 500;}
.tabs li {width: 100px; height: 100px; background: #aaa; color: #fff; border-radius: 50%; cursor: pointer;}
.tabs li a {color: #fff; font-size: 22px; text-align: center; line-height: 95px; font-weight: 500;}
.tabs li.human_active {background: #477bbc;}
.tabs li.human_active a {font-weight: 700;}
.tabs li.korean_active {background: #14b2a1;}
.tabs li.korean_active a {font-weight: 700;}

.flash {animation: flash infinite 1.5s both ease-in;}
@keyframes flash {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}