@charset "utf-8";
/* layout */
body, table, th, td, button, select, input, textarea {
	font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-4Regular', sans-serif;
	font-size: 16px;
	color: #666;
	-webkit-text-size-adjust: none;
	margin: 0;
	padding: 0;
}
body {
	background-color: #fff;
	height: 100%;
	position:relative;
	min-height:100%;
}
section {
	height: 100%;
}
#wrap {
	width: 100%;
	min-width: 320px;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	height: 100%;
	background: url(../images/bg.png) no-repeat top left;
}
/* ****************** 공통클래스 ********************** */
.area {
	max-width: 1200px;
	margin: 0px auto;
}
.clearfix {
*zoom:1;
}
.clearfix:after {
	clear: both;
	display: block;
	content: "";
}
.table-layout {
	display: table;
	width: 100%;
	height: 100%;
}
.table-cell-layout {
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}
.blind {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0
}
.trans200 {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s
}
.trans300 {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s
}
.trans400 {
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s
}
.trans500 {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s
}
.text-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.over-img {
	overflow: hidden;
}
.over-img img {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s
}
a:hover .over-img img {
	-ms-transform: scale(1.1) rotate(0.002deg);
	-o-transform: scale(1.1) rotate(0.002deg);
	-moz-transform: scale(1.1) rotate(0.002deg);
	-webkit-transform: scale(1.1) rotate(0.002deg);
	transform: scale(1.1) rotate(0.002deg);
}
.checkbox {
	position: relative;
}
.checkbox:after {
	display: block;
	clear: both;
	content: "";
}
.checkbox input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0
}
.checkbox input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	cusor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.checkbox input[type="checkbox"] + label:before {
	content: ' ';
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	margin: -2px 8px 0 0;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	border: 2px solid #000;
}
.checkbox input[type="checkbox"] + label:active:before, .checkbox input[type="checkbox"]:checked + label:active:before {
}
.checkbox input[type="checkbox"]:checked + label:before {
	content: '\e928';
	color: #fff;
	background: #224fe0;
	border-color: #224fe0;
	font-family: xeicon;
	font-size: 16px;
}
/* ****************** HEADER ********************** */
#header {
	position: relative;
	height: 80px;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	border-bottom: 1px solid #eee;
}
#headerInnerWrap {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 99;
}
#headerInner {
	position: relative;
	margin: 0px auto;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: padding 0.3s;
	-moz-transition: padding 0.3s;
	-o-transition: padding 0.3s;
	-ms-transition: padding 0.3s;
	transition: padding 0.3s;
}
#header .logo {
	position: relative;
	z-index: 100;
	float: left;
	padding: 30px 0 30px 0;
	margin: 0;
}
#header .logo a {
	display: block;
}
#header .logo img {
	display: block;
	vertical-align: top;
}
/* -------- Header :: UTIL BOX -------- */
.header-util-box {
	position: absolute;
	top: 50%;
	right: 0;
	margin: -20px 0 0 0;
	z-index: 100;
}
.user-info {
	position: relative;
	float: left;
	z-index: 100;
	margin-right: 50px;
	font-size: 12px;
	border-left: 1px solid #e5e5e5;
	padding-left: 20px;
}
.user-info p.level {
	display: inline-block;
	background: #000;
	color: #fff;
	border-radius: 10px;
	padding: 2px 10px;
	margin-bottom: 5px;
	font-size: 10px;
}
.user-info strong {
	color: #000;
}
.header-util-box .login-btn {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 37px;
	display: inline-block;
	background: #3481fa;
	border-radius: 5px;
	padding: 0 20px;
}
.header-util-box .join-btn {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 37px;
	display: inline-block;
	background: #000;
	border-radius: 5px;
	padding: 0 20px;
}
.header-util-menu-box .login-btn {
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 27px;
	display: inline-block;
	background: #3481fa;
	border-radius: 5px;
	padding: 0 10px;
}
.header-util-menu-box .join-btn {
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 27px;
	display: inline-block;
	background: #000;
	border-radius: 5px;
	padding: 0 10px;
}
.header-util-menu-box .user-info {
	margin-right: 0px;
	border-left: 0px solid #e5e5e5;
	padding-left: 0px;
	float: none;
	margin-bottom: 20px;
}
/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 97;
}	/* gnb overlay BG */
#gnb {
	position: relative;
	float: right;
	z-index: 99;
	margin: 0px 350px 0px 0;
}
#gnb > ul {
	display: inline-block;
