@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css');*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

body {
    font-family: "pretendard", "Noto Sans KR", 'Malgun Gothic', '맑은 고딕', "Dotum", '돋움', sans-serif;
}

.btn,
.btn-large,
.btn-small {
    background-color: #7930b3;
}

nav {
    background-color: #2f3b52;
    position: relative;
    transition: all 0.5s;
}
.nav.dev {
    background-color: #f5c02c;
	box-shadow:none
}

nav,
nav .nav-wrapper i {
    height: 50px;
    line-height: 50px;
}

nav nav .nav-wrapper ul {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul.nav-top li {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul.nav-top li a { font-weight: 400}
nav ul.nav-top li.logo-in a { font-size: 17px; font-weight: 800; padding: 0 25px}
nav ul.nav-top li.logo-in span { display: block; background: url("/assets/img/app/logo_symbol.svg") 0 center /24px no-repeat; padding-left: 30px;}
nav ul.nav-top li.logo-in + li { border-left: 0}

nav ul li a {
    transition: all 0.5s;
}

/*nav ul li:nth-child(9) a {
    padding: 0 36px;
}*/

/* Nav depth */
nav .nav-top li { position: relative;}
.nav-top > li:hover .depth1 {
    display: block;
}

.nav-top .depth1 { z-index: 10}

.nav-top .depth1,
.nav-top .depth2,
.nav-top .depth3 {
    position: absolute;
    width: max-content;
    left: 0;
    top: 50px;
    background-color: #fff;
    box-shadow: 0 2px 5px #ddd;
	border: 0;
    display: none;
}

.nav-top .depth1>li,
.nav-top .depth2>li,
.nav-top .depth3>li {
    float: none;
	border: 0
}

.nav-top .depth1>li:hover .depth2,
.nav-top .depth2>li:hover .depth3 {
    display: block;
}

.nav-top .depth1 li > a {
	display: block;
    width: 100%;
    color: #333;
    line-height: 1em;
    padding: 17px 20px;
	font-weight: 400
}

.nav-side { display: none; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.2); border-right: 0; margin-top: 50px}
.nav-side li { position: relative}
.nav-side li.active a { background: #2a354a}
.nav-side li.drop > a::before { content: ""; position: absolute; right: 10px; top: 17px; width: 18px; height: 18px; background: url("/assets/img/icon_nav_arr.svg") center center /contain no-repeat; opacity: 0.6}
.nav-side li.drop.active > a::before { transform: scaleY(-1)}

.nav-side .depth1 { display: none; border-right: 0}
.nav-side .depth1 li { border-bottom: 0}
.nav-side .depth1 li a { display: block; background: #2a354a}

.dev .nav-side li.active a { background: #ebb625}
.dev .nav-side li.drop > a::before { opacity: 1}
.dev .nav-side .depth1 li a { display: block; background: #ebb625}

@media (max-width: 992px){
	.nav-top { display: none}
	.nav-side { display: block}
}

/*
@media (max-width: 992px){
	.nav-top .depth1,
	.nav-top .depth2,
	.nav-top .depth3 { width: 100%; background: #dcac28; box-shadow: none}
	.nav-top .depth1 li > a { color: #fff}
}
*/

/*
@media (max-width: 1150px){
	nav ul li a { font-size: 14px; padding: 15px 8px}
	.menu>li:hover .depth1 { top: 44px}
	.depth1 li>a { padding: 15px 18px}
}
@media (max-width: 1050px){
	nav ul li a { font-size: 13px;}
	.menu>li:hover .depth1 { top: 43px}
}*/

i.right {
    margin-left: 10px;
}

.dropdown-content {
    top: 50.4px !important;
    height: inherit !important;
}

.dropdown-content li {
    min-height: 36px;
}

.dropdown-content li a {
    font-size: 14px;
    line-height: 16px;
    padding: 10px;
}

#dropdown7 li a {
    padding: 10px;
}

.logout {
    position: absolute;
    top: 0;
    right: 24px;
}

input {
    height: 35px;
    padding: 7px;
    border: 1px solid #b6b5b5;
    width: 100%;
    border-radius: 5px;
}

.pointer {
    cursor: pointer;
}

.container_all {
    width: 80%;
    padding: 0px 20px;
    margin: 0 auto;
}

.has-fixed-sidenav .navbar-fixed nav.navbar {
    width: calc(100% - 210px);
    left: 210px;
}

h4 {
    color: #7930b3;
    font-weight: 600;
}

body {
    background-color: #fffff0;
    overflow-x: hidden;
}

.page-footer {
    font-size: 13px;
    color: #aaa;
}

p {
    color: #000000;
    font-size: 1em;
    margin: 0px
}
u{
      text-decoration-line: none;
    border-bottom: 1px solid #111;
}
h3 {
    font-size: 2.40rem;
    line-height: 110%;
    margin: 1.52rem 0 .912rem 0;
    color: #7930b3;
    font-weight: 600;
}
h3.img-in { display: flex; align-items: center; font-weight: 900; padding-left: 0}
h3.img-in img { display: block; height: 52px; margin-right: 10px}
.take .bg-img { position: absolute; right: 10px; top: -10px; transition: 0.3s}
.take .bg-img img { width: 115px}

@media (max-width: 1440px){
	h3.img-in img { height: 42px; margin-right: 10px}
	.take .bg-img { top: -10px}
	.take .bg-img img { width: 95px}
}
@media (max-width: 959px){
	.container.take h3.img-in { font-size: 2em}
	.container.take h3.img-in img { display: none}
	.take .bg-img { right: 0; top: 0px}
	.take .bg-img img { width: 60px}
}

.cards { position: relative}

nav.navbar .right {
    font-weight: 600;
    color: #666;
}

.container .row .right-align {
    border-radius: 5px;
    padding: 0;
}

.container .card {
    border-radius: 5px;
    padding: 24px;
}

table thead th {
    background-color: #7930b3;
    color: #fff;
    padding: 7px 5px;
    font-weight: 300;
    font-size: 13px;
    line-height: 1em;

}

table tbody td {
    padding: 10px 5px;
    font-size: 13px;
    line-height: 1em;
}

header nav .logout .point em:after {
    content: '';
    display: inline-block;
    vertical-align: -3px;
    width: 18px;
    height: 18px;
    background-image: url(/assets/img/point.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    margin: 0 0px 0 8px;
}

nav .m_menu_btn {
    display: none;
}
.nav .m_menu_btn {
    display: none;
}

.navigation_bg {
    display: none;
}

nav .m_close_btn {
    display: none;
}
.nav .m_close_btn {
    display: none;
}

/*educoin 포인트 내역*/
nav .logout .point {
    background-color: #7930b3;
    border-radius: 20px;
    box-shadow: none;
    padding: 5px 15px;
}


nav .logout em {
    font-style: normal;
}

.pointList table td {
    font-size: 15px;
}

.pointList table tr:first-child td {
    background-color: #7930b3;
    color: #fff;
}

/*Header  -----------------------------*/
.header-con { position: fixed; left: 0; top: 0; width: 100%; z-index: 10}
.main-con { margin-top: 100px}

@media (max-width: 992px){
	.main-con { margin-top: 50px}
}

.nav { position: relative; background: #2f3b52; transition: all 0.5s; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); z-index: 10}
.nav .top-con { position: relative; display: flex; align-items: center; height: 50px; justify-content: center;}

@media (min-width: 993px){
	.nav .btm-con { display: flex; align-items: center; height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.2);}
}

h1.logo { font-family: 'Noto Sans KR', sans-serif; font-size: 24px; font-weight: 800; line-height: 1.5; margin: 0; transition: 0.3s}
h1.logo a { display: block; color: #fff; background: url("/assets/img/app/logo_symbol.svg") 0 center /26px no-repeat; padding-left: 34px}
h1.logo span { display: block;}

@media (max-width: 1200px){
	h1.logo { font-size: 24px;}
}
@media (max-width: 992px){
	h1.logo { font-size: 20px;}
	h1.logo a { letter-spacing: -0.5px; background-size: 22px; padding-left: 26px}
}
@media (max-width: 575px){
	h1.logo a { width: 30px; height: 30px; background-size: 30px; padding-left: 0}
	h1.logo span { display: none}
}

.family-site { position: absolute; left: 20px; top: 50%; height: 100%; transform: translateY(-50%)}
.family-site ul { display: flex; align-items: center; height: 100%; margin: 0}
.family-site ul li { margin-right: 20px}
.family-site ul li.signout { display: none}
.family-site ul li a { position: relative; display: block; text-align: center; margin-top: 4px}
.family-site ul li a::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background: center /18px no-repeat; opacity: 0.8}
.family-site ul li:hover a::before { opacity: 1}
.family-site ul li span { display: block; min-width: 30px; font-size: 9px; color: rgba(255, 255, 255, 0.7); padding-top: 20px}
.family-site ul li.app a::before { background-image: url(/assets/img/common/ico_edusys_w.svg); background-position: center top}
.family-site ul li.chat a::before { background-image: url(/assets/img/common/ico_chat_w.svg)}
.family-site ul li.signout a::before { background-image: url(/assets/img/common/logout.svg); background-size: 16px;}

@media (max-width: 992px){
	.family-site { left: auto; right: 10px}
	.family-site ul li { margin: 0 0 0 15px}
	.family-site ul li.signout { display: block}
}
@media (max-width: 330px){
	.family-site ul li + li { margin-left: 10px}
}

/* pc menu */
.nav-area-pc { display: flex; height: 100%; margin: 0}
.nav-area-pc > li { position: relative; border-left: 1px solid rgba(255, 255, 255, 0.2)}
.nav-area-pc > li:first-child { border-left: 0}
.nav-area-pc > li > a { display: flex; align-items: center; height: 100%; font-size: 16px; color: #fff; font-weight: 500; transition: all 0.5s; padding: 0 20px}

.nav-area-pc .depth1,
.nav-area-pc .depth2,
.nav-area-pc .depth3 { display: none; position: absolute; width: max-content; left: 0; top: 49px; background-color: #fff; box-shadow: 0 2px 5px #ddd; border: 0;}

.nav-area-pc li:hover .depth1,
.nav-area-pc .depth1 > li:hover .depth2,
.nav-area-pc .depth2 > li:hover .depth3 { display: block}
.nav-top .depth1 { z-index: 10}

.nav-area-pc .depth1 li > a { display: block; width: 100%; color: #333; line-height: 1em; padding: 17px 20px; font-weight: 400}
.nav-area-pc .depth1 li:hover > a { background: rgba(0,0,0,0.1)}

@media (min-width: 993px){
	.nav .btm-con .navigation_inner { height: 100%}
}
@media (max-width: 1440px){
	.nav-area-pc > li > a { padding: 0 15px}
}
@media (max-width: 1200px){
	.nav-area-pc > li > a { font-size: 15px; padding: 0 12px}
}

@media (max-width: 992px){
	.nav-area-pc { display: none}
}

/* pc util */
.util-area { padding-right: 20px; margin-left: auto}
.util-area ul { display: flex; align-items: center; gap: 0 30px; margin: 0}
.util-area ul li { position: relative; font-size: 13px; color: #fff}
.util-area ul li + li::before { content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: rgba(255, 255, 255, 0.3)}
/*.util-area ul li.campus span { position: relative; display: block; padding-left: 25px;}
.util-area ul li.campus span::after { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: url("/assets/img/student/ico_campus2_w.svg") 0 center /18px no-repeat; opacity: 0.4}*/
.util-area ul li.campus { color: rgba(255, 255, 255, 0.8)}
.util-area ul li.campus span { position: relative; display: block;}
.util-area ul li.point span { display: block; font-family: 'Poppins'; font-size: 15px; color: #fdc600; font-weight: 400; background: url(/assets/img/point.png) 0 center /18px no-repeat; padding-left: 25px;}
.dev .util-area ul li.point span { color: #fff}
.util-area ul li.signout a { display: block; width: 20px; height: 30px; background: url("/assets/img/common/logout.svg") center /18px no-repeat;}

.util-area ul li.name .response-area { display: none; position: relative}
.util-area ul li.name .ico-user { display: block; width: 30px; height: 30px; background: url("/assets/img/student/ico_user.svg") right center /18px no-repeat; cursor: pointer; text-indent: -9999px}
.util-area ul li.name .user-info { display: none; position: absolute; left: 50%; top: 50px; color: #333; background: #fff; border-radius: 4px; border: 1px solid #999FAA; transform: translateX(-50%); box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1); padding: 10px 15px; margin-left: 5px; z-index: 10}
.util-area ul li.name .user-info::before { content: ""; position: absolute; top: -12px; left: 50%; width: 12px; height: 12px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #999faa; transform: translateX(-50%); }
.util-area ul li.name .user-info .inner { display: flex; flex-direction: column; align-items: center}
.util-area ul li.name .user-info .inner span { display: block; font-size: 14px; font-weight: 600; white-space: nowrap}
.util-area ul li.name .user-info .inner .cps { position: relative; font-weight: 400; background: url("/assets/img/student/ico_campus.svg") 0 center /18px no-repeat; padding: 3px 0 0px 25px}

@media (max-width: 1440px){
	.util-area { right: 15px}
	.util-area ul { gap: 0 20px;}
	.util-area ul li + li::before { left: -10px}
}
@media (min-width: 993px) and (max-width: 1200px){
	.util-area ul li.name .text-in { display: none}
	.util-area ul li.name .response-area { display: block}	
	.util-area ul li.campus { display: none}
}
@media (max-width: 992px){
	.util-area { display: none}
}

/* mobile slide  */
.mobile-slide { display: none; line-height: 1.5; color: #333}
.mobile-slide .user-area { background: #7930B3; padding: 20px 20px 15px 20px}

.mobile-slide .user-area .logout-con { margin-bottom: 15px}
.mobile-slide .user-area .logout-con a { position: relative; display: inline-block; font-size: 12px; color: #fff;}
.mobile-slide .user-area .logout-con a::after { content: ""; position: absolute; left: 0; bottom: 1px; right: 0; height: 1px; background: rgba(255, 255, 255, 0.7)}

.mobile-slide .user-area .info { display: flex; justify-content: space-between; align-items: flex-end}
.mobile-slide .user-area .info .text-in span { display: block; font-size: 12px; color: #fff}
.mobile-slide .user-area .info .text-in .name { font-size: 18px; font-weight: 700; margin-bottom: 2px}
.mobile-slide .user-area .info .point-in { margin-left: 20px}
.mobile-slide .user-area .info .point-in span { display: block; font-family: 'Poppins'; font-size: 15px; color: #fdc600; font-weight: 400; text-align: right; background: url(/assets/img/point.png) 0 center /18px no-repeat; padding-left: 25px}

.nav-area { padding: 20px}
.nav-area > ul { margin: 0}
.nav-area > ul > li { position: relative; float: none;}
.nav-area > ul > li + li { border-top: 1px solid #eee}
.nav-area > ul > li > a { position: relative; display: block; font-size: 15px; color: #222; font-weight: 600; background: 0 center no-repeat; padding: 12px 0 12px 35px}
.nav-area > ul > li a:hover { background: 0 center no-repeat #fff;}

.nav-area > ul > li.drop > a::after { content: ""; position: absolute; top: 50%; right: 0; width: 10px; height: 6px; background: url("/assets/img/student/m_menu_arr.svg") center /contain no-repeat; transform: translateY(-50%); transition: 0.3s}

.nav-area > ul > li.test > a { background-image: url("/assets/img/student/m_menu_ico_test.svg")}
.nav-area > ul > li.tresult > a { background-image: url("/assets/img/student/m_menu_ico_result.svg")}
.nav-area > ul > li.over > a { background-image: url("/assets/img/student/m_menu_ico_over.svg")}
.nav-area > ul > li.ox > a { background-image: url("/assets/img/student/m_menu_ico_ox.svg")}
.nav-area > ul > li.voca > a { background-image: url("/assets/img/student/m_menu_ico_a.svg")}
.nav-area > ul > li.grm > a { background-image: url("/assets/img/student/m_menu_ico_pen.svg")}
.nav-area > ul > li.ns > a { background-image: url("/assets/img/student/m_menu_ico_ns.svg")}
.nav-area > ul > li.app > a { background-image: url("/assets/img/student/m_menu_ico_app.svg")}
.nav-area > ul > li.opt > a { background-image: url("/assets/img/student/m_menu_ico_opt.svg")}

.nav-area > ul > li .depth2 { display: none; padding: 8px 0}
.nav-area > ul > li .depth2 li { float: none}
.nav-area > ul > li .depth2 li a { display: block; color: #333; font-weight: 500; padding: 8px 0 8px 35px}
.nav-area > ul > li .depth2 li a:hover { background: none}
.nav-area > ul > li:last-child .depth2 { border-bottom: 1px solid #eee}
.nav-area > ul > li.drop.on > a::after { transform: translateY(-50%) rotate(180deg)}
.nav-area > ul > li.on .depth2 { background: #F6F5FD}

@media (max-width: 992px){
	.mobile-slide { display: block}
}

/*Common  -----------------------------*/
/* display */
.d-flex { display: flex}
.ai-center { align-items: center}
.jc-center { justify-content: center}

/* Font-Weight */
.bold4 { font-weight: 400 !important}
.bold5 { font-weight: 500 !important}
.bold6 { font-weight: 600 !important}
.bold7 { font-weight: 700 !important}
.bold8 { font-weight: 800 !important}
.bold9 { font-weight: 900 !important}
.normal { font-weight: normal !important}

/* Hand */
.hand { cursor: pointer}
.hand-no { cursor: default}

/* Color */
.rise { font-weight: 800; text-decoration: underline}
.c-orange { color: #ff9406}

/* Font */
.jua { font-family: "Jua", sans-serif;}

/* Margin */
.mt0 { margin-top: 0px !important}
.mt5 { margin-top: 5px !important}
.mt7 { margin-top: 7px !important}
.mt10 { margin-top: 10px !important}
.mt30 { margin-top: 30px !important}
.mt50 { margin-top: 50px !important}

.mb0 { margin-bottom: 0px !important}
.mb10 { margin-bottom: 10px !important}

.ml5 { margin-left: 5px !important}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}


/*Btnn  -----------------------------*/
/*.btnn { display: inline-flex; align-items: center; height: 35px; font-size: 15px; color: #111; line-height: 1; border-radius: 20px; border: 1px solid transparent; background: transparent; padding: 0 20px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}*/
.btnn { display: inline-flex; align-items: center; height: 35px; font-size: 15px; color: #111; line-height: 1; border-radius: 20px; border: 1px solid transparent; background: transparent; padding: 0 20px; white-space: nowrap}
.btnn:hover { box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);}
.btnn.btnn-lg { height: 40px;}
.btnn.br0 { border-radius: 0}

.btnn.btnn-dark { color: #fff; border-color: #333; background: #333}
.btnn.btnn-gray6 { color: #fff; border-color: #666; background: #666}
.btnn.btnn-grayc { color: #fff; border-color: #ccc; background: #ccc}
.btnn.btnn-purple { color: #fff; border-color: #7930b3; background: #7930b3;}
.btnn.btnn-purple1 { color: #fff; border-color: #7e57c2; background: #7e57c2;}
.btnn.btnn-purple2 { color: #fff; border-color: #673ab7; background: #673ab7;}
.btnn.btnn-purple3 { color: #fff; border-color: #512da8; background: #512da8;}

.btnn.btnn-outline-dark { border-color: #333}
.btnn.btnn-outline-gray6 { border-color: #666}
.btnn.btnn-outline-grayc { border-color: #ccc}
.btnn.btnn-outline-purple { border-color: #7930b3; color: #7930b3; font-weight: 500}
.btnn.btnn-outline-purple1 { border-color: #7e57c2; color: #7e57c2; font-weight: 500}
.btnn.btnn-outline-purple2 { border-color: #673ab7; color: #673ab7; font-weight: 500}
.btnn.btnn-outline-purple3 { border-color: #512da8; color: #512da8; font-weight: 500}
.btnn.btnn-outline-purple1:hover { background: #7e57c2; color: #fff}
.btnn.btnn-outline-purple2:hover { background: #673ab7; color: #fff}
.btnn.btnn-outline-purple3:hover { background: #512da8; color: #fff}

.btnn.shadow-no { box-shadow: none}

.btn-line { display: flex; justify-content: center}
.btn-line.end { justify-content: flex-end}
.btn-line.start { justify-content: flex-start}
table + .btn-line { margin: 20px 0 10px 0}
.btn-line .btnn + .btnn { margin-left: 10px}

/* Back button */
.btn-back { position: absolute; left: 40px; top: 15px; z-index: 5}
.btn-back a { display: block; width: 20px; height: 20px}
.btn-back.pwf {  left: 25px; top: 20px}

@media (max-width: 992px){
	.btnn { height: auto; font-size: 14px; padding: 10px 15px;}
}
@media (max-width: 575px){
	.br { display: block}
}

/*switch  -----------------------------*/
.switch-btn input[type="checkbox"] { display: none}
.switch-btn label { display: flex; align-items: center}
.switch-btn .marble { position: relative; display: block; width: 44px; height: 22px; background: #ddd; border-radius: 14px; cursor: pointer}
.switch-btn .marble:after { content: ""; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); background: #fff; border-radius: 50%; width: 14px; height: 14px; transition: left 250ms linear;}
.switch-btn .marble + span { font-size: 14px; color: #333; font-weight: 500; margin-left: 5px}
/*.switch-btn input[type="checkbox"]:checked + label .marble { background: #F8B62D;}*/
.switch-btn input[type="checkbox"]:checked + label .marble { background: #ee5750;}
.switch-btn input[type="checkbox"]:checked + label .marble::after { left: calc(100% - 18px);}



/*----------------------------------------------------------
Table
----------------------------------------------------------*/
.table tr { border-bottom: none;}
.table th, .table td { padding: 10px 5px}
.table .tr1 th { padding: 15px 5px}
.table.td-up td { padding: 15px 5px}

table.table.striped { border-bottom: 1px solid rgba(0, 0, 0, 0.12)}
table.table.striped>tbody>tr:nth-child(even) { background-color: rgba(242,242,242,0.5)}
table.table.striped>tbody>tr:nth-child(odd) { background-color: #fff}
/*table.table.striped td { border-bottom: 0}*/

.table th { font-size: 16px; font-weight: normal; background-color: #f4f4f4; color: #7930b3;     word-break: keep-all;}
.table th.darken-1:hover { background: #5e35b1 !important}

.table td { font-size: 17px; line-height: 1em; font-weight: 400; color: #111; border-bottom: 1px solid rgba(0, 0, 0, 0.1)}
.table td .hand-num { position: relative; display: inline-block; width: 100%; max-width: 60px; font-weight: 700}
.table td .hand-num::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; cursor: pointer;}
.table td .hand-num:hover::after { background: rgba(3, 155, 229, 0.05)}

.table em { font-style: normal}

.table thead.left-br th { border-left: 1px solid rgba(0, 0, 0, 0.12)}
.table thead.left-br tr:nth-of-type(1) th:nth-of-type(1) { border-left: 0}
.table.bb th { border-bottom: 1px solid rgba(0, 0, 0, 0.12)}

.tbl-top { margin-bottom: 10px}
.tbl-top.flex { display: flex; align-items: center}
.tbl-top.flex > div { width: 50%}
.tbl-top.flex .right { margin-left: auto}

@media (max-width: 992px){
	.table th { font-size: 15px}
	.table td { font-size: 15px}
	.table .tr1 th { padding: 12px 5px}
}

/* center */
.table.center th, .table.center td { text-align: center}
.table.center td.a-left { text-align: left}

/* border */
.table.bordered td { border: 1px solid rgba(0, 0, 0, 0.12)}

/* fixed */
.table.tfixed { table-layout: fixed}

/* font */
.table.jua td { font-family: "Jua", sans-serif; font-size: 19px}

/* bold */
.table tr.fw4 td, .table td.fw4 { font-weight: 400}
.table tr.fw5 td, .table td.fw5 { font-weight: 500}
.table tr.fw7 td, .table td.fw7 { font-weight: 700}
.table tr.fw8 td, .table td.fw8 { font-weight: 800}

/* color */
.table th.a, .table tr.a th { background-color: #7930b3; color: #fff;}
.table th.b { background-color: #c98bd8; color: #fff}
.table th.c { background-color: #fcf0ff}
.table th.e { background-color: #695A79; color: #fff}
.table th.f { background-color: #6D6F86; color: #fff}
/*.table th.g { background-color: #ff9406; color: #fff}*/
.table th.g { background-color: #f7a73d; color: #fff}
.table th.h { background-color: #512da8; color: #fff}
.table .text-yellow { color: #ff9406; font-weight: 500}

/* radius */
.table thead th.brLeft { border-top-left-radius: 15px;}
.table thead th.brRight { border-top-right-radius: 15px;}
.table thead th.brBoth { border-radius: 15px 15px 0 0;}

/* btn */
.table .btn-small { display: flex; align-items: center; justify-content: center; width: 70px; font-size: 15px; border-radius: 20px; padding: 0}
.table .btn-small + .btn-small { margin-top: 7px}
.table.center .btn-small, .table.center .btnn { margin-left: auto; margin-right: auto}
.table .btn-small.long { width: auto}

.table .stdy { background-color: #2bbbad;}
.table .tst { background-color: #7930b3;}
.table .rtst { background-color: #ff303d;}
a.reset.icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #7930b3; letter-spacing: 0; background-color: #fff; border: 1px solid #7930b3; border-radius: 50%; box-shadow: none; padding: 0}
a.reset i { font-size: 24px}
.tbl-response a.reset.icon { margin-top: 7px}
.studyVoca a.reset.icon { margin-top: 7px}

@media (max-width: 992px){
	.tbl-response a.reset.icon { margin: 0 0 0 10px}
	.studyVoca a.reset.icon { margin: 0 0 0 10px}
}

/* Table basic */
/*
.table.tbasic th,
.table.tbasic td { font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(0, 0, 0, 0.12)}
.table.tbasic th { color: #333; background: #f4f4f4; padding: 10px 5px}
.table.tbasic .tr1 th { padding: 15px 5px}
.table.tbasic td { padding: 15px 5px}
.table.tbasic th.basic1 { background-color: #695A79; color: #fff}
.table.tbasic th.basic2 { background-color: #6D6F86; color: #fff}
*/


/*Table progress  -----------------------------*/
.table .chart-in { display: flex; justify-content: center; align-items: center; width: 80%; margin: 0 auto}
.table .chart-in .bar { display: block; width: 100%; font-size: 0; line-height: 1; border: 1px solid #e0e0e0; border-radius: 15px; padding: 3px 4px;}
.table .chart-in .bar progress { width: 100%; animation-name: progress100;}
.table .chart-in .bar.bar-red .progress-bar-fill::-webkit-progress-value { background-color: #f73232;}
.table .chart-in .bar.bar-yellow .progress-bar-fill::-webkit-progress-value { background-color: #ffca35;}
.table .chart-in .bar.bar-blue .progress-bar-fill::-webkit-progress-value { background-color: #398add;}
.table .chart-in .bar.bar-green .progress-bar-fill::-webkit-progress-value { background-color: #398add;}
.table .chart-in .bar.bar-purple .progress-bar-fill::-webkit-progress-value { background-color: #4caf50;}
.table .chart-in em { display: block; margin-left: 10px}

.table-style-bar-in .chart-in { display: flex; justify-content: center; align-items: center; width: 80%; margin: 0 auto}
.table-style-bar-in .chart-in .bar { display: block; width: 100%; font-size: 0; line-height: 1; border: 1px solid #e0e0e0; border-radius: 15px; padding: 3px 4px;}
.table-style-bar-in .chart-in .bar progress { width: 100%; animation-name: progress100;}
.table-style-bar-in .chart-in .bar.bar-red .progress-bar-fill::-webkit-progress-value { background-color: #f73232;}
.table-style-bar-in .chart-in .bar.bar-yellow .progress-bar-fill::-webkit-progress-value { background-color: #ffca35;}
.table-style-bar-in .chart-in .bar.bar-blue .progress-bar-fill::-webkit-progress-value { background-color: #398add;}
.table-style-bar-in .chart-in .bar.bar-green .progress-bar-fill::-webkit-progress-value { background-color: #398add;}
.table-style-bar-in .chart-in .bar.bar-purple .progress-bar-fill::-webkit-progress-value { background-color: #4caf50;}
.table-style-bar-in .chart-in em { display: block; margin-left: 10px}

@keyframes progress100 {
	from { width: 0; opacity: 0;}
	to { width: 100%; opacity: 1;}
}

@media (max-width: 992px){
	.table-style-bar-in .chart-in { flex-direction: column}
	.table-style-bar-in .chart-in em { margin: 5px 0 0 0}
}


/*Parents  -----------------------------*/
.flag-parents .btn,
.flag-parents .btn-large,
.flag-parents .btn-small { background-color: #F16540;}
.flag-parents .study .btn-small:hover { background-color: #F16540;}
.flag-parents h3,
.flag-parents h4 { color: #2f3b52}
.flag-parents table thead th { background-color: #677085; color: #fff}
.flag-parents nav .logout .point { background-color: #F16540;}
.flag-parents .pointList table tr:first-child td { background-color: #F16540;}


/*내신  -----------------------------*/
.naesin .title { margin-bottom: 20px}
.naesin .title h3 { margin: 0}
.title.title-depth2 { display: flex; align-items: center}
.title.title-depth2 h3 { margin: 0}
.title.title-depth2 h4 { position: relative; font-size: 30px; font-weight: 800; letter-spacing: -0.5px; padding-left: 10px; margin: 10px 0 0 20px}
.title.title-depth2 h4::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 3px; background: #7930b3; transform: translateY(-50%)}

.naesin h5 { font-family: "Jua", sans-serif; font-size: 25px; color: #7930b3; letter-spacing: -0.5px; padding: 0; margin: 5px 0 10px 0}

.naesin .title h3 i { top: -2px; font-size: 56px;}

@media (max-width: 1440px) {
	.naesin .title h3 { padding-left: 50px}
	.naesin .title h3 i { top: -4px; font-size: 44px !important}
	.title.title-depth2 h4 { font-size: 25px; padding-left: 8px; margin: 6px 0 0 16px}
}
@media (max-width: 959px) {
	.naesin .title { margin-bottom: 12px}
	.naesin .title h3 { padding-left: 0}
	.title.title-depth2 h4 { font-size: 20px; padding-left: 6px}
	.title.title-depth2 h4::before { width: 8px}
	.naesin h5 { font-size: 22px; margin: 5px 0}
}

.naesin-summury .inner { display: flex;}
.naesin-summury .inner > div { width: calc(50% - 30px)}
.naesin-summury .inner > div + div { margin-left: 60px}
.naesin-summury h5 { text-align: center; padding: 0px}

.table.tbl-naesin thead tr:first-of-type th:first-of-type { border-top-left-radius: 15px;}
.table.tbl-naesin thead tr:first-of-type th:last-of-type { border-top-right-radius: 15px;}
.tbl-naesin .score-in { font-weight: 800}
.tbl-naesin .score-in .tit { display: none}

.naesin-summury .inner .canvas-con { width: 100%; height: 150px}

.tbl-response td .tit { display: none}
.tbl-response td .data .done.btn-small.disabled { color: #555 !important; font-weight: bold}

@media (min-width: 993px){
	.naesin .tbl-response td { height: 50px}
}
@media (max-width: 992px){
	.container.naesin { width: 100%; padding: 0 15px;}
	.naesin-summury .inner { flex-direction: column; max-width: 600px; margin-left: auto; margin-right: auto}
	.naesin-summury .inner > div { width: 100%}
	.naesin-summury .inner > div + div { margin-left: 0; margin-top: 30px}
	.naesin-summury .lineChart { padding-bottom: 10px}
	
	/* tbl response */
	.tbl-response thead { display: none}
	.tbl-response tbody { display: flex; flex-direction: column}
	.tbl-response tr { display: block; border: 1px solid #e9e9e9; border-width: 1px 1px 0 0}
	.tbl-response tr + tr { margin-top: 30px}
	/*table.table.striped.tbl-response>tbody>tr:nth-child(even) { background-color: #fff}*/
	.tbl-response td { position: relative; display: flex; align-items: center; height: 42px; border-bottom: 0; padding: 0}
	
	.tbl-response td .tit { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30%; height: 100%; font-family: "Jua", sans-serif; color: #fff; background: #7930b3; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-top: 2px}
	.tbl-response td.a .tit { background: #7e57c2}
	.tbl-response td.b .tit { background: #673ab7}
	.tbl-response td.c .tit { background: #512da8}

	.tbl-response td .data { display: flex; align-items: center; width: 70%; height: 100%; border-bottom: 1px solid #e9e9e9; padding-left: 15px}

	
	
	
	/*
	.tbl-response td::before { content: ""; display: flex; align-items: center; justify-content: center; width: 30%; height: 100%; font-family: "Jua", sans-serif; font-size: 15px; color: #fff; background: #7930b3; border-bottom: 1px solid #884fb5; margin-right: 10px}
	.tbl-response td.a::before { background: #7e57c2}
	.tbl-response td.b::before { background: #673ab7}
	.tbl-response td.c::before { background: #512da8}
	.tbl-response .gubun::before { content: "구분"}
	.tbl-response .type::before { content: "문제유형"}
	.tbl-response .range::before { content: "시험범위"}
	.tbl-response .item::before { content: "문법항목"}
	.tbl-response .learning::before { content: "학습"}
	.tbl-response .num-test::before { content: "문항수"}
	.tbl-response .test::before { content: "응시"}
	.tbl-response .start::before { content: "최근 응시 시작시간"}
	.tbl-response .end::before { content: "최근 응시 종료시간"}
	.tbl-response .correct::before { content: "최근 맞은 갯수"}
	.tbl-response .do::before { content: "최근 수행율"}
	.tbl-response .num-score::before { content: "최근 응시 점수"}
	.tbl-response .wrong::before { content: "오답"}
	.tbl-response .count::before { content: "응시횟수"}
	.tbl-response .lcount::before { content: "학습횟수"}
	.tbl-response .round::before { content: "회차"}
	.tbl-response .test2::before { content: "시험"}
	.tbl-response td::after { content: ""; position: absolute; left: 30%; right: 0; bottom: 0; height: 1px; background: #e9e9e9}
	*/
	
	.table.center.tbl-response .btn-small, .table.center.tbl-response .btnn { margin-left: 0; margin-right: 0}
}
@media (max-width: 575px){
	.naesin-summury .inner > div + div { margin-top: 30px}
	.naesin-summury .info-score ul { flex-direction: row; flex-wrap: wrap}
	.naesin-summury .info-score ul li { width: calc(100%/3)}
	.naesin-summury .info-score ul li + li { margin-left: 0}
	
	/* summury tbl response */
	.tbl-naesin thead { display: none}
	.tbl-naesin tbody { display: block; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.12)}
	.tbl-naesin tbody tr { display: flex; flex-wrap: wrap;}
	.tbl-naesin.td-up td { position: relative; display: block; border-bottom: 0; padding: 0}
	.tbl-naesin td.grade,
	.tbl-naesin td.publisher { display: flex; align-items: center; height: 35px; font-size: 14px; color: #fff; font-weight: 600; background: #c98bd8;}
	
	.tbl-naesin td.grade { justify-content: center; width: 60px; border-radius: 10px 0 0 0; background: #7930b3}
	.tbl-naesin td.publisher { width: calc(100% - 60px); border-radius: 0 10px 0 0; padding-left: 10px}
	.tbl-naesin .publisher::before { content: "출판사"; display: block; font-size: 11px; font-weight: 500; margin-right: 5px; margin-top: 2px}
	
	.tbl-naesin td.score-in { flex: 1; display: flex; flex-direction: column; align-items: center}
	/*.tbl-naesin .score-in::before { display: block; width: 100%; font-family: "Jua", sans-serif; font-size: 15px; color: #7930b3; font-weight: normal; background: #f4f4f4; border-left: 1px solid rgba(0, 0, 0, 0.12); padding: 10px 0}
	.tbl-naesin .publisher + .score-in::before { border-left: 0}
	.tbl-naesin .m1::before { content: "중간"}
	.tbl-naesin .m2::before { content: "중간"}
	.tbl-naesin .f1::before { content: "기말"}
	.tbl-naesin .f2::before { content: "기말"}
	.tbl-naesin .passive::before { content: "수동태"}
	.tbl-naesin .form::before { content: "문장형식"}
	.tbl-naesin .pp::before { content: "현재완료"}
	.tbl-naesin .participle::before { content: "분사"}
	.tbl-naesin .auxiliary::before { content: "조동사"}
	.tbl-naesin .n1::before { content: "1회차"}
	.tbl-naesin .n2::before { content: "2회차"}
	.tbl-naesin .n3::before { content: "3회차"}
	.tbl-naesin .n4::before { content: "4회차"}*/
	
	.tbl-naesin .score-in .tit { display: block; width: 100%; font-family: "Jua", sans-serif; font-size: 15px; color: #7930b3; font-weight: normal; background: #f4f4f4; border-left: 1px solid rgba(0, 0, 0, 0.12); padding: 10px 0}
	.tbl-naesin td.score-in span { display: block; padding: 10px 0}
	.tbl-naesin .publisher + .score-in .tit { border-left: 0}
}
@media (max-width: 575px){
	.step-table .table.tfixed { table-layout: auto}	
	.step-table .table td.text-yellow { width: 16%; font-size: 14px}
	.step-table .table em.mb-none { display: none}
	.step-table .table td { width: 28%}
	.step-table .table .btnn { flex-direction: column; justify-content: center; width: 100%; border-radius: 5px; padding: 6px 0}
}


/*내신 1단계  -----------------------------*/
.table-style-bar-in { }
.table-style-bar-in ul { display: flex; margin: 0}
.table-style-bar-in ul li { position: relative; flex: 1;}
.table-style-bar-in ul li + li dl { border-left: 1px solid rgba(0, 0, 0, 0.12)}
.table-style-bar-in ul li p.tit { display: flex; align-items: center; justify-content: center; height: 36px; font-family: "Jua", sans-serif; font-size: 16px; color: #fff; background: #c98bd8; border-radius: 15px 15px 0 0;}
.table-style-bar-in ul li dl { display: flex; border-bottom: 1px solid rgba(0, 0, 0, 0.12); margin: 0}
.table-style-bar-in ul li dt, .table-style-bar-in ul li dd { flex: 1; display: flex; align-items: center; justify-content: center; height: 50px; font-size: 16px;}
.table-style-bar-in ul li dt { font-family: "Jua", sans-serif; color: #7930b3; background: #f4f4f4}
.table-style-bar-in ul li dd { color: #111; text-align: center; margin: 0}
.table-style-bar-in em { font-style: normal;}

@media (max-width: 992px){
	.table-style-bar-in ul li dl { flex-direction: column;}
	.table-style-bar-in ul li dt { flex: none; height: 40px;}
	.table-style-bar-in ul li dd { flex: none; height: 45px; font-size: 14px; padding: 0 5px; word-break: break-all}
	.table-style-bar-in ul li dd.bar-dd { height: auto; padding: 10px 0 5px 0}
}

.chart-list { display: flex; margin: 0 -15px}
.chart-list .in-bar { display: flex; flex-direction: column; align-items: center; margin: 0 15px}
.chart-list.list3 .in-bar { width: calc(100%/3 - 30px)}
.chart-list.list2 .in-bar { width: calc(100%/2 - 30px)}
.chart-list h6 { border-bottom: 0; padding-bottom: 0; margin: 0}

/*.chart-list .in-bar { width: calc(75%/2 - 30px); display: flex; flex-direction: column; align-items: center; margin: 0 15px}
.chart-list .in-bar.in-word { width: calc(25% - 30px)}*/

/*.chart-list .in-bar .canvas-con { width: 100%; height: 180px; background: #f5f7fb; border-radius: 10px; padding: 10px;}*/
.chart-list .in-bar .canvas-con { width: 100%; height: 180px; background: #fff; border-radius: 10px; padding: 10px;}

.naesin-summury .info-score { margin-top: 10px}

@media (max-width: 1100px){
	.chart-list { display: flex; margin: 0 -10px}
	.chart-list .in-bar { margin: 0 10px}
	.chart-list.list3 .in-bar { width: calc(100%/3 - 20px)}
	.chart-list.list2 .in-bar { width: calc(100%/2 - 20px)}
	.chart-list .in-bar .canvas-con { padding: 10px 0}
}
@media (max-width: 992px){
	.chart-list { flex-direction: column; margin: 0}
	.chart-list .in-bar { width: 100% !important; border-bottom: 1px dashed #e9e9e9; padding-bottom: 5px; margin: 0 0 15px 0}
	/*.chart-list .in-bar:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0}*/
	.chart-list .in-bar .canvas-con { max-width: 60%}
	
	.naesin-step1 .naesin-summury .info-score,
	.naesin-step2 .naesin-summury .info-score { margin-top: -10px}
	.naesin-summury .info-score ul { justify-content: flex-start}
	.naesin-summury .info-score p { text-align: left}
}
@media (max-width: 575px){
	.chart-list .in-bar .canvas-con { max-width: 100%; height: 150px}
}

.naesin-step1 .table tr.text { background-color: #fafafa}
.naesin-step1 .table tr.dialog { background-color: #f2f2f2}


/*내신 2단계  -----------------------------*/
.naesin-step2 .naesin-summury .inner .score { width: calc(45% - 30px)}
.naesin-step2 .naesin-summury .inner .chart-area { width: calc(55% - 30px)}

.naesin-step2 .table tr.deep { background-color: rgba(242,242,242,0.5)}

@media (max-width: 992px){
	.naesin-step2 .naesin-summury .inner .score { width: 100%}
	.naesin-step2 .naesin-summury .inner .chart-area { width: 100%}
}



/*내신 3단계  -----------------------------*/
.naesin-step3 .naesin-summury .score { display: flex; flex-direction: column}
.naesin-step3 .naesin-summury .score .table { margin-bottom: 20px}

@media (max-width: 992px){
	.naesin-step3 .naesin-summury .score h5 { order: 1}
	.naesin-step3 .naesin-summury .score .table { order: 3; margin: 10px 0 0 0}
	.naesin-step3 .naesin-summury .score .my-ranking { order: 2; align-self: center; margin-top: 5px}
}

/* 내신 예상 등급 */
.my-ranking { display: flex; width: 180px; height: 50px; margin-top: auto}
.my-ranking .left-con { display: flex; align-items: center; justify-content: center; width: 130px; height: 100%; font-family: "Jua", sans-serif; font-size: 16px; color: #fff; background: #9E9E9E; border: 1px solid transparent; border-radius: 30px 0 0 30px;}
.my-ranking .right-con { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.2); border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0;}
.my-ranking .right-con span { display: block; font-size: 34px; color: #7930b3; font-weight: 800; line-height: 1; margin-top: -2px}

/*A 녹색, B 파랑색, C 노랑색, D 이하 빨강색 */
.my-ranking.a .left-con { background: #4caf50}
.my-ranking.a .right-con span { color: #4caf50}
.my-ranking.b .left-con { background: #398add}
.my-ranking.b .right-con span { color: #398add}
.my-ranking.c .left-con { background: #ffca35}
.my-ranking.c .right-con span { color: #ffca35}
.my-ranking.d .left-con { background: #f73232}
.my-ranking.d .right-con span { color: #f73232}
.my-ranking.e .left-con { background: #f73232}
.my-ranking.e .right-con span { color: #f73232}

@media (max-width: 992px){
	.my-ranking { display: flex; width: 160px; height: 40px}
	.my-ranking .left-con { width: 120px}
	.my-ranking .right-con span { font-size: 26px; font-weight: 700}
}

/*듣기평가대비  -----------------------------*/


/* 내신 common  -----------------------------*/
td .score-color { display: inline-block}
.score-color .circle { display: inline-block; border: 1px solid #e0e0e0; border-radius: 50%; padding: 4px}
.score-color .circle i.fill { display: inline-block; width: 18px; height: 18px; border-radius: 50%}
.score-color .circle.circle-red i.fill { background-color: #f73232;}
.score-color .circle.circle-yellow i.fill { background-color: #ffca35;}
.score-color .circle.circle-blue i.fill { background-color: #398add;}
.score-color .circle.circle-green i.fill { background-color: #4caf50;}
.score-color .circle.circle-purple i.fill { background-color: #7930b3;}


/*모바일 사이드 메뉴-----------------------*/
@media all and (min-width: 320px) and (max-width: 992px) {
    nav {
        font-size: 10px;
    }	
    nav .m_menu_btn {
        display: block;
        width: 50px;
        height: 50px;
        padding: 17px 15px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #2f3b52;
        z-index: 1;
    }
	.nav.dev .m_menu_btn { background-color: #f5c02c;}

    nav .m_menu_btn span {
        display: block;
        text-indent: -9999px;
        width: 20px;
        height: 2px;
        background: #fff;
        margin: 5px 0;
    }

    nav .m_menu_btn:before,
    nav .m_menu_btn:after {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
    }
	
	.nav .m_menu_btn {
        display: block;
        width: 50px;
        height: 50px;
        padding: 17px 15px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #2f3b52;
        z-index: 1;
    }
	.nav.dev .m_menu_btn { background-color: #f5c02c;}

    .nav .m_menu_btn span {
        display: block;
        text-indent: -9999px;
        width: 20px;
        height: 2px;
        background: #fff;
        margin: 5px 0;
    }

    .nav .m_menu_btn:before,
    .nav .m_menu_btn:after {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
    }	

    body.on {
        overflow-y: hidden;
    }

    .navigation_inner {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        z-index: 120;
        width: 90%;
		max-width: 500px;
        background-color: #fff;
        transition: all .2s ease;
		overflow-y: auto
    }

    nav .m_close_btn {
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        top: 12px;
        right: 12px;
        background: url("/assets/img/student/m_menu_close.svg") center no-repeat;
        z-index: 120;
    }
	.nav .m_close_btn {
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        top: 12px;
        right: 12px;
        background: url("/assets/img/student/m_menu_close.svg") center no-repeat;
        z-index: 120;
    }

    /*nav ul.left {
        float: none !important;
        display: block !important;
        border-right: none;
        position: absolute;
        top: 50px;
        left: 0;
		width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }*/

    nav ul.nav-top li {
        width: 100%;
		float: none;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    nav ul.nav-top li:first-child {
        margin-right: 0 !important;
    }

    nav ul.nav-top li a {
        font-size: 1.4em;
        line-height: 1.2em;
        padding: 18px 15px;
    }	

    .navigation_bg.on {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 110;
        background-color: rgba(0, 0, 0, 0.5);
    }

    header.fixed {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 300;
    }

    header nav .logout .point::before {
        width: 10px;
        height: 10px;
    }

}

/*모바일--------------------------------------------------------*/
@media all and (min-width: 320px) and (max-width: 767px) {
/*    nav {
        font-size: 10px;
    }

    nav ul li a {
        font-size: 1.4em;
        line-height: 1.2em;
        padding: 18px 15px;
    }*/

    header nav .logout .point span:after {
        width: 12px;
        height: 12px;
        vertical-align: -2px;
        margin: 0 0 0 5px;
    }

    nav .logout .point {
        font-size: 10px;
    }

    .modal.pointList {
        width: 80%;
    }
}

/*태블릿 930------------------------------------------------------*/
@media all and (min-width: 768px) and (max-width: 1023px) {
    nav .nav-wrapper {
        display: block;
    }
	
    nav ul a {
       font-size: 14px; padding: 0 10px
    }
	
	nav ul.nav-top li.logo-in a { font-size: 14px}
	nav ul.nav-top li.logo-in a { padding: 0 10px}

    .container {
        width: 94%;
    }

    footer {
        display: none;
    }

}

/*@media all and (min-width: 768px) and (max-width: 960px) {
    nav {
        font-size: 10px;
    }

    nav ul li a {
        font-size: 1.4em;
        line-height: 1.2em;
        padding: 18px 15px;
    }
}*/

/* 노트북----------------------------------------------- */
@media all and (min-width: 1024px) and (max-width: 1440px) {
    nav ul a {
        font-size: 14px; padding: 0 12px
    }
	nav ul.nav-top li.logo-in a { font-size: 15px}
	nav ul.nav-top li.logo-in a { padding: 0 15px}

    header .dropdown-content li a {
        font-size: 13px;
    }

    .logout {
        font-size: 13px;
    }

    .container {
        width: 94%;
    }

    h4 {
        font-size: 2.1em;
    }
}



/*@media (min-width: 1101px) and (max-width: 1200px){
	nav ul a { padding: 0 10px}
}
@media (min-width: 993px) and (max-width: 1100px){
	nav ul a { padding: 0 5px}
}*/