@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
* {  letter-spacing: -0.036em; padding: 0; font-family: 'NanumSquare',  sans-serif;  }
html{font-size: 16px;}
a { text-decoration: none; display: block; color:  #191B20;}
a:focus-visible,
textarea:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
label:focus-visible,
.scrollbar:focus-visible{ outline: 1px dashed #1357DF !important; outline-offset: 3px!important; }
a:hover {_color: #1357DF;}
a.a-inline { display: inline;}
li { list-style: none;}
.clearfix::after { display: block; content: ''; clear: both;}
input{padding-left:8px;}
input::-ms-reveal,input::-ms-clear { display: none;}
input,select { 
    border-radius: var(--space-200, 0.5rem);
    border: 1px solid var(--input-default-border, #D1E9FF);
    background: var(--input-active-bg, #EDF6FF);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
select{
    appearance: none;
    background-image: url(../images/img/slct_down.png);
    background-repeat: no-repeat;
    background-position: 96% 56%;
    background-size: 12px;
}
input[type="file"]{background: transparent; border: none;} 


/* 폰트 유형 */
h1 {font-size: 48px; font-weight: bold; line-height:1;}
h2 { font-size: 3rem; font-weight: bold;}
h3 { font-size: 2rem; font-weight: 500;}
h4 { font-size: 20px; font-weight: 500;}
h5 { font-size: 20px; font-weight: 500; line-height: 1.4;}


.fz32 { font-size: 2rem; font-weight: bold;}
.fz24 {font-size: 1.5rem;}
.fz24-bold{font-size: 1.5rem; font-weight: bold;}
.fz24-semibold{font-size: 1.5rem; font-weight: 500; }
.fz20-semibold{font-size: 1.25rem; font-weight: 500;}
.fz20  {font-size: 1.25rem;}  
.fz18-semibold { font-weight: 500; font-size: 18px; line-height: 26px;}
.fz18 { font-size: 18px; line-height: 25px;}
.fz16 { font-size: 16px; line-height: 22px;}
.fz16-semibold { font-size: 16px; font-weight: 500; line-height: 22px;}
.fz14 { font-size: 14px; line-height: 19px;}
.fz14-semibold { font-size: 14px; font-weight: 500; line-height: 19px;}

.f-red { color: #bb1111;}
.f-grey { color: #6e717a;}
.f-white { color: #fff;}
.f-blue { color: #1357DF;}
.f-navy { color: #3B5DC0;}
.f-5357B0 { color: #5157b0;}
.f-02D9AE { color: #02D9AE;}
.f-fa3477 { color: #fa3477;}
.f-33d7f6 { color: #33d7f6;}
.f-6509de { color: #6509de;}
.f-006aff { color: #006aff;}

.t-center { text-align: center;}
.t-right { text-align: right;}
.t-left { text-align: left;}
.t-justify { text-align: justify;}

/* 컬러 */
.bg-blue { background-color: #1357DF;}
.bg-navy { background-color: #3B5DC0;}
.bg-yellow { background-color: #E8C204;}
.bg-grey { background-color: #6e758c;}
.bg-red { background-color: #bb1111;}
.bg-beige { background-color: #eeede7;}
.bg-lightgrey { background-color: #d7e7f7;}
.bg-white { background-color: #fff;}
.bg-f6f8fc { background-color: #f6f8fc !important;}
.bg-f6f7f9 { background-color: #f6f7f9;}

/* 가상클래스 before 컨텐츠 */
.before-cnt { position: relative; margin-left: 10px;}
.before-cnt::before { content: '- '; position: absolute; left: -10px;}
.before-01, .before-02, .before-03, .before-04, .before-05,
.before-06, .before-07, .before-08, .before-09, .before-10 { position: relative; margin-left: 20px;}
.before-01::before { content: '1.'; position: absolute; left: -18px;}
.before-02::before { content: '2.'; position: absolute; left: -18px;}
.before-03::before { content: '3.'; position: absolute; left: -18px;}
.before-04::before { content: '4.'; position: absolute; left: -18px;}
.before-05::before { content: '5.'; position: absolute; left: -18px;}
.before-06::before { content: '6.'; position: absolute; left: -18px;}
.before-07::before { content: '7.'; position: absolute; left: -18px;}
.before-08::before { content: '8.'; position: absolute; left: -18px;}
.before-09::before { content: '9.'; position: absolute; left: -18px;}
.before-10::before { content: '10.'; position: absolute; left: -25px;}

/* float */
.flr { float: right;}
.float { float: left;}

/* 모바일에서만 보이는 레이아웃 */
.mobile-only { display: none;}

/* 디스플레이 클래스 */
.dib { display: inline-block;}
.fz0 { font-size: 0;}

/* display flex */
.d-flex { display: flex; justify-content: center;  flex-wrap: wrap;}
.d-flex-between { display: flex; justify-content: space-between; flex-wrap: wrap;}
.d-flex-start { display: flex; margin: 0; justify-content: flex-start;}
.d-flex-end { display: flex; margin: 0; justify-content: flex-end;}
.nowrap { flex-wrap: nowrap;}
.align-c { align-items: center;}

/* width */
.w100p { width: 100% !important; margin: 0;}
.w90p { width: 90%;}
.w80p { width: 80%;}
.w60p { width: 60%;}
.w50p { width: 50%;}
.w40p { width: 40%;}
.w30p { width: 30%;}
.w25p { width: 25%;}
.w20p { width: 20% !important;}
.w15p { width: 15%;}
.w10p { width: 10%;}

/* 마진 클래스 */
.margin0 { margin: 0;}
.margin-auto { margin: 0 auto;}
.mt200 { margin-top: 200px;}
.mt150 { margin-top: 150px;}
.mt100 { margin-top: 100px;}
.mt50 { margin-top: 4rem !important;}
.mt30 { margin-top: 30px !important;}
.mt25 { margin-top: 25px;}
.mt20 { margin-top: 20px;}
.mt10 { margin-top: 10px;}

.mb200 { margin-bottom: 200px;}
.mb150 { margin-bottom: 150px;}
.mb100 { margin-bottom: 100px;}
.mb50 { margin-bottom: 50px !important;}
.mb25 { margin-bottom: 25px;}
.mb20 { margin-bottom: 20px;}
.mb10 { margin-bottom: 10px;}

.ml30 { margin-left: 30px;}
.ml20 { margin-left: 20px;}
.ml10 { margin-left: 10px;}
.ml5 { margin-left: 5px;}

/* 패딩 클래스 */
.p50 { padding: 50px;}
.p20 { padding: 20px;}
.p10 { padding: 10px;}

.pt50 { padding-top: 50px;}
.pt20 { padding-top: 20px;}

.pb50 { padding-bottom: 50px;}
.pb20 { padding-bottom: 20px;}
.pb10 { padding-bottom: 10px !important;}

.h400 { height: 400px;}

.line-thr { text-decoration: line-through;}

/* 보더 클래스 */
.border { border: 1px solid #c6cee2;}
.bdt { border-top: 1px solid #c6cee2;}
.bdb { border-bottom: 1px solid #c6cee2;}
.bdr { border-right: 1px solid #c6cee2;}
.bdl { border-left: 1px solid #c6cee2;}

.bdtn { border-top: none;}
.bdbn { border-bottom: none;}
.bdrn { border-right: none;}
.bdln { border-left: none;}

.border-box { box-sizing: border-box;}

body { width: 100%;}
header { width: 100%;}

/* 모바일 메뉴 pc사이즈에서 숨기기 */
.m-ham,.m-menu { display: none;}

/* --------- 페이지 헤더 ---------- */
.top-wrap { width: 1440px; margin: 0 auto;}
.top { margin-top: 0; margin-bottom: 11px; text-align: right;}
.top-ul { display: inline-block; font-size: 0; box-sizing: border-box;}
.top-ul li { display: inline-block; font-size: 16px; margin-left: 32px; position: relative; border-top: 1px solid #fff; padding-top:4px;}
.top-ul li:first-child { margin: 0;}
.top-ul li:hover a::after { position: absolute; content: ' '; width: 100%; height: 2px; background-color: #1357DF; left: 50%; transform: translateX(-50%); top: 0; animation: line 0.3s; }
.top-ul li a.f-red::after { position: absolute; content: ' '; width: 100%; height: 2px; background-color: #1357DF; left: 50%; transform: translateX(-50%); top: 0; animation: line 0.3s; }
.top-ul li a.f-red::after {background-color: #bb1111;}
.top-ul li i { margin-right: 5px;}
.top-ul li:hover .f-red { color: #bb1111;}
.header-logo { font-size: 0; width: 1440px; position: relative; margin: 0 auto; padding: 0; }
.header-logo>img { display: inline-block; height: 33px; position: absolute; left: 0; bottom: 0;}
.header-logo h1 { display: inline-block; width: 100%; margin: 0 auto; text-align: center;}
.header-logo a { width: 240px; margin: 0 auto;}
.header-logo h1 img { height: 36px; vertical-align: bottom;}
header nav { width: 100%; margin-top: 20px; height: 50px; line-height: 50px; border-top: 1px solid #c6cee2; border-bottom: 1px solid #c6cee2;}
header>nav>ul { display: flex; width: 1440px; margin: 0 auto; justify-content: space-between;}
header>nav>ul>li.gnb-menu { margin: 0; padding: 0; position: relative;}
header>nav>ul>li>a.fz16-semibold { line-height: 50px;}
header>nav>ul>li:hover { font-weight: 500;}
header>nav>ul>li:hover i { color: #1357DF;}
header>nav>ul>li:hover:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 2px;
    background-color: #1357DF;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    animation: line 0.3s;
}

/* 서브메뉴 lnb */
ol.lnb {
    z-index: 9999;
    background-color: #fff;
    position: absolute;
    padding: 20px;
    padding-bottom: 0;
    top: 48px;
    left: -20px;
    width: 200px;
    display: none;
    border-bottom: 2px solid #3B5DC0;
    box-shadow: 0 18px 18px 18px rgba(0, 0, 0, 0.03);
}

/* 서브매뉴 키보드 탭키 이동 */
header>nav>ul>li:focus ol.lnb,
header>nav>ul>li:focus-within ol.lnb { display: block; top: 48px;}

ol.lnb li { display: block; margin-bottom: 20px;}
ol.lnb li:hover a::after {
    content: '\f0d9';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    margin: 0;
    padding: 0;
    margin-left: 5px;
    color: #1357DF;
    animation: scaleup2 0.2s;
}
@keyframes scaleup2 {
    0% { opacity: 0; margin-left: 12px; }
    100% { transform: scale(1); margin-left: 5px; }
}

/* 스크롤 시 헤더 고정 */
.header-fixed { position: sticky; background: #fff; z-index: 9997; top: 0; left: 0; right: 0;}
.header-fixed .top-wrap { width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center;}
.header-fixed .top { margin: 0; float: none; width: 48%; order: 1;}
.header-fixed .top-ul li { height: 32px; line-height: 28px;}
.header-fixed .top-ul li:hover a::after {
	position: absolute;
    content: ' ';
    width: 100%;
    height: 2px;
    background-color: #1357DF;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    animation: line 0.3s;
}
.header-fixed .top-ul li a.f-red::after { background-color: #bb1111;}
.header-fixed .header-logo { margin: 0; width: 500px;}
.header-fixed .header-logo>img { display: none;}
.header-fixed .header-logo h1 a { margin: 0; text-align-last: left;}
.header-fixed .header-logo h1 a img { margin: 0; padding: 0; vertical-align: middle; height: 24px; padding-bottom:10px; }
.header-fixed nav { margin-top: 0; border-bottom: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }

/* 전체 메뉴 모달 */
.total-menu {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
}
body.modal-open { overflow-y: hidden; position: fixed; top: 0; left: 0; }
.total-menu-inner {
    width: 1440px;
    height: 400px;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.total-menu-ul { display: inline-block; width: 20%; height: 400px; margin: 0; padding: 0 40px; vertical-align: top; box-sizing: border-box;}
.total-menu-ul p { margin-top: 28px; margin-bottom: 12px; font-weight:500;}
.total-menu-ul li { font-size: 16px; margin-bottom: 8px; transition: 0.2s;}
.total-menu-ul li:hover a::after,
.total-menu-ul p:hover a::after { content: '\f0d9'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 18px; margin-left: 5px; color: #1357DF; animation: scaleup2 0.3s; }
.btn-close, .more-btn-close, .more-btn-close02, .total-btn-close { position: absolute; top: 10px; right: 20px; cursor: pointer;}
.btn-close i, .more-btn-close i, .more-btn-close02 i, .total-btn-close i { font-size: 30px; color: #6e758c; z-index: 9999; transition: 0.3s;}
.btn-close i::after,
.more-btn-close i::after,
.more-btn-close02 i::after,
.total-btn-close i::after {
    content: ' 닫기';
    font-size: 16px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    vertical-align: middle;
    text-align: center;
}
.btn-close:hover i,
.more-btn-close:hover i,
.more-btn-close02:hover i,
.total-btn-close:hover i { font-size: 30px; color: #bb1111; z-index: 9999;}

/* ---------------- 로그인 모달창 ---------------- */
.login-modal-wrap { width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.7); z-index: 9998; top: 0; left: 0; overflow: hidden; display: none;}
.login-modal {
    width: 800px;
    height: 432px;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
}
.login-modal-inner { width: 100%; margin: 0; display: flex; align-items: top; justify-content: space-around; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.login-modal-inner li { margin: 0 auto; width: 50%;}
.login-modal-inner li label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}
.login-modal-inner li:first-child { border-right: 1px solid #c6cee2;}
.login-modal-inner li h4 { text-align: center; margin-bottom: 30px;}
.login-modal-inner li form input { margin-bottom: 20px;}
.login-modal-inner li button { border: none;}
.login-modal-inner li button h5 { color: #fff;}
.login-modal-inner li button:hover h5 { color: #1357DF;}
.login-modal-inner div { display: flex; margin: 0; justify-content: space-around;}
.login-modal-inner div p { margin: 0; margin-top: 10px;}

/* 입력창 아웃라인 제거 */
.log-id:focus,
.log-pw:focus { outline: none; border: 1px solid #3B5DC0;}
.login-modal-inner li .log-id,
.login-modal-inner li .log-pw {
    background-color: #fff;
    width: 300px;
    height: 60px;
    border: 1px solid #c6cee2;
    text-align: left;
    padding-left: 10px;
    display: block;
    line-height: 40px;
    box-sizing: border-box;
}
.log-id::placeholder,
.log-pw::placeholder {color: #8D93B8; font-size: 16px;}
.login-modal-inner a.btn-close { top: -50px;}

/* 헤더 끝  */
/* 서브페이지 width값 */
.container { width: 1280px;}

/* 푸터  */
/* footer { border-top: 1px solid #c6cee2; margin: 0 auto; margin-bottom: 50px; padding-top: 50px;}
.footer-top { width: 1440px; margin: 0 auto; padding: 0; display: flex; justify-content: space-between;}
.footer-top .footer-top-info { font-size: 0; margin: 0; padding: 0;}
.footer-top .footer-top-info a { display: inline-block; margin-right: 30px; position: relative;}
.footer-top .footer-top-info a:hover:after {
	position: absolute;
    content: ' ';
    width: 100%;
    height: 2px;
    background-color: #1357DF;
    left: 50%;
    transform: translateX(-50%);
    top: -4px;
    animation: line 0.3s;
}
.footer-top .footer-top-sns {  margin: 0;  padding: 0; display: flex; justify-content: flex-end;}
.footer-top-sns a { margin: 0; display: flex; align-items: center;}
.footer-top-sns a img { height: 20px; margin-left: 20px; margin-right: 5px;}
.footer-bottom { width: 1440px; margin: 0 auto; margin-top: 30px; padding: 0;}
.footer-bottom .footer-bottom-wrap { width: 1440px; margin: 0; display: flex; justify-content: space-between; align-items: flex-end;}
.footer-bottom-wrap .footer-bottom-cnt { width: 900px; margin: 0; padding: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.footer-bottom-cnt p { margin: 0; margin-right: 32px; margin-bottom: 8px;}
.footer-logo-wrap { margin: 0; display:flex; align-items: center;}
.footer-logo { height: 40px; margin: 0; padding: 0; text-align: right;} */

/* ---------- 빠른 상담 ---------- */
.councel-form { width: 300px; margin: 0; padding: 0; position: fixed; bottom: 0;  right: 0; transition: linear .3s; background-color: #F6F8FC; z-index: 9998; }
.councel-form form { margin: 0 auto; padding: 0; padding-top: 20px; width: 300px; height:322px;}
.councel-form-cnt { margin-bottom: 10px; width: 240px;}
.councel-form label { display:block; margin-bottom: 4px;}
.councel-form input,select { width: 240px; height: 40px; border: 1px solid var(--input-default-border, #D1E9FF); box-sizing: border-box;}
#councel-name,#councel-phone { color: #595959; border-radius: 0;}
.councel-form option { font-size: 16px;}
#councel-select { background-color: #fff; border-radius: 0; padding-left:8px;}

input[type="checkbox"] { display: inline; width: 16px; height: 16px;}
input[type="checkbox"] { display: inline-block; width: 16px; height: 16px; border: 1px solid #c6cee2; position: relative; background-color: #fff;}
input[id="councel-privacy"]:checked+label::after {
    content: url(../images/img/white-check-icon.png);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    background-color: #1357DF;
    left: 0;
    top: 0;
    border: 1px solid #1b1c1e;
}
.councel-form .btn-councel { width: 300px; height: 50px; margin: 20px auto 0; padding: 0; line-height: 50px; border: none;}
.councel-form .btn-councel h5 { text-align: center; vertical-align: middle;}
.councel-form .btn-councel:hover h5 { color: #1357DF; background-color: #fff;}
#btn-privacy a,#btn-privacy02 a { display: inline;}
.councel-form .btn-toggle {
    width: 50px;
    height: 140px;
    line-height: 1.4;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    border: none;
    background-color: #1b1c1e;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: -50px;
    padding: 17px;
    padding-top: 16px;
    top: 0;
    font-size: 16px !important;
    cursor: pointer;
    transition: 0.3s;
}
.councel-form .btn-toggle::after {
    content: url(../images/img/right-from-bracket.png);
    height: 14px;
    width: 14px;
    font-size: 14px;
    width: 50px;
    padding: 5px 0 10px;
    text-align: center;
    color: #fff;
}
.councel-form .btn-toggle:hover { background-color: #1357DF;}
.councel-form .btn-toggle:focus-visible { outline: 2px solid red !important;}
.councel-form.active { right: -300px;}
.councel-form.active .btn-toggle::after { content: url(../images/img/left-to-bracket.png);}
.councel-form.active .btn-toggle:hover { background-color: #1357DF;}


.more-privacy-wrap,
.more-privacy-wrap02 {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
}
.more-privacy {
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 50px 0;
}
.more-privacy-cnt { width: 80%;}
.more-privacy-cnt h5 { margin-bottom: 10px;}
/*.more-privacy-cnt p { margin-left: 10px;} */
.more-privacy-cnt:last-of-type p {  margin: 0;}
.more-privacy-cnt:last-of-type p::before { content: '※ ';}
button.btn-close { background-color: inherit; border: 0;}

/* 학습방 메뉴 */
.classroom-menu-wrap { background-image: linear-gradient(to right, #3B5DC0 50%, #fff 50%); border-top-left-radius: 20px; border-bottom-left-radius: 20px; position:relative;}

#current { color: #1357DF; font-weight: 500;}
#current::after { content: '·'; position: absolute; top: -15px; left: 50%; font-size: 24px; transform: translateX(-50%); animation: scaleup 0.3s; }
#current:hover { font-weight: normal;}
#current:hover:after { content: none;}

.classroom-menu-tit {
    line-height: 60px;
    background-color: #3B5DC0;
    padding: 0;
    color: #fff;
    margin: 0;
    width: 8%;
    text-align: center;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
ul.classroom-menu {
    width: 92%;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 20px;
    height: 60px;
    line-height: 60px;
    box-shadow: 2px 3px 6px 2px rgba(209, 214, 229, 0.6);
}
ul.classroom-menu li { margin: 0 auto;}
ul.classroom-menu li a { color: #1b1c1e; position: relative;}
ul.classroom-menu li a:hover { color: #1357DF;}
ul.classroom-menu li a:hover:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 2px;
    background-color: #1357DF;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    animation: line 0.3s;
}
@keyframes line { 
	0% { width: 0; }
    100% { width: 100%; }
}

/* 학습방 타이틀 */
.classroom-cnt-top { align-items: center;}

/* 다른과정이동 */
.cls-slct-wrap { align-items: center;}
.cls-slct-wrap p, .cls-slct-wrap label { margin-right: 10px;}
.cls-slct-wrap p {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    color: #1b1c1e;
    color: #3B5DC0;
    font-weight: 500;
    padding: 0 12px;
    border-radius: 8px;
    box-shadow: 2px 3px 6px 2px rgba(209, 214, 229, 0.8);
}
.cls-slct-wrap label select#cls-slct { width: 370px; padding: 0 5px;  background-position: 98%;}
.cls-slct-wrap a { width: 60px; height: 40px; line-height: 40px;}
.classroom-cnt-bn { background: #bb111110; padding: 20px; box-sizing: border-box; text-align: center;}
.classroom-cnt-bn h5 { color: #1357DF;}

/* 학위과정, 자격과정 공통 */
.class_info { flex-wrap: wrap;}
.class_info li { width: 400px; height: 240px;  margin: 40px 40px 0 0; padding: 56px 28px 40px; display: flex; flex-wrap: wrap; align-items: start;}
.class_info .info_img {width: 24%; margin: 0; }
.class_info .info_cnt {width: 76%; margin: 0; font-size: 0; }
.class_info li img { width: 64px; }
.class_info li h3 {line-height: 1;}
.class_info li .info_cnt h4 p {line-height: 1.4; margin-top: 0;}
.class_info li .info_cnt p { margin-top: 12px; }
.class_info li a { margin-top: 12px; color: #1357DF; transition: 0.3s; display: inline-block;}
.class_info li a:hover,
.class_info li a:hover i {text-decoration: underline; text-underline-offset: 4px;}
.class_info li:nth-child(3n) { margin-right: 0;}

.info_contact { width:100%; margin: 0 auto; }
.info_contact .table-st02-wrap { margin: 0; margin-top: 10px;}
.info_contact .table-st02 { margin-bottom: 20px;}

.test_result {width: 600px; margin: 20px auto;}
.test_result h5 {line-height: 1; font-size: 20px;}

.class-wrap .us-layout-cert-select img {border:none;}
.login-inner>li button.us-layout-cls-btn {border:0; width:27px; height:25px; margin-top:0;}
#us-keyboard-secure-frm {margin:0;}

.credit-txt-wrap {padding: 40px; border: 1px solid #c6cee2;}
.credit-txt-wrap dl.credit-txt:first-child {margin-bottom: 40px;}
.credit-txt-wrap dd{margin-top: 12px; padding-left: 24px; padding-right: 20px;}
.credit-order-wrap {  width: 1000px; margin: 5rem auto 0;}
.credit-order-wrap .credit-order-tit { 
    width: 14rem; 
    height: 8.5rem; 
    border: 1px solid #3B5DC0; 
    padding: 20px; 
    display: flex; 
    align-items: center;
    margin: 0 auto;
}
.credit-order {
    width: 780px; 
    margin: 3rem auto 0;}
.credit-order div>h4{ width: 180px; background-color: #EEEDE7; }
.credit-order div ul {background-color: rgba(238,237,231,0.6); width: 600px;}
.credit-order div ul li p::before {content: '· '; font-weight: bolder; }
.credit-order img {height: 12px;}
.credit-wrap a {width: 200px; margin-left: 4px; margin-right: 4px; font-weight: 400;}

.exam_done {position:fixed; top:50%; left:50%; transform:translate(-50%,-100%);}

/* 학자금 대출 안내 230127 */
.stt_loan.class-wrap .class-txt{padding: 0 50px; margin-top: 60px; word-break: keep-all;}
.stt_loan.class-wrap .class-txt:first-child{margin-top: 10px;}
.stt_loan.class-wrap h3, .stt_loan.class-wrap h3 i{font-size: 20px; color: #3B5DC0; margin-bottom: 10px;}
.stt_loan.class-wrap .class-txt p a{
    display: inline; 
    background-color: #1357DF16; 
    color: #1357DF; 
    padding: 2px 8px; 
    text-decoration: none; 
    transition: 0.1s;
    border-radius: 4px;
    word-break: keep-all;
    font-size: 15px;
    font-weight: 500;
}
.stt_loan.class-wrap .class-txt p a:hover{background-color: #1357DF; color: #fff;}
.stt_loan.class-wrap .class-txt .before-stt-loan01,
.stt_loan.class-wrap .class-txt .before-stt-loan02,
.stt_loan.class-wrap .class-txt .before-stt-loan03,
.stt_loan.class-wrap .class-txt .before-stt-loan04,
.stt_loan.class-wrap .class-txt .before-stt-loan07,
.stt_loan.class-wrap .class-txt .before-stt-loan08{position: relative; padding-left: 84px !important; margin-left: 28px;}
.stt_loan.class-wrap .class-txt .before-stt-loan05, 
.stt_loan.class-wrap .class-txt .before-stt-loan06{position: relative; padding-left: 48px !important; margin-left: 28px;}
.stt_loan.class-wrap .class-txt .before-stt-loan09{position: relative; padding-left: 2px !important; margin-left: 28px;}
.stt_loan.class-wrap .class-txt .before-stt-loan07{padding-left: 190px !important;}
.stt_loan.class-wrap .class-txt .before-stt-loan01::before{position: absolute; content: '- 나이 기준 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan02::before{position: absolute; content: '- 소득 기준 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan03::before{position: absolute; content: '- 성적 기준 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan04::before{position: absolute; content: '- 신용 기준 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan05::before{position: absolute; content: '- 한도 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan06::before{position: absolute; content: '- 이율 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan07::before{position: absolute; content: '- 본 교육원 수강신청 기간 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan08::before{position: absolute; content: '- 대출 실행 : '; left: -08px;}
.stt_loan.class-wrap .class-txt .before-stt-loan09::before{position: absolute; content: '- '; left: -08px;}
.stt_loan.class-wrap .class-txt-subtxt { margin: 16px auto 80px; padding: 30px 40px; background-color: #3B5DC009; border-radius: 12px;}
.stt_loan.class-wrap .class-txt-subtxt h4{font-size: 1.2rem;}
.stt_loan.class-wrap .class-txt-subtxt p{margin-left: 0; padding: 0 !important;}

.scrollbar .class-wrap .class-txt-wrap {border: none;}
.scrollbar .class-wrap .class-txt-wrap .class-txt{padding: 0;}
.scrollbar .class-wrap .class-txt-wrap .class-txt-subtxt {margin-bottom: 0;}

.slct_loan select{border: none; border-bottom: 2px solid #3B5DC0; font-size: 20px; background-position: 100% center; text-align: center; width: 172px; box-sizing: border-box; padding-right: 6px;}
.slct_loan select option{text-align: center; margin-left: 0;}


/* Spaces*/
.mgt-xxl{margin-top:96px;}
.mgt-xl{margin-top:64px;}
.mgt-lg{margin-top:48px;}
.mgt-md{margin-top:32px;}
.mgt-sm{margin-top:24px;}
.mgt-xs{margin-top:16px;}
.mgt-xxs{margin-top:8px;}

.mgl-xxl{margin-left:96px;}
.mgl-xl{margin-left:64px;}
.mgl-lg{margin-left:48px;}
.mgl-md{margin-left:32px;}
.mgl-sm{margin-left:24px;}
.mgl-xs{margin-left:16px;}
.mgl-xxs{margin-left:8px;}

.mgr-xxl{margin-right:96px;}
.mgr-xl{margin-right:64px;}
.mgr-lg{margin-right:48px;}
.mgr-md{margin-right:32px;}
.mgr-sm{margin-right:24px;}
.mgr-xs{margin-right:16px;}
.mgr-xxs{margin-right:8px;}

.mgb-xxl{margin-bottom:96px;}
.mgb-xl{margin-bottom:64px;}
.mgb-lg{margin-bottom:48px;}
.mgb-md{margin-bottom:32px;}
.mgb-sm{margin-bottom:24px;}
.mgb-xs{margin-bottom:16px;}
.mgb-xxs{margin-bottom:8px;}

.pdt-xxl{margin-top:96px;}
.pdt-xl{margin-top:64px;}
.pdt-lg{margin-top:48px;}
.pdt-md{margin-top:32px;}
.pdt-sm{margin-top:24px;}
.pdt-xs{margin-top:16px;}
.pdt-xxs{margin-top:8px;}

.pdl-xxl{margin-left:96px;}
.pdl-xl{margin-left:64px;}
.pdl-lg{margin-left:48px;}
.pdl-md{margin-left:32px;}
.pdl-sm{margin-left:24px;}
.pdl-xs{margin-left:16px;}
.pdl-xxs{margin-left:8px;}

.pdr-xxl{margin-right:96px;}
.pdr-xl{margin-right:64px;}
.pdr-lg{margin-right:48px;}
.pdr-md{margin-right:32px;}
.pdr-sm{margin-right:24px;}
.pdr-xs{margin-right:16px;}
.pdr-xxs{margin-right:8px;}

.pdb-xxl{margin-bottom:96px;}
.pdb-xl{margin-bottom:64px;}
.pdb-lg{margin-bottom:48px;}
.pdb-md{margin-bottom:32px;}
.pdb-sm{margin-bottom:24px;}
.pdb-xs{margin-bottom:16px;}
.pdb-xxs{margin-bottom:8px;}

.ot_dl_wrap{ display: flex;  justify-self: start; padding-bottom: 12px;  }
.ot_dl{
    margin: 0; 
    display: flex; 
    align-items: center;
    width: 50%;
    background-color: #0F852E12;
    padding: 40px 20px;
    flex-wrap: wrap;
    text-align: center;
}
.ot_dl h4{width: 100%;  font-weight: 500;   color: #0F852E;}
.ot_dl a{width: 100%; margin-top: 20px; background-color: #0F852E; color: #fff; width: auto; padding: 8px 16px;}
.ot_dl:first-child{margin-right: 12px;}
.ot_dl a i{color: #fff;}
.classroom-cnt-bn{padding:40px;}

@media screen and (max-width:1440px) {
    h1 { font-size: 40px; font-weight: bold; }
    h2 { font-size: 36px; font-weight: bold; }
    h3 { font-size: 20px; font-weight: 500; }
    h4 { font-size: 18px; font-weight: 500; }
    h5 { font-size: 18px; font-weight: 500;}
	.fz32 {font-size: 24px; font-weight: bold;}
    .fz18-semibold { font-weight: 500; font-size: 16px;}
    .fz18 { font-size: 16px; font-weight: normal; }
    .fz16 { font-size: 14px; }
    .fz16-semibold {font-size: 14px; font-weight: 500; }
    .fz14 { font-size: 14px; line-height: 19px; }
    .fz14-semibold { font-size: 14px; font-weight: 500; line-height: 19px; }

    .mt100 { margin-top: 80px;}
    .mt50 { margin-top: 40px !important;}
    .mb100 { margin-bottom: 80px;}
    .mb50 { margin-bottom: 40px; }
    .mb30 { margin-bottom: 30px;}

    .p50 { padding: 40px;}

    header { width: 100%;}
    .top-wrap {width: 90%; }
    .top-ul li { font-size: 14px;}
    .top-ul li:first-child { margin: 0;}
    .top-ul li:hover a::after { font-size: 20px;}
    .header-logo { width: 100%;  margin: 0 auto; padding: 0; }
    header>nav>ul { width: 90%; margin: 0 auto; }

    /* 서브메뉴 lnb */
    ol.lnb { width: 160px;  left: -16px; }

    /* 스크롤 시 헤더 고정 */
    .header-fixed .top-wrap { width: 90%; }
    .header-fixed .top-ul li { height: 50px; line-height: 50px; }

    /* 전체 메뉴 모달 */
    .total-menu-inner { width: 90%; }
    .total-menu-ul { width: 20%; padding: 0 10px; }

    #btn-close i { font-size: 28px; }
    .container { width: 90%; }

    footer { margin: 0 auto 40px; }
    .footer-top {width: 90%; }
    .footer-bottom { width: 90%; margin-top: 20px; }
    .footer-bottom .footer-bottom-wrap { width: 100%;}
    .footer-bottom-wrap .footer-bottom-cnt { width: 800px;}

    .class_info {margin-top: 20px;}
    .class_info li { width: 32%; margin-right: 2%; margin-top: 20px; padding: 40px 20px; height: 200px;}
    .class_info li:nth-child(3n) { margin-right: 0;}
    .class_info .info_img {width: 24%; }
    .class_info .info_cnt {width: 76%; }
    .class_info li img { width: 56px; }
    .class_info li .info_cnt p { margin-top: 8px; }
    .class_info li a { margin-top: 8px; }

    /* 학자금 대출 안내 230127 */
    .stt_loan.class-wrap h3, .stt_loan.class-wrap h3 i{font-size: 18px; color: #3B5DC0; margin-bottom: 10px;}
    .stt_loan.class-wrap .class-txt .before-stt-loan01,
    .stt_loan.class-wrap .class-txt .before-stt-loan02,
    .stt_loan.class-wrap .class-txt .before-stt-loan03,
    .stt_loan.class-wrap .class-txt .before-stt-loan04,
    .stt_loan.class-wrap .class-txt .before-stt-loan07,
    .stt_loan.class-wrap .class-txt .before-stt-loan08{padding-left: 76px !important;}
    .stt_loan.class-wrap .class-txt .before-stt-loan05, 
    .stt_loan.class-wrap .class-txt .before-stt-loan06{padding-left: 44px !important;}
    .stt_loan.class-wrap .class-txt .before-stt-loan09{padding-left: 0px !important;}
	.stt_loan.class-wrap .class-txt .before-stt-loan07{padding-left: 168px !important;}
    }

@media screen and (max-width:1100px) {

/* Spaces*/
.mgt-xxl{margin-top:80px;}
.mgt-xl{margin-top:56px;}
.mgt-lg{margin-top:40px;}
.mgt-md{margin-top:24px;}
.mgt-sm{margin-top:16px;}
.mgt-xs{margin-top:8px;}
.mgt-xxs{margin-top:4px;}

.mgl-xxl{margin-left:80px;}
.mgl-xl{margin-left:56px;}
.mgl-lg{margin-left:40px;}
.mgl-md{margin-left:24px;}
.mgl-sm{margin-left:16px;}
.mgl-xs{margin-left:8px;}
.mgl-xxs{margin-left:4px;}

.mgr-xxl{margin-right:80px;}
.mgr-xl{margin-right:56px;}
.mgr-lg{margin-right:40px;}
.mgr-md{margin-right:24px;}
.mgr-sm{margin-right:16px;}
.mgr-xs{margin-right:8px;}
.mgr-xxs{margin-right:8px;}

.mgb-xxl{margin-bottom:80px;}
.mgb-xl{margin-bottom:56px;}
.mgb-lg{margin-bottom:40px;}
.mgb-md{margin-bottom:24px;}
.mgb-sm{margin-bottom:16px;}
.mgb-xs{margin-bottom:8px;}
.mgb-xxs{margin-bottom:4px;}

.pdt-xxl{margin-top:80px;}
.pdt-xl{margin-top:56px;}
.pdt-lg{margin-top:40px;}
.pdt-md{margin-top:24px;}
.pdt-sm{margin-top:16px;}
.pdt-xs{margin-top:8px;}
.pdt-xxs{margin-top:4px;}

.pdl-xxl{margin-left:80px;}
.pdl-xl{margin-left:56px;}
.pdl-lg{margin-left:40px;}
.pdl-md{margin-left:24px;}
.pdl-sm{margin-left:16px;}
.pdl-xs{margin-left:8px;}
.pdl-xxs{margin-left:4px;}

.pdr-xxl{margin-right:80px;}
.pdr-xl{margin-right:56px;}
.pdr-lg{margin-right:40px;}
.pdr-md{margin-right:24px;}
.pdr-sm{margin-right:16px;}
.pdr-xs{margin-right:8px;}
.pdr-xxs{margin-right:4px;}

.pdb-xxl{margin-bottom:80px;}
.pdb-xl{margin-bottom:56px;}
.pdb-lg{margin-bottom:40px;}
.pdb-md{margin-bottom:24px;}
.pdb-sm{margin-bottom:16px;}
.pdb-xs{margin-bottom:8px;}
.pdb-xxs{margin-bottom:4px;}

    h1 { font-size: 30px; font-weight: bold; }
    h2 { font-size: 24px ; font-weight: bold; line-height: 33px;    }
    h3 { font-size: 20px; font-weight: 500; line-height: 28px;}
    h4 { font-size: 16px; font-weight: 500; line-height: 22px;}
    h5 { font-size: 14px; font-weight: 500; line-height: 20px; }
	.fz32 { font-size: 20px; font-weight: bold; line-height: 33px; }
    .fz20 {font-size: 16px;}
    .fz18-semibold { font-weight: 500; font-size: 14px; line-height: 20px;  }
    .fz18 { font-size: 14px; line-height: 20px; }
    .fz16 { font-size: 14px; line-height: 20px;    }
    .fz16-semibold {font-size: 14px;  font-weight: 500; line-height: 20px;  }
    .fz14 { font-size: 12px; line-height: 17px;}
    .fz14-semibold { font-size: 12px; font-weight: 500; line-height: 17px;  }
    .mt100 { margin-top: 40px; }
    .mt50 { margin-top: 30px !important; }
    .mb100 { margin-bottom: 40px; }
    .mb50 { margin-bottom: 20px; }
    .h400 { display: flex; flex-direction: column; align-items: baseline; height: 400px; margin: 30% auto; padding: 0;}
    .tablet-only{display:block;}
	
	header .top { display: none; }
    .top-wrap {
        height: 60px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        align-items: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        justify-content: flex-start;
    }
    .header-logo { position: static; width: 100%; display: flex; flex-direction: row-reverse; justify-content: flex-end; margin: 0; align-items: center; }
    .header-logo>img { position: static; margin: 0; height: 30px; margin-left: 10px; }
    .header-logo h1 { width: 190px; text-align: left; margin: 0; height: 30px; }
    .header-logo h1 img { height: 30px; vertical-align: top;}
    header>nav { display: none;}

   /* 스크롤 시 헤더 고정 */
    .header-fixed .top-wrap { width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap-reverse; justify-content: space-between; height: 50px; align-items: center; }
    .header-fixed .header-logo { margin: 0; width: 50%; height: 50px; }
    .header-fixed .header-logo>img { display: block;  }
    .header-fixed .header-logo h1 a { margin: 0; text-align: left; height: 30px; }
    .header-fixed .header-logo h1 a img { margin: 0; padding: 0; vertical-align: top; height: 30px;  }

    /* 헴버거 메뉴 */
    .m-ham { display: block;  margin: 0; }
    .m-menu {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 9998;
        top: 0;
        left: 0;
        transform: translate(0px, 0px);
        overflow-y: visible;
    }
    .m-menu-inner {
        width: 288px;
        background-color: #fff;
        position: absolute;
        height: auto;
        max-height: 100%;
        right: 0;
        top: 0px;
        bottom: 0;
        padding-top: 20px;
        padding-bottom: 30px;
        box-sizing: content-box;
        overflow-y: scroll;
    }
    .m-menu-inner #m-menu-close { margin-bottom: 20px;  margin-left: 248px; width: 40px; cursor: pointer; }
    #m-menu-close i { font-size: 24px; }
    .m-menu-inner .m-login-btn { width: 248px;  height: 40px; line-height: 40px; }
    .m-menu-inner .m-top-menu { margin: 0 auto;  width: 248px; margin-top: 20px; }
    .m-top-menu .m-top-menu-inner { width: 248px; margin: 0 auto; display: flex; justify-content: space-around; flex-direction: row; padding: 0; }
    .m-top-menu-inner p { margin: 0; padding: 0; font-size: 14px; font-weight: 500; }

    nav.m-nav {width: calc(100% - 40px); margin: 0 auto; margin-top: 20px; border-top: 1px solid #c6cee2; border-bottom: none; }
    nav.m-nav ul { margin: 0; }
    nav.m-nav ul>li.m-gnb-item { margin: 0; width: 248px; padding-left: 20px; margin-top: 20px; }
    nav.m-nav ul li.m-gnb-item:hover { background-color: #fff !important; border: none !important; margin-bottom: 10px; }
    nav.m-nav ol { display: none; margin: 0 auto; padding: 0; width: 100%; background-color: #F6F8FC; margin-top: 10px; padding-top: 20px; }
    nav.m-nav ol li { padding-left: 20px; line-height: 20px; padding-bottom: 20px; position: relative; }
    nav.m-nav ul>li.m-gnb-item:nth-child(9) { display: inline-block; margin-bottom: 20px; }
    nav.m-nav ul>#lnb-5 { margin-top: 0; }

    /* footer */
    footer { margin-top: 0; padding-top: 40px; border-top: 1px solid #c6cee2;}
    .footer-top { flex-direction: column-reverse; flex-wrap: wrap; }
    .footer-top .footer-top-info { width: 100%;}
    .footer-top .footer-top-sns { width: 100%; justify-content: flex-start; margin-bottom: 20px;}
    .footer-top-sns a img { margin-left: 0;}
    .footer-top-sns a p { margin-right: 20px; }
    .footer-bottom-wrap .footer-bottom-cnt { width: 90%;}

    /* ---------- 빠른 상담 ---------- */
    .councel-form { position: fixed; margin: 0; padding: 0; right: 0; left: auto; bottom: -336px; transform: none; transition: linear .3s; }
    .councel-form.active { right: 0; bottom: 0; left: auto;}
    .councel-form .btn-toggle:hover { background-color: #1b1c1e; }
    .councel-form .btn-toggle {
        margin: 0;
        width: 140px;
        height: 40px;
        vertical-align: middle;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        position: absolute;
        left: auto;
        right: 0px !important;
        top: -40px !important;
        padding: 17px;
        padding-top: 10px;
        font-size: 16px !important;
        cursor: pointer;
    }
    .councel-form .btn-toggle::after { content: url(../images/img/top-to-bracket.png); height: 14px;  width: 14px; }
    .councel-form.active .btn-toggle::after { content: url(../images/img/bottom-from-bracket.png); }
    .councel-form.active .btn-toggle:hover { background-color: #1b1c1e; }
    .more-privacy { width: 80%; padding: 40px 0; }
    .more-privacy-cnt { width: 85%; }
    .more-privacy-cnt:last-of-type p { margin: 0;}
    .container.classroom-menu-wrap { width: 100vw; margin-left: calc(-50vw + 50%); overflow: auto; -ms-overflow-style: none; scrollbar-width: none; background-image: none; }
    .classroom-menu-wrap::-webkit-scrollbar { display: none;}
    ul.classroom-menu {
        width: 100%;
        min-width: 900px;
        border-left: none;
        border-right: none;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid #c6cee2;
        border-bottom: 1px solid #c6cee2;
        line-height: 59px;
    }
    .classroom-menu-wrap { border-radius: 0; }
    .classroom-menu-wrap::after { content: '옆으로 밀기 →'; position: absolute; right: 10px; top: 160px; z-index: 1000;	font-size:14px; color: #1357DF; }
    .classroom-cnt-top { flex-direction: column-reverse; justify-content: flex-start; margin: 0; }
    .classroom-cnt-top p.fz20 { margin: 0; margin-top: 40px; text-align: left; width: 100%; }
    .cls-slct-wrap { width: 100%; margin: 0; justify-content: flex-start; }
    .cls-slct-wrap label select#cls-slct { width: 290px;}
    .cls-slct-wrap p { margin: 0; margin-right: 5px; display: none; }
    .cls-slct-wrap a { margin: 0; }
    .cls-slct-wrap label { margin: 0; margin-right: 5px; }

    /* 학습방 메뉴 hover */
    ul.classroom-menu li a:hover { color: #1b1c1e; border-top: none; }
    .classroom-menu-tit { display: none; }

    .class_info { margin-top: 20px; justify-content: space-between; }
    .class_info li { width: 49%; margin-right: 0; margin-top: 20px; padding: 28px 20px; height: 200px; }
    .class_info .info_img {width: 24%; }
    .class_info .info_cnt {width: 76%; }
    .class_info li img { width: 80%; }
    .class_info li .info_cnt p { margin-top: 8px; }
    .class_info li a { margin-top: 8px; }
    .class_info li:hover { outline: 0; }

    .info_contact .table-st02 { margin-top: 0;}

    .credit-order-wrap {width: 100%; display: block;}
    .credit-order-wrap .credit-order-tit { width: 100%; height: auto; border: none; padding: 0; margin-top: 40px; }
    .credit-order-wrap .credit-order { width: 100%; margin-top: 20px;}
	.test_result dt, .test_result dd, .test_result span, .test_result p, .test_result div, .test_result li {font-size:16px !important;} 
    
    /* 학자금 대출 안내 230127 */
    .stt_loan.class-wrap h3, .stt_loan.class-wrap h3 i{font-size: 18px; margin-bottom: 8px;}
    .stt_loan.class-wrap .class-txt .before-stt-loan01,
    .stt_loan.class-wrap .class-txt .before-stt-loan02,
    .stt_loan.class-wrap .class-txt .before-stt-loan03,
    .stt_loan.class-wrap .class-txt .before-stt-loan04,
    .stt_loan.class-wrap .class-txt .before-stt-loan07,
    .stt_loan.class-wrap .class-txt .before-stt-loan08{padding-left: 64px !important;}
    .stt_loan.class-wrap .class-txt .before-stt-loan05, 
    .stt_loan.class-wrap .class-txt .before-stt-loan06{padding-left: 36px !important;}
    .stt_loan.class-wrap .class-txt .before-stt-loan09{padding-left: 0 !important;}
    .stt_loan.class-wrap .class-txt-subtxt { margin: 12px auto 40px; padding: 24px;}
    .stt_loan.class-wrap .class-txt-subtxt h4{font-size: 1.1rem;}    
    .stt_loan.class-wrap .class-txt .before-stt-loan07{padding-left: 146px !important;}

	.councel-form.active .councel-form-cnt{display:block;}
}


@media screen and (max-width:639px) {

/* Spaces*/
.mgt-xxl{margin-top:64px;}
.mgt-xl{margin-top:48px;}
.mgt-lg{margin-top:32px;}

.mgl-xxl{margin-left:64px;}
.mgl-xl{margin-left:48px;}
.mgl-lg{margin-left:32px;}

.mgr-xxl{margin-right:64px;}
.mgr-xl{margin-right:48px;}
.mgr-lg{margin-right:32px;}

.mgb-xxl{margin-bottom:64px;}
.mgb-xl{margin-bottom:48px;}
.mgb-lg{margin-bottom:32px;}

.pdt-xxl{margin-top:64px;}
.pdt-xl{margin-top:48px;}
.pdt-lg{margin-top:32px;}

.pdl-xxl{margin-left:64px;}
.pdl-xl{margin-left:48px;}
.pdl-lg{margin-left:32px;}

.pdr-xxl{margin-right:64px;}
.pdr-xl{margin-right:48px;}
.pdr-lg{margin-right:32px;}

.pdb-xxl{margin-bottom:64px;}
.pdb-xl{margin-bottom:48px;}
.pdb-lg{margin-bottom:32px;}

    .mobile-only { display: block;  }
    table.mobile-only { display: table; }
    .m-db { display: block; }

    /* 모바일에서 사라지는 레이아웃 */
    .mobile-none { display: none !important; margin: 0; padding: 0; border: none; }

    /* 모바일용 클래스 */
    .m-w100p { width: 100% !important; }
    .m-w50p { width: 50%; }
    .m-t-center { text-align: center; }
    .m-t-right { text-align: right; }
    .m-t-left {  text-align: left; }
    .m-dn { display: none !important; }
    .m-mt20 { margin-top: 20px !important;  }

    /* 마진 패딩 반응형 */
    .mt25 { margin-top: 10px; }
    .mt10 { margin-top: 5px;  }
    .mb20 { margin-bottom: 10px;  }
    .p50 { padding: 20px; }

    /* 헤더 모바일 */
    .top-wrap { height: 60px; }
    .header-logo>img { height: 20px;  margin-left: 10px;}
    .header-logo h1 { width: 120px; text-align: left; margin: 0;height: 18px; }
    .header-logo h1 img { height: 20px; vertical-align: top;}
    .header-fixed .header-logo h1 a img { height: 20px;}

    /* footer */
    footer { padding-top: 20px; }
    .footer-top .footer-top-sns { margin-bottom: 20px; }
    .footer-top-sns a img { height: 14px; }
    .footer-top-sns a p { margin-right: 20px; font-size: 14px; }
    .footer-top .footer-top-info { margin: 0; display: flex; justify-content: space-between; }
    .footer-top .footer-top-info a { margin: 0; font-size: 12px; }
    .footer-bottom .footer-bottom-wrap { flex-direction: column; }
    .footer-bottom-wrap .footer-bottom-cnt { width: 100%; }
    .footer-bottom-cnt p { font-size: 12px;  margin-right: 10px; }
    .footer-logo-wrap { width: 100%; margin: 0; margin-top: 10px;  }
    .footer-logo { margin: 0; text-align: left; height: 30px; }

    /* ---------- 빠른 상담 ---------- */
    .councel-form { position: fixed; margin: 0; padding: 0; right: auto; bottom: -336px; left: 50%; transform: translateX(-50%); transition: linear .3s; }
    .councel-form .btn-toggle::after {  content: url(../images/img/top-to-bracket.png);}
    .councel-form.active { right: auto; left: 50%; transform: translateX(-50%); bottom: 0; }
    .councel-form.active .btn-toggle::after { content: url(../images/img/bottom-from-bracket.png); }

    /* 팝업 */
    #popup01 { left: 50% !important; bottom: unset !important; top: 50%; transform: translate(-50%, -50%) !important; z-index: 9999 !important; }

    .cls-slct-wrap label { width: 85%; margin-right: 1%; }
    .cls-slct-wrap label select#cls-slct { width: 100%; background-position-x: 98%; }
    .cls-slct-wrap a { width: 14%; }

    /* 학습방 */
    .classroom-cnt-bn { padding: 10px; }
    .classroom-cnt-bn h5 { display: flex; flex-direction: column; padding: 15px 0; }
    .classroom-cnt-bn h5 span:first-child,
    .classroom-cnt-bn h5 span:nth-child(3) { margin-bottom: 10px; }
    .classroom-cnt-bn h5 br { display: none; }
    #current:focus-visible { outline: none !important; }

    /* 2200714 */
    .class_info li { width: 100%; height: 140px; margin-top: 20px;  padding: 20px 16px; }
    .class_info li img { width: 76%; }
    .m-btn-toggle { position: fixed; bottom: 0; right: 5%; background: #1b1c1e; border-top-right-radius: 10px; border-top-left-radius: 10px; width: 136px; font-size: 16px; }
    .m-btn-toggle::after { content: url(/images/img/bottom-from-bracket.png); height: 14px; width: 14px; padding-left: 8px; }
    .councel-form { right: 0; left: 0; transform: none; bottom: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; }
    .councel-form .btn-toggle { display: none; }
    .councel-form form { margin: 0 auto; padding: 20px 0 0 0; width: 90%; background: #f6f7f9; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .councel-form-x {
        position: absolute;
        right: 0;
        top: -41px;
        width: 80px;
        color: #fff;
        background-color: #1b1c1e;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border: 1px solid #f6f7f9;
        box-sizing: border-box;
    }
    .councel-form-cnt { margin: 0 auto 10px; width: 90%; }
    .councel-form label { display: block; }
    #councel-name, #councel-phone, #councel-select { width: 100%; }
    .councel-form .btn-councel { width: 100%; }

    .test_result{width: 90%;}
    .test_result h5{font-size: 18px;}
	.info_contact_wrap{padding: 40px 0;}
	.info_contact h3 {text-align: center !important; margin-bottom:12px;}

    .credit-txt-wrap {padding: 0; border: none;}
    .credit-order>div {display: block;}
    .credit-order>div>h4 {width: 100%; height: 48px; line-height: 48px;}
    .credit-order>div>ul {width: 100%; display: block;}
    .credit-order>div>ul li {padding: 0 !important;}
    .credit-order>div>ul li p {margin:0 0 4px 0!important;}
    .credit-wrap a {width: 49%; margin: 0;}
    .credit-wrap a:first-of-type {margin-right: 2%;}

    /* 학자금 대출 안내 230127 */
    .stt_loan.class-wrap .class-txt-wrap {border: none;}
    .stt_loan.class-wrap .class-txt{padding: 0 !important; margin-top: 40px !important;}
    .stt_loan.class-wrap .class-txt h4{padding: 0; margin-top: 10px;}
    .stt_loan.class-wrap .class-txt p:last-child{padding-bottom: 0;}
    .stt_loan.class-wrap h3, .stt_loan.class-wrap h3 i{font-size: 16px; color: #3B5DC0;}
    .stt_loan.class-wrap .class-txt p.before-01::before,
    .stt_loan.class-wrap .class-txt p.before-02::before,
    .stt_loan.class-wrap .class-txt p.before-03::before,
    .stt_loan.class-wrap .class-txt p.before-04::before,
    .stt_loan.class-wrap .class-txt p.before-05::before,
    .stt_loan.class-wrap .class-txt p.before-06::before{left: 0;}
    .stt_loan.class-wrap .class-txt p.before-01,
    .stt_loan.class-wrap .class-txt p.before-02,
    .stt_loan.class-wrap .class-txt p.before-03,
    .stt_loan.class-wrap .class-txt p.before-04,
    .stt_loan.class-wrap .class-txt p.before-05,
    .stt_loan.class-wrap .class-txt p.before-06{padding-left: 16px; margin-left: 0;}
    .stt_loan.class-wrap .class-txt p a{display: block;width: 48px; text-align: center; margin:4px 0 12px;padding: 2px 4px; font-size: 12px;font-weight: 400;}
    .stt_loan.class-wrap .class-txt .before-stt-loan01,
    .stt_loan.class-wrap .class-txt .before-stt-loan02,
    .stt_loan.class-wrap .class-txt .before-stt-loan03,
    .stt_loan.class-wrap .class-txt .before-stt-loan04,
    .stt_loan.class-wrap .class-txt .before-stt-loan07,
    .stt_loan.class-wrap .class-txt .before-stt-loan08{position: relative; padding-left: 64px !important; margin-left: 18px;}
    .stt_loan.class-wrap .class-txt .before-stt-loan05, 
    .stt_loan.class-wrap .class-txt .before-stt-loan06{position: relative; padding-left: 36px !important; margin-left: 18px;}
    .stt_loan.class-wrap .class-txt .before-stt-loan09{position: relative; padding-left: 0px !important; margin-left: 18px;}
    .stt_loan.class-wrap .class-txt .before-stt-loan01::before{position: absolute; content: '- 나이 기준 : '; left: -08px;}
    .stt_loan.class-wrap .class-txt-subtxt { margin: 12px auto 40px; padding: 20px; background-color: #3B5DC010;}
    .stt_loan.class-wrap .class-txt-subtxt h4{font-size: 1rem; margin-top: 0; margin-bottom: 8px;}    
    .stt_loan.class-wrap .class-txt-subtxt p.before-cnt{margin-left: 10px;}
	.stt_loan.class-wrap .class-txt .before-stt-loan07 { padding-left: 146px !important;}

	.ot_dl_wrap{
        display: flex; 
        justify-self: start;
         padding-bottom: 12px; 
         flex-wrap: wrap;
        }
    .ot_dl{
        margin: 0; 
        display: flex; 
        align-items: center;
        width: 100%;
        background-color: #0F852E12;
        padding: 40px 20px;
        flex-wrap: wrap;
        text-align: center;
    }
    .ot_dl h4{width: 100%;  font-weight: 500;   color: #0F852E;}
    .ot_dl a{width: 100%; margin-top: 20px; background-color: #0F852E; color: #fff; width: auto; padding: 8px 16px;}
    .ot_dl:first-child{margin-right: 0; margin-bottom: 12px;}
    .ot_dl a i{color: #fff;}
    .classroom-cnt-bn {height: 158px; padding: 20px;}
    .classroom-cnt-bn br{display: none;}

}

/* ===== Size ===== */
.wpi100	{ width:100% !important; }
.wp100	{ width:100% }
.wp99	{ width:99% }
.wp98	{ width:98% }
.wp95	{ width:95% }
.wp85	{ width:85% }

.wx05	{ width:5px }
.wx10	{ width:10px }
.wx20	{ width:20px }
.wx30	{ width:30px }
.wxi30	{ width:30px !important; }
.wx40	{ width:40px }
.wx50	{ width:50px }
.wxi50	{ width:50px !important; }
.wx60	{ width:60px }
.wx70	{ width:70px }
.wx80	{ width:80px }
.wx90	{ width:90px }
.wx100	{ width:100px }
.wxi100	{ width:100px !important; }
.wx110	{ width:110px }
.wx120	{ width:120px }
.wx130	{ width:130px }
.wx140	{ width:140px }
.wx150	{ width:150px }
.wxi150	{ width:150px !important; }
.wx160	{ width:160px }
.wx170	{ width:170px }
.wx180	{ width:180px }
.wx190	{ width:190px }
.wx200	{ width:200px }
.wxi200	{ width:200px !important; }
.wx210	{ width:210px }
.wx220	{ width:220px }
.wx230	{ width:230px }
.wx240	{ width:240px }
.wx250	{ width:250px }
.wxi250	{ width:250px !important; }
.wx260	{ width:260px }
.wx270	{ width:270px }
.wx280	{ width:280px }
.wx290	{ width:290px }
.wx300	{ width:300px }
.wxi300	{ width:300px !important; }
.wx300	{ width:310px }
.wx300	{ width:320px }
.wx300	{ width:330px }
.wx300	{ width:340px }
.wx350	{ width:350px }
.wx400	{ width:400px }
.wx450	{ width:450px }
.wx500	{ width:500px }

.hx05	{ height:5px }
.hx10	{ height:10px }
.hx15	{ height:15px }
.hx20	{ height:20px }
.hx23	{ height:23px }
.hx25	{ height:25px }
.hx30	{ height:30px }
.hx35	{ height:35px }
.hx40	{ height:40px }
.hx45	{ height:45px }
.hx50	{ height:50px }
.hx60	{ height:60px }
.hx70	{ height:70px }
.hx100	{ height:100px }
.hx110	{ height:110px }
.hx120	{ height:120px }
.hx130	{ height:130px }
.hx140	{ height:140px }
.hx150	{ height:150px }
.hx200	{ height:200px }
.hx250	{ height:250px }
.hx300	{ height:300px }
.hx350	{ height:350px }
.hx400	{ height:400px }
.hx450	{ height:450px }
.hx650	{ height:650px }

/* ===== Font Size ===== */
.ft09 { font-size:9px !important; }
.ft10 { font-size:10px !important; }
.ft11 { font-size:11px !important; }
.ft12 { font-size:12px !important; }
.ft13 { font-size:13px !important; }
.ft14 { font-size:14px !important; }
.ft15 { font-size:15px !important; }
.ft16 { font-size:16px !important; }
.ft17 { font-size:17px !important; }
.ft18 { font-size:18px !important; }
.ft19 { font-size:19px !important; }
.ft20 { font-size:20px !important; }

/* ===== Padding ===== */
.pd00 { padding:0px !important; }
.pd01 { padding:1px !important; }
.pd02 { padding:2px !important; }
.pd03 { padding:3px !important; }
.pd04 { padding:4px !important; }
.pd05 { padding:5px !important; }
.pd06 { padding:6px !important; }
.pd07 { padding:7px !important; }
.pd08 { padding:8px !important; }
.pd09 { padding:9px !important; }
.pd10 { padding:10px !important; }
.pd15 { padding:15px !important; }
.pd20 { padding:20px !important; }
.pd25 { padding:25px !important; }
.pd30 { padding:30px !important; }
.pd40 { padding:40px !important; }
.pd50 { padding:50px !important; }

.pdt00 { padding-top:0px !important; }
.pdt01 { padding-top:1px !important; }
.pdt02 { padding-top:2px !important; }
.pdt03 { padding-top:3px !important; }
.pdt04 { padding-top:4px !important; }
.pdt05 { padding-top:5px !important; }
.pdt06 { padding-top:6px !important; }
.pdt07 { padding-top:7px !important; }
.pdt08 { padding-top:8px !important; }
.pdt09 { padding-top:9px !important; }
.pdt10 { padding-top:10px !important; }
.pdt15 { padding-top:15px !important; }
.pdt20 { padding-top:20px !important; }
.pdt25 { padding-top:25px !important; }
.pdt30 { padding-top:30px !important; }
.pdt40 { padding-top:40px !important; }
.pdt50 { padding-top:50px !important; }

.pdr00 { padding-right:0px !important; }
.pdr01 { padding-right:1px !important; }
.pdr02 { padding-right:2px !important; }
.pdr03 { padding-right:3px !important; }
.pdr04 { padding-right:4px !important; }
.pdr05 { padding-right:5px !important; }
.pdr06 { padding-right:6px !important; }
.pdr07 { padding-right:7px !important; }
.pdr08 { padding-right:8px !important; }
.pdr09 { padding-right:9px !important; }
.pdr10 { padding-right:10px !important; }
.pdr15 { padding-right:15px !important; }
.pdr20 { padding-right:20px !important; }
.pdr25 { padding-right:25px !important; }
.pdr30 { padding-right:30px !important; }
.pdr40 { padding-right:40px !important; }
.pdr50 { padding-right:50px !important; }

.pdb00 { padding-bottom:0px !important; }
.pdb01 { padding-bottom:1px !important; }
.pdb02 { padding-bottom:2px !important; }
.pdb03 { padding-bottom:3px !important; }
.pdb04 { padding-bottom:4px !important; }
.pdb05 { padding-bottom:5px !important; }
.pdb06 { padding-bottom:6px !important; }
.pdb07 { padding-bottom:7px !important; }
.pdb08 { padding-bottom:8px !important; }
.pdb09 { padding-bottom:9px !important; }
.pdb10 { padding-bottom:10px !important; }
.pdb15 { padding-bottom:15px !important; }
.pdb20 { padding-bottom:20px !important; }
.pdb25 { padding-bottom:25px !important; }
.pdb30 { padding-bottom:30px !important; }
.pdb40 { padding-bottom:40px !important; }
.pdb50 { padding-bottom:50px !important; }

.pdl00 { padding-left:0px !important; }
.pdl01 { padding-left:1px !important; }
.pdl02 { padding-left:2px !important; }
.pdl03 { padding-left:3px !important; }
.pdl04 { padding-left:4px !important; }
.pdl05 { padding-left:5px !important; }
.pdl06 { padding-left:6px !important; }
.pdl07 { padding-left:7px !important; }
.pdl08 { padding-left:8px !important; }
.pdl09 { padding-left:9px !important; }
.pdl10 { padding-left:10px !important; }
.pdl15 { padding-left:15px !important; }
.pdl20 { padding-left:20px !important; }
.pdl25 { padding-left:25px !important; }
.pdl30 { padding-left:30px !important; }
.pdl40 { padding-left:40px !important; }
.pdl50 { padding-left:50px !important; }

/* ===== Margin ===== */
.mg00 { margin:0px !important; }
.mg01 { margin:1px !important; }
.mg02 { margin:2px !important; }
.mg03 { margin:3px !important; }
.mg04 { margin:4px !important; }
.mg05 { margin:5px !important; }
.mg06 { margin:6px !important; }
.mg07 { margin:7px !important; }
.mg08 { margin:8px !important; }
.mg09 { margin:9px !important; }
.mg10 { margin:10px !important; }
.mg15 { margin:15px !important; }
.mg20 { margin:20px !important; }
.mg25 { margin:25px !important; }
.mg30 { margin:30px !important; }
.mg40 { margin:40px !important; }
.mg50 { margin:50px !important; }

.mgt00 { margin-top:0px !important; }
.mgt01 { margin-top:1px !important; }
.mgt02 { margin-top:2px !important; }
.mgt03 { margin-top:3px !important; }
.mgt04 { margin-top:4px !important; }
.mgt05 { margin-top:5px !important; }
.mgt06 { margin-top:6px !important; }
.mgt07 { margin-top:7px !important; }
.mgt08 { margin-top:8px !important; }
.mgt09 { margin-top:9px !important; }
.mgt10 { margin-top:10px !important; }
.mgt15 { margin-top:15px !important; }
.mgt20 { margin-top:20px !important; }
.mgt25 { margin-top:25px !important; }
.mgt30 { margin-top:30px !important; }
.mgt40 { margin-top:40px !important; }
.mgt50 { margin-top:50px !important; }
.mgt60 { margin-top:60px !important; }

.mgr00 { margin-right:0px !important; }
.mgr01 { margin-right:1px !important; }
.mgr02 { margin-right:2px !important; }
.mgr03 { margin-right:3px !important; }
.mgr04 { margin-right:4px !important; }
.mgr05 { margin-right:5px !important; }
.mgr06 { margin-right:6px !important; }
.mgr07 { margin-right:7px !important; }
.mgr08 { margin-right:8px !important; }
.mgr09 { margin-right:9px !important; }
.mgr10 { margin-right:10px !important; }
.mgr15 { margin-right:15px !important; }
.mgr20 { margin-right:20px !important; }
.mgr25 { margin-right:25px !important; }
.mgr30 { margin-right:30px !important; }
.mgr40 { margin-right:40px !important; }
.mgr50 { margin-right:50px !important; }

.mgb00 { margin-bottom:0px !important; }
.mgb01 { margin-bottom:1px !important; }
.mgb02 { margin-bottom:2px !important; }
.mgb03 { margin-bottom:3px !important; }
.mgb04 { margin-bottom:4px !important; }
.mgb05 { margin-bottom:5px !important; }
.mgb06 { margin-bottom:6px !important; }
.mgb07 { margin-bottom:7px !important; }
.mgb08 { margin-bottom:8px !important; }
.mgb09 { margin-bottom:9px !important; }
.mgb10 { margin-bottom:10px !important; }
.mgb15 { margin-bottom:15px !important; }
.mgb20 { margin-bottom:20px !important; }
.mgb25 { margin-bottom:25px !important; }
.mgb30 { margin-bottom:30px !important; }
.mgb40 { margin-bottom:40px !important; }
.mgb50 { margin-bottom:50px !important; }

.mgl00 { margin-left:0px !important; }
.mgl01 { margin-left:1px !important; }
.mgl02 { margin-left:2px !important; }
.mgl03 { margin-left:3px !important; }
.mgl04 { margin-left:4px !important; }
.mgl05 { margin-left:5px !important; }
.mgl06 { margin-left:6px !important; }
.mgl07 { margin-left:7px !important; }
.mgl08 { margin-left:8px !important; }
.mgl09 { margin-left:9px !important; }
.mgl10 { margin-left:10px !important; }
.mgl15 { margin-left:15px !important; }
.mgl20 { margin-left:20px !important; }
.mgl25 { margin-left:25px !important; }
.mgl30 { margin-left:30px !important; }
.mgl40 { margin-left:40px !important; }
.mgl50 { margin-left:50px !important; }

.bold { font-weight:bold; }
.underline {text-decoration: underline; text-underline-offset:4px;}
.text_indent{text-indent:-99999px; display: block; width: 0; height: 0;}

/* 230509. 9혁. 비밀번호 숨기기,보이기 버튼 */
	#keyShow {
	  position: absolute;
	  display: none;
	  margin-left: -50px;
	  margin-top: 24px;
	  font-size: 9px;
	  cursor: pointer;
	  color: grey;
    margin: 0 auto;
    left: 230px;
    bottom: 40%;
    text-align: right;
	}

	#checkKey {
	  height: 39px;
	}

	@media screen and (max-width:1100px){
		#keyShow{
			left:22%;
		}
	} 

	@media screen and (max-width:639px){
		#keyShow{
			left:87%;
			bottom:55%;
		}
	} 


	#keyShow2 {
		position: absolute;
		display: none;
		margin-left: -50px;
		margin-top: 24px;
		font-size: 9px;
		cursor: pointer;
		color: grey;
		margin: 0 auto;
		left: 230px;
		bottom: 40%;
		text-align: right;
	}

	#checkKey {
	  height: 39px;
	}

	@media screen and (max-width:1100px){
		#keyShow2{
			left:22%;
		}
	} 

	@media screen and (max-width:639px){
		#keyShow2{
			left:87%;
			bottom:55%;
		}
	}