*display:inline;
*zoom:1;
}
#gnb > ul > li {
	position: relative;
	float: left;
	padding: 0 25px;
	word-break: keep-all;
}
#gnb > ul > li > a {
	position: relative;
	z-index: 100;
	display: block;
	height: 80px;
	line-height: 80px;
	padding: 0;
	text-align: center;
	color: #333333;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.55px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}
#gnb > ul > li > a:hover, #gnb > ul > li.on > a {
	color: #010101;
	position: relative;
	z-index: 100
}
#gnb > ul > li.on > a span {
	position: relative;
	z-index: 100
}
/* GNB :: 2차 각각메뉴 */
#gnb > ul > li .gnb-2dep {
	position: absolute;
	top: 0;
	left: 25px;
	z-index: 99;
	width: 145px;
	text-align: left;
	visibility: hidden;
	padding-top: 100px;
	opacity: 0;
	filter: Alpha(opacity=0);
}
#gnb > ul > li .gnb-2dep:before {
	content: "";
	position: absolute;
	top: 100px;
	left: 0px;
	right: 0px;
	height: 0;
	opacity: 0;
	filter: Alpha(opacity=0);
	background: #f5f5f5;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
	width: 145px;
}
#gnb > ul > li .gnb-2dep ul {
	padding: 0;
}
#gnb > ul > li .gnb-2dep ul li {
	position: relative;
	padding: 10px 15px;
	opacity: 0;
	filter: Alpha(opacity=0);
	-webkit-transition: all 0s 0s;
	-moz-transition: all 0s 0s;
	-o-transition: all 0s 0s;
	-ms-transition: all 0s 0s;
	transition: all 0s 0s;
}
#gnb > ul > li .gnb-2dep ul li a {
	display: block;
	color: #666666;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	opacity: 0.85;
	filter: Alpha(opacity=85);
	letter-spacing: -1.2px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s
}
#gnb > ul > li .gnb-2dep ul li a:hover {
	opacity: 1.0;
	filter: Alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
	color: #180c5e;
}
/* over했을때 */
#gnb > ul > li:hover .gnb-2dep:before {
	height: calc(100% - 80px);
	opacity: 1.0;
	filter: Alpha(opacity=100);
}
#gnb > ul > li .gnb-2dep.open {
	visibility: visible;
	opacity: 1.0;
	filter: Alpha(opacity=100);
}
#gnb > ul > li .gnb-2dep.open ul li {
	opacity: 1.0;
	filter: Alpha(opacity=100);
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-o-transition: all 0.8s;
	-ms-transition: all 0.8s;
	transition: all 0.8s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(1) {
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	-ms-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(2) {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(3) {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(4) {
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(5) {
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.5s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(6) {
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.6s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(7) {
	-webkit-transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.7s;
}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(8) {
	-webkit-transition-delay: 0.8s;
	-moz-transition-delay: 0.8s;
	-o-transition-delay: 0.8s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.8s;
}
/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn {
	display: none;
}
#gnbM {
	display: none
}
#gnbM .study_btn li {
	background: #777777;
	border-bottom: 1px solid #f9f9f9;
}
#gnbM .study_btn li a {
	color: #fff;
	padding: 15px;
	display: block;
	position: relative;
}
#gnbM .study_btn li a:after {
	display: block;
	content: "\e93f";
	position: absolute;
	right: 15px;
	top: 50%;
	font-family: xeicon!important;
	margin-top: -10px;
}
/* ****************** FOOTER ********************** */
#footer {
	margin: 0 auto;
	padding: 0px 0;
	position: relative;
	z-index: 100;
	border-top: 1px solid #e5e5e5;
	background:#fff;
}
#footer h1 {
	float: right;
}
#footer .footer_menu {
	border-bottom: 1px solid #e5e5e5;
	padding: 15px 0;
}
#footer .footer_menu a {
	color: #000;
	font-size: 14px;
	position: relative;
	padding: 0 20px;
	font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-6Bold', sans-serif;
}
#footer .footer_menu a:after {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 1px;
	background: #ddd;
	display: block;
	content: "";
}
#footer .footer_menu a:last-child:after {
	display: none
}
#footer .footer_menu a:first-child {
	padding-left: 0;
}
#footer .footer_address {
	padding: 40px 0;
}
#footer .address {
	float: left;
	font-size: 14px;
	line-height: 24px;
}
#footer .address h2 {
	font-size: 20px;
	color: #000;
	margin-bottom: 10px;
	font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-6Bold', sans-serif;
}
#footer .address .copyright {
	margin-top: 10px;
	font-size: 12px;
	color: #c3c3c3;
}
/* Footer :: TOP버튼 */
.to-top-btn {
	position: fixed;
	bottom: -100px;
	right: 15px;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #3481fa;
	text-align: center;
	line-height: 60px;
	color: #fff;
	z-index: 99;
	opacity: 0;
	border-radius: 50%;
	filter: Alpha(opacity=0);
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-o-transition: all 0.6s;
	-ms-transition: all 0.6s;
	transition: all 0.6s
}
.to-top-btn i {
	display: inline-block;
}
.to-top-btn.fixed {
	bottom: 55px;
	opacity: 1.0;
	filter: Alpha(opacity=100);
}
#quick {
	position: fixed;
	right: 0;
	top: 30%;
	-webkit-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.25);
	box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.25);
	background: #fff;
	z-index: 100;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 0 15px
}
#quick li {
	padding: 20px 0px;
	text-align: center;
	border-bottom: 1px solid #d8d8d8
}
#quick li a {
	color: #000;
	font-size: 12px;
	display: block;
	font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-6Bold', sans-serif;
}
#quick li a span {
	display: block;
	margin-top: 10px;
}
#quick li a i {
	font-size: 30px;
}
#quick li:last-child {
	border: none;
}
/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual {
	position: relative;
	width: 100%;
	height: 163px;
	background: url(../images/visual_bg.png) center center no-repeat;
	background-size: cover;
	text-align: center;
	padding: 35px 0;
}
#visual h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
#visual h3 {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: #3481fa;
	background: #fff;
	border-radius: 8px;
	padding: 5px 20px;
	display: inline-block;
}
#visual p.info {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
}
#visual .sns_wrap {
	position: absolute;
	top: -20px;
	right: 0px;
	background: rgba(255,255,255,0.2);
	border-radius: 5px;
	padding: 5px 20px 7px 20px;
}
#visual .sns_wrap li {
	display: inline-block;
	font-size: 12px;
}
#visual .sns_wrap li a {
	color: #fff;
	margin: 0 5px;
}
#action {
	text-align: center;
	border-bottom: 1px solid #e7e7e7;
	padding: 8px 0;
}
#action p, #action div {
	display: inline-block;
}
#action p {
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 5px 10px;
	background: #f9f9f9;
	margin: 0 4px;
}
#action div {
	position: relative;
}
#action div p {
	margin: 0;
}
#action p a {
	color: #000;
	font-size: 14px;
}
#action ul {
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
	width: 100px;
	z-index: 10;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 5px 0;
}
#action ul.open {
	display: block;
}
#action ul li {
	padding: 3px 0;
}
#action ul li a {
	color: #8a8a8a;
	font-size: 13px;
}
#content {
	height: 100%;
}
#content > .row {
	height: 100%;
}
#lnb {
	border-left: 1px solid #e7e7e7;
	border-right: 1px solid #e7e7e7;
	float: left;
	width: 240px;
	position: absolute;
	left: 0;
	top: 0;
	margin-top: -45px;
	height: calc(100% + 45px);
	background: #f9f9f9;
	
}
#lnb.study_home {
	margin-top: 0px;
	height: 100%;
}
#lnb h4 {
	background: #000;
	color: #fff;
	font-size: 16px;
	padding: 13px 15px;
	font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-6Bold', sans-serif;
	margin: 0;
	position: relative;
}
#lnb.study_home h4 {
	background: #3481fa;
}
#lnb.study_home h4 a {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	font-size: 20px;
}
#lnb .study_process {
	background: #fff;
}
#lnb .study_pro_box {
	padding: 10px;
	border-bottom: 1px solid #e7e7e7;
}
#lnb .study_pro_box .tit {
	font-size: 14px;
	color: #000;
	margin-bottom: 10px;
	position: relative;
	padding-left: 10px;
}
#lnb .study_pro_box .tit:before {
	display: block;
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #3481fa;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -2px;
}
#lnb .study_pro_box .process_bg {
	background: #e7e7e7;
	border-radius: 5px;
	line-height: 30px;
	font-size: 9px;
	text-align: center;
	overflow: hidden;
}
#lnb .study_pro_box .process_bg .pro_bar {
	background: #3481fa;
	color: #fff;
}
#lnb .study_btn li {
	background: #777777;
	border-bottom: 1px solid #f9f9f9;
}
#lnb .study_btn li a {
	color: #fff;
	padding: 15px;
	display: block;
	position: relative;
}
#lnb .study_btn li a:after {
	display: block;
	content: "\e93f";
	position: absolute;
	right: 15px;
	top: 50%;
	font-family: xeicon!important;
	margin-top: -10px;
}
#lnb .my_class {
	background: #fff;
}
#lnb .my_class li {
	border-bottom: 1px solid #eee;
}
#lnb .my_class li a {
	display: block;
	padding: 10px 10px;
	/*padding:0px;*/
	font-size: 14px;
	color: #000;
}
#lnb .my_class li a:hover {
	color: #3481fa;
}
#lnb .lnb_banner {
	text-align: center;
	margin: 30px 0;
}
#contentWrap {
	float: right;
	width: calc(100% - 270px);
	padding: 30px 0;
	min-height:600px;
}
#contentWrap .search_wrap {
	text-align: right;
}
#contentWrap .search_wrap select {
	margin: 0;
	min-width: 250px;
	padding: 0 30px 0 10px;
	background: #eaf2fe url('../images/select_arrow.png') no-repeat 100% 50%; /* 네이티브 화살표를 커스텀 화살표로 대체 */
	border: 1px solid #eaf2fe;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 36px;
	height: 36px;
	color: #000;
}
#contentWrap .search_wrap select::-ms-expand {
display: none;
}
#contentWrap .study_list {
	margin-top: 30px;
}
#contentWrap .study_list li {
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 30px;
	margin-bottom: 10px;
	background: #fff;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
	position: relative;
}
#contentWrap .study_list li:hover {
	border: 1px solid #3481fa;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
	box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.05);
}
#contentWrap .study_list li p {
	float: left;
	font-size: 14px;
}
#contentWrap .study_list li p.englisth_word {
	width: 30%;
	color: #000000;
	font-weight: 600;
}
#contentWrap .study_list li p.english_interpretation {
	width: 50%;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	overflow: hidden;
}
#contentWrap .study_list li p.action_btn {
	position: absolute;
	right: 30px;
	top: 50%;
	text-align: right;
	margin-top: -14px;
}
#contentWrap .study_list li p.action_btn a {
	background: #777777;
	color: #fff;
	border-radius: 50%;
	padding: 0;
	text-align: center;
	font-size: 14px;
	display: inline-block;
	width: 28px;
	line-height: 28px;
}
#contentWrap .study_list li p.action_btn a.active {
	background: #3481fa;
}

.mobile_study_process {
	display: none;
}
.mobile_study_process .study_pro_box {
	padding: 0px;
	border-left: 1px solid #fff;
	width: 25%;
	float: left;
}
.mobile_study_process .study_pro_box:first-child {
	border-left: none;
}
.mobile_study_process .study_pro_box .tit {
	font-size: 11px;
	color: #fff;
	background: #111;
	position: relative;
	text-align: center;
	padding: 10px;
	line-height: 15px;
}
.mobile_study_process .study_pro_box .process_bg {
	background: #777777;
	height: 3px;
	text-align: center;
	overflow: hidden;
}
.mobile_study_process .study_pro_box .process_bg .pro_bar {
	background: #3481fa;
	color: #fff;
	height: 3px;
}

.my_study_title {background:url(../images/icon_myhome.png) no-repeat left 50%;padding:10px 0 10px 120px;position:relative;}
.my_study_title h3 {font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-6Bold', sans-serif;color:#3481fa;font-size:36px;}
.my_study_title h3 span {color:#ffc71e;}
.my_study_title p {font-family: 'Noto Sans KR', "돋움", Dotum, Arial, sans-serif;color:#888888;font-size:15px;margin-top:10px;}
.my_study_title .sns_link {position:absolute;right:0;top:0px;font-size:0.8em;background:#f6f8f9;padding:7px 15px;border-radius:4px;}

.control_wrap {margin-top:40px;margin-bottom:10px;}
.control_wrap .input_search {float:left;background: #eaf2fe;
	border: 1px solid #eaf2fe;
	border-radius: 5px;
	line-height: 36px;
	height: 36px;
	padding:0 15px;}
.control_wrap .input_search input {background:rgba(255,255,255,0);border:none;color: #000;}
.control_wrap .input_search input:focus {outline:0;}
.control_wrap .input_search button {color:#3481fa;}
.control_wrap .control_btn {float:right;}
.control_wrap .control_btn p {
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 5px 10px;
    background: #f9f9f9;
    margin: 0 4px;
	display:inline-block;
}
.control_wrap .control_btn p a {
    color: #000;
    font-size: 14px;
}


#wrap.loginWrap {background:#f6f8f9 url(../images/login_bg.png) no-repeat center center;}
.login_wrap {background:#fff;max-width:460px;margin:10% auto;padding:30px 20px;-webkit-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);text-align:center;}
.login_wrap h2 {margin:10px auto 20px;font-size:40px;font-weight:300;color:#000;}
.login_wrap h2 strong {font-weight:800;font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;}
.login_wrap p {line-height:1.7em;}
.login_wrap p.end {margin-top:40px;}
.login_wrap p strong {color:#3481fa;}
.login_wrap fieldset {padding:40px;}
.login_wrap .id_input {border:1px solid #3481fa;background:rgba(255,255,255,1) url(../images/login_id.png) no-repeat 0 0;height:35px;padding-left:45px;margin-bottom:4px;}
.login_wrap .pw_input {border:1px solid #3481fa;background:rgba(255,255,255,1) url(../images/login_pw.png) no-repeat 0 0;height:35px;padding-left:45px;margin-bottom:15px;}
.login_wrap input[type=text],
.login_wrap input[type=password] {border:none;line-height:33px;height:33px;width:100%;background:rgba(255,255,255,0)}
.login_wrap input[type=text]:focus,
.login_wrap input[type=password]:focus {outline:0;}

.login_wrap label {color:#808080;vertical-align:top;}
.login_wrap input[type=button] {display:block;width:100%;border-radius:3px;padding:0 10px; text-align:center;color:#fff;font-weight:600;font-size:17px;margin:35px 0 15px 0;background: #3481fa;line-height: 47px;height: 47px;border:none;}

.join_select {margin-top:70px;text-align:center;margin-bottom:30px;}
.join_select p {float:left;margin:0 0px;font-size:25px;font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;width:50%}
.join_select p img {max-width:100%;margin-bottom:10px;}
.join_select p a {color:#3481fa;}
.join_select p:last-child a {color:#52d252;}

.join_wrap {background:#fff;max-width:460px;margin:10% auto;padding:30px 20px;-webkit-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);}
.join_wrap h1 {text-align:center;}
.join_wrap fieldset {padding:40px;}
.join_wrap input[type=text],
.join_wrap input[type=password],
.join_wrap select {border:1px solid #d6d6d6;line-height:33px;height:33px;background:rgba(255,255,255,0);text-indent:10px;width:100%}
.join_wrap input[type=text]:focus,
.join_wrap input[type=password]:focus {outline:0;}
.join_wrap p {margin-bottom:15px;}
.join_wrap .column p {float:left;width:33.3333%;}
.join_wrap .column p:nth-child(3) {padding:0 5px;}
.join_wrap label {display:block;margin-bottom:5px;color:#000;font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;}
.join_wrap input[type=button] {display:block;width:100%;border-radius:3px;padding:0 10px; text-align:center;color:#fff;font-weight:600;font-size:17px;margin:35px 0 15px 0;background: #3481fa;line-height: 47px;height: 47px;border:none;}


.testWrap {background:rgba(0,0,0,0.8);}
.testWrap #wrap {background:none;}

.slide {
  background:#fff;width:100%;max-width:460px;margin:10% auto;padding:0px 0px;-webkit-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);text-align:center;overflow: hidden;border-radius:10px;border:5px solid #3481fa;
}

.panel {
  width: 400%;position:relative; overflow:hidden;
}

.panel:after {
  content: "";
  display: block;
  clear: both;
}

.panel>li {
  width: 25%;
  min-height: 500px;
  float: left;
  position: relative;
 overflow:hidden;
}
.panel>li h1 {color:#3481fa;font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;}
.panel>li h3 {color:#000;}
.panel>li h3 span {display:inline-block;border-radius:5px;background:#000;color:#fff;padding:5px 5px;font-size:0.5em;}

.dot {
  position: absolute;
  left: 50%;
  bottom: -5%;
  transform: translateX(-50%);
}

.dot>li {
  float: left;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  margin-left: 2px;
  margin-right: 2px;
  text-indent: -9999px;
  cursor: pointer;
}

.dot>li.on {
  background-color: #3481fa;
}
.slide_prev {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  cursor: pointer;
  font-size:2em;
  color:#fff;
}

.slide_next {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  right: 10%;
  cursor: pointer;
  font-size:2em;
  color:#fff;
}
.panel .card-top {border-bottom:1px solid #ededed;padding:20px;background:#f6f8f9;}
.panel .card-top .text-left {float:left;}
.panel .card-top .text-right {float:right;}
.panel>li .card-top a{font-size:2em;}
.panel .card-bottom {position:absolute;bottom:20px;left:0;width:100%;text-align:center;margin:0;}
.panel .card-bottom div {float:left;width:50%;padding:0 20px 0 20px}
.panel .card-bottom.microphone {bottom:0px;}
.panel .card-bottom.microphone button {padding:10px;border-radius:0;margin-bottom:5px;}
.slide_top {background:#000;border-bottom:1px solid rgba(255,255,255,0.3);text-align:center;color:#000;position:relative;padding:20px}
.slide_top_study{background-color: #ffd940!important;}
.slide_top_class{background-color: #58eaa1!important;}
.slide_top h2 {margin-bottom:0;}
.slide_top a {/*color:#fff;*/display:block;padding:0 20px;}
.slide_top .fl_l {position:absolute;left:0px;top:0px;border-right:1px solid rgba(255,255,255,0.3);line-height:78px;}
.slide_top .fl_r {position:absolute;right:0px;top:0px;border-left:1px solid rgba(255,255,255,0.3);line-height:78px;}
.panel .select p {border:1px solid #eee;padding:10px 40px 10px 10px;}
.panel .select p.select {border:1px solid #e14343;/*border:1px solid #3481fa;*/}
.panel .select p.result {position:relative;background:#3481fa;color:#fff;}
.panel .select p.result:after {display:block;content:"정답";position:absolute;right:10px;top:12px;color:#fff45c;font-size:13px;}

.slide-box {background:#fff;width:100%;max-width:460px;margin:10% auto;padding:0px 0px;-webkit-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);
	box-shadow: 0px 5px 25px 0px rgba(50, 50, 50, 0.1);text-align:center;overflow: hidden;border-radius:10px;border:5px solid #3481fa;min-height: 450px;position:relative;}
.slide-box.full {max-width:100%;}
.slide-box h1 {color:#000;padding:40px 20px;font-size:25px;}
.slide-box .card-bottom {position:absolute;bottom:20px;left:0;width:100%;text-align:center;margin:0;}
.slide-box .card-bottom.microphone {bottom:0px;}
.slide-box .card-bottom.microphone button {padding:10px;border-radius:0;}
.slide-box.full .card-bottom {position:relative;}
.slide-box .select.offset-1 {min-height:auto;}
.slide-box .select .test-select {padding:10px 10px 10px 35px;}
.slide-box .select .select {border:1px solid #3481fa;}
.slide-box .select .result {position:relative;background:#3481fa;color:#fff;}
.slide-box .select .result:after {display:block;content:"정답";position:absolute;right:10px;top:12px;color:#fff45c;font-size:13px;}
.slide-box .select .custom-control-label::before {
    top: 0rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #3481fa solid 1px;
}
.slide-box .select .custom-control-label::after {
    position: absolute;
    top: .09rem;
    left: -1.49rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
}
.slide-box .card-top {border-bottom:1px solid #ededed;padding:20px;background:#f6f8f9;}
.slide-box .card-top .text-left {float:left;}
.slide-box .card-top .text-right {float:right;} 
.study_list_test {padding:0 20px;}
.study_list_test li {
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 30px;
	margin-bottom: 10px;
	background: #fff;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
	position: relative;
}
.study_list_test li:hover {
	border: 1px solid #3481fa;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
	box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.05);
}
.study_list_test li p {
	float: left;
	font-size: 14px;
}
.study_list_test li p.englisth_word {
	width: 30%;
	color: #000000;
	font-weight: 600;
}
.study_list_test li p.english_interpretation {
	width: 50%;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	overflow: hidden;
}
.study_list_test li p.action_btn {
	position: absolute;
	right: 30px;
	top: 50%;
	text-align: right;
	margin-top: -14px;
}
.study_list_test li p.action_btn a {
	background: #777777;
	color: #fff;
	border-radius: 50%;
	padding: 0;
	text-align: center;
	font-size: 14px;
	display: inline-block;
	width: 28px;
	line-height: 28px;
}
.study_list_test li p.action_btn a.active {
	background: #3481fa;
}
.study_list_test li .input-num {width:3%;text-align:center;line-height:37px;}
.study_list_test li p.input-box {
	width: 46%;
	color: #000000;
	font-weight: 600;
	margin:0 1%;
}
.study_list_test li input {line-height:37px;padding:0 10px;margin:5px 0;}

/*modal*/
.modal.usher .col-form-label {padding-left:0px;}
.modal.usher .col-form-label.title {color:#000;font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;position:relative;padding-left:10px;}
.modal.usher .col-form-label.title:before {width:4px;height:4px;border-radius:50%;display:block;content:"";background:#3481fa;position:absolute;left:0;top:17px;}
.modal.usher .col-2 {padding-right:5px;}
.modal.usher .form-group.head {border-top:2px solid #000;color:#000;padding-bottom:0;font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;background:#f6f8f9;}
.modal.usher .form-group {border-bottom:1px solid #eee;padding-bottom:1rem;}
.modal.usher .modal-body {margin:15px;}

#tabs {clear:both;margin-top:40px;}
#tabs .tab_menu {border-bottom:1px solid #3481fa;}
#tabs .tab_menu li {float:left;border:1px solid #3481fa;border-bottom:none;margin-right:1px;border-top-left-radius:5px;border-top-right-radius:5px;}
#tabs .tab_menu li.active {background:#3481fa;}
#tabs .tab_menu li a {display:block;padding:10px 20px;}
#tabs .tab_menu li.active a {color:#fff;}
#tabs .tab_content {clear:both;}
#tabs .tab_content .control_wrap  {margin-top:10px;}


.cal_date_wrap {text-align:center;padding:30px 0;color:#000;position:relative;}
.cal_date_wrap p {font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;font-size:20px;}
.cal_date_wrap .cal_prev {position:absolute;left:0;top:20px;width:30px;line-height:28px;border:1px solid #eee;text-align:center;border-radius:3px;color:#000;}
.cal_date_wrap .cal_next {position:absolute;right:0;top:20px;width:30px;line-height:28px;border:1px solid #eee;text-align:center;border-radius:3px;color:#000;}
.cal_date_wrap .cal_prev i,
.cal_date_wrap .cal_next i {line-height:30px;}
.cal_date_wrap .cal_prev:hover,
.cal_date_wrap .cal_next:hover {border:1px solid #3481fa;}

.cal_wrap {border-top:2px solid #3481fa;}
.cal_wrap .cal_wrap_row {padding:10px 0;}
.cal_wrap .cal_wrap_row .tit {font-size:18px;color:#000;}
.cal_wrap .cal_wrap_row .tit span.cate {    display: inline-block;
    padding: 3px 10px 3px 10px;
    background-color: #27af98;
    color: #fff;
    font-size: 14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;}
.cal_wrap .cal_wrap_row .tit em {
    display: inline-block;
    font-size: 14px;
    color: #3481fa;}
.cal_wrap .cal_wrap_row .table_wrap {margin-top:10px;}
.cal_wrap .cal_wrap_row .table_wrap table {clear: both;display: table;width:100%;border-collapse: collapse; border-spacing: 0;table-layout:fixed;border:1px solid #dddddd;}
.cal_wrap .cal_wrap_row .table_wrap table thead th {position:relative;padding:10px 5px;border-bottom:1px solid #dddddd;border-right:1px solid #dddddd;background: #474c52;color: #fff;font-weight:400;text-align:center;font-size:13px;}
.cal_wrap .cal_wrap_row .table_wrap table tbody th {font-weight:400;text-align:center;padding:10px 5px;background:#eee;border:1px solid #dddddd;font-size:13px;}
.cal_wrap .cal_wrap_row .table_wrap table tbody th strong {color:#000;font-family: 'Noto Sans KR', "돋움", Dotum, Arial, 'S-CoreDream-7ExtraBold', sans-serif;display:block;margin-bottom:5px;}
.cal_wrap .cal_wrap_row .table_wrap table tbody td {border:1px solid #dddddd;padding:10px 5px;position:relative;vertical-align:middle;font-size:13px;text-align:center;}
.cal_wrap .cal_wrap_row .table_wrap table tbody td .graph_bg {background: #e7e7e7;
    border-radius: 5px;
    line-height: 5px;height: 5px;margin-top:10px;
    overflow: hidden;}
.cal_wrap .cal_wrap_row .table_wrap table tbody td .graph_bg span {background:#3481fa;display:block;height:100%;}